svelte-firekit 0.1.9 → 0.2.0

package/dist/components/nav/nav-secondary.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import * as Sidebar from '../ui/sidebar/index.js';
-	import type { WithoutChildren } from '../../utils.js';
-	import type { ComponentProps } from 'svelte';
-	import type { Icon } from '@tabler/icons-svelte';
-
-	let {
-		items,
-		...restProps
-	}: { items: { title: string; url: string; icon: Icon }[] } & WithoutChildren<
-		ComponentProps<typeof Sidebar.Group>
-	> = $props();
-</script>
-
-<Sidebar.Group {...restProps}>
-	<Sidebar.GroupContent>
-		<Sidebar.Menu>
-			{#each items as item (item.title)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton>
-						{#snippet child({ props })}
-							<a href={item.url} {...props} target="_blank" rel="noopener noreferrer">
-								<item.icon />
-								<span>{item.title}</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		</Sidebar.Menu>
-	</Sidebar.GroupContent>
-</Sidebar.Group>

package/dist/components/nav/nav-secondary.svelte.d.ts

@@ -1,14 +0,0 @@
-import * as Sidebar from '../ui/sidebar/index.js';
-import type { WithoutChildren } from '../../utils.js';
-import type { ComponentProps } from 'svelte';
-import type { Icon } from '@tabler/icons-svelte';
-type $$ComponentProps = {
-    items: {
-        title: string;
-        url: string;
-        icon: Icon;
-    }[];
-} & WithoutChildren<ComponentProps<typeof Sidebar.Group>>;
-declare const NavSecondary: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavSecondary = ReturnType<typeof NavSecondary>;
-export default NavSecondary;

package/dist/components/nav/site-header.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { Button } from '../ui/button/index.js';
-	import { Separator } from '../ui/separator/index.js';
-	import * as Sidebar from '../ui/sidebar/index.js';
-	import { IconBrandGithub } from '@tabler/icons-svelte';
-	import DarkModeToggle from './dark-mode-toggle.svelte';
-	import AutoBreadcrumb from './auto-breadcrumb.svelte';
-</script>
-
-<header
-	class="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
->
-	<div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-		<Sidebar.Trigger class="-ml-1" />
-		<Separator orientation="vertical" class="mx-2 data-[orientation=vertical]:h-4" />
-		<AutoBreadcrumb />
-		<div class="ml-auto flex items-center gap-2">
-			<Button
-				href="https://github.com/code-gio/svelte-firekit"
-				variant="ghost"
-				size="sm"
-				class="dark:text-foreground hidden sm:flex"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<IconBrandGithub class="!size-4" />
-				View on GitHub
-			</Button>
-			<DarkModeToggle />
-		</div>
-	</div>
-</header>

package/dist/components/nav/site-header.svelte.d.ts

@@ -1,18 +0,0 @@
-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 SiteHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SiteHeader = InstanceType<typeof SiteHeader>;
-export default SiteHeader;

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

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AvatarPrimitive.FallbackProps = $props();
-</script>
-
-<AvatarPrimitive.Fallback
-	bind:ref
-	data-slot="avatar-fallback"
-	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
-	{...restProps}
-/>

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

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

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

@@ -1,17 +0,0 @@
-<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("aspect-square size-full", className)}
-	{...restProps}
-/>

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

@@ -1,4 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		loadingStatus = $bindable("loading"),
-		class: className,
-		...restProps
-	}: AvatarPrimitive.RootProps = $props();
-</script>
-
-<AvatarPrimitive.Root
-	bind:ref
-	bind:loadingStatus
-	data-slot="avatar"
-	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
-	{...restProps}
-/>

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

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

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

@@ -1,4 +0,0 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
-export { Root, Image, Fallback, Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, };

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

@@ -1,6 +0,0 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
-export { Root, Image, Fallback, 
-//
-Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, };

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

@@ -1,50 +0,0 @@
-<script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const badgeVariants = 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 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
-				secondary:
-					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
-				destructive:
-					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
-		},
-		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

@@ -1,32 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: 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 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: 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 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", 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

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

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

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

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

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
-
-	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("flex size-9 items-center justify-center", className)}
-	{...restProps}
->
-	<EllipsisIcon class="size-4" />
-	<span class="sr-only">More</span>
-</span>

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

@@ -1,5 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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("inline-flex items-center gap-1.5", className)}
-	{...restProps}
->
-	{@render children?.()}
-</li>

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

@@ -1,5 +0,0 @@
-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

@@ -1,31 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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 flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</ol>

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

@@ -1,5 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLLiAttributes } from "svelte/elements";
-
-	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}
-		<ChevronRightIcon />
-	{/if}
-</li>

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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,80 +0,0 @@
-<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 inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				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 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}