@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/ui/badge/badge.variants.d.ts

@@ -0,0 +1,33 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    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/12 text-destructive-ink [a&]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border-transparent";
+        success: "bg-success/14 text-success-ink [a&]:hover:bg-success/22 border-transparent";
+        warning: "bg-warning/16 text-warning-ink [a&]:hover:bg-warning/24 border-transparent";
+        info: "bg-info/12 text-info-ink [a&]:hover:bg-info/20 border-transparent";
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+    };
+}, 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-full 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: "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/12 text-destructive-ink [a&]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border-transparent";
+        success: "bg-success/14 text-success-ink [a&]:hover:bg-success/22 border-transparent";
+        warning: "bg-warning/16 text-warning-ink [a&]:hover:bg-warning/24 border-transparent";
+        info: "bg-info/12 text-info-ink [a&]:hover:bg-info/20 border-transparent";
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    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/12 text-destructive-ink [a&]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border-transparent";
+        success: "bg-success/14 text-success-ink [a&]:hover:bg-success/22 border-transparent";
+        warning: "bg-warning/16 text-warning-ink [a&]:hover:bg-warning/24 border-transparent";
+        info: "bg-info/12 text-info-ink [a&]:hover:bg-info/20 border-transparent";
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+    };
+}, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];

package/dist/lib/components/ui/badge/badge.variants.js

@@ -0,0 +1,23 @@
+import { 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-full 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',
+            /*
+             * Status badges are tinted, not solid (appshell-apple-design): 12–16%
+             * alpha fill + status-ink text keeps state legible without outranking
+             * actions. Inks are contrast-tuned per theme in styles.css.
+             */
+            destructive: 'bg-destructive/12 text-destructive-ink [a&]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border-transparent',
+            success: 'bg-success/14 text-success-ink [a&]:hover:bg-success/22 border-transparent',
+            warning: 'bg-warning/16 text-warning-ink [a&]:hover:bg-warning/24 border-transparent',
+            info: 'bg-info/12 text-info-ink [a&]:hover:bg-info/20 border-transparent',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});

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

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

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">import { Icon } from "../../icon";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $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}
+>
+	<Icon icon="lucide:ellipsis" class="size-4" />
+	<span class="sr-only">More</span>
+</span>

package/dist/lib/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/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $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/lib/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/lib/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, href = undefined, child, children, ...restProps } = $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/lib/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/lib/components/ui/breadcrumb/breadcrumb-list.svelte

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

package/dist/lib/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/lib/components/ui/breadcrumb/breadcrumb-page.svelte

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

package/dist/lib/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/lib/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { Icon } from "../../icon";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $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}
+		<Icon icon="lucide:chevron-right" />
+	{/if}
+</li>

package/dist/lib/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/lib/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+export {};
+</script>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	class={className}
+	aria-label="breadcrumb"
+	{...restProps}
+>
+	{@render children?.()}
+</nav>

package/dist/lib/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/lib/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/lib/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/lib/components/ui/button/button.shared.d.ts

@@ -0,0 +1,73 @@
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+import type { WithElementRef } from '../../../utils.ts';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    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";
+        glass: "vibes-glass-surface text-foreground border";
+    };
+    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";
+        xl: "h-12 rounded-lg px-6 text-base has-[>svg]:px-5";
+        icon: "size-9";
+        'icon-sm': "size-8";
+        'icon-lg': "size-10";
+    };
+}, 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 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow] duration-150 motion-reduce:transition-none 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", {
+    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";
+        glass: "vibes-glass-surface text-foreground border";
+    };
+    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";
+        xl: "h-12 rounded-lg px-6 text-base has-[>svg]:px-5";
+        icon: "size-9";
+        'icon-sm': "size-8";
+        'icon-lg': "size-10";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    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";
+        glass: "vibes-glass-surface text-foreground border";
+    };
+    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";
+        xl: "h-12 rounded-lg px-6 text-base has-[>svg]:px-5";
+        icon: "size-9";
+        'icon-sm': "size-8";
+        'icon-lg': "size-10";
+    };
+}, 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;
+    /**
+     * Show a leading spinner and disable interaction. The spinner is sized
+     * to the button size. Composes the existing `disabled` prop — both must
+     * be falsy for the button to be interactive.
+     */
+    loading?: boolean;
+};

package/dist/lib/components/ui/button/button.shared.js

@@ -0,0 +1,28 @@
+import { 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-[background-color,color,border-color,box-shadow] duration-150 motion-reduce:transition-none 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',
+            glass: 'vibes-glass-surface text-foreground border'
+        },
+        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',
+            xl: 'h-12 rounded-lg px-6 text-base has-[>svg]:px-5',
+            icon: 'size-9',
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});

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

@@ -0,0 +1,53 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { buttonVariants } from "./button.shared.js";
+import Spinner from "../spinner/spinner.svelte";
+let { class: className, variant = "default", size = "default", ref = $bindable(null), href = undefined, type = "button", disabled, loading = false, onclick, children, style, ...restProps } = $props();
+const glassMaterial = $derived(variant === "glass");
+// A loading button is non-interactive. Compose with `disabled` so both must
+// be falsy to click — a loading state must never look clickable.
+const interactiveDisabled = $derived(disabled || loading);
+// Spinner scales with the button size; the icon sizes are the kit convention.
+const spinnerSize = $derived(size === "sm" || size === "icon-sm" ? "size-3.5" : size === "lg" || size === "xl" || size === "icon-lg" ? "size-5" : "size-4");
+const packagedNavigation = $derived(href != null && /(?:^|\/)[^/?#]+\.html(?:[?#]|$)/.test(href));
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{style}
+		href={interactiveDisabled ? undefined : href}
+		aria-disabled={interactiveDisabled}
+		role={interactiveDisabled ? 'link' : undefined}
+		tabindex={interactiveDisabled ? -1 : undefined}
+		onclick={interactiveDisabled ? undefined : onclick}
+		{...restProps}
+		data-sveltekit-reload={packagedNavigation ? true : undefined}
+		data-glass-intensity={glassMaterial ? 'subtle' : undefined}
+		data-glass-glow={glassMaterial ? 'off' : undefined}
+		data-glass-interactive={glassMaterial ? 'true' : undefined}
+		data-loading={loading ? '' : undefined}
+	>
+		{#if loading}<Spinner class={spinnerSize} />{/if}
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{style}
+		{type}
+		disabled={interactiveDisabled}
+		{onclick}
+		{...restProps}
+		data-glass-intensity={glassMaterial ? 'subtle' : undefined}
+		data-glass-glow={glassMaterial ? 'off' : undefined}
+		data-glass-interactive={glassMaterial ? 'true' : undefined}
+		data-loading={loading ? '' : undefined}
+	>
+		{#if loading}<Spinner class={spinnerSize} />{/if}
+		{@render children?.()}
+	</button>
+{/if}

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

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

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

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

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

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

package/dist/lib/components/ui/button-group/button-group-separator.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { Separator } from "../separator/index.js";
+let { ref = $bindable(null), class: className, orientation = "vertical", ...restProps } = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn('relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto', className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/button-group/button-group-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
+export default ButtonGroupSeparator;

package/dist/lib/components/ui/button-group/button-group-text.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, child, ...restProps } = $props();
+const mergedProps = $derived({
+	...restProps,
+	class: cn("bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className)
+});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/dist/lib/components/ui/button-group/button-group-text.svelte.d.ts

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

package/dist/lib/components/ui/button-group/button-group.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>import { tv } from "tailwind-variants";
+export const buttonGroupVariants = tv({
+	base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	variants: { orientation: {
+		horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none",
+		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+</script>
+
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, orientation = "horizontal", ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/button-group/button-group.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none";
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
+    };
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none";
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none";
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
+    };
+}, undefined>>;
+export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation;
+};
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/lib/components/ui/button-group/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './button-group.svelte';
+import Text from './button-group-text.svelte';
+import Separator from './button-group-separator.svelte';
+export { Root, Text, Separator, Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator };

package/dist/lib/components/ui/button-group/index.js

@@ -0,0 +1,6 @@
+import Root from './button-group.svelte';
+import Text from './button-group-text.svelte';
+import Separator from './button-group-separator.svelte';
+export { Root, Text, Separator, 
+//
+Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator };

package/dist/lib/components/ui/calendar/calendar-caption.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">import CalendarMonthSelect from "./calendar-month-select.svelte";
+import CalendarYearSelect from "./calendar-year-select.svelte";
+import { formatCaptionMonth, formatCaptionYear, placeholderForMonth, placeholderForYear } from "./caption-options.js";
+let { captionLayout, months, monthFormat, years, yearFormat, month, locale, placeholder = $bindable(), monthIndex = 0 } = $props();
+function chooseMonth(next) {
+	if (placeholder) placeholder = placeholderForMonth(placeholder, month, next, monthIndex);
+}
+function chooseYear(next) {
+	if (placeholder) placeholder = placeholderForYear(placeholder, month, next, monthIndex);
+}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		{locale}
+		value={month.month}
+		onValueChange={chooseMonth}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} {locale} value={month.year} onValueChange={chooseYear} />
+{/snippet}
+
+{#if captionLayout === 'dropdown'}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === 'dropdown-months'}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatCaptionYear(placeholder.year, yearFormat, locale)}
+	{/if}
+{:else if captionLayout === 'dropdown-years'}
+	{#if placeholder}
+		{formatCaptionMonth(placeholder.month, monthFormat, locale)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatCaptionMonth(month.month, monthFormat, locale)}
+	{formatCaptionYear(month.year, yearFormat, locale)}
+{/if}

package/dist/lib/components/ui/calendar/calendar-caption.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import type Calendar from './calendar.svelte';
+import type { DateValue } from '@internationalized/date';
+import { type CaptionMonthFormat, type CaptionYearFormat } from './caption-options.ts';
+type $$ComponentProps = {
+    captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+    months?: number[];
+    monthFormat?: CaptionMonthFormat;
+    years?: number[];
+    yearFormat?: CaptionYearFormat;
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+};
+declare const CalendarCaption: import("svelte").Component<$$ComponentProps, {}, "placeholder">;
+type CalendarCaption = ReturnType<typeof CalendarCaption>;
+export default CalendarCaption;