first commit

2026-10-06 18:53:03 +02:00
commit e687b4437b
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+type SelectProps = Omit<SelectPrimitive.RootProps, 'type' | 'value'> & {
+	type?: 'single';
+	value?: string;
+	onValueChange?: (value: string) => void;
+};
+
+	let {
+		open = $bindable(false),
+		value = $bindable(''),
+		type = 'single',
+		...restProps
+	}: SelectProps = $props();
+</script>
+
+<SelectPrimitive.Root {type} bind:open bind:value={value as never} {...restProps} />
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import SelectPortal from './SelectPortal.svelte';
+	import SelectScrollUpButton from './SelectScrollUpButton.svelte';
+	import SelectScrollDownButton from './SelectScrollDownButton.svelte';
+	import { cn } from '@/lib/utils';
+	import type { ComponentProps } from 'svelte';
+
+	type ContentProps = ComponentProps<typeof SelectPrimitive.Content> & {
+		portalProps?: ComponentProps<typeof SelectPortal>;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		preventScroll = true,
+		...restProps
+	}: ContentProps = $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-32 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>
@@ -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} />
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from '@/lib/utils';
+	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>
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import CheckIcon from 'lucide-svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '@/lib/utils';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.Item> = $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>
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '@/lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		children?: () => unknown;
+	} = $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>
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import ChevronDownIcon from 'lucide-svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '@/lib/utils';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.ScrollDownButton> = $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>
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import ChevronUpIcon from 'lucide-svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '@/lib/utils';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.ScrollUpButton> = $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>
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Separator } from '@/components/ui/separator';
+	import { cn } from '@/lib/utils';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDownIcon from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '@/lib/utils';
+	import type { ComponentProps } from 'svelte';
+
+	type TriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> & {
+		size?: 'sm' | 'default';
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		...restProps
+	}: TriggerProps = $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>
@@ -0,0 +1,37 @@
+import Root from './Select.svelte';
+import Group from './SelectGroup.svelte';
+import Label from './SelectLabel.svelte';
+import Item from './SelectItem.svelte';
+import Content from './SelectContent.svelte';
+import Trigger from './SelectTrigger.svelte';
+import Separator from './SelectSeparator.svelte';
+import ScrollDownButton from './SelectScrollDownButton.svelte';
+import ScrollUpButton from './SelectScrollUpButton.svelte';
+import GroupHeading from './SelectGroupHeading.svelte';
+import Portal from './SelectPortal.svelte';
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	Portal,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
+};