@kayord/ui 0.11.0 → 0.12.0

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
-		"data-state"?: unknown;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
 <tr
+	bind:this={ref}
 	class={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
-	{...$$restProps}
-	on:click
-	on:keydown
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </tr>

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

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

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

@@ -1,15 +1,18 @@
 <script lang="ts">
 	import type { HTMLTableAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLTableAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
 </script>
 
 <div class="relative w-full overflow-auto">
-	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
-		<slot />
+	<table bind:this={ref} class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
 	</table>
 </div>

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

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

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

@@ -2,20 +2,14 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = TabsPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ContentProps = $props();
 </script>
 
 <TabsPrimitive.Content
+	bind:ref
 	class={cn(
 		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 		className
 	)}
-	{value}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.Content>
+	{...restProps}
+/>

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

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

package/dist/components/ui/tabs/tabs-list.svelte

@@ -2,15 +2,11 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = TabsPrimitive.ListProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
+	bind:ref
 	class={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.List>
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

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

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

@@ -2,22 +2,14 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = TabsPrimitive.TriggerProps;
-	type $$Events = TabsPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.TriggerProps = $props();
 </script>
 
 <TabsPrimitive.Trigger
+	bind:ref
 	class={cn(
 		"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
 		className
 	)}
-	{value}
-	{...$$restProps}
-	on:click
->
-	<slot />
-</TabsPrimitive.Trigger>
+	{...restProps}
+/>

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

@@ -1,26 +1,3 @@
 import { Tabs as TabsPrimitive } 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 TabsTrigger: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<TabsPrimitive.TriggerProps, {
-    default: {};
-}>, TabsPrimitive.TriggerEvents, {
-    default: {};
-}, {}, string>;
-type TabsTrigger = InstanceType<typeof TabsTrigger>;
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
 export default TabsTrigger;

package/dist/components/ui/textarea/textarea.svelte

@@ -1,38 +1,22 @@
 <script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import type { TextareaEvents } from "./index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLTextareaAttributes;
-	type $$Events = TextareaEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-
-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
+	bind:this={ref}
 	class={cn(
 		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
+	{...restProps}
 ></textarea>

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

@@ -1,18 +1,4 @@
+import type { WithElementRef } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
-import type { TextareaEvents } 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 Textarea: $$__sveltets_2_IsomorphicComponent<HTMLTextareaAttributes, TextareaEvents, {}, {}, string>;
-type Textarea = InstanceType<typeof Textarea>;
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
 export default Textarea;

package/dist/components/ui/toggle/index.d.ts

@@ -1,76 +1,3 @@
-import { type VariantProps } from "tailwind-variants";
 import Root from "./toggle.svelte";
-export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
-export type Variant = VariantProps<typeof toggleVariants>["variant"];
-export type Size = VariantProps<typeof toggleVariants>["size"];
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants } from "./toggle.svelte";
 export { Root, Root as Toggle, };

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

@@ -1,23 +1,5 @@
-import { tv } from "tailwind-variants";
 import Root from "./toggle.svelte";
-export const toggleVariants = tv({
-    base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-    variants: {
-        variant: {
-            default: "bg-transparent",
-            outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
-        },
-        size: {
-            default: "h-10 px-3",
-            sm: "h-9 px-2.5",
-            lg: "h-11 px-5",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
-});
+export { toggleVariants } from "./toggle.svelte";
 export { Root, 
 //
 Root as Toggle, };

package/dist/components/ui/toggle/toggle.svelte

@@ -1,21 +1,45 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
+			},
+			size: {
+				default: "h-10 px-3",
+				sm: "h-9 px-2.5",
+				lg: "h-11 px-5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
 <script lang="ts">
 	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { type Size, type Variant, toggleVariants } from "./index.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = TogglePrimitive.Props & {
-		variant?: Variant;
-		size?: Size;
-	};
-	type $$Events = TogglePrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let pressed: $$Props["pressed"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
 </script>
 
-<TogglePrimitive.Root bind:pressed class={cn(toggleVariants({ variant, size, className }))} {...$$restProps} on:click>
-	<slot />
-</TogglePrimitive.Root>
+<TogglePrimitive.Root bind:ref bind:pressed class={cn(toggleVariants({ variant, size, className }))} {...restProps} />