@classic-homes/theme-svelte 1.16.0 → 1.18.0

package/dist/__tests__/alert-dialog-dismiss.test.js

@@ -0,0 +1,54 @@
+/**
+ * AlertDialog: however it closes — Cancel, confirm, Escape — exactly one of
+ * onConfirm / onCancel runs, so `{#if x}<AlertDialog open onCancel=…>` callers
+ * can reset their state on Escape too.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, tick } from 'svelte';
+import AlertDialog from '../lib/components/AlertDialog.svelte';
+let instance = null;
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    document.body.innerHTML = '';
+});
+async function mountOpen() {
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    instance = mount(AlertDialog, {
+        target: document.body,
+        props: { open: true, title: 'Delete?', onConfirm, onCancel },
+    });
+    flushSync();
+    await tick();
+    const button = (label) => [...document.querySelectorAll('button')].find((b) => b.textContent?.trim() === label);
+    return { onConfirm, onCancel, button };
+}
+describe('AlertDialog dismiss', () => {
+    it('calls onCancel once on Cancel', async () => {
+        const { onConfirm, onCancel, button } = await mountOpen();
+        button('Cancel').click();
+        flushSync();
+        await tick();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onConfirm).not.toHaveBeenCalled();
+    });
+    it('calls onConfirm once and not onCancel on confirm', async () => {
+        const { onConfirm, onCancel, button } = await mountOpen();
+        button('Continue').click();
+        flushSync();
+        await tick();
+        expect(onConfirm).toHaveBeenCalledTimes(1);
+        expect(onCancel).not.toHaveBeenCalled();
+    });
+    it('calls onCancel on Escape', async () => {
+        const { onConfirm, onCancel } = await mountOpen();
+        const content = document.querySelector('[role="alertdialog"]');
+        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        flushSync();
+        await tick();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onConfirm).not.toHaveBeenCalled();
+    });
+});

package/dist/__tests__/dropdown-trigger.test.js

@@ -0,0 +1,39 @@
+/**
+ * DropdownMenu trigger styling
+ *
+ * `triggerVariant` styles the trigger <button> as a Button variant, so a menu
+ * in a header looks like the buttons beside it without app-side classes.
+ * Without it the trigger stays unstyled, as before.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DropdownMenu from '../lib/components/DropdownMenu.svelte';
+import { buttonVariants } from '../lib/components/button-variants.js';
+const trigger = createRawSnippet(() => ({ render: () => '<span>Menu</span>' }));
+const items = [{ label: 'One', href: '/one' }];
+describe('DropdownMenu trigger', () => {
+    it('is unstyled by default', () => {
+        render(DropdownMenu, { props: { items, trigger, triggerClass: 'custom' } });
+        expect(screen.getByRole('button', { name: 'Menu' }).className).toBe('custom');
+    });
+    it('takes Button variant classes from triggerVariant, plus triggerClass', () => {
+        render(DropdownMenu, {
+            props: { items, trigger, triggerVariant: 'ghost', triggerClass: 'custom' },
+        });
+        const button = screen.getByRole('button', { name: 'Menu' });
+        for (const cls of buttonVariants({ variant: 'ghost', size: 'sm' }).split(' ')) {
+            expect(button.classList.contains(cls)).toBe(true);
+        }
+        expect(button.classList.contains('custom')).toBe(true);
+    });
+    it('adds a disclosure chevron only with showChevron', () => {
+        const { unmount } = render(DropdownMenu, { props: { items, trigger } });
+        expect(screen.getByRole('button', { name: 'Menu' }).querySelector('svg')).toBeNull();
+        unmount();
+        render(DropdownMenu, { props: { items, trigger, triggerVariant: 'ghost', showChevron: true } });
+        const chevron = screen.getByRole('button', { name: 'Menu' }).querySelector('svg');
+        expect(chevron).not.toBeNull();
+        expect(chevron?.getAttribute('aria-hidden')).toBe('true');
+    });
+});

package/dist/__tests__/sidebar-docs-parity.test.js

@@ -0,0 +1,134 @@
+/**
+ * Sidebar features docs sites need (Docusaurus parity)
+ *
+ * - Items nest to any depth: a child with its own children renders as an expandable row
+ *   instead of being dropped.
+ * - Search filters and expands at every depth.
+ * - `sidebarAutoCollapse`: opening a section or item closes the others at its level.
+ * - DashboardLayout renders a page `footer` below the main content.
+ */
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { fireEvent, render, screen, within } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+const navigation = [
+    {
+        id: 'setup',
+        title: 'Setup',
+        collapsible: true,
+        expanded: true,
+        items: [
+            {
+                id: 'platforms',
+                name: 'Platforms',
+                expanded: true,
+                children: [
+                    { id: 'mac', name: 'macOS', href: '/setup/mac' },
+                    {
+                        id: 'linux',
+                        name: 'Linux',
+                        expanded: true,
+                        children: [
+                            { id: 'debian', name: 'Debian', href: '/setup/linux/debian', active: true },
+                            {
+                                id: 'rhel',
+                                name: 'RHEL',
+                                children: [{ id: 'rhel9', name: 'RHEL 9', href: '/setup/linux/rhel/9' }],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'tools',
+                name: 'Tools',
+                children: [{ id: 'cli', name: 'CLI', href: '/setup/cli' }],
+            },
+        ],
+    },
+    {
+        id: 'reference',
+        title: 'Reference',
+        collapsible: true,
+        expanded: false,
+        items: [{ id: 'api', name: 'API', href: '/reference/api' }],
+    },
+];
+function renderLayout(props = {}) {
+    return render(DashboardLayout, {
+        props: {
+            appId: `test-parity-${Math.random()}`,
+            navigation,
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+            ...props,
+        },
+    });
+}
+describe('sidebar docs parity', () => {
+    beforeAll(() => {
+        var _a;
+        // Expanding rows runs svelte's slide transition (Web Animations), which jsdom lacks
+        (_a = Element.prototype).animate ?? (_a.animate = vi.fn(() => ({
+            cancel: vi.fn(),
+            finish: vi.fn(),
+            onfinish: null,
+            oncancel: null,
+        })));
+    });
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+        sidebarStore.setDefaultItems([]);
+        sidebarStore.setDefaultSections([]);
+    });
+    it('renders categories nested deeper than one level', () => {
+        renderLayout();
+        const debian = screen.getByRole('link', { name: 'Debian' });
+        expect(debian).toHaveAttribute('aria-current', 'page');
+        // RHEL is a third-level category: an expandable row, collapsed by default
+        const rhel = screen.getByRole('button', { name: 'Expand RHEL' });
+        expect(screen.queryByRole('link', { name: 'RHEL 9' })).toBeNull();
+        return fireEvent.click(rhel).then(() => {
+            expect(screen.getByRole('link', { name: 'RHEL 9' })).toHaveAttribute('href', '/setup/linux/rhel/9');
+        });
+    });
+    it('finds and reveals matches at any depth when searching', async () => {
+        renderLayout({ searchable: true });
+        const search = screen.getByRole('searchbox');
+        await fireEvent.input(search, { target: { value: 'rhel 9' } });
+        // The search input is debounced
+        await vi.waitFor(() => expect(screen.getByRole('link', { name: /RHEL 9/ })).toBeInTheDocument());
+        expect(screen.queryByRole('link', { name: /macOS/ })).toBeNull();
+        expect(screen.queryByRole('link', { name: /Debian/ })).toBeNull();
+    });
+    it('closes sibling items and sections when sidebarAutoCollapse is on', async () => {
+        renderLayout({ sidebarAutoCollapse: true });
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Expand Tools' }));
+        expect(sidebarStore.isItemExpanded('tools')).toBe(true);
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(false);
+        expect(sidebarStore.isSectionExpanded('setup')).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: /Reference/ }));
+        expect(sidebarStore.isSectionExpanded('reference')).toBe(true);
+        expect(sidebarStore.isSectionExpanded('setup')).toBe(false);
+    });
+    it('leaves siblings open by default', async () => {
+        renderLayout();
+        await fireEvent.click(screen.getByRole('button', { name: 'Expand Tools' }));
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(true);
+        expect(sidebarStore.isItemExpanded('tools')).toBe(true);
+    });
+    it('renders a page footer below the main content', () => {
+        const { container } = renderLayout({
+            footer: createRawSnippet(() => ({
+                render: () => '<footer>© Classic Homes</footer>',
+            })),
+        });
+        const main = container.querySelector('main#main-content');
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toHaveTextContent('© Classic Homes');
+        expect(main.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(within(main).queryByRole('contentinfo')).toBeNull();
+    });
+});

package/dist/__tests__/sidebar-items.test.js

@@ -0,0 +1,59 @@
+/**
+ * Sidebar item rendering
+ *
+ * - An item with an `icon` name and no custom icon renderer draws the theme
+ *   Icon (it used to draw a placeholder circle). An item without an icon
+ *   reserves no icon space.
+ * - Item links can shrink, so a long name truncates instead of widening the
+ *   sidebar into a horizontal scroll.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+const ARROW_LEFT_PATH = 'M19 12H5M12 19l-7-7 7-7';
+function renderLayout() {
+    return render(DashboardLayout, {
+        props: {
+            appId: `test-items-${Math.random()}`,
+            navigation: [
+                {
+                    id: 'main',
+                    items: [
+                        { id: 'back', name: 'Back', href: '/', icon: 'arrow-left' },
+                        {
+                            id: 'plain',
+                            name: 'A rather long page name that will not fit the sidebar',
+                            href: '/plain',
+                        },
+                    ],
+                },
+            ],
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+        },
+    });
+}
+describe('sidebar items', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+    });
+    it('draws the named theme icon when no icon renderer is given', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: 'Back' });
+        expect(link.querySelector('svg circle')).toBeNull();
+        expect(link.querySelector('svg path')?.getAttribute('d')).toBe(ARROW_LEFT_PATH);
+    });
+    it('reserves no icon space for an item without an icon', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: /A rather long page name/ });
+        expect(link.querySelector('svg')).toBeNull();
+        expect(link.querySelector('span.h-5.w-5')).toBeNull();
+    });
+    it('lets item links shrink so long names truncate', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: /A rather long page name/ });
+        expect(link.classList.contains('min-w-0')).toBe(true);
+    });
+});

package/dist/__tests__/sidebar-mobile.test.js

@@ -70,4 +70,17 @@ describe('sidebar mobile semantics', () => {
         sidebarStore.setMobile(false);
         expect(sidebarStore.isOpen).toBe(false);
     });
+    it('does not animate expansion until the frames after initialize', async () => {
+        const appId = freshAppId();
+        localStorage.setItem(`classic-theme-sidebar-${appId}-sections`, JSON.stringify(['a']));
+        // A fresh store instance would start false; the singleton may already be settled
+        // from earlier tests, so check the reset-on-initialize path via a new appId.
+        sidebarStore.animate = false;
+        sidebarStore.initialize(appId);
+        expect(sidebarStore.isSectionExpanded('a')).toBe(true);
+        expect(sidebarStore.animate).toBe(false);
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(sidebarStore.animate).toBe(true);
+    });
 });

package/dist/lib/components/AlertDialog.svelte

@@ -62,19 +62,36 @@
     children,
   }: Props = $props();
 
+  // Each time the dialog opens, exactly one of onConfirm / onCancel runs when it
+  // closes. Escape and overlay clicks count as cancel, so callers that mount the
+  // dialog as `{#if x}<AlertDialog open onCancel={() => (x = null)} />` reset
+  // their state however it was dismissed.
+  let settled = false;
+  $effect.pre(() => {
+    if (open) settled = false;
+  });
+
+  function settle(confirmed: boolean) {
+    if (settled) return;
+    settled = true;
+    if (confirmed) onConfirm?.();
+    else onCancel?.();
+  }
+
   function handleOpenChange(newOpen: boolean) {
     open = newOpen;
+    if (!newOpen) settle(false);
     onOpenChange?.(newOpen);
   }
 
   function handleCancel() {
-    onCancel?.();
+    settle(false);
     open = false;
     onOpenChange?.(false);
   }
 
   function handleConfirm() {
-    onConfirm?.();
+    settle(true);
     open = false;
     onOpenChange?.(false);
   }

package/dist/lib/components/Button.svelte

@@ -1,37 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
-  import { tv, type VariantProps } from 'tailwind-variants';
-
-  const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
-        secondary:
-          'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
-        outline:
-          'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
-        ghost: 'hover:bg-muted-hover hover:text-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3 text-sm',
-        md: 'h-10 px-4 py-2',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  });
-
-  type ButtonVariants = VariantProps<typeof buttonVariants>;
+  import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
   interface Props {
     variant?: ButtonVariants['variant'];

package/dist/lib/components/Button.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<{
-    [key: string]: unknown;
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "icon" | undefined;
-    type?: "button" | "submit" | "reset";
+import { type ButtonVariants } from './button-variants.js';
+interface Props {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    type?: 'button' | 'submit' | 'reset';
     href?: string;
     disabled?: boolean;
     loading?: boolean;
@@ -12,6 +12,9 @@ declare const Button: import("svelte").Component<{
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-}, {}, "">;
+    /** Allow passing additional HTML attributes (aria-*, data-*, etc.) */
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/lib/components/DropdownMenu.svelte

@@ -3,6 +3,7 @@
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
   import Icon, { type IconName } from './Icon.svelte';
+  import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
   export interface DropdownMenuItem {
     type?: 'item' | 'separator' | 'label';
@@ -40,8 +41,20 @@
     class?: string;
     /** Classes for the trigger `<button>` (style it here rather than nesting a button in `trigger`) */
     triggerClass?: string;
+    /**
+     * Style the trigger as a Button variant (e.g. `ghost` for header navigation).
+     * Unset leaves the trigger unstyled, as before; `triggerClass` still applies on top.
+     */
+    triggerVariant?: ButtonVariants['variant'];
+    /** Button size for the trigger, when `triggerVariant` is set. Default: `sm`. */
+    triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
+    /**
+     * Show a disclosure chevron after the trigger content, turned while the menu is open,
+     * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
+     */
+    showChevron?: boolean;
   }
 
   let {
@@ -53,7 +66,10 @@
     onOpenChange,
     class: className,
     triggerClass,
+    triggerVariant,
+    triggerSize = 'sm',
     triggerLabel,
+    showChevron = false,
   }: Props = $props();
 
   function handleOpenChange(newOpen: boolean) {
@@ -111,8 +127,26 @@
 <DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   <DropdownMenuPrimitive.Trigger>
     {#snippet child({ props })}
-      <button type="button" {...props} class={triggerClass} aria-label={triggerLabel}>
+      <button
+        type="button"
+        {...props}
+        class={triggerVariant
+          ? cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClass)
+          : triggerClass}
+        aria-label={triggerLabel}
+      >
         {@render trigger()}
+        {#if showChevron}
+          <Icon
+            name="chevron-down"
+            size={16}
+            class={cn(
+              'ml-1 shrink-0 opacity-60 transition-transform duration-200 motion-reduce:transition-none',
+              open && 'rotate-180'
+            )}
+            aria-hidden="true"
+          />
+        {/if}
       </button>
     {/snippet}
   </DropdownMenuPrimitive.Trigger>

package/dist/lib/components/DropdownMenu.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import { type IconName } from './Icon.svelte';
+import { type ButtonVariants } from './button-variants.js';
 export interface DropdownMenuItem {
     type?: 'item' | 'separator' | 'label';
     label?: string;
@@ -34,8 +35,20 @@ interface Props {
     class?: string;
     /** Classes for the trigger `<button>` (style it here rather than nesting a button in `trigger`) */
     triggerClass?: string;
+    /**
+     * Style the trigger as a Button variant (e.g. `ghost` for header navigation).
+     * Unset leaves the trigger unstyled, as before; `triggerClass` still applies on top.
+     */
+    triggerVariant?: ButtonVariants['variant'];
+    /** Button size for the trigger, when `triggerVariant` is set. Default: `sm`. */
+    triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
+    /**
+     * Show a disclosure chevron after the trigger content, turned while the menu is open,
+     * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
+     */
+    showChevron?: boolean;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/lib/components/button-variants.d.ts

@@ -0,0 +1,119 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Button styles, shared by Button and anything that renders a button-like
+ * control it cannot nest a Button inside (e.g. DropdownMenu's trigger).
+ */
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/lib/components/button-variants.js

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+/**
+ * Button styles, shared by Button and anything that renders a button-like
+ * control it cannot nest a Button inside (e.g. DropdownMenu's trigger).
+ */
+export const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
+            secondary: 'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
+            outline: 'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
+            ghost: 'hover:bg-muted-hover hover:text-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-10 px-4 py-2',
+            sm: 'h-9 rounded-md px-3 text-sm',
+            md: 'h-10 px-4 py-2',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});