@sigx/zero-daisyui 0.4.0 → 0.6.0

package/dist/components.d.ts

@@ -21,6 +21,7 @@ import type { Tooltip as ZTooltip } from '@sigx/zero/tooltip';
 import type { Menu as ZMenu } from '@sigx/zero/menu';
 import type { Field as ZField } from '@sigx/zero/field';
 import type { Checkbox as ZCheckbox } from '@sigx/zero/checkbox';
+import type { CheckboxGroup as ZCheckboxGroup } from '@sigx/zero/checkbox-group';
 import type { RadioGroup as ZRadioGroup } from '@sigx/zero/radio-group';
 import type { Progress as ZProgress } from '@sigx/zero/progress';
 import type { Slider as ZSlider } from '@sigx/zero/slider';
@@ -172,6 +173,14 @@ type CheckboxProps = {
 type CheckboxAdapted = Adapted<typeof ZCheckbox, ZeroAxisProp, CheckboxProps>;
 export declare const Checkbox: CheckboxAdapted & AdaptedStatics<typeof ZCheckbox> & { Root: CheckboxAdapted };
 
+/** checkbox-group — no vendor route; the wired surface keeps zero's names. */
+type CheckboxGroupProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+type CheckboxGroupAdapted = Adapted<typeof ZCheckboxGroup, ZeroAxisProp, CheckboxGroupProps>;
+export declare const CheckboxGroup: CheckboxGroupAdapted & AdaptedStatics<typeof ZCheckboxGroup> & { Root: CheckboxGroupAdapted };
+
 /** radio-group — no vendor route; the wired surface keeps zero's names. */
 type RadioGroupProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
@@ -364,7 +373,7 @@ type SpinnerProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 type SpinnerAdapted = Adapted<typeof ZSpinner, ZeroAxisProp, SpinnerProps>;
-export declare const Spinner: SpinnerAdapted & { Root: SpinnerAdapted };
+export declare const Spinner: SpinnerAdapted & AdaptedStatics<typeof ZSpinner> & { Root: SpinnerAdapted };
 
 /** kbd — no vendor route; the wired surface keeps zero's names. */
 type KbdProps = {
@@ -396,7 +405,10 @@ type StatsProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 type StatsAdapted = Adapted<typeof ZStats, ZeroAxisProp, StatsProps>;
-export declare const Stats: StatsAdapted & AdaptedStatics<typeof ZStats> & { Root: StatsAdapted };
+type StatsItemAdapted = Adapted<typeof ZStats.Item, 'color', {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+}>;
+export declare const Stats: StatsAdapted & Omit<AdaptedStatics<typeof ZStats>, 'Item'> & { Root: StatsAdapted; Item: StatsItemAdapted };
 
 /** timeline — no vendor route; the wired surface keeps zero's names. */
 type TimelineProps = {

package/dist/components.js

@@ -46,6 +46,7 @@ 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 { CheckboxGroup } from '@sigx/zero/checkbox-group';
 export { RadioGroup } from '@sigx/zero/radio-group';
 export { Progress } from '@sigx/zero/progress';
 export { Slider } from '@sigx/zero/slider';

package/dist/css/components/accordion.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="accordion"][data-part="root"] {
         --accordion-accent: var(--color-base-content);
@@ -9,6 +11,11 @@
         gap: var(--space-md);
     }
 
+    [data-scope="accordion"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+        align-items: start;
+    }
+
     [data-scope="accordion"][data-part="item"] {
         interpolate-size: allow-keywords;
         border: var(--border) solid var(--color-base-300);
@@ -20,11 +27,16 @@
     [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;
+        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
+    }
+
+    [data-scope="accordion"][data-part="root"][data-orientation="horizontal"] > [data-scope="accordion"][data-part="item"] {
+        flex: 1 1 0;
+        min-inline-size: 0;
     }
 
     [data-scope="accordion"][data-part="trigger"] {
@@ -77,6 +89,11 @@
         font-size: var(--text-md);
     }
 
+    [data-scope="accordion"][data-part="panel"][data-state="closed"] {
+        box-sizing: border-box;
+        animation: accordion-panel-exit var(--duration-normal) var(--ease-standard);
+    }
+
     [data-scope="accordion"][data-part="root"][data-color="primary"] {
         --accordion-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -158,8 +175,15 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-        [data-scope="accordion"][data-part="item"]::details-content {
+        [data-scope="accordion"][data-part="item"][open]::details-content {
             transition: none;
         }
+
+        [data-scope="accordion"][data-part="panel"][data-state="closed"] {
+            animation: none;
+        }
     }
 }
+@keyframes accordion-panel-exit {
+    from { block-size: var(--accordion-panel-height); } to { block-size: 0; padding-block: 0; }
+}

package/dist/css/components/alert.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="alert"][data-part="root"] {
         --alert-tint: var(--color-info-soft);

package/dist/css/components/avatar.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="avatar"][data-part="root"] {
         --avatar-size: calc(var(--size-selector) * 10);

package/dist/css/components/badge.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="badge"][data-part="root"] {
         --badge-dot: currentColor;

package/dist/css/components/box.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="box"][data-part="root"] {
         --box-surface: var(--color-base-100);

package/dist/css/components/breadcrumbs.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="breadcrumbs"][data-part="root"] {
         --bc-accent: var(--color-base-content);

package/dist/css/components/button.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="button"][data-part="root"] {
         --btn-accent: var(--color-primary);

package/dist/css/components/card.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="card"][data-part="root"] {
         --card-pad: var(--space-xl);

package/dist/css/components/carousel.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="carousel"][data-part="root"] {
         --carousel-accent: var(--color-base-content);

package/dist/css/components/center.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="center"][data-part="root"] {
         --l-axis: center;

package/dist/css/components/chat.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="chat"][data-part="root"] {
         --chat-fill: var(--color-base-200);

package/dist/css/components/checkbox-group.css

@@ -0,0 +1,98 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
+@layer zero.recipes {
+    [data-scope="checkbox-group"][data-part="root"] {
+        --checkbox-group-accent: var(--color-base-content);
+    }
+
+    [data-scope="checkbox-group"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--space-lg);
+    }
+
+    [data-scope="checkbox-group"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--checkbox-group-accent);
+    }
+
+    [data-scope="checkbox-group"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="checkbox-group"][data-part="label"][data-required]::after {
+        content: " *";
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="primary"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="secondary"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="accent"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="neutral"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="info"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="success"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="warning"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-color="error"] {
+        --checkbox-group-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-size="xs"] {
+        gap: var(--space-sm);
+    }
+
+    [data-scope="checkbox-group"][data-part="root"][data-size="xl"] {
+        gap: var(--space-lg);
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="xs"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="sm"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="lg"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="checkbox-group"][data-part="root"][data-size="xl"]) to ([data-scope="checkbox-group"][data-part="root"]) {
+        [data-scope="checkbox-group"][data-part="label"] {
+            font-size: var(--text-lg);
+        }
+    }
+}

package/dist/css/components/checkbox.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="checkbox"][data-part="root"] {
         --checkbox-size: calc(var(--size-selector) * 6);
@@ -13,6 +15,10 @@
         cursor: pointer;
     }
 
+    [data-scope="checkbox"][data-part="root"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="checkbox"][data-part="root"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -55,6 +61,10 @@
         border-color: var(--color-error);
     }
 
+    [data-scope="checkbox"][data-part="control"][data-readonly] {
+        cursor: default;
+    }
+
     [data-scope="checkbox"][data-part="indicator"] {
         display: block;
         width: 100%;

package/dist/css/components/collapsible.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="collapsible"][data-part="root"] {
         --collapsible-accent: var(--color-base-content);
@@ -15,11 +17,11 @@
     [data-scope="collapsible"][data-part="root"]::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="collapsible"][data-part="root"][open]::details-content {
         block-size: auto;
+        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
     }
 
     [data-scope="collapsible"][data-part="trigger"] {
@@ -69,6 +71,11 @@
         font-size: var(--text-md);
     }
 
+    [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
+        box-sizing: border-box;
+        animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
+    }
+
     [data-scope="collapsible"][data-part="root"][data-color="primary"] {
         --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -150,8 +157,15 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-        [data-scope="collapsible"][data-part="root"]::details-content {
+        [data-scope="collapsible"][data-part="root"][open]::details-content {
             transition: none;
         }
+
+        [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
+            animation: none;
+        }
     }
 }
+@keyframes collapsible-panel-exit {
+    from { block-size: var(--collapsible-panel-height); } to { block-size: 0; padding-block: 0; }
+}

package/dist/css/components/combobox.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="combobox"][data-part="root"] {
         --combobox-accent: var(--color-primary);
@@ -134,6 +136,23 @@
         cursor: not-allowed;
     }
 
+    [data-scope="combobox"][data-part="clear-trigger"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        opacity: 0.6;
+        padding: 0 var(--space-xs);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="combobox"][data-part="clear-trigger"]:hover:not([data-disabled]) {
+        opacity: 1;
+    }
+
     [data-scope="combobox"][data-part="popup"] {
         opacity: 0;
         transform: translateY(-4px);
@@ -144,7 +163,10 @@
         border-radius: var(--radius-box);
         box-shadow: var(--shadow-lg);
         padding: var(--space-md);
-        min-width: 13rem;
+        min-width: var(--anchor-width, 13rem);
+        box-sizing: border-box;
+        max-height: min(20rem, var(--available-height, 20rem));
+        overflow-y: auto;
     }
 
     [data-scope="combobox"][data-part="popup"][data-state="open"] {
@@ -159,6 +181,13 @@
         opacity: 0.6;
     }
 
+    [data-scope="combobox"][data-part="group-heading"] {
+        padding: var(--space-md) var(--space-lg) var(--space-xs);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-bold);
+        opacity: 0.6;
+    }
+
     [data-scope="combobox"][data-part="item"] {
         display: flex;
         align-items: center;
@@ -196,6 +225,19 @@
         opacity: 0.6;
     }
 
+    [data-scope="combobox"][data-part="loading"] {
+        padding: var(--space-lg);
+        font-size: var(--text-sm);
+        text-align: center;
+        opacity: 0.6;
+    }
+
+    [data-scope="combobox"][data-part="separator"] {
+        height: var(--border);
+        margin: var(--space-sm) var(--space-md);
+        background: var(--color-base-300);
+    }
+
     [data-scope="combobox"][data-part="root"][data-color="primary"] {
         --combobox-accent: var(--color-primary);
     }

package/dist/css/components/container.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="container"][data-part="root"] {
         --l-measure: none;

package/dist/css/components/countdown.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="countdown"][data-part="root"] {
         --countdown-ink: var(--color-base-content);

package/dist/css/components/dialog.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="dialog"][data-part="trigger"] {
         appearance: none;

package/dist/css/components/diff.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="diff"][data-part="root"] {
         --diff-accent: var(--color-base-content);
@@ -42,6 +44,11 @@
         outline-offset: 2px;
     }
 
+    [data-scope="diff"][data-part="handle"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
     [data-scope="diff"][data-part="handle"][data-pressed] {
         --diff-accent: color-mix(in oklab, var(--color-base-content) 85%, var(--color-base-100));
     }

package/dist/css/components/divider.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="divider"][data-part="root"] {
         --divider-ink: var(--color-base-300);

package/dist/css/components/drawer.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="drawer"][data-part="trigger"] {
         appearance: none;

package/dist/css/components/empty-state.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="empty-state"][data-part="root"] {
         --empty-accent: color-mix(in oklab, var(--color-base-content) 60%, transparent);

package/dist/css/components/field.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="field"][data-part="root"] {
         --field-accent: var(--color-base-content);

package/dist/css/components/file-upload.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="file-upload"][data-part="root"] {
         --fu-accent: var(--color-primary);
@@ -104,6 +106,11 @@
         opacity: var(--disabled-opacity);
     }
 
+    [data-scope="file-upload"][data-part="item"][data-invalid] {
+        border-color: var(--color-error);
+        background: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100));
+    }
+
     [data-scope="file-upload"][data-part="item-name"] {
         flex: 1 1 auto;
         min-width: 0;
@@ -144,6 +151,33 @@
         outline-offset: 2px;
     }
 
+    [data-scope="file-upload"][data-part="clear-trigger"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        border-radius: 9999px;
+        padding: var(--space-2xs) var(--space-sm);
+        font-size: var(--fu-font);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+    }
+
+    [data-scope="file-upload"][data-part="clear-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="file-upload"][data-part="clear-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="file-upload"][data-part="clear-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
     [data-scope="file-upload"][data-part="root"][data-color="primary"] {
         --fu-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }

package/dist/css/components/grid.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="grid"][data-part="root"] {
         --l-cols: none;

package/dist/css/components/indicator.css

@@ -1,3 +1,5 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
 @layer zero.recipes {
     [data-scope="indicator"][data-part="root"] {
         position: relative;