@sigx/zero-daisyui 0.2.0-beta.1

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

@@ -0,0 +1,198 @@
+@layer zero.recipes {
+    [data-scope="file-upload"][data-part="root"] {
+        --fu-accent: var(--color-primary);
+        --fu-pad: var(--space-lg);
+        --fu-font: var(--text-sm);
+    }
+
+    [data-scope="file-upload"][data-part="root"] {
+        display: grid;
+        gap: var(--space-sm);
+        justify-items: start;
+    }
+
+    [data-scope="file-upload"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="file-upload"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="file-upload"][data-part="trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        padding: var(--space-xs) var(--space-lg);
+        font-size: var(--fu-font);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        cursor: pointer;
+    }
+
+    [data-scope="file-upload"][data-part="trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-pressed]:not([data-disabled]) {
+        translate: 0 1px;
+    }
+
+    [data-scope="file-upload"][data-part="dropzone"] {
+        justify-self: stretch;
+        padding: var(--fu-pad);
+        text-align: center;
+        font-size: var(--fu-font);
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+        border: calc(var(--border) * 2) dashed var(--color-base-300);
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+        cursor: pointer;
+    }
+
+    [data-scope="file-upload"][data-part="dropzone"][data-highlighted] {
+        border-color: var(--fu-accent);
+        background: color-mix(in oklab, var(--fu-accent) 8%, var(--color-base-100));
+        color: var(--color-base-content);
+    }
+
+    [data-scope="file-upload"][data-part="dropzone"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="file-upload"][data-part="item-group"] {
+        justify-self: stretch;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        gap: var(--space-xs);
+    }
+
+    [data-scope="file-upload"][data-part="item"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        padding: var(--space-xs) var(--space-md);
+        border: var(--border) solid var(--color-base-200);
+        border-radius: var(--radius-field);
+        background: var(--color-base-100);
+    }
+
+    [data-scope="file-upload"][data-part="item"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="file-upload"][data-part="item-name"] {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--fu-font);
+    }
+
+    [data-scope="file-upload"][data-part="item-size"] {
+        font-size: var(--text-xs);
+        font-variant-numeric: tabular-nums;
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+
+    [data-scope="file-upload"][data-part="item-remove"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        border-radius: 9999px;
+        padding: var(--space-2xs) var(--space-xs);
+        line-height: var(--leading-none);
+        cursor: pointer;
+    }
+
+    [data-scope="file-upload"][data-part="item-remove"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="file-upload"][data-part="item-remove"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="file-upload"][data-part="item-remove"][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));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="secondary"] {
+        --fu-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="accent"] {
+        --fu-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="neutral"] {
+        --fu-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="info"] {
+        --fu-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="success"] {
+        --fu-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="warning"] {
+        --fu-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-color="error"] {
+        --fu-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-size="xs"] {
+        --fu-pad: var(--space-sm);
+        --fu-font: var(--text-xs);
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-size="sm"] {
+        --fu-pad: var(--space-md);
+        --fu-font: var(--text-xs);
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-size="lg"] {
+        --fu-pad: var(--space-xl);
+        --fu-font: var(--text-md);
+    }
+
+    [data-scope="file-upload"][data-part="root"][data-size="xl"] {
+        --fu-pad: calc(var(--space-xl) * 1.25);
+        --fu-font: var(--text-md);
+    }
+}

package/dist/css/components/indicator.css

@@ -0,0 +1,166 @@
+@layer zero.recipes {
+    [data-scope="indicator"][data-part="root"] {
+        position: relative;
+        display: inline-flex;
+        vertical-align: middle;
+        max-width: max-content;
+    }
+
+    [data-scope="indicator"][data-part="item"] {
+        position: absolute;
+        z-index: 1;
+        white-space: nowrap;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="top-start"] {
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        translate: -50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="top"] {
+        inset-block-start: 0;
+        inset-inline-start: 50%;
+        translate: -50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="top-end"] {
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        translate: 50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="start"] {
+        inset-block-start: 50%;
+        inset-inline-start: 0;
+        translate: -50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="end"] {
+        inset-block-start: 50%;
+        inset-inline-end: 0;
+        translate: 50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="bottom-start"] {
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        translate: -50% 50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="bottom"] {
+        inset-block-end: 0;
+        inset-inline-start: 50%;
+        translate: -50% 50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="bottom-end"] {
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        translate: 50% 50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="top-start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: 50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="top"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: 50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="top-end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: -50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: 50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: -50% -50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="bottom-start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: 50% 50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="bottom"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: 50% 50%;
+    }
+
+    [data-scope="indicator"][data-part="item"][data-placement="bottom-end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        translate: -50% 50%;
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="primary"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-primary);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="secondary"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-secondary);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="accent"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-accent);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="neutral"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-neutral);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="info"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-info);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="success"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-success);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="warning"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-warning);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-color="error"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            color: var(--color-error);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-size="xs"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-size="sm"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-size="lg"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="indicator"][data-part="root"][data-size="xl"]) to ([data-scope="indicator"][data-part="root"]) {
+        [data-scope="indicator"][data-part="item"] {
+            font-size: var(--text-lg);
+        }
+    }
+}

package/dist/css/components/input.css

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

package/dist/css/components/join.css

@@ -0,0 +1,122 @@
+@layer zero.recipes {
+    [data-scope="join"][data-part="root"] {
+        display: inline-flex;
+        align-items: stretch;
+    }
+
+    [data-scope="join"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    [data-scope="join"][data-part="item"] {
+        position: relative;
+    }
+
+    [data-scope="join"][data-part="item"][data-orientation="horizontal"]:not(:first-child), [data-scope="join"][data-part="item"][data-orientation="horizontal"]:not(:first-child) > * {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+    }
+
+    [data-scope="join"][data-part="item"][data-orientation="horizontal"]:not(:first-child) {
+        margin-inline-start: calc(var(--border) * -1);
+    }
+
+    [data-scope="join"][data-part="item"][data-orientation="horizontal"]:not(:last-child), [data-scope="join"][data-part="item"][data-orientation="horizontal"]:not(:last-child) > * {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    [data-scope="join"][data-part="item"][data-orientation="vertical"]:not(:first-child), [data-scope="join"][data-part="item"][data-orientation="vertical"]:not(:first-child) > * {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+    }
+
+    [data-scope="join"][data-part="item"][data-orientation="vertical"]:not(:first-child) {
+        margin-block-start: calc(var(--border) * -1);
+    }
+
+    [data-scope="join"][data-part="item"][data-orientation="vertical"]:not(:last-child), [data-scope="join"][data-part="item"][data-orientation="vertical"]:not(:last-child) > * {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    [data-scope="join"][data-part="item"]:focus-within {
+        z-index: 1;
+    }
+
+    [data-scope="join"][data-part="item"]:focus-visible {
+        z-index: 1;
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="primary"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-primary);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="secondary"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-secondary);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="accent"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-accent);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="neutral"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-neutral);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="info"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-info);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="success"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-success);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="warning"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-warning);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-color="error"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            color: var(--color-error);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-size="xs"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-size="sm"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-size="lg"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="join"][data-part="root"][data-size="xl"]) to ([data-scope="join"][data-part="root"]) {
+        [data-scope="join"][data-part="item"] {
+            font-size: var(--text-lg);
+        }
+    }
+}