@kayord/ui 0.11.1 → 0.12.1

package/dist/components/ui/sidebar/sidebar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import * as Sheet from "../sheet/index.js";
+	import { cn } from "../../../utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn("bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col", className)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root controlledOpen open={sidebar.openMobile} onOpenChange={sidebar.setOpenMobile} {...restProps}>
+		<Sheet.Content
+			data-sidebar="sidebar"
+			data-mobile="true"
+			class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-variant={variant}
+		data-side={side}
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			class={cn(
+				"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+			)}
+		></div>
+		<div
+			class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+				// Adjust the padding for floating and inset variants.
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const Sidebar: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null | undefined;
+} & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, {}, "ref">;
+export default Sidebar;

package/dist/components/ui/skeleton/skeleton.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { WithElementRef, WithoutChildren } 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,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
-<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps}></div>
+<div bind:this={ref} class={cn("animate-pulse rounded-md bg-muted", className)} {...restProps}></div>

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

@@ -1,19 +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;
-}
-declare const Skeleton: $$__sveltets_2_IsomorphicComponent<HTMLAttributes<HTMLDivElement>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Skeleton = InstanceType<typeof Skeleton>;
+declare const Skeleton: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">, {}, "ref">;
 export default Skeleton;

package/dist/components/ui/slider/slider.svelte

@@ -1,27 +1,30 @@
 <script lang="ts">
-	import { Slider as SliderPrimitive } from "bits-ui";
+	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SliderPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = [0];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		value = $bindable([0]),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
 </script>
 
 <SliderPrimitive.Root
+	bind:ref
 	bind:value
 	class={cn("relative flex w-full touch-none select-none items-center", className)}
-	{...$$restProps}
-	let:thumbs
+	{...restProps}
 >
-	<span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-		<SliderPrimitive.Range class="absolute h-full bg-primary" />
-	</span>
-	{#each thumbs as thumb}
-		<SliderPrimitive.Thumb
-			{thumb}
-			class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-		/>
-	{/each}
+	{#snippet children({ thumbs })}
+		<span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range class="absolute h-full bg-primary" />
+		</span>
+		{#each thumbs as thumb}
+			<SliderPrimitive.Thumb
+				index={thumb}
+				class="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
 </SliderPrimitive.Root>

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

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

package/dist/components/ui/sonner/sonner.svelte

@@ -2,7 +2,7 @@
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
 
-	type $$Props = SonnerProps;
+	let restProps: SonnerProps = $props();
 </script>
 
 <Sonner
@@ -17,5 +17,5 @@
 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 		},
 	}}
-	{...$$restProps}
+	{...restProps}
 />

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

@@ -1,19 +1,3 @@
 import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Sonner: $$__sveltets_2_IsomorphicComponent<SonnerProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Sonner = InstanceType<typeof Sonner>;
+declare const Sonner: import("svelte").Component<SonnerProps, {}, "">;
 export default Sonner;

package/dist/components/ui/switch/switch.svelte

@@ -1,28 +1,27 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = SwitchPrimitive.Props;
-	type $$Events = SwitchPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
 </script>
 
 <SwitchPrimitive.Root
+	bind:ref
 	bind:checked
 	class={cn(
 		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
+	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+			"pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
 		)}
 	/>
 </SwitchPrimitive.Root>

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

@@ -1,17 +1,3 @@
 import { Switch as SwitchPrimitive } 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 Switch: $$__sveltets_2_IsomorphicComponent<SwitchPrimitive.Props, SwitchPrimitive.Events, {}, {}, string>;
-type Switch = InstanceType<typeof Switch>;
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
 export default Switch;

package/dist/components/ui/table/table-body.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
-	<slot />
+<tbody bind:this={ref} class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
 </tbody>

package/dist/components/ui/table/table-body.svelte.d.ts

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

package/dist/components/ui/table/table-caption.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<caption class={cn("mt-4 text-sm text-muted-foreground", className)} {...$$restProps}>
-	<slot />
+<caption bind:this={ref} class={cn("mt-4 text-sm text-muted-foreground", className)} {...restProps}>
+	{@render children?.()}
 </caption>

package/dist/components/ui/table/table-caption.svelte.d.ts

@@ -1,28 +1,4 @@
 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 TableCaption: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type TableCaption = InstanceType<typeof TableCaption>;
+import type { WithElementRef } from "bits-ui";
+declare const TableCaption: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
 export default TableCaption;

package/dist/components/ui/table/table-cell.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import type { HTMLTdAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLTdAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLTdAttributes> = $props();
 </script>
 
-<td class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...$$restProps} on:click on:keydown>
-	<slot />
+<td bind:this={ref} class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
 </td>

package/dist/components/ui/table/table-cell.svelte.d.ts

@@ -1,31 +1,4 @@
 import type { HTMLTdAttributes } 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 TableCell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLTdAttributes, {
-    default: {};
-}>, {
-    click: MouseEvent;
-    keydown: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type TableCell = InstanceType<typeof TableCell>;
+import type { WithElementRef } from "bits-ui";
+declare const TableCell: import("svelte").Component<WithElementRef<HTMLTdAttributes>, {}, "ref">;
 export default TableCell;

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

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tfoot class={cn("bg-primary font-medium text-primary-foreground", className)} {...$$restProps}>
-	<slot />
+<tfoot bind:this={ref} class={cn("bg-primary font-medium text-primary-foreground", className)} {...restProps}>
+	{@render children?.()}
 </tfoot>

package/dist/components/ui/table/table-footer.svelte.d.ts

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

package/dist/components/ui/table/table-head.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
 	import type { HTMLThAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLThAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLThAttributes> = $props();
 </script>
 
 <th
+	bind:this={ref}
 	class={cn(
 		"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 		className
 	)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </th>

package/dist/components/ui/table/table-head.svelte.d.ts

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

package/dist/components/ui/table/table-header.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
-	<slot />
+<thead bind:this={ref} class={cn("[&_tr]:border-b", className)} {...restProps}>
+	{@render children?.()}
 </thead>