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

package/dist/lib/components/extended/loaders/loader-message.svelte.test.js

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import LoaderMessage from './loader-message.svelte';
+describe('LoaderMessage', () => {
+    it('renders a container with the loader-message data-slot', () => {
+        const { container } = render(LoaderMessage);
+        expect(container.querySelector('[data-slot="loader-message"]')).toBeTruthy();
+    });
+    it('shows the default title and description', () => {
+        const { getByText } = render(LoaderMessage);
+        expect(getByText('Loading')).toBeTruthy();
+        expect(getByText('Come back in a few minutes')).toBeTruthy();
+    });
+    it('shows a custom title when provided as a string', () => {
+        const { getByText } = render(LoaderMessage, { props: { title: 'Please wait' } });
+        expect(getByText('Please wait')).toBeTruthy();
+    });
+    it('shows a custom description when provided as a string', () => {
+        const { getByText } = render(LoaderMessage, {
+            props: { description: 'Processing your request' },
+        });
+        expect(getByText('Processing your request')).toBeTruthy();
+    });
+    it('passes extra HTML attributes to the root element', () => {
+        const { container } = render(LoaderMessage, { props: { id: 'my-loader' } });
+        expect(container.querySelector('#my-loader')).toBeTruthy();
+    });
+});

package/dist/lib/components/extended/skeletons/index.d.ts

@@ -1,7 +1,8 @@
-import Grid from './skeleton-grid.svelte';
-import List from './skeleton-list.svelte';
-import Article from './skeleton-article.svelte';
-import Feed from './skeleton-feed.svelte';
-import Profile from './skeleton-profile.svelte';
-import Square from './skeleton-square.svelte';
-export { Grid, Article, Feed, Profile, Square, List };
+import Grid from "./skeleton-grid.svelte";
+import List from "./skeleton-list.svelte";
+import Article from "./skeleton-article.svelte";
+import Feed from "./skeleton-feed.svelte";
+import Profile from "./skeleton-profile.svelte";
+import Square from "./skeleton-square.svelte";
+import Message from "./skeleton-message.svelte";
+export { Grid, Article, Feed, Profile, Square, List, Message };

package/dist/lib/components/extended/skeletons/index.js

@@ -1,7 +1,8 @@
-import Grid from './skeleton-grid.svelte';
-import List from './skeleton-list.svelte';
-import Article from './skeleton-article.svelte';
-import Feed from './skeleton-feed.svelte';
-import Profile from './skeleton-profile.svelte';
-import Square from './skeleton-square.svelte';
-export { Grid, Article, Feed, Profile, Square, List };
+import Grid from "./skeleton-grid.svelte";
+import List from "./skeleton-list.svelte";
+import Article from "./skeleton-article.svelte";
+import Feed from "./skeleton-feed.svelte";
+import Profile from "./skeleton-profile.svelte";
+import Square from "./skeleton-square.svelte";
+import Message from "./skeleton-message.svelte";
+export { Grid, Article, Feed, Profile, Square, List, Message };

package/dist/lib/components/extended/skeletons/skeleton-message.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+  import { cn } from '../../utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    message?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { message = 'Loading...', class: cls, ...rest }: Props = $props();
+</script>
+
+<div
+  class={cn('flex flex-col items-center justify-center space-y-3 p-6', cls)}
+  {...rest}
+>
+  <div class="flex items-center space-x-2">
+    <Skeleton class="h-4 w-4 rounded-full" />
+    <p class="text-sm text-muted-foreground animate-pulse">{message}</p>
+  </div>
+  <Skeleton class="h-3 w-32" />
+</div>

package/dist/lib/components/extended/skeletons/skeleton-message.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    message?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const SkeletonMessage: import("svelte").Component<Props, {}, "">;
+type SkeletonMessage = ReturnType<typeof SkeletonMessage>;
+export default SkeletonMessage;

package/dist/lib/components/extended/skeletons/skeletons.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/extended/skeletons/skeletons.svelte.test.js

@@ -0,0 +1,82 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import SkeletonArticle from './skeleton-article.svelte';
+import SkeletonFeed from './skeleton-feed.svelte';
+import SkeletonGrid from './skeleton-grid.svelte';
+import SkeletonList from './skeleton-list.svelte';
+import SkeletonMessage from './skeleton-message.svelte';
+import SkeletonProfile from './skeleton-profile.svelte';
+import SkeletonSquare from './skeleton-square.svelte';
+describe('SkeletonArticle', () => {
+    it('renders without errors', () => {
+        const { container } = render(SkeletonArticle);
+        expect(container.firstChild).toBeTruthy();
+    });
+    it('renders the simple variant', () => {
+        const { container } = render(SkeletonArticle, { props: { variant: 'simple' } });
+        expect(container.firstChild).toBeTruthy();
+    });
+    it('accepts extra HTML attributes', () => {
+        const { container } = render(SkeletonArticle, { props: { 'data-testid': 'article' } });
+        expect(container.querySelector('[data-testid="article"]')).toBeTruthy();
+    });
+});
+describe('SkeletonFeed', () => {
+    it('renders without errors', () => {
+        const { container } = render(SkeletonFeed);
+        expect(container.firstChild).toBeTruthy();
+    });
+    it('accepts extra HTML attributes', () => {
+        const { container } = render(SkeletonFeed, { props: { 'data-testid': 'feed' } });
+        expect(container.querySelector('[data-testid="feed"]')).toBeTruthy();
+    });
+});
+describe('SkeletonGrid', () => {
+    it('renders without errors', () => {
+        const { container } = render(SkeletonGrid);
+        expect(container.firstChild).toBeTruthy();
+    });
+    it('applies a numeric cols value', () => {
+        const { container } = render(SkeletonGrid, { props: { cols: 3 } });
+        const el = container.firstElementChild;
+        expect(el?.className).toContain('grid-cols-3');
+    });
+    it('applies breakpoint-specific cols object', () => {
+        const { container } = render(SkeletonGrid, { props: { cols: { base: 1, md: 2 } } });
+        const el = container.firstElementChild;
+        expect(el?.className).toContain('grid-cols-1');
+        expect(el?.className).toContain('md:grid-cols-2');
+    });
+});
+describe('SkeletonList', () => {
+    it('renders without errors', () => {
+        const { container } = render(SkeletonList);
+        expect(container.firstChild).toBeTruthy();
+    });
+});
+describe('SkeletonMessage', () => {
+    it('renders the default loading message', () => {
+        const { getByText } = render(SkeletonMessage);
+        expect(getByText('Loading...')).toBeTruthy();
+    });
+    it('renders a custom message', () => {
+        const { getByText } = render(SkeletonMessage, { props: { message: 'Fetching data' } });
+        expect(getByText('Fetching data')).toBeTruthy();
+    });
+});
+describe('SkeletonProfile', () => {
+    it('renders without errors', () => {
+        const { container } = render(SkeletonProfile);
+        expect(container.firstChild).toBeTruthy();
+    });
+    it('accepts extra HTML attributes', () => {
+        const { container } = render(SkeletonProfile, { props: { 'data-testid': 'profile' } });
+        expect(container.querySelector('[data-testid="profile"]')).toBeTruthy();
+    });
+});
+describe('SkeletonSquare', () => {
+    it('renders a skeleton element', () => {
+        const { container } = render(SkeletonSquare);
+        expect(container.firstChild).toBeTruthy();
+    });
+});

package/dist/lib/components/extra/button/button.svelte.d.ts

@@ -3,50 +3,50 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements
 import { type VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs";
+        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white shadow-2xs";
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-2xs";
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-2xs";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
     };
 }, undefined, "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md text-sm font-medium whitespace-nowrap outline-hidden transition-all select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs";
+        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white shadow-2xs";
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-2xs";
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-2xs";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs";
+        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white shadow-2xs";
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-2xs";
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-2xs";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
     };
-}, undefined, "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md text-sm font-medium whitespace-nowrap outline-hidden transition-all select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonPropsWithoutHTML = WithChildren<{

package/dist/lib/components/extra/index.d.ts

@@ -1 +1 @@
-export * from './copy-button/index.js';
+export * from "./copy-button/index.js";

package/dist/lib/components/extra/index.js

@@ -1 +1 @@
-export * from './copy-button/index.js';
+export * from "./copy-button/index.js";

package/dist/lib/components/extra/types.d.ts

@@ -1,2 +1,2 @@
-export type * from './copy-button/types.js';
-export type * from './code/types.js';
+export type * from "./copy-button/types.js";
+export type * from "./code/types.js";

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

@@ -13,10 +13,15 @@
 <AccordionPrimitive.Content
 	bind:ref
 	data-slot="accordion-content"
-	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
 	{...restProps}
 >
-	<div class={cn("pb-4 pt-0", className)}>
+	<div
+		class={cn(
+			"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+			className
+		)}
+	>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

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

@@ -12,6 +12,6 @@
 <AccordionPrimitive.Item
 	bind:ref
 	data-slot="accordion-item"
-	class={cn("border-b last:border-b-0", className)}
+	class={cn("not-last:border-b", className)}
 	{...restProps}
 />

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

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

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 	import { cn, type WithoutChild } from "../../utils.js";
 
 	let {
@@ -19,14 +20,13 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDownIcon
-			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
-		/>
+		<ChevronDownIcon data-slot="accordion-trigger-icon" class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+		<ChevronUpIcon data-slot="accordion-trigger-icon" class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

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

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
+		class: className,
 		...restProps
 	}: AccordionPrimitive.RootProps = $props();
 </script>
@@ -12,5 +14,6 @@
 	bind:ref
 	bind:value={value as never}
 	data-slot="accordion"
+	class={cn("flex w-full flex-col", className)}
 	{...restProps}
 />

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

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

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

@@ -1,5 +1,5 @@
-import Root from "./accordion.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
+import Root from "./accordion.svelte";
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

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

package/dist/lib/components/ui/alert/alert-action.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-action"
+	class={cn("absolute top-2 right-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	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",
+		"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}

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 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>;
 export default AlertDescription;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	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,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 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: "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",
+		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-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -19,8 +18,8 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -36,9 +35,9 @@
 <div
 	bind:this={ref}
 	data-slot="alert"
+	role="alert"
 	class={cn(alertVariants({ variant }), className)}
 	{...restProps}
-	role="alert"
 >
 	{@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, "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", {
+}, 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, "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>>;
+}, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 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,18 +1,27 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "../button/index.js";
 	import { cn } from "../../utils.js";
 
 	let {
 		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
 	data-slot="alert-dialog-action"
-	class={cn(buttonVariants(), className)}
+	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;