@kayord/ui 0.11.0 → 0.12.0

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

@@ -1,26 +1,3 @@
 import { Select as SelectPrimitive } from "bits-ui";
-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 SelectContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<SelectPrimitive.ContentProps, {
-    default: {};
-}>, SelectPrimitive.ContentEvents, {
-    default: {};
-}, {}, string>;
-type SelectContent = InstanceType<typeof SelectContent>;
+declare const SelectContent: import("svelte").Component<Omit<SelectPrimitive.ContentProps, "child">, {}, "ref">;
 export default SelectContent;

package/dist/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let { ref = $bindable(null), class: className, ...restProps }: SelectPrimitive.GroupHeadingProps = $props();
+</script>
+
+<SelectPrimitive.GroupHeading bind:ref class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...restProps} />

package/dist/components/ui/select/select-group-heading.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectGroupHeading: import("svelte").Component<SelectPrimitive.GroupHeadingProps, {}, "ref">;
+export default SelectGroupHeading;

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

@@ -1,40 +1,37 @@
 <script lang="ts">
 	import Check from "lucide-svelte/icons/check";
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SelectPrimitive.ItemProps;
-	type $$Events = SelectPrimitive.ItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
 </script>
 
 <SelectPrimitive.Item
+	bind:ref
 	{value}
-	{disabled}
-	{label}
 	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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<SelectPrimitive.ItemIndicator>
-			<Check class="h-4 w-4" />
-		</SelectPrimitive.ItemIndicator>
-	</span>
-	<slot>
-		{label || value}
-	</slot>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<Check class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
 </SelectPrimitive.Item>

package/dist/components/ui/select/select-item.svelte.d.ts

@@ -1,26 +1,3 @@
 import { Select as SelectPrimitive } from "bits-ui";
-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 SelectItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<SelectPrimitive.ItemProps, {
-    default: {};
-}>, SelectPrimitive.ItemEvents, {
-    default: {};
-}, {}, string>;
-type SelectItem = InstanceType<typeof SelectItem>;
+declare const SelectItem: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
 export default SelectItem;

package/dist/components/ui/select/select-scroll-down-button.svelte

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

package/dist/components/ui/select/select-scroll-down-button.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+export default SelectScrollDownButton;

package/dist/components/ui/select/select-scroll-up-button.svelte

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

package/dist/components/ui/select/select-scroll-up-button.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+export default SelectScrollUpButton;

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

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "../separator/index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SelectPrimitive.SeparatorProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: SeparatorPrimitive.RootProps = $props();
 </script>
 
-<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<Separator bind:ref class={cn("-mx-1 my-1 h-px bg-muted", className)} {...restProps} />

package/dist/components/ui/select/select-separator.svelte.d.ts

@@ -1,19 +1,3 @@
-import { Select as SelectPrimitive } from "bits-ui";
-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 SelectSeparator: $$__sveltets_2_IsomorphicComponent<SelectPrimitive.SeparatorProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SelectSeparator = InstanceType<typeof SelectSeparator>;
+import type { Separator as SeparatorPrimitive } from "bits-ui";
+declare const SelectSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
 export default SelectSeparator;

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

@@ -1,27 +1,24 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SelectPrimitive.TriggerProps;
-	type $$Events = SelectPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
 </script>
 
 <SelectPrimitive.Trigger
+	bind:ref
 	class={cn(
-		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground",
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
 		className
 	)}
-	{...$$restProps}
-	let:builder
-	on:click
-	on:keydown
+	{...restProps}
 >
-	<slot {builder} />
-	<div>
-		<ChevronDown class="h-4 w-4 opacity-50" />
-	</div>
+	{@render children?.()}
+	<ChevronDown class="size-4 opacity-50" />
 </SelectPrimitive.Trigger>

package/dist/components/ui/select/select-trigger.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectTrigger: import("svelte").Component<Omit<SelectPrimitive.TriggerProps, "child">, {}, "ref">;
+export default SelectTrigger;

package/dist/components/ui/separator/separator.svelte

@@ -2,17 +2,17 @@
 	import { Separator as SeparatorPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SeparatorPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative: $$Props["decorative"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
+	bind:ref
 	class={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]", className)}
 	{orientation}
-	{decorative}
-	{...$$restProps}
+	{...restProps}
 />

package/dist/components/ui/separator/separator.svelte.d.ts

@@ -1,19 +1,3 @@
 import { Separator as SeparatorPrimitive } from "bits-ui";
-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 Separator: $$__sveltets_2_IsomorphicComponent<SeparatorPrimitive.Props, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Separator = InstanceType<typeof Separator>;
+declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
 export default Separator;

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

@@ -1,6 +1,4 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
-import { tv } from "tailwind-variants";
-import Portal from "./sheet-portal.svelte";
 import Overlay from "./sheet-overlay.svelte";
 import Content from "./sheet-content.svelte";
 import Header from "./sheet-header.svelte";
@@ -10,70 +8,7 @@ import Description from "./sheet-description.svelte";
 const Root = SheetPrimitive.Root;
 const Close = SheetPrimitive.Close;
 const Trigger = SheetPrimitive.Trigger;
+const Portal = SheetPrimitive.Portal;
 export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
 //
 Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };
-export const sheetVariants = tv({
-    base: "bg-background fixed z-50 gap-4 p-6 shadow-lg",
-    variants: {
-        side: {
-            top: "inset-x-0 top-0 border-b",
-            bottom: "inset-x-0 bottom-0 border-t",
-            left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-            right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
-        },
-    },
-    defaultVariants: {
-        side: "right",
-    },
-});
-export const sheetTransitions = {
-    top: {
-        in: {
-            y: "-100%",
-            duration: 500,
-            opacity: 1,
-        },
-        out: {
-            y: "-100%",
-            duration: 300,
-            opacity: 1,
-        },
-    },
-    bottom: {
-        in: {
-            y: "100%",
-            duration: 500,
-            opacity: 1,
-        },
-        out: {
-            y: "100%",
-            duration: 300,
-            opacity: 1,
-        },
-    },
-    left: {
-        in: {
-            x: "-100%",
-            duration: 500,
-            opacity: 1,
-        },
-        out: {
-            x: "-100%",
-            duration: 300,
-            opacity: 1,
-        },
-    },
-    right: {
-        in: {
-            x: "100%",
-            duration: 500,
-            opacity: 1,
-        },
-        out: {
-            x: "100%",
-            duration: 300,
-            opacity: 1,
-        },
-    },
-};

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

@@ -1,39 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const sheetVariants = tv({
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		variants: {
+			side: {
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+				bottom:
+					"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+				right:
+					"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import X from "lucide-svelte/icons/x";
-	import { fly } from "svelte/transition";
-	import { SheetOverlay, SheetPortal, type Side, sheetTransitions, sheetVariants } from "./index.js";
+	import type { Snippet } from "svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SheetPrimitive.ContentProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
 		side?: Side;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let side: $$Props["side"] = "right";
-	export { className as class };
-	export let inTransition: $$Props["inTransition"] = fly;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = sheetTransitions[side ?? "right"].in;
-	export let outTransition: $$Props["outTransition"] = fly;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = sheetTransitions[side ?? "right"].out;
+		children: Snippet;
+	} = $props();
 </script>
 
-<SheetPortal>
+<SheetPrimitive.Portal>
 	<SheetOverlay />
-	<SheetPrimitive.Content
-		{inTransition}
-		{inTransitionConfig}
-		{outTransition}
-		{outTransitionConfig}
-		class={cn(sheetVariants({ side }), className)}
-		{...$$restProps}
-	>
-		<slot />
+	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
+		{@render children?.()}
 		<SheetPrimitive.Close
 			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
 		>
-			<X class="h-4 w-4" />
+			<X class="size-4" />
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>
-</SheetPortal>
+</SheetPrimitive.Portal>

package/dist/components/ui/sheet/sheet-content.svelte.d.ts

@@ -1,39 +1,59 @@
-import { type Side } 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;
+import { type VariantProps } from "tailwind-variants";
+export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", import("tailwind-variants/dist/config").TVConfig<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
     };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SheetContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    transition?: import("bits-ui/dist/internal/types.js").Transition | undefined;
-    transitionConfig?: any;
-    inTransition?: import("bits-ui/dist/internal/types.js").Transition | undefined;
-    inTransitionConfig?: any;
-    outTransition?: import("bits-ui/dist/internal/types.js").Transition | undefined;
-    outTransitionConfig?: any;
-    asChild?: boolean | undefined;
-    el?: HTMLDivElement | undefined;
-} & import("bits-ui/dist/internal/types.js").HTMLDivAttributes & {
-    side?: Side;
 }, {
-    default: {};
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
 }>, {
-    [evt: string]: CustomEvent<any>;
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", import("tailwind-variants/dist/config").TVConfig<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
 }, {
-    default: {};
-}, {}, string>;
-type SheetContent = InstanceType<typeof SheetContent>;
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type Side = VariantProps<typeof sheetVariants>["side"];
+import { Dialog as SheetPrimitive } from "bits-ui";
+import type { Snippet } from "svelte";
+declare const SheetContent: import("svelte").Component<Omit<Omit<SheetPrimitive.ContentProps, "child">, "children"> & {
+    side?: Side;
+    children: Snippet;
+}, {}, "ref">;
 export default SheetContent;

package/dist/components/ui/sheet/sheet-description.svelte

@@ -2,12 +2,7 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SheetPrimitive.DescriptionProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.DescriptionProps = $props();
 </script>
 
-<SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
-	<slot />
-</SheetPrimitive.Description>
+<SheetPrimitive.Description bind:ref class={cn("text-sm text-muted-foreground", className)} {...restProps} />

package/dist/components/ui/sheet/sheet-description.svelte.d.ts

@@ -1,28 +1,3 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
-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 SheetDescription: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<SheetPrimitive.DescriptionProps, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type SheetDescription = InstanceType<typeof SheetDescription>;
+declare const SheetDescription: import("svelte").Component<SheetPrimitive.DescriptionProps, {}, "ref">;
 export default SheetDescription;

package/dist/components/ui/sheet/sheet-footer.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...$$restProps}>
-	<slot />
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>