@kayord/ui 0.18.5 → 0.19.2

package/dist/components/custom/action/Actions.svelte

@@ -33,7 +33,7 @@
 					{@render action.child?.()}
 				{:else}
 					<DropdownMenu.Group>
-						<DropdownMenu.Label>Actions</DropdownMenu.Label>
+						<DropdownMenu.Label>{action.label}</DropdownMenu.Label>
 					</DropdownMenu.Group>
 				{/if}
 			{:else}

package/dist/components/custom/combobox/Combobox.svelte.d.ts

@@ -12,6 +12,6 @@ interface Props {
     shouldFilter?: boolean;
     search?: string;
 }
-declare const Combobox: import("svelte").Component<Props, {}, "search" | "value" | "open">;
+declare const Combobox: import("svelte").Component<Props, {}, "value" | "search" | "open">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/components/custom/copy-button/CopyButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button, type ButtonProps } from "../../ui/button";
+	import { UseClipboard } from "../../../hooks/use-clipboard.svelte";
+	import { cn } from "../../../utils";
+	import { Check, Copy, X } from "@lucide/svelte";
+	import type { Snippet } from "svelte";
+	import { scale } from "svelte/transition";
+
+	// omit href so you can't create a link
+	interface Props extends Omit<ButtonProps, "href"> {
+		text: string;
+		icon?: Snippet<[]>;
+		animationDuration?: number;
+		onCopy?: (status: UseClipboard["status"]) => void;
+	}
+
+	let {
+		text,
+		icon,
+		animationDuration = 500,
+		variant = "ghost",
+		size = "icon",
+		onCopy,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const clipboard = new UseClipboard();
+</script>
+
+<Button
+	{...restProps}
+	{variant}
+	{size}
+	class={cn(className)}
+	type="button"
+	name="copy"
+	tabindex={-1}
+	onclick={async () => {
+		const status = await clipboard.copy(text);
+
+		onCopy?.(status);
+	}}
+>
+	{#if clipboard.status === "success"}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<Check />
+			<span class="sr-only">Copied</span>
+		</div>
+	{:else if clipboard.status === "failure"}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<X />
+			<span class="sr-only">Failed to copy</span>
+		</div>
+	{:else}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<Copy />
+			{/if}
+			<span class="sr-only">Copy</span>
+		</div>
+	{/if}
+</Button>

package/dist/components/custom/copy-button/CopyButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps } from "../../ui/button";
+import { UseClipboard } from "../../../hooks/use-clipboard.svelte";
+import type { Snippet } from "svelte";
+interface Props extends Omit<ButtonProps, "href"> {
+    text: string;
+    icon?: Snippet<[]>;
+    animationDuration?: number;
+    onCopy?: (status: UseClipboard["status"]) => void;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/components/custom/copy-button/index.d.ts

@@ -0,0 +1 @@
+export { default as CopyButton } from "./CopyButton.svelte";

package/dist/components/custom/copy-button/index.js

@@ -0,0 +1 @@
+export { default as CopyButton } from "./CopyButton.svelte";

package/dist/components/custom/index.d.ts

@@ -1,6 +1,9 @@
 export { Loader } from "./loader/index.js";
-export { ThemeSwitch } from "./theme-switch/index.js";
 export * from "./data-table/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";
 export { Combobox } from "./combobox/index.js";
 export * from "./action/index.js";
+export { CopyButton } from "./copy-button/index.js";
+export * as TreeView from "./tree-view/index.js";
+export { ThemeSelector } from "./theme-selector/index.js";
+export { LightSwitch } from "./light-switch.svelte/index.js";

package/dist/components/custom/index.js

@@ -1,6 +1,9 @@
 export { Loader } from "./loader/index.js";
-export { ThemeSwitch } from "./theme-switch/index.js";
 export * from "./data-table/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";
 export { Combobox } from "./combobox/index.js";
 export * from "./action/index.js";
+export { CopyButton } from "./copy-button/index.js";
+export * as TreeView from "./tree-view/index.js";
+export { ThemeSelector } from "./theme-selector/index.js";
+export { LightSwitch } from "./light-switch.svelte/index.js";

package/dist/components/custom/light-switch.svelte/LightSwitch.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Sun, Moon } from "@lucide/svelte";
+	import { toggleMode } from "mode-watcher";
+	import { Button } from "../../ui/button/index.js";
+
+	type Props = {
+		variant?: "outline" | "ghost";
+	};
+
+	let { variant = "outline" }: Props = $props();
+</script>
+
+<Button onclick={toggleMode} {variant} size="icon">
+	<Sun class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+	<Moon class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+	<span class="sr-only">Toggle theme</span>
+</Button>

package/dist/components/custom/light-switch.svelte/LightSwitch.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    variant?: "outline" | "ghost";
+};
+declare const LightSwitch: import("svelte").Component<Props, {}, "">;
+type LightSwitch = ReturnType<typeof LightSwitch>;
+export default LightSwitch;

package/dist/components/custom/light-switch.svelte/index.d.ts

@@ -0,0 +1 @@
+export { default as LightSwitch } from "./LightSwitch.svelte";

package/dist/components/custom/light-switch.svelte/index.js

@@ -0,0 +1 @@
+export { default as LightSwitch } from "./LightSwitch.svelte";

package/dist/components/custom/theme-selector/ThemeSelector.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Sun, Moon } from "@lucide/svelte";
+	import { resetMode, setMode } from "mode-watcher";
+	import * as DropdownMenu from "../../ui/dropdown-menu/index.js";
+	import { buttonVariants } from "../../ui/button/index.js";
+
+	type Props = {
+		variant?: "outline" | "ghost";
+	};
+
+	let { variant = "outline" }: Props = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger class={buttonVariants({ variant, size: "icon" })}>
+		<Sun class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+		<Moon class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+		<span class="sr-only">Toggle theme</span>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Item onclick={() => setMode("light")}>Light</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={() => setMode("dark")}>Dark</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={() => resetMode()}>System</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/custom/theme-selector/ThemeSelector.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    variant?: "outline" | "ghost";
+};
+declare const ThemeSelector: import("svelte").Component<Props, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;

package/dist/components/custom/theme-selector/index.d.ts

@@ -0,0 +1 @@
+export { default as ThemeSelector } from "./ThemeSelector.svelte";

package/dist/components/custom/theme-selector/index.js

@@ -0,0 +1 @@
+export { default as ThemeSelector } from "./ThemeSelector.svelte";

package/dist/components/custom/tree-view/TreeView.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+
+	type Props = {
+		class?: string;
+		children?: Snippet<[]>;
+	};
+
+	let { children, class: className }: Props = $props();
+</script>
+
+<div class={cn("flex flex-col", className)}>
+	{@render children?.()}
+</div>

package/dist/components/custom/tree-view/TreeView.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type Props = {
+    class?: string;
+    children?: Snippet<[]>;
+};
+declare const TreeView: import("svelte").Component<Props, {}, "">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;

package/dist/components/custom/tree-view/TreeViewFile.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { File } from "@lucide/svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn } from "../../../utils";
+
+	interface Props extends HTMLButtonAttributes {
+		name: string;
+		icon?: Snippet<[{ name: string }]>;
+	}
+
+	let { name, icon, type = "button", class: className, ...rest }: Props = $props();
+</script>
+
+<button {type} class={cn("flex place-items-center gap-1 pl-[3px]", className)} {...rest}>
+	{#if icon}
+		{@render icon({ name })}
+	{:else}
+		<File class="size-4" />
+	{/if}
+	<span>{name}</span>
+</button>

package/dist/components/custom/tree-view/TreeViewFile.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+interface Props extends HTMLButtonAttributes {
+    name: string;
+    icon?: Snippet<[{
+        name: string;
+    }]>;
+}
+declare const TreeViewFile: import("svelte").Component<Props, {}, "">;
+type TreeViewFile = ReturnType<typeof TreeViewFile>;
+export default TreeViewFile;

package/dist/components/custom/tree-view/TreeViewFolder.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import * as Collapsible from "../../ui/collapsible/index.js";
+	import { Folder, FolderOpen } from "@lucide/svelte";
+	import { cn } from "../../../utils";
+
+	type Props = {
+		name: string;
+		open?: boolean;
+		class?: string;
+		icon?: Snippet<[{ name: string; open: boolean }]>;
+		children?: Snippet<[]>;
+	};
+
+	let { name, open = $bindable(true), class: className, icon, children }: Props = $props();
+</script>
+
+<Collapsible.Root bind:open>
+	<Collapsible.Trigger class={cn("flex place-items-center gap-1", className)}>
+		{#if icon}
+			{@render icon({ name, open })}
+		{:else if open}
+			<FolderOpen class="size-4" />
+		{:else}
+			<Folder class="size-4" />
+		{/if}
+		<span>{name}</span>
+	</Collapsible.Trigger>
+	<Collapsible.Content class="mx-2 border-l">
+		<div class="relative flex place-items-start">
+			<div class="bg-border mx-2 h-full w-[1px]"></div>
+			<div class="flex flex-col">
+				{@render children?.()}
+			</div>
+		</div>
+	</Collapsible.Content>
+</Collapsible.Root>

package/dist/components/custom/tree-view/TreeViewFolder.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type Props = {
+    name: string;
+    open?: boolean;
+    class?: string;
+    icon?: Snippet<[{
+        name: string;
+        open: boolean;
+    }]>;
+    children?: Snippet<[]>;
+};
+declare const TreeViewFolder: import("svelte").Component<Props, {}, "open">;
+type TreeViewFolder = ReturnType<typeof TreeViewFolder>;
+export default TreeViewFolder;

package/dist/components/custom/tree-view/index.d.ts

@@ -0,0 +1,4 @@
+import TreeView from "./TreeView.svelte";
+import TreeViewFile from "./TreeViewFile.svelte";
+import TreeViewFolder from "./TreeViewFolder.svelte";
+export { TreeView, TreeViewFile, TreeViewFolder, TreeView as Root, TreeViewFile as File, TreeViewFolder as Folder };

package/dist/components/custom/tree-view/index.js

@@ -0,0 +1,4 @@
+import TreeView from "./TreeView.svelte";
+import TreeViewFile from "./TreeViewFile.svelte";
+import TreeViewFolder from "./TreeViewFolder.svelte";
+export { TreeView, TreeViewFile, TreeViewFolder, TreeView as Root, TreeViewFile as File, TreeViewFolder as Folder };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,9 @@
 
 <AccordionPrimitive.Content
 	bind:ref
+	data-slot="accordion-content"
 	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
 		className
 	)}
 	{...restProps}

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("border-b last:border-b-0", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), value = $bindable(), ...restProps }: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root bind:ref bind:value={value as never} data-slot="accordion" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const AccordionRoot: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
+type AccordionRoot = ReturnType<typeof AccordionRoot>;
+export default AccordionRoot;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { cn } from "../../../utils.js";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,14 +16,17 @@
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		data-slot="accordion-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",
+			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+		<ChevronDownIcon
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

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

@@ -1,4 +1,5 @@
-import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
     level?: AccordionPrimitive.HeaderProps["level"];
 };

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

@@ -1,6 +1,5 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion-root.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,8 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion-root.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-const Root = AccordionPrimitive.Root;
 export { Root, Content, Item, Trigger, 
 //
 Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const AlertDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertDescription = ReturnType<typeof AlertDescription>;
 export default AlertDescription;

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

@@ -1,24 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 5,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("mb-1 leading-none font-medium tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,8 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-};
-declare const AlertTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertTitle = ReturnType<typeof AlertTitle>;
 export default AlertTitle;

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

@@ -2,11 +2,12 @@
 	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",
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 		variants: {
 			variant: {
-				default: "bg-background text-foreground",
-				destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -19,8 +20,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -33,6 +33,6 @@
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+<div bind:this={ref} data-slot="alert" class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
 	{@render children?.()}
 </div>

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

@@ -4,7 +4,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", {
+}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variant: {
         default: string;
         destructive: string;
@@ -14,10 +14,10 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", unknown, unknown, undefined>>;
+}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;
 };

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -6,4 +6,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.ActionProps = $props();
 </script>
 
-<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -8,6 +8,7 @@
 
 <AlertDialogPrimitive.Cancel
 	bind:ref
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
 	{...restProps}
 />

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,7 +9,7 @@
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: AlertDialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
 	} = $props();
 </script>
 
@@ -17,8 +17,9 @@
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref
+		data-slot="alert-dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -1,6 +1,7 @@
-import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
-    portalProps?: AlertDialogPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
 };
 declare const AlertDialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AlertDialogContent = ReturnType<typeof AlertDialogContent>;