@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/select.css

@@ -0,0 +1,212 @@
+@layer zero.recipes {
+    [data-scope="select"][data-part="root"] {
+        --select-accent: var(--color-primary);
+    }
+
+    [data-scope="select"][data-part="root"] {
+        display: inline-flex;
+        flex-direction: column;
+    }
+
+    [data-scope="select"][data-part="trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-lg);
+        height: calc(var(--size-field) * 12);
+        padding-inline: calc(var(--size-field) * 4);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-medium);
+        color: var(--color-base-content);
+        background: var(--color-base-100);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        cursor: pointer;
+        transition: background var(--duration-normal) var(--ease-standard);
+        box-sizing: border-box;
+        min-width: 13rem;
+    }
+
+    [data-scope="select"][data-part="trigger"]:hover:not([data-disabled]) {
+        border-color: var(--color-base-content);
+    }
+
+    [data-scope="select"][data-part="trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="select"][data-part="trigger"][data-state="open"] {
+        border-color: var(--select-accent);
+    }
+
+    [data-scope="select"][data-part="trigger"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="select"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="select"][data-part="value"][data-placeholder] {
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+
+    [data-scope="select"][data-part="indicator"] {
+        opacity: 0.6;
+        transition: transform var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="select"][data-part="indicator"][data-state="open"] {
+        transform: rotate(180deg);
+    }
+
+    [data-scope="select"][data-part="popup"] {
+        opacity: 0;
+        transform: translateY(-4px);
+        transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-box);
+        box-shadow: var(--shadow-lg);
+        padding: var(--space-md);
+        min-width: 13rem;
+    }
+
+    [data-scope="select"][data-part="popup"][data-state="open"] {
+        opacity: 1;
+        transform: none;
+    }
+
+    [data-scope="select"][data-part="group-label"] {
+        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="select"][data-part="item"] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.625rem;
+        padding: var(--space-md) var(--space-lg);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-medium);
+        border-radius: var(--radius-field);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="select"][data-part="item"][data-highlighted] {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="select"][data-part="item"][data-selected] {
+        color: var(--select-accent);
+        font-weight: var(--weight-bold);
+    }
+
+    [data-scope="select"][data-part="item"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="select"][data-part="item-indicator"] {
+        font-size: var(--text-xs);
+        color: var(--select-accent);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="primary"] {
+        --select-accent: var(--color-primary);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="secondary"] {
+        --select-accent: var(--color-secondary);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="accent"] {
+        --select-accent: var(--color-accent);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="neutral"] {
+        --select-accent: var(--color-neutral);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="info"] {
+        --select-accent: var(--color-info);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="success"] {
+        --select-accent: var(--color-success);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="warning"] {
+        --select-accent: var(--color-warning);
+    }
+
+    [data-scope="select"][data-part="root"][data-color="error"] {
+        --select-accent: var(--color-error);
+    }
+
+    @scope ([data-scope="select"][data-part="root"][data-size="xs"]) to ([data-scope="select"][data-part="root"]) {
+        [data-scope="select"][data-part="trigger"] {
+            height: calc(var(--size-field) * 8);
+            padding-inline: calc(var(--size-field) * 2);
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="select"][data-part="root"][data-size="sm"]) to ([data-scope="select"][data-part="root"]) {
+        [data-scope="select"][data-part="trigger"] {
+            height: calc(var(--size-field) * 10);
+            padding-inline: calc(var(--size-field) * 3);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="select"][data-part="root"][data-size="md"]) to ([data-scope="select"][data-part="root"]) {
+        [data-scope="select"][data-part="trigger"] {
+            height: calc(var(--size-field) * 12);
+            padding-inline: calc(var(--size-field) * 4);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="select"][data-part="root"][data-size="lg"]) to ([data-scope="select"][data-part="root"]) {
+        [data-scope="select"][data-part="trigger"] {
+            height: calc(var(--size-field) * 14);
+            padding-inline: calc(var(--size-field) * 5);
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="select"][data-part="root"][data-size="xl"]) to ([data-scope="select"][data-part="root"]) {
+        [data-scope="select"][data-part="trigger"] {
+            height: calc(var(--size-field) * 16);
+            padding-inline: calc(var(--size-field) * 6);
+            font-size: var(--text-lg);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="select"][data-part="popup"] {
+            transition: none;
+        }
+
+        [data-scope="select"][data-part="popup"][data-state="open"] {
+            transform: none;
+        }
+    }
+
+    @starting-style {
+        [data-scope="select"][data-part="popup"][data-state="open"] {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+    }
+}

package/dist/css/components/skeleton.css

@@ -0,0 +1,74 @@
+@layer zero.recipes {
+    [data-scope="skeleton"][data-part="root"] {
+        --skeleton-fill: var(--color-base-300);
+    }
+
+    [data-scope="skeleton"][data-part="root"] {
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-state="loading"] {
+        color: transparent;
+        background: var(--skeleton-fill);
+        animation: zero-daisyui-skeleton 1.6s ease-in-out infinite;
+        user-select: none;
+        pointer-events: none;
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="primary"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-primary) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="secondary"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-secondary) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="accent"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-accent) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="neutral"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-neutral) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="info"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-info) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="success"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-success) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="warning"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-warning) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-color="error"] {
+        --skeleton-fill: color-mix(in oklab, var(--color-error) 20%, var(--color-base-300));
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-size="xs"] {
+        border-radius: var(--radius-selector);
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-size="sm"] {
+        border-radius: var(--radius-selector);
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-size="lg"] {
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="skeleton"][data-part="root"][data-size="xl"] {
+        border-radius: var(--radius-box);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="skeleton"][data-part="root"][data-state="loading"] {
+            animation: none;
+        }
+    }
+}
+@keyframes zero-daisyui-skeleton {
+    from, to { opacity: 1; } 50% { opacity: 0.55; }
+}

package/dist/css/components/slider.css

@@ -0,0 +1,182 @@
+@layer zero.recipes {
+    [data-scope="slider"][data-part="root"] {
+        --slider-accent: var(--color-primary);
+    }
+
+    [data-scope="slider"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        width: 100%;
+    }
+
+    [data-scope="slider"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="slider"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="slider"][data-part="control"] {
+        width: 100%;
+        accent-color: var(--slider-accent);
+        cursor: pointer;
+    }
+
+    [data-scope="slider"][data-part="control"][data-disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-scope="slider"][data-part="control"][data-focus-visible] {
+        outline: 2px solid var(--slider-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="slider"][data-part="control"][data-invalid] {
+        accent-color: var(--color-error);
+    }
+
+    [data-scope="slider"][data-part="track"] {
+        height: calc(var(--size-selector) * 2);
+        margin-block: calc(var(--size-selector) * 1.5);
+        border-radius: 9999px;
+        background: var(--color-base-300);
+        cursor: pointer;
+    }
+
+    [data-scope="slider"][data-part="track"][data-disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-scope="slider"][data-part="range"] {
+        height: 100%;
+        border-radius: 9999px;
+        background: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
+    }
+
+    [data-scope="slider"][data-part="thumb"] {
+        box-sizing: border-box;
+        width: calc(var(--size-selector) * 5);
+        height: calc(var(--size-selector) * 5);
+        inset-block-start: 50%;
+        translate: 0 -50%;
+        margin-inline-start: calc(var(--size-selector) * -2.5);
+        border-radius: 9999px;
+        background: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
+        cursor: pointer;
+        outline: none;
+        touch-action: none;
+    }
+
+    [data-scope="slider"][data-part="thumb"][data-focus-visible] {
+        outline: 2px solid var(--slider-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="slider"][data-part="thumb"][data-disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-scope="slider"][data-part="mark"] {
+        padding-block-start: calc(var(--size-selector) * 2 + var(--space-2xs));
+        font-size: var(--text-xs);
+        line-height: 1;
+        white-space: nowrap;
+        opacity: 0.6;
+    }
+
+    [data-scope="slider"][data-part="mark"]::before {
+        content: "";
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: -1px;
+        width: 2px;
+        height: calc(var(--size-selector) * 2);
+        background: var(--color-base-content);
+    }
+
+    [data-scope="slider"][data-part="value-text"] {
+        font-size: var(--text-xs);
+        opacity: 0.6;
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="primary"] {
+        --slider-accent: var(--color-primary);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="secondary"] {
+        --slider-accent: var(--color-secondary);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="accent"] {
+        --slider-accent: var(--color-accent);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="neutral"] {
+        --slider-accent: var(--color-neutral);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="info"] {
+        --slider-accent: var(--color-info);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="success"] {
+        --slider-accent: var(--color-success);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="warning"] {
+        --slider-accent: var(--color-warning);
+    }
+
+    [data-scope="slider"][data-part="root"][data-color="error"] {
+        --slider-accent: var(--color-error);
+    }
+
+    @scope ([data-scope="slider"][data-part="root"][data-size="xs"]) to ([data-scope="slider"][data-part="root"]) {
+        [data-scope="slider"][data-part="control"] {
+            height: calc(var(--size-selector) * 3);
+        }
+
+        [data-scope="slider"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="slider"][data-part="root"][data-size="sm"]) to ([data-scope="slider"][data-part="root"]) {
+        [data-scope="slider"][data-part="control"] {
+            height: calc(var(--size-selector) * 4);
+        }
+
+        [data-scope="slider"][data-part="label"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="slider"][data-part="root"][data-size="md"]) to ([data-scope="slider"][data-part="root"]) {
+        [data-scope="slider"][data-part="label"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="slider"][data-part="root"][data-size="lg"]) to ([data-scope="slider"][data-part="root"]) {
+        [data-scope="slider"][data-part="control"] {
+            height: calc(var(--size-selector) * 7);
+        }
+
+        [data-scope="slider"][data-part="label"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="slider"][data-part="root"][data-size="xl"]) to ([data-scope="slider"][data-part="root"]) {
+        [data-scope="slider"][data-part="control"] {
+            height: calc(var(--size-selector) * 8);
+        }
+
+        [data-scope="slider"][data-part="label"] {
+            font-size: var(--text-lg);
+        }
+    }
+}

package/dist/css/components/spinner.css

@@ -0,0 +1,75 @@
+@layer zero.recipes {
+    [data-scope="spinner"][data-part="root"] {
+        --spinner-size: calc(var(--size-field) * 0.5);
+        --spinner-ink: var(--color-primary);
+        --spinner-track: var(--color-base-300);
+    }
+
+    [data-scope="spinner"][data-part="root"] {
+        display: inline-block;
+        inline-size: var(--spinner-size);
+        block-size: var(--spinner-size);
+        box-sizing: border-box;
+        border-radius: 50%;
+        border: calc(var(--border) * 2) solid var(--spinner-track);
+        border-block-start-color: var(--spinner-ink);
+        animation: zero-daisyui-spin 0.7s linear infinite;
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="primary"] {
+        --spinner-ink: var(--color-primary);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="secondary"] {
+        --spinner-ink: var(--color-secondary);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="accent"] {
+        --spinner-ink: var(--color-accent);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="neutral"] {
+        --spinner-ink: var(--color-neutral);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="info"] {
+        --spinner-ink: var(--color-info);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="success"] {
+        --spinner-ink: var(--color-success);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="warning"] {
+        --spinner-ink: var(--color-warning);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-color="error"] {
+        --spinner-ink: var(--color-error);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-size="xs"] {
+        --spinner-size: calc(var(--size-field) * 0.35);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-size="sm"] {
+        --spinner-size: calc(var(--size-field) * 0.42);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-size="lg"] {
+        --spinner-size: calc(var(--size-field) * 0.7);
+    }
+
+    [data-scope="spinner"][data-part="root"][data-size="xl"] {
+        --spinner-size: calc(var(--size-field) * 0.9);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="spinner"][data-part="root"] {
+            animation: none;
+        }
+    }
+}
+@keyframes zero-daisyui-spin {
+    to { transform: rotate(360deg); }
+}

package/dist/css/components/stats.css

@@ -0,0 +1,115 @@
+@layer zero.recipes {
+    [data-scope="stats"][data-part="root"] {
+        --stats-accent: var(--color-base-content);
+    }
+
+    [data-scope="stats"][data-part="root"] {
+        display: flex;
+        border: var(--border) solid var(--color-base-200);
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+    }
+
+    [data-scope="stats"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    [data-scope="stats"][data-part="item"] {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        column-gap: var(--space-md);
+        align-content: center;
+        flex: 1 1 0%;
+        padding: var(--space-lg) var(--space-xl);
+    }
+
+    [data-scope="stats"][data-part="item"][data-orientation="horizontal"] + [data-scope="stats"][data-part="item"] {
+        border-inline-start: var(--border) solid var(--color-base-200);
+    }
+
+    [data-scope="stats"][data-part="item"][data-orientation="vertical"] + [data-scope="stats"][data-part="item"] {
+        border-block-start: var(--border) solid var(--color-base-200);
+    }
+
+    [data-scope="stats"][data-part="title"] {
+        grid-column: 1;
+        font-size: var(--text-xs);
+        color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="stats"][data-part="value"] {
+        grid-column: 1;
+        font-size: var(--text-2xl);
+        font-weight: var(--weight-bold);
+        font-variant-numeric: tabular-nums;
+        color: var(--stats-accent);
+    }
+
+    [data-scope="stats"][data-part="desc"] {
+        grid-column: 1;
+        font-size: var(--text-xs);
+        color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="stats"][data-part="figure"] {
+        grid-column: 2;
+        grid-row: 1 / span 3;
+        align-self: center;
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="primary"] {
+        --stats-accent: var(--color-primary);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="secondary"] {
+        --stats-accent: var(--color-secondary);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="accent"] {
+        --stats-accent: var(--color-accent);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="neutral"] {
+        --stats-accent: var(--color-neutral);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="info"] {
+        --stats-accent: var(--color-info);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="success"] {
+        --stats-accent: var(--color-success);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="warning"] {
+        --stats-accent: var(--color-warning);
+    }
+
+    [data-scope="stats"][data-part="root"][data-color="error"] {
+        --stats-accent: var(--color-error);
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-size="xs"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="value"] {
+            font-size: var(--text-lg);
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-size="sm"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="value"] {
+            font-size: var(--text-xl);
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-size="lg"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="value"] {
+            font-size: var(--text-3xl);
+        }
+    }
+
+    @scope ([data-scope="stats"][data-part="root"][data-size="xl"]) to ([data-scope="stats"][data-part="root"]) {
+        [data-scope="stats"][data-part="value"] {
+            font-size: var(--text-3xl);
+        }
+    }
+}