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

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

@@ -0,0 +1,128 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts" module>
+	import type { WithChildren, WithoutChildren } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "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",
+		variants: {
+			variant: {
+				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: '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'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonPropsWithoutHTML = WithChildren<{
+		ref?: HTMLElement | null;
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		loading?: boolean;
+		onClickPromise?: (
+			e: MouseEvent & {
+				currentTarget: EventTarget & HTMLButtonElement;
+			}
+		) => Promise<void>;
+	}>;
+
+	export type AnchorElementProps = ButtonPropsWithoutHTML &
+		WithoutChildren<Omit<HTMLAnchorAttributes, 'href' | 'type'>> & {
+			href: HTMLAnchorAttributes['href'];
+			type?: never;
+			disabled?: HTMLButtonAttributes['disabled'];
+		};
+
+	export type ButtonElementProps = ButtonPropsWithoutHTML &
+		WithoutChildren<Omit<HTMLButtonAttributes, 'type' | 'href'>> & {
+			type?: HTMLButtonAttributes['type'];
+			href?: never;
+			disabled?: HTMLButtonAttributes['disabled'];
+		};
+
+	export type ButtonProps = AnchorElementProps | ButtonElementProps;
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils/utils.js';
+	import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
+
+	let {
+		ref = $bindable(null),
+		variant = 'default',
+		size = 'default',
+		href = undefined,
+		type = 'button',
+		loading = false,
+		disabled = false,
+		tabindex = 0,
+		onclick,
+		onClickPromise,
+		class: className,
+		children,
+		...rest
+	}: ButtonProps = $props();
+</script>
+
+<!-- This approach to disabled links is inspired by bits-ui see: https://github.com/huntabyte/bits-ui/pull/1055 -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{...rest}
+	data-slot="button"
+	type={href ? undefined : type}
+	href={href && !disabled ? href : undefined}
+	disabled={href ? undefined : disabled || loading}
+	aria-disabled={href ? disabled : undefined}
+	role={href && disabled ? 'link' : undefined}
+	tabindex={href && disabled ? -1 : tabindex}
+	class={cn(buttonVariants({ variant, size }), className)}
+	bind:this={ref}
+	onclick={async (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		e: any
+	) => {
+		onclick?.(e);
+
+		if (type === undefined) return;
+
+		if (onClickPromise) {
+			loading = true;
+
+			await onClickPromise(e);
+
+			loading = false;
+		}
+	}}
+>
+	{#if type !== undefined && loading}
+		<div class="absolute flex size-full place-items-center justify-center bg-inherit">
+			<div class="flex animate-spin place-items-center justify-center">
+				<LoaderCircleIcon class="size-4" />
+			</div>
+		</div>
+		<span class="sr-only">Loading</span>
+	{/if}
+	{@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,74 @@
+import type { WithChildren, WithoutChildren } from 'bits-ui';
+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;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, 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;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, 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>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonPropsWithoutHTML = WithChildren<{
+    ref?: HTMLElement | null;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    onClickPromise?: (e: MouseEvent & {
+        currentTarget: EventTarget & HTMLButtonElement;
+    }) => Promise<void>;
+}>;
+export type AnchorElementProps = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, 'href' | 'type'>> & {
+    href: HTMLAnchorAttributes['href'];
+    type?: never;
+    disabled?: HTMLButtonAttributes['disabled'];
+};
+export type ButtonElementProps = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, 'type' | 'href'>> & {
+    type?: HTMLButtonAttributes['type'];
+    href?: never;
+    disabled?: HTMLButtonAttributes['disabled'];
+};
+export type ButtonProps = AnchorElementProps | ButtonElementProps;
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, type AnchorElementProps, type ButtonElementProps, type ButtonPropsWithoutHTML, buttonVariants } from "./button.svelte";
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant, type AnchorElementProps, type ButtonElementProps, type ButtonPropsWithoutHTML, };

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

@@ -0,0 +1,7 @@
+/*
+    Installed from @ieedan/shadcn-svelte-extras
+*/
+import Root, { buttonVariants, } from "./button.svelte";
+export { Root, 
+//
+Root as Button, buttonVariants, };

package/dist/lib/components/extra/copy-button/copy-button.svelte

@@ -0,0 +1,73 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+	import { Button } from '../button';
+	import { UseClipboard } from '../../../hooks/use-clipboard.svelte';
+	import { cn } from '../../../utils/utils';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import XIcon from '@lucide/svelte/icons/x';
+	import { scale } from 'svelte/transition';
+	import type { CopyButtonProps } from './types';
+
+	let {
+		ref = $bindable(null),
+		text,
+		icon,
+		animationDuration = 500,
+		variant = 'ghost',
+		size = 'icon',
+		onCopy,
+		class: className,
+		tabindex = -1,
+		children,
+		...rest
+	}: CopyButtonProps = $props();
+
+	// this way if the user passes text then the button will be the default size
+	if (size === 'icon' && children) {
+		size = 'default';
+	}
+
+	const clipboard = new UseClipboard();
+</script>
+
+<Button
+	{...rest}
+	bind:ref
+	{variant}
+	{size}
+	{tabindex}
+	class={cn('flex items-center gap-2', className)}
+	type="button"
+	name="copy"
+	onclick={async () => {
+		const status = await clipboard.copy(text);
+
+		onCopy?.(status);
+	}}
+>
+	{#if clipboard.status === 'success'}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<CheckIcon tabindex={-1} />
+			<span class="sr-only">Copied</span>
+		</div>
+	{:else if clipboard.status === 'failure'}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<XIcon tabindex={-1} />
+			<span class="sr-only">Failed to copy</span>
+		</div>
+	{:else}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<CopyIcon tabindex={-1} />
+			{/if}
+			<span class="sr-only">Copy</span>
+		</div>
+	{/if}
+	{@render children?.()}
+</Button>

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

@@ -0,0 +1,4 @@
+import type { CopyButtonProps } from './types';
+declare const CopyButton: import("svelte").Component<CopyButtonProps, {}, "ref">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/lib/components/extra/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+import CopyButton from "./copy-button.svelte";
+export { CopyButton };

package/dist/lib/components/extra/copy-button/index.js

@@ -0,0 +1,5 @@
+/*
+    Installed from @ieedan/shadcn-svelte-extras
+*/
+import CopyButton from "./copy-button.svelte";
+export { CopyButton };

package/dist/lib/components/extra/copy-button/types.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { ButtonPropsWithoutHTML } from "../button";
+import type { UseClipboard } from "../../../hooks/use-clipboard.svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithChildren, WithoutChildren } from "bits-ui";
+export type CopyButtonPropsWithoutHTML = WithChildren<Pick<ButtonPropsWithoutHTML, "size" | "variant"> & {
+    ref?: HTMLButtonElement | null;
+    text: string;
+    icon?: Snippet<[]>;
+    animationDuration?: number;
+    onCopy?: (status: UseClipboard["status"]) => void;
+}>;
+export type CopyButtonProps = CopyButtonPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLButtonElement>>;

package/dist/lib/components/extra/copy-button/types.js

@@ -0,0 +1,4 @@
+/*
+    Installed from @ieedan/shadcn-svelte-extras
+*/
+export {};

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

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

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

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

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

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

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

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

package/dist/lib/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";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,13 +12,11 @@
 
 <AccordionPrimitive.Content
 	bind:ref
-	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-		className
-	)}
+	data-slot="accordion-content"
+	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 	{...restProps}
 >
-	<div class="pb-4 pt-0">
+	<div class={cn("pb-4 pt-0", className)}>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,9 @@
 	}: 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/lib/components/ui/accordion/accordion-root.svelte

@@ -0,0 +1,16 @@
+<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/lib/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/lib/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),
@@ -10,20 +10,23 @@
 		children,
 		...restProps
 	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
-		level?: AccordionPrimitive.HeaderProps['level'];
+		level?: AccordionPrimitive.HeaderProps["level"];
 	} = $props();
 </script>
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			'flex flex-1 items-center justify-between py-4 text-sm 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-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",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 text-muted-foreground 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/lib/components/ui/accordion/accordion-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
-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'];
+    level?: AccordionPrimitive.HeaderProps["level"];
 };
 declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AccordionTrigger = ReturnType<typeof AccordionTrigger>;

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

@@ -0,0 +1,16 @@
+<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/lib/components/ui/accordion/accordion.svelte.d.ts

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

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

@@ -1,6 +1,5 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion.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/lib/components/ui/accordion/index.js

@@ -1,8 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion.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/lib/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";
+	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/lib/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/lib/components/ui/alert/alert-title.svelte

@@ -1,23 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
+	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
 	bind:this={ref}
-	aria-level={level}
-	class={cn("mb-1 font-medium leading-none 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/lib/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/lib/components/ui/alert/alert.svelte

@@ -2,12 +2,12 @@
 	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: "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",
+				default: "bg-card text-card-foreground",
 				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -20,8 +20,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn, type WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -34,6 +33,12 @@
 	} = $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/lib/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 px-4 py-3 text-sm [&>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 px-4 py-3 text-sm [&>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;
 };