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

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+</script>
+
+<Skeleton class="h-[200px] w-full rounded-xl" />

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SkeletonSquare: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SkeletonSquare = InstanceType<typeof SkeletonSquare>;
+export default SkeletonSquare;

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

@@ -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: "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";
+    };
+}, 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: "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";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    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";
+    };
+}, 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,16 @@
 
 <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-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
 	{...restProps}
 >
-	<div class="pb-4 pt-0">
+	<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

@@ -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("not-last:border-b", 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, {}, "ref" | "value">;
+type AccordionRoot = ReturnType<typeof AccordionRoot>;
+export default AccordionRoot;

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

@@ -1,7 +1,8 @@
 <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 ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { cn, type WithoutChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,20 +11,22 @@
 		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: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?.()}
-		<ChevronDown class="size-4 shrink-0 text-muted-foreground 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-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,19 @@
+<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>
+
+<AccordionPrimitive.Root
+	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

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+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,6 +1,5 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
 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">;
+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,8 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-const Root = AccordionPrimitive.Root;
+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;