feat(select): add shadcn select component

src/shared/shadcn/ui/select/index.ts

@@ -0,0 +1,37 @@
+import Content from './select-content.svelte';
+import GroupHeading from './select-group-heading.svelte';
+import Group from './select-group.svelte';
+import Item from './select-item.svelte';
+import Label from './select-label.svelte';
+import Portal from './select-portal.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import Separator from './select-separator.svelte';
+import Trigger from './select-trigger.svelte';
+import Root from './select.svelte';
+
+export {
+    Content,
+    Content as SelectContent,
+    Group,
+    Group as SelectGroup,
+    GroupHeading,
+    GroupHeading as SelectGroupHeading,
+    Item,
+    Item as SelectItem,
+    Label,
+    Label as SelectLabel,
+    Portal,
+    Portal as SelectPortal,
+    Root,
+    //
+    Root as Select,
+    ScrollDownButton,
+    ScrollDownButton as SelectScrollDownButton,
+    ScrollUpButton,
+    ScrollUpButton as SelectScrollUpButton,
+    Separator,
+    Separator as SelectSeparator,
+    Trigger,
+    Trigger as SelectTrigger,
+};

src/shared/shadcn/ui/select/select-content.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import SelectPortal from './select-portal.svelte';
+import SelectScrollDownButton from './select-scroll-down-button.svelte';
+import SelectScrollUpButton from './select-scroll-up-button.svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    preventScroll = true,
+    ...restProps
+}: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+    <SelectPrimitive.Content
+        bind:ref
+        {sideOffset}
+        {preventScroll}
+        data-slot="select-content"
+        class={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            className,
+        )}
+        {...restProps}
+    >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+            class={cn(
+                'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1',
+            )}
+        >
+            {@render children?.()}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+</SelectPortal>

src/shared/shadcn/ui/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+    bind:ref
+    data-slot="select-group-heading"
+    class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</SelectPrimitive.GroupHeading>

src/shared/shadcn/ui/select/select-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />

src/shared/shadcn/ui/select/select-item.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import CheckIcon from '@lucide/svelte/icons/check';
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+    bind:ref
+    {value}
+    data-slot="select-item"
+    class={cn(
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+    )}
+    {...restProps}
+>
+    {#snippet children({ selected, highlighted })}
+        <span class="absolute end-2 flex size-3.5 items-center justify-center">
+            {#if selected}
+                <CheckIcon class="size-4" />
+            {/if}
+        </span>
+        {#if childrenProp}
+            {@render childrenProp({ selected, highlighted })}
+        {:else}
+            {label || value}
+        {/if}
+    {/snippet}
+</SelectPrimitive.Item>

src/shared/shadcn/ui/select/select-label.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="select-label"
+    class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

src/shared/shadcn/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithoutChildrenOrChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+    bind:ref
+    data-slot="select-scroll-down-button"
+    class={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...restProps}
+>
+    <ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

src/shared/shadcn/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithoutChildrenOrChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+    bind:ref
+    data-slot="select-scroll-up-button"
+    class={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...restProps}
+>
+    <ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

src/shared/shadcn/ui/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import { Separator } from '$shared/shadcn/ui/separator/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Separator as SeparatorPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="select-separator"
+    class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/select/select-trigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size = 'default',
+    ...restProps
+}: WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'default';
+} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+    bind:ref
+    data-slot="select-trigger"
+    data-size={size}
+    class={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

src/shared/shadcn/ui/select/select.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let {
+    open = $bindable(false),
+    value = $bindable(),
+    ...restProps
+}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />