@sigx/zero-daisyui 0.2.0-beta.1

package/dist/components.js

@@ -0,0 +1,76 @@
+// daisyui — generated by @sigx/zero-kit. Do not edit.
+// Data only: one adapt() call per component that routes anything, a
+// re-export when nothing does. The behaviour lives in @sigx/zero/adapt,
+// written once and never generated (issue #179).
+import { adapt } from '@sigx/zero/adapt';
+import { Button as ZButton } from '@sigx/zero/button';
+import { Table as ZTable } from '@sigx/zero/table';
+
+export const Button = /* @__PURE__ */ adapt(ZButton, {
+    props: {
+        'active': { modifier: 'active' },
+        'block': { modifier: 'block' },
+        'circle': { modifier: 'circle' },
+        'loading': { modifier: 'loading' },
+        'square': { modifier: 'square' },
+        'variant': { axis: 'variant' },
+        'wide': { modifier: 'wide' },
+    },
+});
+
+export const Table = /* @__PURE__ */ adapt(ZTable, {
+    props: {
+        'hover': { modifier: 'hover' },
+        'zebra': { modifier: 'zebra' },
+    },
+});
+
+export { Tabs } from '@sigx/zero/tabs';
+export { Collapsible } from '@sigx/zero/collapsible';
+export { Switch } from '@sigx/zero/switch';
+export { Dialog } from '@sigx/zero/dialog';
+export { Popover } from '@sigx/zero/popover';
+export { Tooltip } from '@sigx/zero/tooltip';
+export { Menu } from '@sigx/zero/menu';
+export { Field } from '@sigx/zero/field';
+export { Checkbox } from '@sigx/zero/checkbox';
+export { RadioGroup } from '@sigx/zero/radio-group';
+export { Progress } from '@sigx/zero/progress';
+export { Slider } from '@sigx/zero/slider';
+export { Accordion } from '@sigx/zero/accordion';
+export { Select } from '@sigx/zero/select';
+export { Avatar } from '@sigx/zero/avatar';
+export { Toast } from '@sigx/zero/toast';
+export { Combobox } from '@sigx/zero/combobox';
+export { Toggle } from '@sigx/zero/toggle';
+export { ToggleGroup } from '@sigx/zero/toggle-group';
+export { NumberInput } from '@sigx/zero/number-input';
+export { RatingGroup } from '@sigx/zero/rating-group';
+export { TreeView } from '@sigx/zero/tree-view';
+export { Input } from '@sigx/zero/input';
+export { Textarea } from '@sigx/zero/textarea';
+export { NativeSelect } from '@sigx/zero/native-select';
+export { Card } from '@sigx/zero/card';
+export { Alert } from '@sigx/zero/alert';
+export { Badge } from '@sigx/zero/badge';
+export { Divider } from '@sigx/zero/divider';
+export { Skeleton } from '@sigx/zero/skeleton';
+export { Spinner } from '@sigx/zero/spinner';
+export { Kbd } from '@sigx/zero/kbd';
+export { Status } from '@sigx/zero/status';
+export { Indicator } from '@sigx/zero/indicator';
+export { Stats } from '@sigx/zero/stats';
+export { Timeline } from '@sigx/zero/timeline';
+export { Chat } from '@sigx/zero/chat';
+export { RadialProgress } from '@sigx/zero/radial-progress';
+export { Join } from '@sigx/zero/join';
+export { Navbar } from '@sigx/zero/navbar';
+export { Breadcrumbs } from '@sigx/zero/breadcrumbs';
+export { Pagination } from '@sigx/zero/pagination';
+export { Steps } from '@sigx/zero/steps';
+export { Drawer } from '@sigx/zero/drawer';
+export { FileUpload } from '@sigx/zero/file-upload';
+export { Carousel } from '@sigx/zero/carousel';
+export { Swap } from '@sigx/zero/swap';
+export { Countdown } from '@sigx/zero/countdown';
+export { Diff } from '@sigx/zero/diff';

package/dist/css/components/accordion.css

@@ -0,0 +1,165 @@
+@layer zero.recipes {
+    [data-scope="accordion"][data-part="root"] {
+        --accordion-accent: var(--color-base-content);
+    }
+
+    [data-scope="accordion"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    [data-scope="accordion"][data-part="item"] {
+        interpolate-size: allow-keywords;
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+        overflow: hidden;
+    }
+
+    [data-scope="accordion"][data-part="item"]::details-content {
+        block-size: 0;
+        overflow: hidden;
+        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
+    }
+
+    [data-scope="accordion"][data-part="item"][open]::details-content {
+        block-size: auto;
+    }
+
+    [data-scope="accordion"][data-part="trigger"] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-xl) var(--space-2xl);
+        font-size: var(--text-md);
+        font-weight: var(--weight-semibold);
+        cursor: pointer;
+        list-style: none;
+    }
+
+    [data-scope="accordion"][data-part="trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="accordion"][data-part="trigger"][data-state="open"] {
+        color: var(--accordion-accent);
+    }
+
+    [data-scope="accordion"][data-part="trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="accordion"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="accordion"][data-part="trigger"]::after {
+        content: "";
+        width: 0.5rem;
+        height: 0.5rem;
+        border: 2px solid currentColor;
+        border-top: none;
+        border-left: none;
+        transform: rotate(45deg);
+        transition: transform var(--duration-normal) var(--ease-standard);
+        opacity: 0.6;
+    }
+
+    [data-scope="accordion"][data-part="trigger"][data-state="open"]::after {
+        transform: rotate(225deg);
+    }
+
+    [data-scope="accordion"][data-part="panel"] {
+        padding: 0 var(--space-2xl) var(--space-xl);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="primary"] {
+        --accordion-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="secondary"] {
+        --accordion-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="accent"] {
+        --accordion-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="neutral"] {
+        --accordion-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="info"] {
+        --accordion-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="success"] {
+        --accordion-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="warning"] {
+        --accordion-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="accordion"][data-part="root"][data-color="error"] {
+        --accordion-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    @scope ([data-scope="accordion"][data-part="root"][data-size="xs"]) to ([data-scope="accordion"][data-part="root"]) {
+        [data-scope="accordion"][data-part="trigger"] {
+            padding: var(--space-md) var(--space-lg);
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="accordion"][data-part="panel"] {
+            padding: 0 var(--space-lg) var(--space-md);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="accordion"][data-part="root"][data-size="sm"]) to ([data-scope="accordion"][data-part="root"]) {
+        [data-scope="accordion"][data-part="trigger"] {
+            padding: var(--space-lg) var(--space-xl);
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="accordion"][data-part="panel"] {
+            padding: 0 var(--space-xl) var(--space-lg);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="accordion"][data-part="root"][data-size="lg"]) to ([data-scope="accordion"][data-part="root"]) {
+        [data-scope="accordion"][data-part="trigger"] {
+            padding: var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-lg);
+        }
+
+        [data-scope="accordion"][data-part="panel"] {
+            padding: 0 var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="accordion"][data-part="root"][data-size="xl"]) to ([data-scope="accordion"][data-part="root"]) {
+        [data-scope="accordion"][data-part="trigger"] {
+            padding: var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-xl);
+        }
+
+        [data-scope="accordion"][data-part="panel"] {
+            padding: 0 var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-lg);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="accordion"][data-part="item"]::details-content {
+            transition: none;
+        }
+    }
+}

package/dist/css/components/alert.css

@@ -0,0 +1,126 @@
+@layer zero.recipes {
+    [data-scope="alert"][data-part="root"] {
+        --alert-tint: var(--color-info-soft);
+        --alert-ink: var(--color-base-content);
+    }
+
+    [data-scope="alert"][data-part="root"] {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: center;
+        gap: var(--space-sm) var(--space-md);
+        background: var(--alert-tint);
+        color: var(--color-base-content);
+        border-radius: var(--radius-box);
+        padding: var(--space-md) var(--space-lg);
+    }
+
+    [data-scope="alert"][data-part="icon"] {
+        grid-row: 1 / span 2;
+        display: inline-flex;
+        align-items: center;
+        color: var(--alert-ink);
+        font-size: var(--text-lg);
+        line-height: var(--leading-none);
+    }
+
+    [data-scope="alert"][data-part="title"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-tight);
+    }
+
+    [data-scope="alert"][data-part="description"] {
+        grid-column: 2;
+        font-size: var(--text-sm);
+        line-height: var(--leading-normal);
+    }
+
+    [data-scope="alert"][data-part="close"] {
+        grid-row: 1;
+        grid-column: 3;
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        border-radius: var(--radius-selector);
+        padding: var(--space-2xs);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="alert"][data-part="close"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+
+    [data-scope="alert"][data-part="close"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="alert"][data-part="close"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="alert"][data-part="close"][data-pressed]:not([data-disabled]) {
+        background: color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="primary"] {
+        --alert-tint: var(--color-primary-soft);
+        --alert-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="secondary"] {
+        --alert-tint: var(--color-secondary-soft);
+        --alert-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="accent"] {
+        --alert-tint: var(--color-accent-soft);
+        --alert-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="neutral"] {
+        --alert-tint: var(--color-neutral-soft);
+        --alert-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="info"] {
+        --alert-tint: var(--color-info-soft);
+        --alert-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="success"] {
+        --alert-tint: var(--color-success-soft);
+        --alert-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="warning"] {
+        --alert-tint: var(--color-warning-soft);
+        --alert-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-color="error"] {
+        --alert-tint: var(--color-error-soft);
+        --alert-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="alert"][data-part="root"][data-size="xs"] {
+        padding: var(--space-2xs) var(--space-sm);
+    }
+
+    [data-scope="alert"][data-part="root"][data-size="sm"] {
+        padding: var(--space-xs) var(--space-md);
+    }
+
+    [data-scope="alert"][data-part="root"][data-size="lg"] {
+        padding: var(--space-lg) var(--space-xl);
+    }
+
+    [data-scope="alert"][data-part="root"][data-size="xl"] {
+        padding: var(--space-xl) var(--space-2xl);
+    }
+}

package/dist/css/components/avatar.css

@@ -0,0 +1,94 @@
+@layer zero.recipes {
+    [data-scope="avatar"][data-part="root"] {
+        --avatar-size: calc(var(--size-selector) * 10);
+        --avatar-text: var(--text-sm);
+        --avatar-ring: var(--color-primary);
+    }
+
+    [data-scope="avatar"][data-part="root"] {
+        position: relative;
+        display: inline-grid;
+        width: var(--avatar-size);
+        height: var(--avatar-size);
+        border-radius: 9999px;
+        overflow: hidden;
+        vertical-align: middle;
+        background: var(--color-base-200);
+        box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
+    }
+
+    [data-scope="avatar"][data-part="image"] {
+        grid-area: 1 / 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    [data-scope="avatar"][data-part="fallback"] {
+        grid-area: 1 / 1;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+        background: var(--color-neutral);
+        color: var(--color-neutral-content);
+        font-size: var(--avatar-text);
+        font-weight: var(--weight-semibold);
+        user-select: none;
+    }
+
+    [data-scope="avatar"][data-part="fallback"]:not([hidden]) {
+        display: grid;
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="primary"] {
+        --avatar-ring: var(--color-primary);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="secondary"] {
+        --avatar-ring: var(--color-secondary);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="accent"] {
+        --avatar-ring: var(--color-accent);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="neutral"] {
+        --avatar-ring: var(--color-neutral);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="info"] {
+        --avatar-ring: var(--color-info);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="success"] {
+        --avatar-ring: var(--color-success);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="warning"] {
+        --avatar-ring: var(--color-warning);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-color="error"] {
+        --avatar-ring: var(--color-error);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-size="xs"] {
+        --avatar-size: calc(var(--size-selector) * 6);
+        --avatar-text: var(--text-xs);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-size="sm"] {
+        --avatar-size: calc(var(--size-selector) * 8);
+        --avatar-text: var(--text-xs);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-size="lg"] {
+        --avatar-size: calc(var(--size-selector) * 12);
+        --avatar-text: var(--text-md);
+    }
+
+    [data-scope="avatar"][data-part="root"][data-size="xl"] {
+        --avatar-size: calc(var(--size-selector) * 16);
+        --avatar-text: var(--text-lg);
+    }
+}

package/dist/css/components/badge.css

@@ -0,0 +1,82 @@
+@layer zero.recipes {
+    [data-scope="badge"][data-part="root"] {
+        --badge-fill: var(--color-base-200);
+        --badge-ink: var(--color-base-content);
+    }
+
+    [data-scope="badge"][data-part="root"] {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375em;
+        background: var(--badge-fill);
+        color: var(--badge-ink);
+        border: var(--border) solid transparent;
+        border-radius: var(--radius-selector);
+        padding: 0.125rem 0.625rem;
+        font-size: var(--text-xs);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-normal);
+        white-space: nowrap;
+        text-decoration: none;
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="primary"] {
+        --badge-fill: var(--color-primary);
+        --badge-ink: var(--color-primary-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="secondary"] {
+        --badge-fill: var(--color-secondary);
+        --badge-ink: var(--color-secondary-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="accent"] {
+        --badge-fill: var(--color-accent);
+        --badge-ink: var(--color-accent-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="neutral"] {
+        --badge-fill: var(--color-neutral);
+        --badge-ink: var(--color-neutral-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="info"] {
+        --badge-fill: var(--color-info);
+        --badge-ink: var(--color-info-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="success"] {
+        --badge-fill: var(--color-success);
+        --badge-ink: var(--color-success-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="warning"] {
+        --badge-fill: var(--color-warning);
+        --badge-ink: var(--color-warning-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-color="error"] {
+        --badge-fill: var(--color-error);
+        --badge-ink: var(--color-error-content);
+    }
+
+    [data-scope="badge"][data-part="root"][data-size="xs"] {
+        font-size: var(--text-xs);
+        padding: 0 var(--space-sm);
+    }
+
+    [data-scope="badge"][data-part="root"][data-size="sm"] {
+        font-size: var(--text-xs);
+        padding: 0 var(--space-md);
+    }
+
+    [data-scope="badge"][data-part="root"][data-size="lg"] {
+        font-size: var(--text-sm);
+        padding: var(--space-2xs) var(--space-lg);
+    }
+
+    [data-scope="badge"][data-part="root"][data-size="xl"] {
+        font-size: var(--text-md);
+        padding: var(--space-xs) var(--space-xl);
+    }
+}

package/dist/css/components/breadcrumbs.css

@@ -0,0 +1,102 @@
+@layer zero.recipes {
+    [data-scope="breadcrumbs"][data-part="root"] {
+        --bc-accent: var(--color-base-content);
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"] {
+        font-size: var(--text-sm);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="breadcrumbs"][data-part="list"] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-xs);
+        list-style: none;
+        margin: 0;
+        padding: var(--space-xs) 0;
+    }
+
+    [data-scope="breadcrumbs"][data-part="item"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"] {
+        color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+        text-decoration: none;
+        border-radius: var(--radius-selector);
+        transition: color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+        text-decoration: underline;
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"][data-state="active"] {
+        color: var(--bc-accent);
+        font-weight: var(--weight-semibold);
+        text-decoration: none;
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"]:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    [data-scope="breadcrumbs"][data-part="separator"] {
+        color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
+        user-select: none;
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
+        --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="secondary"] {
+        --bc-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="accent"] {
+        --bc-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="neutral"] {
+        --bc-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="info"] {
+        --bc-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="success"] {
+        --bc-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="warning"] {
+        --bc-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="error"] {
+        --bc-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-size="xs"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-size="sm"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-size="lg"] {
+        font-size: var(--text-md);
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-size="xl"] {
+        font-size: var(--text-lg);
+    }
+}