@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/progress.css

@@ -0,0 +1,109 @@
+@layer zero.recipes {
+    [data-scope="progress"][data-part="root"] {
+        --progress-accent: color-mix(in oklab, var(--color-primary) 90%, var(--color-primary-content));
+        --progress-track-size: calc(var(--size-selector) * 2.5);
+    }
+
+    [data-scope="progress"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        width: 100%;
+    }
+
+    [data-scope="progress"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="progress"][data-part="track"] {
+        width: 100%;
+        height: var(--progress-track-size);
+        background: var(--color-base-300);
+        border-radius: var(--radius-box);
+        overflow: hidden;
+    }
+
+    [data-scope="progress"][data-part="range"] {
+        height: 100%;
+        background: var(--progress-accent);
+        border-radius: var(--radius-box);
+        transition: width var(--duration-slow) var(--ease-standard);
+    }
+
+    [data-scope="progress"][data-part="range"][data-state="complete"] {
+        background: color-mix(in oklab, var(--color-success) 55%, var(--color-success-content));
+    }
+
+    [data-scope="progress"][data-part="range"][data-state="indeterminate"] {
+        width: 40%;
+        animation: zero-daisy-indeterminate 1.2s ease-in-out infinite;
+    }
+
+    [data-scope="progress"][data-part="value-text"] {
+        font-size: var(--text-xs);
+        opacity: 0.6;
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="primary"] {
+        --progress-accent: color-mix(in oklab, var(--color-primary) 90%, var(--color-primary-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="secondary"] {
+        --progress-accent: color-mix(in oklab, var(--color-secondary) 90%, var(--color-secondary-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="accent"] {
+        --progress-accent: color-mix(in oklab, var(--color-accent) 90%, var(--color-accent-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="neutral"] {
+        --progress-accent: color-mix(in oklab, var(--color-neutral) 90%, var(--color-neutral-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="info"] {
+        --progress-accent: color-mix(in oklab, var(--color-info) 90%, var(--color-info-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="success"] {
+        --progress-accent: color-mix(in oklab, var(--color-success) 90%, var(--color-success-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="warning"] {
+        --progress-accent: color-mix(in oklab, var(--color-warning) 90%, var(--color-warning-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-color="error"] {
+        --progress-accent: color-mix(in oklab, var(--color-error) 90%, var(--color-error-content));
+    }
+
+    [data-scope="progress"][data-part="root"][data-size="xs"] {
+        --progress-track-size: var(--size-selector);
+    }
+
+    [data-scope="progress"][data-part="root"][data-size="sm"] {
+        --progress-track-size: calc(var(--size-selector) * 1.5);
+    }
+
+    [data-scope="progress"][data-part="root"][data-size="md"] {
+        --progress-track-size: calc(var(--size-selector) * 2.5);
+    }
+
+    [data-scope="progress"][data-part="root"][data-size="lg"] {
+        --progress-track-size: calc(var(--size-selector) * 3.5);
+    }
+
+    [data-scope="progress"][data-part="root"][data-size="xl"] {
+        --progress-track-size: calc(var(--size-selector) * 4.5);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="progress"][data-part="range"][data-state="indeterminate"] {
+            animation: none;
+            width: 100%;
+        }
+    }
+}
+@keyframes zero-daisy-indeterminate {
+    from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }
+}

package/dist/css/components/radial-progress.css

@@ -0,0 +1,129 @@
+@layer zero.recipes {
+    [data-scope="radial-progress"][data-part="root"] {
+        --radial-size: calc(var(--size-selector) * 16);
+        --radial-thickness: calc(var(--size-selector) * 1.5);
+        --radial-ink: var(--color-primary);
+        --radial-track: var(--color-base-200);
+    }
+
+    [data-scope="radial-progress"][data-part="root"] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        inline-size: var(--radial-size);
+        block-size: var(--radial-size);
+        border-radius: 50%;
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-state="complete"] {
+        --radial-ink: color-mix(in oklch, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="radial-progress"][data-part="root"]::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 50%;
+        background: var(--radial-track);
+        mask: radial-gradient(closest-side, transparent calc(100% - var(--radial-thickness)), #000 calc(100% - var(--radial-thickness) + 0.5px));
+    }
+
+    [data-scope="radial-progress"][data-part="root"]::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 50%;
+        background: var(--radial-ink);
+        mask: radial-gradient(closest-side, transparent calc(100% - var(--radial-thickness)), #000 calc(100% - var(--radial-thickness) + 0.5px)), conic-gradient(#000 var(--progress-percent, 30%), transparent 0);
+        mask-composite: intersect;
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-state="indeterminate"]::after {
+        animation: zero-daisyui-radial-spin 1.2s linear infinite;
+    }
+
+    [data-scope="radial-progress"][data-part="label"] {
+        font-size: var(--text-xs);
+        color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="radial-progress"][data-part="value-text"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        font-variant-numeric: tabular-nums;
+        color: var(--color-base-content);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="primary"] {
+        --radial-ink: var(--color-primary);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="secondary"] {
+        --radial-ink: var(--color-secondary);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="accent"] {
+        --radial-ink: var(--color-accent);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="neutral"] {
+        --radial-ink: var(--color-neutral);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="info"] {
+        --radial-ink: var(--color-info);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="success"] {
+        --radial-ink: var(--color-success);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="warning"] {
+        --radial-ink: var(--color-warning);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-color="error"] {
+        --radial-ink: var(--color-error);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-size="xs"] {
+        --radial-size: calc(var(--size-selector) * 10);
+        --radial-thickness: calc(var(--size-selector) * 1);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-size="sm"] {
+        --radial-size: calc(var(--size-selector) * 13);
+        --radial-thickness: calc(var(--size-selector) * 1.25);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-size="lg"] {
+        --radial-size: calc(var(--size-selector) * 20);
+        --radial-thickness: calc(var(--size-selector) * 2);
+    }
+
+    [data-scope="radial-progress"][data-part="root"][data-size="xl"] {
+        --radial-size: calc(var(--size-selector) * 24);
+        --radial-thickness: calc(var(--size-selector) * 2.5);
+    }
+
+    @media (forced-colors: active) {
+        [data-scope="radial-progress"][data-part="root"] {
+            border: calc(var(--border) * 2) solid CanvasText;
+        }
+    }
+
+    @media print {
+        [data-scope="radial-progress"][data-part="root"] {
+            border: calc(var(--border) * 2) solid var(--radial-ink);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="radial-progress"][data-part="root"][data-state="indeterminate"]::after {
+            animation: none;
+        }
+    }
+}
+@keyframes zero-daisyui-radial-spin {
+    to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,176 @@
+@layer zero.recipes {
+    [data-scope="radio-group"][data-part="root"] {
+        --radio-size: calc(var(--size-selector) * 6);
+        --radio-pad: 0.25rem;
+        --radio-accent: var(--color-primary);
+    }
+
+    [data-scope="radio-group"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: 0.625rem;
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-invalid] [data-part="item-control"] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="radio-group"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="radio-group"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="radio-group"][data-part="item"] {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.625rem;
+        cursor: pointer;
+    }
+
+    [data-scope="radio-group"][data-part="item"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="radio-group"][data-part="item-control"] {
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: var(--radio-size);
+        height: var(--radio-size);
+        padding: var(--radio-pad);
+        border: var(--border) solid var(--radio-accent, color-mix(in srgb, currentColor 20%, #0000));
+        border-radius: 9999px;
+        color: var(--radio-accent);
+        background-color: var(--color-base-100);
+        box-shadow: 0 1px var(--depth-shade) inset;
+        transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="radio-group"][data-part="item-control"][data-state="checked"] {
+        border-color: currentColor;
+        animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
+    }
+
+    [data-scope="radio-group"][data-part="item-control"][data-focus-visible] {
+        outline: 2px solid var(--radio-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="radio-group"][data-part="item-indicator"] {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 9999px;
+        background-color: transparent;
+        background-size: auto, calc(var(--noise) * 100%);
+        background-image: none, var(--fx-noise);
+        transition: background-color var(--duration-instant) var(--ease-standard);
+    }
+
+    [data-scope="radio-group"][data-part="item-indicator"][data-state="checked"] {
+        background-color: currentColor;
+        box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
+    }
+
+    [data-scope="radio-group"][data-part="item-label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-medium);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="primary"] {
+        --radio-accent: var(--color-primary);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="secondary"] {
+        --radio-accent: var(--color-secondary);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="accent"] {
+        --radio-accent: var(--color-accent);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="neutral"] {
+        --radio-accent: var(--color-neutral);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="info"] {
+        --radio-accent: var(--color-info);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="success"] {
+        --radio-accent: var(--color-success);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="warning"] {
+        --radio-accent: var(--color-warning);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-color="error"] {
+        --radio-accent: var(--color-error);
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-size="xs"] {
+        --radio-size: calc(var(--size-selector) * 4);
+        --radio-pad: 0.125rem;
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-size="sm"] {
+        --radio-size: calc(var(--size-selector) * 5);
+        --radio-pad: 0.1875rem;
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-size="md"] {
+        --radio-size: calc(var(--size-selector) * 6);
+        --radio-pad: 0.25rem;
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-size="lg"] {
+        --radio-size: calc(var(--size-selector) * 7);
+        --radio-pad: 0.3125rem;
+    }
+
+    [data-scope="radio-group"][data-part="root"][data-size="xl"] {
+        --radio-size: calc(var(--size-selector) * 8);
+        --radio-pad: 0.375rem;
+    }
+
+    @scope ([data-scope="radio-group"][data-part="root"][data-size="xs"]) to ([data-scope="radio-group"][data-part="root"]) {
+        [data-scope="radio-group"][data-part="item-label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="radio-group"][data-part="root"][data-size="sm"]) to ([data-scope="radio-group"][data-part="root"]) {
+        [data-scope="radio-group"][data-part="item-label"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="radio-group"][data-part="root"][data-size="md"]) to ([data-scope="radio-group"][data-part="root"]) {
+        [data-scope="radio-group"][data-part="item-label"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="radio-group"][data-part="root"][data-size="lg"]) to ([data-scope="radio-group"][data-part="root"]) {
+        [data-scope="radio-group"][data-part="item-label"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="radio-group"][data-part="root"][data-size="xl"]) to ([data-scope="radio-group"][data-part="root"]) {
+        [data-scope="radio-group"][data-part="item-label"] {
+            font-size: var(--text-lg);
+        }
+    }
+}
+@keyframes zero-daisy-radio {
+    0% { padding: calc(var(--radio-pad) * 1.25); } 50% { padding: calc(var(--radio-pad) * 0.75); }
+}

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

@@ -0,0 +1,143 @@
+@layer zero.recipes {
+    [data-scope="rating-group"][data-part="root"] {
+        --rating-size: calc(var(--size-selector) * 6);
+        --rating-fill: color-mix(in oklab, var(--color-warning) 60%, var(--color-warning-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"] {
+        display: inline-flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    [data-scope="rating-group"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="rating-group"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="rating-group"][data-part="label"][data-invalid] {
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="rating-group"][data-part="control"] {
+        display: inline-flex;
+        gap: var(--space-2xs);
+    }
+
+    [data-scope="rating-group"][data-part="control"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="rating-group"][data-part="control"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+        border-radius: var(--radius-selector);
+    }
+
+    [data-scope="rating-group"][data-part="item"] {
+        font-size: var(--rating-size);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        user-select: none;
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+        mask-image: linear-gradient(black 0 0), linear-gradient(rgb(0 0 0 / 0.25) 0 0);
+        mask-repeat: no-repeat;
+        mask-position: 0 0, 0 0;
+        mask-size: 100% 100%, 100% 100%;
+        transition: color var(--duration-fast) var(--ease-standard), mask-size var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="rating-group"][data-part="item"][data-state="full"] {
+        color: var(--rating-fill);
+    }
+
+    [data-scope="rating-group"][data-part="item"][data-state="half"] {
+        color: var(--rating-fill);
+        mask-size: 50% 100%, 100% 100%;
+    }
+
+    [data-scope="rating-group"][data-part="item"][data-highlighted] {
+        transform: scale(1.15);
+        filter: brightness(1.1);
+    }
+
+    [data-scope="rating-group"][data-part="item"][data-disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-scope="rating-group"][data-part="item"][data-readonly] {
+        cursor: default;
+    }
+
+    [data-scope="rating-group"][data-part="item"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 1px;
+        border-radius: var(--radius-selector);
+    }
+
+    [data-scope="rating-group"][data-part="item"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        mask-position: 100% 0, 0 0;
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="primary"] {
+        --rating-fill: color-mix(in oklab, var(--color-primary) 70%, var(--color-primary-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="secondary"] {
+        --rating-fill: color-mix(in oklab, var(--color-secondary) 70%, var(--color-secondary-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="accent"] {
+        --rating-fill: color-mix(in oklab, var(--color-accent) 70%, var(--color-accent-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="neutral"] {
+        --rating-fill: color-mix(in oklab, var(--color-neutral) 70%, var(--color-neutral-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="info"] {
+        --rating-fill: color-mix(in oklab, var(--color-info) 70%, var(--color-info-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="success"] {
+        --rating-fill: color-mix(in oklab, var(--color-success) 70%, var(--color-success-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="warning"] {
+        --rating-fill: color-mix(in oklab, var(--color-warning) 60%, var(--color-warning-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-color="error"] {
+        --rating-fill: color-mix(in oklab, var(--color-error) 70%, var(--color-error-content));
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-size="xs"] {
+        --rating-size: calc(var(--size-selector) * 4);
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-size="sm"] {
+        --rating-size: calc(var(--size-selector) * 5);
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-size="lg"] {
+        --rating-size: calc(var(--size-selector) * 7);
+    }
+
+    [data-scope="rating-group"][data-part="root"][data-size="xl"] {
+        --rating-size: calc(var(--size-selector) * 8);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="rating-group"][data-part="item"] {
+            transition: none;
+        }
+
+        [data-scope="rating-group"][data-part="item"][data-highlighted] {
+            transform: none;
+        }
+    }
+}