negodesign 0.0.1

package/dist/components/ui/avatar/avatar-group.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group"
+	class={cn(
+		"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/avatar/avatar-group.svelte.d.ts

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

package/dist/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("rounded-full aspect-square size-full object-cover", className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar-image.svelte.d.ts

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

package/dist/components/ui/avatar/avatar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable("loading"),
+		size = "default",
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps & {
+		size?: "default" | "sm" | "lg";
+	} = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	data-size={size}
+	class={cn(
+		"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+type $$ComponentProps = AvatarPrimitive.RootProps & {
+    size?: "default" | "sm" | "lg";
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "ref" | "loadingStatus">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,7 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Badge from "./avatar-badge.svelte";
+import Group from "./avatar-group.svelte";
+import GroupCount from "./avatar-group-count.svelte";
+export { Root, Image, Fallback, Badge, Group, GroupCount, Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, Badge as AvatarBadge, Group as AvatarGroup, GroupCount as AvatarGroupCount, };

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

@@ -0,0 +1,9 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Badge from "./avatar-badge.svelte";
+import Group from "./avatar-group.svelte";
+import GroupCount from "./avatar-group-count.svelte";
+export { Root, Image, Fallback, Badge, Group, GroupCount, 
+//
+Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, Badge as AvatarBadge, Group as AvatarGroup, GroupCount as AvatarGroupCount, };

package/dist/components/ui/badge/badge.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,38 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

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

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants } from "./badge.svelte";

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { MoreHorizontalCircle01Icon } from '@hugeicons/core-free-icons';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
+	role="presentation"
+	aria-hidden="true"
+	class={cn("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<HugeiconsIcon icon={MoreHorizontalCircle01Icon} strokeWidth={2}  />
+	<span class="sr-only">More</span>
+</span>

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn("gap-1.5 inline-flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte.d.ts

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

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		"data-slot": "breadcrumb-link",
+		class: cn("hover:text-foreground transition-colors", className),
+		href,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{
+        props: HTMLAnchorAttributes;
+    }]>;
+};
+declare const BreadcrumbLink: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type BreadcrumbLink = ReturnType<typeof BreadcrumbLink>;
+export default BreadcrumbLink;

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	data-slot="breadcrumb-list"
+	class={cn("text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ol>

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte.d.ts

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

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-page"
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("text-foreground font-normal", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte.d.ts

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

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2}  />
+	{/if}
+</li>

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte.d.ts

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

package/dist/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	aria-label="breadcrumb"
+	class={cn("cn-breadcrumb", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</nav>

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

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

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

@@ -0,0 +1,8 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+export { Root, Ellipsis, Item, Separator, Link, List, Page, Root as Breadcrumb, Ellipsis as BreadcrumbEllipsis, Item as BreadcrumbItem, Separator as BreadcrumbSeparator, Link as BreadcrumbLink, List as BreadcrumbList, Page as BreadcrumbPage, };

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

@@ -0,0 +1,10 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+export { Root, Ellipsis, Item, Separator, Link, List, Page, 
+//
+Root as Breadcrumb, Ellipsis as BreadcrumbEllipsis, Item as BreadcrumbItem, Separator as BreadcrumbSeparator, Link as BreadcrumbLink, List as BreadcrumbList, Page as BreadcrumbPage, };

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/80",
+				outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+				xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-9",
+				"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,70 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

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

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

@@ -0,0 +1,4 @@
+import Root, { buttonVariants, } from "./button.svelte";
+export { Root, 
+//
+Root as Button, buttonVariants, };