@kayord/ui 0.11.1 → 0.12.0

package/dist/components/ui/range-calendar/range-calendar-months.svelte.d.ts

@@ -1,28 +1,4 @@
+import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const RangeCalendarMonths: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLDivElement>, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type RangeCalendarMonths = InstanceType<typeof RangeCalendarMonths>;
+declare const RangeCalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 export default RangeCalendarMonths;

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -4,24 +4,25 @@
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = RangeCalendarPrimitive.NextButtonProps;
-	type $$Events = RangeCalendarPrimitive.NextButtonEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: RangeCalendarPrimitive.NextButtonProps = $props();
 </script>
 
+{#snippet Fallback()}
+	<ChevronRight class="size-4" />
+{/snippet}
+
 <RangeCalendarPrimitive.NextButton
-	on:click
+	bind:ref
 	class={cn(
 		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
 		className
 	)}
-	{...$$restProps}
-	let:builder
->
-	<slot {builder}>
-		<ChevronRight class="h-4 w-4" />
-	</slot>
-</RangeCalendarPrimitive.NextButton>
+	children={children || Fallback}
+	{...restProps}
+/>

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte.d.ts

@@ -0,0 +1,3 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarNextButton: import("svelte").Component<RangeCalendarPrimitive.NextButtonProps, {}, "ref">;
+export default RangeCalendarNextButton;

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -4,24 +4,25 @@
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = RangeCalendarPrimitive.PrevButtonProps;
-	type $$Events = RangeCalendarPrimitive.PrevButtonEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: RangeCalendarPrimitive.PrevButtonProps = $props();
 </script>
 
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+{/snippet}
+
 <RangeCalendarPrimitive.PrevButton
-	on:click
+	bind:ref
 	class={cn(
 		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
 		className
 	)}
-	{...$$restProps}
-	let:builder
->
-	<slot {builder}>
-		<ChevronLeft class="h-4 w-4" />
-	</slot>
-</RangeCalendarPrimitive.PrevButton>
+	children={children || Fallback}
+	{...restProps}
+/>

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte.d.ts

@@ -0,0 +1,3 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarPrevButton: import("svelte").Component<RangeCalendarPrimitive.PrevButtonProps, {}, "ref">;
+export default RangeCalendarPrevButton;

package/dist/components/ui/range-calendar/range-calendar.svelte

@@ -1,60 +1,57 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import * as RangeCalendar from "./index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = RangeCalendarPrimitive.Props;
-	type $$Events = RangeCalendarPrimitive.Events;
-
-	export let value: $$Props["value"] = undefined;
-	export let placeholder: $$Props["placeholder"] = undefined;
-	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
-	export let startValue: $$Props["startValue"] = undefined;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		weekdayFormat = "short",
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
 </script>
 
 <RangeCalendarPrimitive.Root
-	on:keydown
+	bind:ref
 	bind:value
 	bind:placeholder
-	bind:startValue
 	{weekdayFormat}
 	class={cn("p-3", className)}
-	{...$$restProps}
-	let:months
-	let:weekdays
+	{...restProps}
 >
-	<RangeCalendar.Header>
-		<RangeCalendar.PrevButton />
-		<RangeCalendar.Heading />
-		<RangeCalendar.NextButton />
-	</RangeCalendar.Header>
-	<RangeCalendar.Months>
-		{#each months as month}
-			<RangeCalendar.Grid>
-				<RangeCalendar.GridHead>
-					<RangeCalendar.GridRow class="flex">
-						{#each weekdays as weekday}
-							<RangeCalendar.HeadCell>
-								{weekday.slice(0, 2)}
-							</RangeCalendar.HeadCell>
-						{/each}
-					</RangeCalendar.GridRow>
-				</RangeCalendar.GridHead>
-				<RangeCalendar.GridBody>
-					{#each month.weeks as weekDates}
-						<RangeCalendar.GridRow class="mt-2 w-full">
-							{#each weekDates as date}
-								<RangeCalendar.Cell {date}>
-									<RangeCalendar.Day {date} month={month.value} />
-								</RangeCalendar.Cell>
+	{#snippet children({ months, weekdays })}
+		<RangeCalendar.Header>
+			<RangeCalendar.PrevButton />
+			<RangeCalendar.Heading />
+			<RangeCalendar.NextButton />
+		</RangeCalendar.Header>
+		<RangeCalendar.Months>
+			{#each months as month}
+				<RangeCalendar.Grid>
+					<RangeCalendar.GridHead>
+						<RangeCalendar.GridRow class="flex">
+							{#each weekdays as weekday}
+								<RangeCalendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</RangeCalendar.HeadCell>
 							{/each}
 						</RangeCalendar.GridRow>
-					{/each}
-				</RangeCalendar.GridBody>
-			</RangeCalendar.Grid>
-		{/each}
-	</RangeCalendar.Months>
+					</RangeCalendar.GridHead>
+					<RangeCalendar.GridBody>
+						{#each month.weeks as weekDates}
+							<RangeCalendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date}
+									<RangeCalendar.Cell {date} month={month.value}>
+										<RangeCalendar.Day />
+									</RangeCalendar.Cell>
+								{/each}
+							</RangeCalendar.GridRow>
+						{/each}
+					</RangeCalendar.GridBody>
+				</RangeCalendar.Grid>
+			{/each}
+		</RangeCalendar.Months>
+	{/snippet}
 </RangeCalendarPrimitive.Root>

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,18 +1,4 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 import * as RangeCalendar from "./index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RangeCalendar: $$__sveltets_2_IsomorphicComponent<RangeCalendarPrimitive.Props, RangeCalendarPrimitive.Events, {}, {}, string>;
-type RangeCalendar = InstanceType<typeof RangeCalendar>;
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "placeholder" | "ref" | "value">;
 export default RangeCalendar;

package/dist/components/ui/resizable/resizable-handle.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
 	import GripVertical from "lucide-svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
+	import type { WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = ResizablePrimitive.PaneResizerProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		withHandle = false,
+		...restProps
+	}: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
 		withHandle?: boolean;
-	};
-
-	export let withHandle: $$Props["withHandle"] = false;
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	} = $props();
 </script>
 
 <ResizablePrimitive.PaneResizer
-	bind:el
+	bind:ref
 	class={cn(
 		"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
+	{...restProps}
 >
 	{#if withHandle}
 		<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-			<GripVertical class="h-2.5 w-2.5" />
+			<GripVertical class="size-2.5" />
 		</div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/dist/components/ui/resizable/resizable-handle.svelte.d.ts

@@ -1,25 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ResizableHandle: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean | undefined;
-    onDraggingChange?: import("paneforge/dist/internal/types").PaneResizeHandleOnDragging | undefined;
-    tabIndex?: number | undefined;
-    el?: HTMLElement | null | undefined;
-} & import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+import * as ResizablePrimitive from "paneforge";
+declare const ResizableHandle: import("svelte").Component<Omit<Omit<ResizablePrimitive.PaneResizerProps, "child">, "children"> & {
     withHandle?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ResizableHandle = InstanceType<typeof ResizableHandle>;
+}, {}, "ref">;
 export default ResizableHandle;

package/dist/components/ui/resizable/resizable-pane-group.svelte

@@ -2,21 +2,18 @@
 	import * as ResizablePrimitive from "paneforge";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = ResizablePrimitive.PaneGroupProps;
-
-	let className: $$Props["class"] = undefined;
-	export let direction: $$Props["direction"];
-	export let paneGroup: $$Props["paneGroup"] = undefined;
-	export let el: $$Props["el"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		this: paneGroup = $bindable(),
+		class: className,
+		...restProps
+	}: ResizablePrimitive.PaneGroupProps & {
+		this?: ResizablePrimitive.PaneGroup;
+	} = $props();
 </script>
 
 <ResizablePrimitive.PaneGroup
-	bind:el
-	bind:paneGroup
-	{direction}
+	bind:this={paneGroup}
 	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
-	{...$$restProps}
->
-	<slot />
-</ResizablePrimitive.PaneGroup>
+	{...restProps}
+/>

package/dist/components/ui/resizable/resizable-pane-group.svelte.d.ts

@@ -1,28 +1,18 @@
 import * as ResizablePrimitive from "paneforge";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ResizablePaneGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ResizablePrimitive.PaneGroupProps, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ResizablePaneGroup = InstanceType<typeof ResizablePaneGroup>;
+declare const ResizablePaneGroup: import("svelte").Component<Omit<{
+    autoSaveId?: string | null;
+    direction: import("paneforge/dist/internal/types").Direction;
+    keyboardResizeBy?: number | null;
+    onLayoutChange?: (layout: number[]) => void | null;
+    storage?: ResizablePrimitive.PaneGroupStorage;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & ResizablePrimitive.Without<ResizablePrimitive.PaneForgePrimitiveDivAttributes, ResizablePrimitive.PaneGroupPropsWithoutHTML> & {
+    this?: ResizablePrimitive.PaneGroup;
+}, {}, "ref" | "this">;
 export default ResizablePaneGroup;

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-		orientation?: "vertical" | "horizontal";
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "vertical";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
 </script>
 
 <ScrollAreaPrimitive.Scrollbar
+	bind:ref
 	{orientation}
 	class={cn(
 		"flex touch-none select-none transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
 		className
 	)}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")} />
 </ScrollAreaPrimitive.Scrollbar>

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte.d.ts

@@ -1,34 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ScrollAreaScrollbar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    asChild?: boolean | undefined;
-    el?: HTMLDivElement | undefined;
-} & {
-    orientation: "horizontal" | "vertical";
-} & import("bits-ui/dist/internal").HTMLDivAttributes & {
-    orientation?: "vertical" | "horizontal";
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ScrollAreaScrollbar = InstanceType<typeof ScrollAreaScrollbar>;
+import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+declare const ScrollAreaScrollbar: import("svelte").Component<Omit<ScrollAreaPrimitive.ScrollbarProps, "child">, {}, "ref">;
 export default ScrollAreaScrollbar;

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
 	import { Scrollbar } from "./index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = ScrollAreaPrimitive.Props & {
-		orientation?: "vertical" | "horizontal" | "both";
-		scrollbarXClasses?: string;
-		scrollbarYClasses?: string;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let orientation = "vertical";
-	export let scrollbarXClasses: string = "";
-	export let scrollbarYClasses: string = "";
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
 </script>
 
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
-		<ScrollAreaPrimitive.Content>
-			<slot />
-		</ScrollAreaPrimitive.Content>
+		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}
 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />

package/dist/components/ui/scroll-area/scroll-area.svelte.d.ts

@@ -0,0 +1,7 @@
+import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+declare const ScrollArea: import("svelte").Component<Omit<ScrollAreaPrimitive.RootProps, "child"> & {
+    orientation?: "vertical" | "horizontal" | "both" | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+}, {}, "ref">;
+export default ScrollArea;

package/dist/components/ui/select/index.js

@@ -1,13 +1,13 @@
 import { Select as SelectPrimitive } from "bits-ui";
-import Label from "./select-label.svelte";
+import GroupHeading from "./select-group-heading.svelte";
 import Item from "./select-item.svelte";
 import Content from "./select-content.svelte";
 import Trigger from "./select-trigger.svelte";
 import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
 const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;
-const Input = SelectPrimitive.Input;
-const Value = SelectPrimitive.Value;
-export { Root, Group, Input, Label, Item, Value, Content, Trigger, Separator, 
+export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, 
 //
-Root as Select, Group as SelectGroup, Input as SelectInput, Label as SelectLabel, Item as SelectItem, Value as SelectValue, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, };
+Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };

package/dist/components/ui/select/select-content.svelte

@@ -1,39 +1,34 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { scale } from "svelte/transition";
-	import { cn, flyAndScale } from "../../../utils.js";
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn } from "../../../utils.js";
 
-	type $$Props = SelectPrimitive.ContentProps;
-	type $$Events = SelectPrimitive.ContentEvents;
-
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let inTransition: $$Props["inTransition"] = flyAndScale;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = scale;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
-		start: 0.95,
-		opacity: 0,
-		duration: 50,
-	};
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> = $props();
 </script>
 
-<SelectPrimitive.Content
-	{inTransition}
-	{inTransitionConfig}
-	{outTransition}
-	{outTransitionConfig}
-	{sideOffset}
-	class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
->
-	<div class="w-full p-1">
-		<slot />
-	</div>
-</SelectPrimitive.Content>
+<SelectPrimitive.Portal>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground 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-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1")}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>