From 192ce2d34a4cf2e975bda2e5fd07447428b16a86 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 26 Jan 2026 12:43:25 +0300
Subject: [PATCH] feat(select): add shadcn select component

---
 src/shared/shadcn/ui/select/index.ts          | 37 ++++++++++++++
 .../shadcn/ui/select/select-content.svelte    | 48 +++++++++++++++++++
 .../ui/select/select-group-heading.svelte     | 21 ++++++++
 .../shadcn/ui/select/select-group.svelte      |  7 +++
 .../shadcn/ui/select/select-item.svelte       | 41 ++++++++++++++++
 .../shadcn/ui/select/select-label.svelte      | 23 +++++++++
 .../shadcn/ui/select/select-portal.svelte     |  7 +++
 .../select/select-scroll-down-button.svelte   | 23 +++++++++
 .../ui/select/select-scroll-up-button.svelte  | 23 +++++++++
 .../shadcn/ui/select/select-separator.svelte  | 18 +++++++
 .../shadcn/ui/select/select-trigger.svelte    | 32 +++++++++++++
 src/shared/shadcn/ui/select/select.svelte     | 11 +++++
 12 files changed, 291 insertions(+)
 create mode 100644 src/shared/shadcn/ui/select/index.ts
 create mode 100644 src/shared/shadcn/ui/select/select-content.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-group-heading.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-group.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-item.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-label.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-portal.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-scroll-down-button.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-scroll-up-button.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-separator.svelte
 create mode 100644 src/shared/shadcn/ui/select/select-trigger.svelte
 create mode 100644 src/shared/shadcn/ui/select/select.svelte

diff --git a/src/shared/shadcn/ui/select/index.ts b/src/shared/shadcn/ui/select/index.ts
new file mode 100644
index 0000000..8c303c3
--- /dev/null
+++ b/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,
+};
diff --git a/src/shared/shadcn/ui/select/select-content.svelte b/src/shared/shadcn/ui/select/select-content.svelte
new file mode 100644
index 0000000..572f197
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select-group-heading.svelte b/src/shared/shadcn/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..4e8f720
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select-group.svelte b/src/shared/shadcn/ui/select/select-group.svelte
new file mode 100644
index 0000000..8e0e694
--- /dev/null
+++ b/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} />
diff --git a/src/shared/shadcn/ui/select/select-item.svelte b/src/shared/shadcn/ui/select/select-item.svelte
new file mode 100644
index 0000000..e375e45
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select-label.svelte b/src/shared/shadcn/ui/select/select-label.svelte
new file mode 100644
index 0000000..301930d
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select-portal.svelte b/src/shared/shadcn/ui/select/select-portal.svelte
new file mode 100644
index 0000000..c4fc326
--- /dev/null
+++ b/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} />
diff --git a/src/shared/shadcn/ui/select/select-scroll-down-button.svelte b/src/shared/shadcn/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..bdb96f5
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select-scroll-up-button.svelte b/src/shared/shadcn/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..b28fbc9
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select-separator.svelte b/src/shared/shadcn/ui/select/select-separator.svelte
new file mode 100644
index 0000000..a570547
--- /dev/null
+++ b/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}
+/>
diff --git a/src/shared/shadcn/ui/select/select-trigger.svelte b/src/shared/shadcn/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..b9b280f
--- /dev/null
+++ b/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>
diff --git a/src/shared/shadcn/ui/select/select.svelte b/src/shared/shadcn/ui/select/select.svelte
new file mode 100644
index 0000000..8eca78b
--- /dev/null
+++ b/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} />