@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/tabs.css

@@ -0,0 +1,137 @@
+@layer zero.recipes {
+    [data-scope="tabs"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-lg);
+    }
+
+    [data-scope="tabs"][data-part="list"] {
+        display: inline-flex;
+        align-self: flex-start;
+        padding: var(--space-xs);
+        gap: var(--space-xs);
+        background: var(--color-base-200);
+        border-radius: var(--radius-field);
+    }
+
+    [data-scope="tabs"][data-part="tab"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        padding: var(--space-sm) var(--space-xl);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+        border-radius: calc(var(--radius-field) - 0.25rem);
+        cursor: pointer;
+        transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="tabs"][data-part="tab"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+    }
+
+    [data-scope="tabs"][data-part="tab"][data-state="active"] {
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        box-shadow: var(--shadow-sm);
+    }
+
+    [data-scope="tabs"][data-part="tab"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="tabs"][data-part="tab"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="tabs"][data-part="panel"] {
+        font-size: var(--text-md);
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-size="xs"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            font-size: var(--text-xs);
+            padding: var(--space-2xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-size="sm"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            font-size: var(--text-xs);
+            padding: var(--space-xs) var(--space-lg);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-size="lg"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            font-size: var(--text-md);
+            padding: var(--space-md) var(--space-2xl);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-size="xl"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            font-size: var(--text-lg);
+            padding: var(--space-lg) var(--space-2xl);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="primary"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-primary);
+            color: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-secondary);
+            color: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-accent);
+            color: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-neutral);
+            color: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-info);
+            color: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-success);
+            color: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-warning);
+            color: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-error);
+            color: var(--color-error-content);
+        }
+    }
+}

package/dist/css/components/textarea.css

@@ -0,0 +1,131 @@
+@layer zero.recipes {
+    [data-scope="textarea"][data-part="root"] {
+        --textarea-accent: var(--color-base-content);
+    }
+
+    [data-scope="textarea"][data-part="root"] {
+        display: inline-flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    [data-scope="textarea"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="textarea"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="textarea"][data-part="label"][data-invalid] {
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="textarea"][data-part="textarea"] {
+        box-sizing: border-box;
+        height: auto;
+        background: var(--color-base-100);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        display: block;
+        min-height: calc(calc(var(--size-field) * 12) * 2);
+        width: 100%;
+        min-width: 0;
+        appearance: none;
+        color: inherit;
+        font: inherit;
+        font-size: var(--text-sm);
+        line-height: var(--leading-normal);
+        padding: var(--space-sm) var(--space-md);
+        resize: vertical;
+        transition: border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="textarea"][data-part="textarea"]:hover:not([data-disabled]) {
+        border-color: var(--color-base-content);
+    }
+
+    [data-scope="textarea"][data-part="textarea"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="textarea"][data-part="textarea"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="textarea"][data-part="textarea"][data-focus-visible] {
+        outline: 2px solid var(--textarea-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="textarea"][data-part="textarea"]::placeholder {
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="primary"] {
+        --textarea-accent: var(--color-primary);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="secondary"] {
+        --textarea-accent: var(--color-secondary);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="accent"] {
+        --textarea-accent: var(--color-accent);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="neutral"] {
+        --textarea-accent: var(--color-neutral);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="info"] {
+        --textarea-accent: var(--color-info);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="success"] {
+        --textarea-accent: var(--color-success);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="warning"] {
+        --textarea-accent: var(--color-warning);
+    }
+
+    [data-scope="textarea"][data-part="root"][data-color="error"] {
+        --textarea-accent: var(--color-error);
+    }
+
+    @scope ([data-scope="textarea"][data-part="root"][data-size="xs"]) to ([data-scope="textarea"][data-part="root"]) {
+        [data-scope="textarea"][data-part="textarea"] {
+            font-size: var(--text-xs);
+            min-height: calc(calc(var(--size-field) * 8) * 2);
+            padding: var(--space-2xs) var(--space-xs);
+        }
+    }
+
+    @scope ([data-scope="textarea"][data-part="root"][data-size="sm"]) to ([data-scope="textarea"][data-part="root"]) {
+        [data-scope="textarea"][data-part="textarea"] {
+            font-size: var(--text-xs);
+            min-height: calc(calc(var(--size-field) * 10) * 2);
+            padding: var(--space-xs) var(--space-sm);
+        }
+    }
+
+    @scope ([data-scope="textarea"][data-part="root"][data-size="lg"]) to ([data-scope="textarea"][data-part="root"]) {
+        [data-scope="textarea"][data-part="textarea"] {
+            font-size: var(--text-md);
+            min-height: calc(calc(var(--size-field) * 14) * 2);
+            padding: var(--space-md) var(--space-lg);
+        }
+    }
+
+    @scope ([data-scope="textarea"][data-part="root"][data-size="xl"]) to ([data-scope="textarea"][data-part="root"]) {
+        [data-scope="textarea"][data-part="textarea"] {
+            font-size: var(--text-lg);
+            min-height: calc(calc(var(--size-field) * 16) * 2);
+            padding: var(--space-lg) var(--space-xl);
+        }
+    }
+}

package/dist/css/components/timeline.css

@@ -0,0 +1,204 @@
+@layer zero.recipes {
+    [data-scope="timeline"][data-part="root"] {
+        --timeline-accent: var(--color-base-content);
+        --timeline-marker-size: calc(var(--size-selector) * 3);
+    }
+
+    [data-scope="timeline"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    [data-scope="timeline"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+    }
+
+    [data-scope="timeline"][data-part="item"] {
+        display: grid;
+        position: relative;
+    }
+
+    [data-scope="timeline"][data-part="item"][data-orientation="vertical"] {
+        grid-template-columns: 1fr auto 1fr;
+        grid-template-rows: auto 1fr;
+    }
+
+    [data-scope="timeline"][data-part="item"][data-orientation="horizontal"] {
+        grid-template-rows: 1fr auto 1fr;
+        grid-template-columns: auto 1fr;
+        flex: 1 1 0%;
+    }
+
+    [data-scope="timeline"][data-part="marker"] {
+        inline-size: var(--timeline-marker-size);
+        block-size: var(--timeline-marker-size);
+        box-sizing: border-box;
+        border-radius: 9999px;
+        background: var(--timeline-accent);
+        border: calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0;
+    }
+
+    [data-scope="timeline"][data-part="item"][data-orientation="vertical"] > [data-scope="timeline"][data-part="marker"] {
+        grid-column: 2;
+        grid-row: 1;
+        place-self: center;
+    }
+
+    [data-scope="timeline"][data-part="item"][data-orientation="horizontal"] > [data-scope="timeline"][data-part="marker"] {
+        grid-row: 2;
+        grid-column: 1;
+        place-self: center;
+    }
+
+    [data-scope="timeline"][data-part="connector"] {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="timeline"][data-part="connector"][data-orientation="vertical"] {
+        grid-column: 2;
+        grid-row: 2;
+        justify-self: center;
+        inline-size: var(--border);
+        min-block-size: var(--space-lg);
+        block-size: 100%;
+    }
+
+    [data-scope="timeline"][data-part="connector"][data-orientation="horizontal"] {
+        grid-row: 2;
+        grid-column: 2;
+        align-self: center;
+        block-size: var(--border);
+        min-inline-size: var(--space-lg);
+        inline-size: 100%;
+    }
+
+    [data-scope="timeline"][data-part="content"] {
+        margin: var(--space-xs) var(--space-md);
+        padding: var(--space-xs) var(--space-md);
+        font-size: var(--text-sm);
+        border: var(--border) solid var(--color-base-200);
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="timeline"][data-part="content"][data-orientation="vertical"][data-placement="start"] {
+        grid-column: 1;
+        grid-row: 1;
+        justify-self: end;
+        text-align: end;
+    }
+
+    [data-scope="timeline"][data-part="content"][data-orientation="vertical"][data-placement="end"] {
+        grid-column: 3;
+        grid-row: 1;
+        justify-self: start;
+    }
+
+    [data-scope="timeline"][data-part="content"][data-orientation="horizontal"][data-placement="start"] {
+        grid-row: 1;
+        grid-column: 1;
+        align-self: end;
+    }
+
+    [data-scope="timeline"][data-part="content"][data-orientation="horizontal"][data-placement="end"] {
+        grid-row: 3;
+        grid-column: 1;
+        align-self: start;
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="primary"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-primary);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="secondary"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-secondary);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="accent"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-accent);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="neutral"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-neutral);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="info"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-info);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="success"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-success);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="warning"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-warning);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-color="error"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-accent: var(--color-error);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-size="xs"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-marker-size: calc(var(--size-selector) * 2);
+        }
+
+        [data-scope="timeline"][data-part="content"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-size="sm"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-marker-size: calc(var(--size-selector) * 2.5);
+        }
+
+        [data-scope="timeline"][data-part="content"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-size="lg"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-marker-size: calc(var(--size-selector) * 3.5);
+        }
+
+        [data-scope="timeline"][data-part="content"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="timeline"][data-part="root"][data-size="xl"]) to ([data-scope="timeline"][data-part="root"]) {
+        [data-scope="timeline"][data-part="marker"] {
+            --timeline-marker-size: calc(var(--size-selector) * 4);
+        }
+
+        [data-scope="timeline"][data-part="content"] {
+            font-size: var(--text-md);
+        }
+    }
+}