@kayord/ui 0.11.0 → 0.12.0

package/dist/components/custom/data-table/DataTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-	import { FlexRender, type ColumnDef, type Table as TypeType, renderComponent } from "@tanstack/svelte-table";
+	import { type ColumnDef, type Table as TypeType } from "@tanstack/table-core";
+	import { FlexRender, renderComponent } from "../../ui/data-table";
 	import { Skeleton, Table } from "../../ui";
 	import Pagination from "./Pagination.svelte";
 	import type { Snippet } from "svelte";

package/dist/components/custom/data-table/DataTable.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ColumnDef, type Table as TypeType } from "@tanstack/svelte-table";
+import { type ColumnDef, type Table as TypeType } from "@tanstack/table-core";
 import type { Snippet } from "svelte";
 declare class __sveltets_Render<T> {
     props(): {

package/dist/components/custom/data-table/DataTableActions.svelte

@@ -2,12 +2,16 @@
 	import * as DropdownMenu from "../../ui/dropdown-menu";
 	import { Button } from "../../ui/button";
 	import MoreHorizontalIcon from "lucide-svelte/icons/ellipsis";
-	export let id: string;
+	interface Props {
+		id: string;
+	}
+
+	let { id }: Props = $props();
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger asChild let:builder>
-		<Button variant="ghost" builders={[builder]} size="icon" class="relative h-8 w-8 p-0">
+	<DropdownMenu.Trigger>
+		<Button variant="ghost" size="icon" class="relative h-8 w-8 p-0">
 			<span class="sr-only">Open menu</span>
 			<MoreHorizontalIcon class="h-4 w-4" />
 		</Button>
@@ -15,7 +19,7 @@
 	<DropdownMenu.Content>
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
-			<DropdownMenu.Item on:click={() => navigator.clipboard.writeText(id)}>Copy payment ID</DropdownMenu.Item>
+			<DropdownMenu.Item onclick={() => navigator.clipboard.writeText(id)}>Copy payment ID</DropdownMenu.Item>
 		</DropdownMenu.Group>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Item>View customer</DropdownMenu.Item>

package/dist/components/custom/data-table/DataTableActions.svelte.d.ts

@@ -1,20 +1,4 @@
-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 DataTableActions: $$__sveltets_2_IsomorphicComponent<{
+declare const DataTableActions: import("svelte").Component<{
     id: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DataTableActions = InstanceType<typeof DataTableActions>;
+}, {}, "">;
 export default DataTableActions;

package/dist/components/custom/data-table/DataTableCheckbox.svelte

@@ -3,7 +3,7 @@
 	import { cn } from "../../../utils";
 	import type { ComponentProps } from "svelte";
 
-	interface Props extends Omit<ComponentProps<Checkbox>, "checked"> {
+	interface Props extends ComponentProps<typeof Checkbox> {
 		checked?: boolean | "indeterminate";
 		class?: string;
 	}

package/dist/components/custom/data-table/DataTableCheckbox.svelte.d.ts

@@ -1,4 +1,4 @@
-declare const DataTableCheckbox: import("svelte").Component<Omit<import("bits-ui").CheckboxProps, "checked"> & {
+declare const DataTableCheckbox: import("svelte").Component<Omit<Omit<import("bits-ui").CheckboxRootProps, "child">, "children"> & {
     checked?: boolean | "indeterminate";
     class?: string;
 }, {}, "">;

package/dist/components/custom/data-table/FullscreenModeToggle.svelte

@@ -8,7 +8,7 @@
 	class="grow"
 	variant="outline"
 	size="sm"
-	on:click={() => {
+	onclick={() => {
 		tableStore.isFullscreen = !tableStore.isFullscreen;
 		// if ($target == "body") {
 		// 	$target = "#tableContent";

package/dist/components/custom/data-table/Pagination.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" generics="T">
-	import type { Table } from "@tanstack/svelte-table";
+	import type { Table } from "@tanstack/table-core";
 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 	import DoubleArrowLeft from "lucide-svelte/icons/arrow-left";
 	import DoubleArrowRight from "lucide-svelte/icons/arrow-right";
-	import * as Select from "../../ui/select/index.js";
-	import { Button } from "../../ui/button/index.js";
+	import { Select, Button } from "../../..";
 
 	interface Props<T> {
 		table: Table<T>;
@@ -13,6 +12,8 @@
 	}
 
 	let { table, canChangePageSize = false }: Props<T> = $props();
+
+	let value = $state(table.getState().pagination.pageSize.toString());
 </script>
 
 <div class="flex items-center justify-between p-2">
@@ -27,20 +28,16 @@
 			{#if canChangePageSize}
 				<p class="text-sm font-medium">Rows per page</p>
 				<Select.Root
-					selected={{
-						value: table.getState().pagination.pageSize,
-						label: `${table.getState().pagination.pageSize}`,
-					}}
-					onSelectedChange={(selected) => {
-						table.setPageSize(Number(selected?.value));
+					type="single"
+					bind:value
+					onValueChange={(value) => {
+						table.setPageSize(Number(value));
 					}}
 				>
-					<Select.Trigger class="h-8 w-[70px]">
-						<Select.Value placeholder="Select page size" />
-					</Select.Trigger>
+					<Select.Trigger class="h-8 w-[70px]">Select page size</Select.Trigger>
 					<Select.Content side="top">
 						{#each [10, 20, 30, 40, 50] as pageSize}
-							<Select.Item value={pageSize}>
+							<Select.Item value={pageSize.toString()}>
 								{pageSize}
 							</Select.Item>
 						{/each}
@@ -56,7 +53,7 @@
 			<Button
 				variant="outline"
 				class="hidden size-8 p-0 lg:flex"
-				on:click={() => table.setPageIndex(0)}
+				onclick={() => table.setPageIndex(0)}
 				disabled={!table.getCanPreviousPage()}
 			>
 				<span class="sr-only">Go to first page</span>
@@ -65,20 +62,20 @@
 			<Button
 				variant="outline"
 				class="size-8 p-0"
-				on:click={() => table.previousPage()}
+				onclick={() => table.previousPage()}
 				disabled={!table.getCanPreviousPage()}
 			>
 				<span class="sr-only">Go to previous page</span>
 				<ChevronLeft class="size-4" />
 			</Button>
-			<Button variant="outline" class="size-8 p-0" on:click={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+			<Button variant="outline" class="size-8 p-0" onclick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
 				<span class="sr-only">Go to next page</span>
 				<ChevronRight class="size-4" />
 			</Button>
 			<Button
 				variant="outline"
 				class="hidden size-8 p-0 lg:flex"
-				on:click={() => table.setPageIndex(table.getPageCount() - 1)}
+				onclick={() => table.setPageIndex(table.getPageCount() - 1)}
 				disabled={!table.getCanNextPage()}
 			>
 				<span class="sr-only">Go to last page</span>

package/dist/components/custom/data-table/Pagination.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Table } from "@tanstack/svelte-table";
+import type { Table } from "@tanstack/table-core";
 declare class __sveltets_Render<T> {
     props(): {
         table: Table<T>;

package/dist/components/custom/data-table/VisibilitySelect.svelte

@@ -2,7 +2,7 @@
 	import * as DropdownMenu from "../../ui/dropdown-menu";
 	import { Button } from "../../ui/button";
 	import { Settings2Icon } from "lucide-svelte";
-	import type { Table } from "@tanstack/svelte-table";
+	import type { Table } from "@tanstack/table-core";
 
 	interface Props<T> {
 		table: Table<T>;
@@ -11,9 +11,9 @@
 	let { table }: Props<T> = $props();
 </script>
 
-<DropdownMenu.Root closeOnItemClick={false}>
-	<DropdownMenu.Trigger asChild let:builder>
-		<Button variant="outline" builders={[builder]} size="sm">
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		<Button variant="outline" size="sm">
 			<Settings2Icon class="mr-2 h-4 w-4" /> View
 		</Button>
 	</DropdownMenu.Trigger>

package/dist/components/custom/data-table/VisibilitySelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Table } from "@tanstack/svelte-table";
+import type { Table } from "@tanstack/table-core";
 declare class __sveltets_Render<T> {
     props(): {
         table: Table<T>;

package/dist/components/custom/progress-loading/ProgressLoading.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import { Progress as ProgressPrimitive } from "bits-ui";
+	import { type ProgressRootProps, Progress } from "bits-ui";
 	import { cn } from "../../../utils";
 
-	type $$Props = ProgressPrimitive.Props;
+	interface Props {
+		class?: ProgressRootProps["class"];
+		[key: string]: any;
+	}
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { class: className = undefined, ...rest }: Props = $props();
 </script>
 
-<ProgressPrimitive.Root
-	class={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
-	{...$$restProps}
->
+<Progress.Root class={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...rest}>
 	<div class="progressbar-infinite h-full w-full flex-1 bg-primary transition-all"></div>
-</ProgressPrimitive.Root>
+</Progress.Root>
 
 <style>
 	.progressbar-infinite {

package/dist/components/custom/progress-loading/ProgressLoading.svelte.d.ts

@@ -1,19 +1,6 @@
-import { Progress as ProgressPrimitive } 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 ProgressLoading: $$__sveltets_2_IsomorphicComponent<ProgressPrimitive.Props, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ProgressLoading = InstanceType<typeof ProgressLoading>;
+import { type ProgressRootProps } from "bits-ui";
+declare const ProgressLoading: import("svelte").Component<{
+    [key: string]: any;
+    class?: ProgressRootProps["class"];
+}, {}, "">;
 export default ProgressLoading;

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

@@ -1,25 +1,24 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { slide } from "svelte/transition";
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = AccordionPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
 </script>
 
 <AccordionPrimitive.Content
-	class={cn("overflow-hidden text-sm transition-all", className)}
-	{transition}
-	{transitionConfig}
-	{...$$restProps}
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		className
+	)}
+	{...restProps}
 >
 	<div class="pb-4 pt-0">
-		<slot />
+		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

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

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

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

@@ -2,13 +2,7 @@
 	import { Accordion as AccordionPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = AccordionPrimitive.ItemProps;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
-	<slot />
-</AccordionPrimitive.Item>
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

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

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

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

@@ -1,26 +1,29 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = AccordionPrimitive.TriggerProps;
-	type $$Events = AccordionPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
 </script>
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		bind:ref
 		class={cn(
 			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
-		{...$$restProps}
-		on:click
+		{...restProps}
 	>
-		<slot />
-		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

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

@@ -1,26 +1,5 @@
 import { Accordion as AccordionPrimitive } 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 AccordionTrigger: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<AccordionPrimitive.TriggerProps, {
-    default: {};
-}>, AccordionPrimitive.TriggerEvents, {
-    default: {};
-}, {}, string>;
-type AccordionTrigger = InstanceType<typeof AccordionTrigger>;
+declare const AccordionTrigger: import("svelte").Component<Omit<AccordionPrimitive.TriggerProps, "child"> & {
+    level?: AccordionPrimitive.HeaderProps["level"];
+}, {}, "ref">;
 export default AccordionTrigger;

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

@@ -1,13 +1,16 @@
 <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("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+	{@render children?.()}
 </div>

package/dist/components/ui/alert/alert-description.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 AlertDescription: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLDivElement>, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type AlertDescription = InstanceType<typeof AlertDescription>;
+declare const AlertDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 export default AlertDescription;

package/dist/components/ui/alert/alert-title.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		level?: HeadingLevel;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h5";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
 </script>
 
-<svelte:element this={level} class={cn("mb-1 font-medium leading-none tracking-tight", className)} {...$$restProps}>
-	<slot />
-</svelte:element>
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert/alert-title.svelte.d.ts

@@ -1,31 +1,7 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { HeadingLevel } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const AlertTitle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLHeadingElement> & {
-    level?: HeadingLevel;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type AlertTitle = InstanceType<typeof AlertTitle>;
+declare const AlertTitle: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null | undefined;
+} & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, "ref">;
 export default AlertTitle;

package/dist/components/ui/alert/alert.svelte

@@ -1,17 +1,38 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { type Variant, alertVariants } from "./index.js";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement> & {
-		variant?: Variant;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
 </script>
 
-<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
-	<slot />
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+	{@render children?.()}
 </div>