Add select component and fix typings for some components

.changeset/sweet-colts-dance.md

@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': minor
+---
+
+Added select component

package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.2",
-    "bits-ui": "^0.21.2",
+    "bits-ui": "^0.21.3",
     "clsx": "^2.1.0",
     "lucide-svelte": "^0.368.0",
     "tailwind-merge": "^2.2.2",
@@ -71,6 +71,10 @@
       "types": "./dist/components/popover/index.d.ts",
       "svelte": "./dist/components/popover/index.js"
     },
+    "./components/select": {
+      "types": "./dist/components/select/index.d.ts",
+      "svelte": "./dist/components/select/index.js"
+    },
     "./package.json": "./package.json",
     "./transition/flyAndScale": {
       "types": "./dist/transition/flyAndScale.d.ts",

src/lib/components/calendar/NextButton.svelte

@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
-  import { ChevronRightIcon } from 'lucide-svelte';
+  import ChevronRightIcon from 'lucide-svelte/icons/chevron-right';
   import type { SvelteHTMLElements } from 'svelte/elements';
 
   import { variants } from '$lib/components/button/index.js';

src/lib/components/calendar/PreviousButton.svelte

@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
-  import { ChevronLeftIcon } from 'lucide-svelte';
+  import ChevronLeftIcon from 'lucide-svelte/icons/chevron-left';
   import type { SvelteHTMLElements } from 'svelte/elements';
 
   import { variants } from '$lib/components/button/index.js';

src/lib/components/calendar/Root.svelte

@@ -14,7 +14,7 @@
   } & Pick<CalendarPrimitive.Props<TMultiple>, 'onPlaceholderChange' | 'onValueChange'>;
   export type Props<TMultiple extends boolean = false> = Omit<
     CalendarPrimitive.Props<TMultiple>,
-    keyof Attributes | 'onPlaceholderChange' | 'onValueChange'
+    keyof Attributes | keyof Events<TMultiple>
   >;
   export type Slots<TMultiple extends boolean = false> = ComponentSlots<
     CalendarPrimitive.Root<TMultiple>
@@ -24,9 +24,10 @@
 <script generics="TMultiple extends boolean = false" lang="ts">
   type $$Events = CalendarPrimitive.Events;
   type $$Props = Attributes & TypedEvents & TypedProps;
-  type $$Slots = Slots<TMultiple>;
+  type $$Slots = TypedSlots;
   type TypedEvents = Events<TMultiple>;
   type TypedProps = Props<TMultiple>;
+  type TypedSlots = Slots<TMultiple>;
 
   export let asChild: TypedProps['asChild'] = undefined;
   export let calendarLabel: TypedProps['calendarLabel'] = undefined;

src/lib/components/collapsible/Content.svelte

@@ -32,8 +32,9 @@
 >
   type $$Events = Record<never, never>;
   type $$Props = Attributes & Events & TypedProps;
-  type $$Slots = Slots<TTransition, TTransitionIn, TTransitionOut>;
+  type $$Slots = TypedSlots;
   type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
 
   export let asChild: TypedProps['asChild'] = undefined;
   export let el: TypedProps['el'] = undefined;

src/lib/components/collapsible/Root.svelte

@@ -6,7 +6,7 @@
 
   export type Attributes = SvelteHTMLElements['div'];
   export type Events = Pick<CollapsiblePrimitive.Props, 'onOpenChange'>;
-  export type Props = Omit<CollapsiblePrimitive.Props, keyof Attributes | 'onOpenChange'>;
+  export type Props = Omit<CollapsiblePrimitive.Props, keyof Attributes | keyof Events>;
   export type Slots = ComponentSlots<CollapsiblePrimitive.Root>;
 </script>
 

src/lib/components/popover/Content.svelte

@@ -33,8 +33,9 @@
 >
   type $$Events = Record<never, never>;
   type $$Props = Attributes & Events & TypedProps;
-  type $$Slots = Slots<TTransition, TTransitionIn, TTransitionOut>;
+  type $$Slots = TypedSlots;
   type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
 
   export let align: TypedProps['align'] = undefined;
   export let asChild: TypedProps['asChild'] = undefined;

src/lib/components/popover/Root.svelte

@@ -5,7 +5,7 @@
 
   export type Attributes = Record<never, never>;
   export type Events = Pick<PopoverPrimitive.Props, 'onOpenChange' | 'onOutsideClick'>;
-  export type Props = Omit<PopoverPrimitive.Props, 'onOpenChange' | 'onOutsideClick'>;
+  export type Props = Omit<PopoverPrimitive.Props, keyof Events>;
   export type Slots = ComponentSlots<PopoverPrimitive.Root>;
 </script>
 

src/lib/components/select/Content.svelte

@@ -0,0 +1,103 @@
+<script context="module" lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { scale } from 'svelte/transition';
+
+  import { flyAndScale } from '$lib/transition/flyAndScale.js';
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots, Transition } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = Omit<
+    SelectPrimitive.ContentProps<TTransition, TTransitionIn, TTransitionOut>,
+    keyof Attributes
+  >;
+  export type Slots<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = ComponentSlots<SelectPrimitive.Content<TTransition, TTransitionIn, TTransitionOut>>;
+</script>
+
+<script
+  generics="
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  "
+  lang="ts"
+>
+  type $$Events = SelectPrimitive.ContentEvents;
+  type $$Props = Attributes & Events & TypedProps;
+  type $$Slots = TypedSlots;
+  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
+
+  export let align: TypedProps['align'] = undefined;
+  export let alignOffset: TypedProps['alignOffset'] = undefined;
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let avoidCollisions: TypedProps['avoidCollisions'] = undefined;
+  export let collisionBoundary: TypedProps['collisionBoundary'] = undefined;
+  export let collisionPadding: TypedProps['collisionPadding'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let fitViewport: TypedProps['fitViewport'] = undefined;
+  export let inTransition: TypedProps['inTransition'] = flyAndScale as TypedProps['inTransition'];
+  export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
+  export let outTransition: TypedProps['outTransition'] = scale as TypedProps['outTransition'];
+  export let outTransitionConfig: TypedProps['outTransitionConfig'] = {
+    start: 0.95,
+    opacity: 0,
+    duration: 50,
+  };
+  export let overlap: TypedProps['overlap'] = undefined;
+  export let sameWidth: TypedProps['sameWidth'] = undefined;
+  export let side: TypedProps['side'] = undefined;
+  export let sideOffset: TypedProps['sideOffset'] = 4;
+  export let strategy: TypedProps['strategy'] = undefined;
+  export let transition: TypedProps['transition'] = undefined;
+  export let transitionConfig: TypedProps['transitionConfig'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<SelectPrimitive.Content
+  {...attributes}
+  align="{align}"
+  alignOffset="{alignOffset}"
+  asChild="{asChild}"
+  avoidCollisions="{avoidCollisions}"
+  class="{cn(
+    'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
+    attributes.class,
+  )}"
+  collisionBoundary="{collisionBoundary}"
+  collisionPadding="{collisionPadding}"
+  el="{el}"
+  fitViewport="{fitViewport}"
+  inTransition="{inTransition}"
+  inTransitionConfig="{inTransitionConfig}"
+  outTransition="{outTransition}"
+  outTransitionConfig="{outTransitionConfig}"
+  overlap="{overlap}"
+  sameWidth="{sameWidth}"
+  side="{side}"
+  sideOffset="{sideOffset}"
+  strategy="{strategy}"
+  transition="{transition}"
+  transitionConfig="{transitionConfig}"
+  let:builder
+  on:keydown
+  on:pointerleave
+>
+  <div class="w-full p-1">
+    <slot builder="{builder}" />
+  </div>
+</SelectPrimitive.Content>

src/lib/components/select/Group.svelte

@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<SelectPrimitive.GroupProps, keyof Attributes>;
+  export type Slots = ComponentSlots<SelectPrimitive.Group>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<SelectPrimitive.Group {...attributes} asChild="{asChild}" el="{el}" let:builder>
+  <slot builder="{builder}" />
+</SelectPrimitive.Group>

src/lib/components/select/Input.svelte

@@ -0,0 +1,30 @@
+<script context="module" lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { castAsAny } from '$lib/utils/internal.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['input'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<SelectPrimitive.InputProps, keyof Attributes>;
+  export type Slots = ComponentSlots<SelectPrimitive.Input>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<SelectPrimitive.Input {...attributes} asChild="{asChild}" el="{el}" let:builder>
+  <slot builder="{castAsAny(builder)}" />
+</SelectPrimitive.Input>

src/lib/components/select/Item.svelte

@@ -0,0 +1,63 @@
+<script context="module" lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import CheckIcon from 'lucide-svelte/icons/check';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<SelectPrimitive.ItemProps, keyof Attributes>;
+  export type Slots = ComponentSlots<SelectPrimitive.Item>;
+</script>
+
+<script lang="ts">
+  type $$Events = SelectPrimitive.ItemEvents;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let disabled: Props['disabled'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let label: Props['label'] = undefined;
+  export let value: Props['value'];
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<SelectPrimitive.Item
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(
+    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
+    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+    attributes.class,
+  )}"
+  disabled="{disabled}"
+  el="{el}"
+  label="{label}"
+  value="{value}"
+  let:builder
+  let:isSelected
+  on:click
+  on:focusin
+  on:focusout
+  on:keydown
+  on:pointerleave
+  on:pointermove
+>
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <SelectPrimitive.ItemIndicator>
+      <CheckIcon class="h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+
+  <slot builder="{builder}" isSelected="{isSelected}">
+    {label || value}
+  </slot>
+</SelectPrimitive.Item>