@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	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 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

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

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

@@ -1,23 +1,22 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	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
 	bind:this={ref}
-	aria-level={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,8 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
 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">;
+declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertTitle = ReturnType<typeof AlertTitle>;
 export default AlertTitle;

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

@@ -2,12 +2,11 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const alertVariants = tv({
-		base: "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
 		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,9 +18,8 @@
 </script>
 
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -34,6 +32,12 @@
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -1,23 +1,23 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", {
+}, undefined, "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full", {
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", unknown, unknown, undefined>>;
+}, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+import { type WithElementRef } from "../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;
 };

package/dist/lib/components/ui/alert/index.d.ts

@@ -1,5 +1,6 @@
-import Root from "./alert.svelte";
+import Action from "./alert-action.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
+import Root from "./alert.svelte";
 export { alertVariants, type AlertVariant } from "./alert.svelte";
-export { Root, Description, Title, Root as Alert, Description as AlertDescription, Title as AlertTitle, };
+export { Root, Description, Title, Action, Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

package/dist/lib/components/ui/alert/index.js

@@ -1,7 +1,8 @@
-import Root from "./alert.svelte";
+import Action from "./alert-action.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
+import Root from "./alert.svelte";
 export { alertVariants } from "./alert.svelte";
-export { Root, Description, Title, 
+export { Root, Description, Title, Action, 
 //
-Root as Alert, Description as AlertDescription, Title as AlertTitle, };
+Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

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

@@ -1,14 +1,27 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	// import { buttonVariants } from '../button/index';
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "../button/index.js";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
 		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
 		...restProps
-	}: AlertDialogPrimitive.ActionProps = $props();
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
 </script>
 
-<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "", className)}
+	{...restProps}
+/>

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

@@ -1,4 +1,9 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-declare const AlertDialogAction: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+import { type ButtonVariant, type ButtonSize } from "../button/index.js";
+type $$ComponentProps = AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
 export default AlertDialogAction;

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

@@ -1,17 +1,27 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "../button/index.js";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
 		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
 		...restProps
-	}: AlertDialogPrimitive.CancelProps = $props();
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
 </script>
 
 <AlertDialogPrimitive.Cancel
 	bind:ref
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "", className)}
 	{...restProps}
 />

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

@@ -1,4 +1,9 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-declare const AlertDialogCancel: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+import { type ButtonVariant, type ButtonSize } from "../button/index.js";
+type $$ComponentProps = AlertDialogPrimitive.CancelProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogCancel: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
 export default AlertDialogCancel;

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

@@ -1,26 +1,32 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "../../utils.js";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn } from "../../../utils";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		size = "default",
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: AlertDialogPrimitive.PortalProps;
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
 	} = $props();
 </script>
 
-<AlertDialogPrimitive.Portal {...portalProps}>
+<AlertDialogPortal {...portalProps}>
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
 		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 left-[50%] top-[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",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
 	/>
-</AlertDialogPrimitive.Portal>
+</AlertDialogPortal>

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

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

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

@@ -1,16 +1,17 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
 		ref = $bindable(null),
+		class: className,
 		...restProps
 	}: AlertDialogPrimitive.DescriptionProps = $props();
 </script>
 
 <AlertDialogPrimitive.Description
 	bind:ref
-	class={cn("text-muted-foreground text-sm", className)}
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,11 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

package/dist/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	data-slot="alert-dialog-header"
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

package/dist/lib/components/ui/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
 		ref = $bindable(null),
+		class: className,
 		...restProps
 	}: AlertDialogPrimitive.OverlayProps = $props();
 </script>
 
 <AlertDialogPrimitive.Overlay
 	bind:ref
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
-		className
-	)}
+	data-slot="alert-dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const AlertDialogPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type AlertDialogPortal = ReturnType<typeof AlertDialogPortal>;
+export default AlertDialogPortal;

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

@@ -1,18 +1,17 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
-		class: className,
-		level = 3,
 		ref = $bindable(null),
+		class: className,
 		...restProps
 	}: AlertDialogPrimitive.TitleProps = $props();
 </script>
 
 <AlertDialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold", className)}
-	{level}
+	data-slot="alert-dialog-title"
+	class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogTrigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+type AlertDialogTrigger = ReturnType<typeof AlertDialogTrigger>;
+export default AlertDialogTrigger;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const AlertDialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/lib/components/ui/alert-dialog/index.d.ts

@@ -1,13 +1,13 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
 import Footer from "./alert-dialog-footer.svelte";
 import Header from "./alert-dialog-header.svelte";
+import Media from "./alert-dialog-media.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
-import Content from "./alert-dialog-content.svelte";
-import Description from "./alert-dialog-description.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
-declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
-export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, };
+import Portal from "./alert-dialog-portal.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Root from "./alert-dialog.svelte";
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia, };

package/dist/lib/components/ui/alert-dialog/index.js

@@ -1,15 +1,15 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
 import Footer from "./alert-dialog-footer.svelte";
 import Header from "./alert-dialog-header.svelte";
+import Media from "./alert-dialog-media.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
-import Content from "./alert-dialog-content.svelte";
-import Description from "./alert-dialog-description.svelte";
-const Root = AlertDialogPrimitive.Root;
-const Trigger = AlertDialogPrimitive.Trigger;
-const Portal = AlertDialogPrimitive.Portal;
-export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, 
+import Portal from "./alert-dialog-portal.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Root from "./alert-dialog.svelte";
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, 
 //
-Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, };
+Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia, };

package/dist/lib/components/ui/aspect-ratio/aspect-ratio.svelte

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

package/dist/lib/components/ui/aspect-ratio/aspect-ratio.svelte.d.ts

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

package/dist/lib/components/ui/aspect-ratio/index.d.ts

@@ -1,3 +1,2 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-declare const Root: import("svelte").Component<AspectRatioPrimitive.RootProps, {}, "ref">;
+import Root from "./aspect-ratio.svelte";
 export { Root, Root as AspectRatio };

package/dist/lib/components/ui/aspect-ratio/index.js

@@ -1,3 +1,2 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-const Root = AspectRatioPrimitive.Root;
+import Root from "./aspect-ratio.svelte";
 export { Root, Root as AspectRatio };

package/dist/lib/components/ui/attachment/attachment-action.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Button, type ButtonProps } from "../button/index.js";
+	import { cn } from "../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "ghost",
+		size = "icon-xs",
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+<Button
+	bind:ref
+	data-slot="attachment-action"
+	{variant}
+	{size}
+	class={cn("cn-attachment-action", className)}
+	{...restProps}
+/>