@profidev/pleiades 1.7.0

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

@@ -0,0 +1,20 @@
+<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 text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+    className
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,4 @@
+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-group-count.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-count"
+  class={cn(
+    'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

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('aspect-square size-full rounded-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(
+    'after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 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,53 @@
+<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',
+        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,28 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+  import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+
+  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-5 items-center justify-center [&>svg]:size-4',
+    className
+  )}
+  {...restProps}
+>
+  <MoreHorizontalIcon />
+  <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('inline-flex items-center gap-1', 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,23 @@
+<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 text-sm 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,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../../utils.js';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+  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

@@ -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,92 @@
+<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-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_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 [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': '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}