@sigx/zero-daisyui 0.2.0-beta.3 → 0.2.0-beta.4

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

@@ -1,6 +1,5 @@
 .zx-file-upload__root {
     --fu-accent: var(--color-primary);
-    --fu-pad: var(--space-lg);
     --fu-font: var(--text-sm);
 }
 
@@ -21,7 +20,7 @@
 
 .zx-file-upload__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--space-xs);
     padding: var(--space-xs) var(--space-lg);
@@ -51,7 +50,7 @@
 
 .zx-file-upload__dropzone {
     justify-self: stretch;
-    padding: var(--fu-pad);
+    padding: var(--space-lg);
     text-align: center;
     font-size: var(--fu-font);
     border: calc(var(--border) * 2) dashed var(--color-base-300);
@@ -60,6 +59,22 @@
     cursor: pointer;
 }
 
+.zx-file-upload__dropzone.zx-a-size-xs {
+    padding: var(--space-sm);
+}
+
+.zx-file-upload__dropzone.zx-a-size-sm {
+    padding: var(--space-md);
+}
+
+.zx-file-upload__dropzone.zx-a-size-lg {
+    padding: var(--space-xl);
+}
+
+.zx-file-upload__dropzone.zx-a-size-xl {
+    padding: calc(var(--space-xl) * 1.25);
+}
+
 .zx-root .zx-file-upload__dropzone {
     color: #07070899;
 }
@@ -329,21 +344,17 @@
 }
 
 .zx-file-upload__root.zx-a-size-xs {
-    --fu-pad: var(--space-sm);
     --fu-font: var(--text-xs);
 }
 
 .zx-file-upload__root.zx-a-size-sm {
-    --fu-pad: var(--space-md);
     --fu-font: var(--text-xs);
 }
 
 .zx-file-upload__root.zx-a-size-lg {
-    --fu-pad: var(--space-xl);
     --fu-font: var(--text-md);
 }
 
 .zx-file-upload__root.zx-a-size-xl {
-    --fu-pad: calc(var(--space-xl) * 1.25);
     --fu-font: var(--text-md);
 }

package/dist/lynx/components/indicator.css

@@ -1,6 +1,6 @@
 .zx-indicator__root {
     position: relative;
-    display: inline-flex;
+    display: flex;
     vertical-align: middle;
     max-width: max-content;
 }

package/dist/lynx/components/input.css

@@ -3,7 +3,7 @@
 }
 
 .zx-input__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -38,7 +38,7 @@
 }
 
 .zx-input__control {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);

package/dist/lynx/components/join.css

@@ -1,5 +1,5 @@
 .zx-join__root {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
 }
 

package/dist/lynx/components/kbd.css

@@ -4,7 +4,7 @@
 }
 
 .zx-kbd__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     min-inline-size: 1.75em;

package/dist/lynx/components/menu.css

@@ -1,6 +1,6 @@
 .zx-menu__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;

package/dist/lynx/components/native-select.css

@@ -4,7 +4,7 @@
 
 .zx-native-select__root {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
 }
 

package/dist/lynx/components/number-input.css

@@ -3,7 +3,7 @@
 }
 
 .zx-number-input__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -38,7 +38,7 @@
 }
 
 .zx-number-input__control {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);

package/dist/lynx/components/pagination.css

@@ -1,7 +1,6 @@
 .zx-pagination__root {
     --pg-accent: var(--color-primary);
     --pg-accent-content: var(--color-primary-content);
-    --pg-size: calc(var(--size-field) * 10);
     --pg-font: var(--text-sm);
 }
 
@@ -12,11 +11,11 @@
 }
 
 .zx-pagination__item {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     padding-inline: var(--space-2xs);
     background: var(--color-base-200);
     color: var(--color-base-content);
@@ -30,6 +29,26 @@
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
 }
 
+.zx-pagination__item.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__item.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__item.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__item.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-pagination__item.zx-s-active {
     background: var(--pg-accent);
     color: var(--pg-accent-content);
@@ -46,15 +65,35 @@
 }
 
 .zx-pagination__ellipsis {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     font-size: var(--pg-font);
     user-select: none;
 }
 
+.zx-pagination__ellipsis.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__ellipsis.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__ellipsis.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__ellipsis.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-root .zx-pagination__ellipsis {
     color: #08080aa6;
 }
@@ -76,11 +115,11 @@
 }
 
 .zx-pagination__prev-trigger {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     background: var(--color-base-200);
     color: var(--color-base-content);
     border: none;
@@ -92,6 +131,26 @@
     transition: background var(--duration-fast) var(--ease-standard);
 }
 
+.zx-pagination__prev-trigger.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__prev-trigger.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__prev-trigger.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__prev-trigger.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-pagination__prev-trigger.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -103,11 +162,11 @@
 }
 
 .zx-pagination__next-trigger {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     background: var(--color-base-200);
     color: var(--color-base-content);
     border: none;
@@ -119,6 +178,26 @@
     transition: background var(--duration-fast) var(--ease-standard);
 }
 
+.zx-pagination__next-trigger.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__next-trigger.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__next-trigger.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__next-trigger.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-pagination__next-trigger.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -170,19 +249,9 @@
 }
 
 .zx-pagination__root.zx-a-size-xs {
-    --pg-size: calc(var(--size-field) * 7);
     --pg-font: var(--text-xs);
 }
 
-.zx-pagination__root.zx-a-size-sm {
-    --pg-size: calc(var(--size-field) * 9);
-}
-
-.zx-pagination__root.zx-a-size-lg {
-    --pg-size: calc(var(--size-field) * 12);
-}
-
 .zx-pagination__root.zx-a-size-xl {
-    --pg-size: calc(var(--size-field) * 14);
     --pg-font: var(--text-lg);
 }

package/dist/lynx/components/popover.css

@@ -1,6 +1,6 @@
 .zx-popover__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -57,7 +57,7 @@
 
 .zx-popover__close {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;

package/dist/lynx/components/progress.css

@@ -1,7 +1,3 @@
-.zx-progress__root {
-    --progress-track-size: calc(var(--size-selector) * 2.5);
-}
-
 .zx-root .zx-progress__root {
     --progress-accent: #4c45db;
 }
@@ -36,12 +32,28 @@
 
 .zx-progress__track {
     width: 100%;
-    height: var(--progress-track-size);
+    height: calc(var(--size-selector) * 2.5);
     background: var(--color-base-300);
     border-radius: var(--radius-box);
     overflow: hidden;
 }
 
+.zx-progress__track.zx-a-size-xs {
+    height: var(--size-selector);
+}
+
+.zx-progress__track.zx-a-size-sm {
+    height: calc(var(--size-selector) * 1.5);
+}
+
+.zx-progress__track.zx-a-size-lg {
+    height: calc(var(--size-selector) * 3.5);
+}
+
+.zx-progress__track.zx-a-size-xl {
+    height: calc(var(--size-selector) * 4.5);
+}
+
 .zx-progress__range {
     height: 100%;
     background: var(--progress-accent);
@@ -238,26 +250,6 @@
 .zx-root.zx-theme-sunset .zx-progress__root.zx-a-color-error {
     --progress-accent: #e4a7a9;
 }
-
-.zx-progress__root.zx-a-size-xs {
-    --progress-track-size: var(--size-selector);
-}
-
-.zx-progress__root.zx-a-size-sm {
-    --progress-track-size: calc(var(--size-selector) * 1.5);
-}
-
-.zx-progress__root.zx-a-size-md {
-    --progress-track-size: calc(var(--size-selector) * 2.5);
-}
-
-.zx-progress__root.zx-a-size-lg {
-    --progress-track-size: calc(var(--size-selector) * 3.5);
-}
-
-.zx-progress__root.zx-a-size-xl {
-    --progress-track-size: calc(var(--size-selector) * 4.5);
-}
 @keyframes zero-daisy-indeterminate {
     from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }
 }

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

@@ -1,6 +1,4 @@
 .zx-radial-progress__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);
 }
@@ -9,11 +7,31 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: var(--radial-size);
-    block-size: var(--radial-size);
+    inline-size: calc(var(--size-selector) * 16);
+    block-size: calc(var(--size-selector) * 16);
     border-radius: 50%;
 }
 
+.zx-radial-progress__root.zx-a-size-xs {
+    inline-size: calc(var(--size-selector) * 10);
+    block-size: calc(var(--size-selector) * 10);
+}
+
+.zx-radial-progress__root.zx-a-size-sm {
+    inline-size: calc(var(--size-selector) * 13);
+    block-size: calc(var(--size-selector) * 13);
+}
+
+.zx-radial-progress__root.zx-a-size-lg {
+    inline-size: calc(var(--size-selector) * 20);
+    block-size: calc(var(--size-selector) * 20);
+}
+
+.zx-radial-progress__root.zx-a-size-xl {
+    inline-size: calc(var(--size-selector) * 24);
+    block-size: calc(var(--size-selector) * 24);
+}
+
 .zx-root .zx-radial-progress__root.zx-s-complete {
     --radial-ink: #00748c;
 }
@@ -96,26 +114,6 @@
 .zx-radial-progress__root.zx-a-color-error {
     --radial-ink: var(--color-error);
 }
-
-.zx-radial-progress__root.zx-a-size-xs {
-    --radial-size: calc(var(--size-selector) * 10);
-    --radial-thickness: calc(var(--size-selector) * 1);
-}
-
-.zx-radial-progress__root.zx-a-size-sm {
-    --radial-size: calc(var(--size-selector) * 13);
-    --radial-thickness: calc(var(--size-selector) * 1.25);
-}
-
-.zx-radial-progress__root.zx-a-size-lg {
-    --radial-size: calc(var(--size-selector) * 20);
-    --radial-thickness: calc(var(--size-selector) * 2);
-}
-
-.zx-radial-progress__root.zx-a-size-xl {
-    --radial-size: calc(var(--size-selector) * 24);
-    --radial-thickness: calc(var(--size-selector) * 2.5);
-}
 @keyframes zero-daisyui-radial-spin {
     to { transform: rotate(360deg); }
 }

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

@@ -1,5 +1,4 @@
 .zx-radio-group__root {
-    --radio-size: calc(var(--size-selector) * 6);
     --radio-pad: 0.25rem;
     --radio-accent: var(--color-primary);
 }
@@ -20,7 +19,7 @@
 }
 
 .zx-radio-group__item {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.625rem;
     cursor: pointer;
@@ -37,8 +36,8 @@
     vertical-align: middle;
     flex-shrink: 0;
     box-sizing: border-box;
-    width: var(--radio-size);
-    height: var(--radio-size);
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
     padding: var(--radio-pad);
     border-radius: 9999px;
     color: var(--radio-accent);
@@ -47,6 +46,26 @@
     transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
 }
 
+.zx-radio-group__item-control.zx-a-size-xs {
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
+}
+
+.zx-radio-group__item-control.zx-a-size-sm {
+    width: calc(var(--size-selector) * 5);
+    height: calc(var(--size-selector) * 5);
+}
+
+.zx-radio-group__item-control.zx-a-size-lg {
+    width: calc(var(--size-selector) * 7);
+    height: calc(var(--size-selector) * 7);
+}
+
+.zx-radio-group__item-control.zx-a-size-xl {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
 .zx-radio-group__item-control.zx-s-checked {
     border-color: currentColor;
     animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
@@ -111,7 +130,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-xs {
-    --radio-size: calc(var(--size-selector) * 4);
     --radio-pad: 0.125rem;
 }
 
@@ -120,7 +138,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-sm {
-    --radio-size: calc(var(--size-selector) * 5);
     --radio-pad: 0.1875rem;
 }
 
@@ -129,7 +146,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-md {
-    --radio-size: calc(var(--size-selector) * 6);
     --radio-pad: 0.25rem;
 }
 
@@ -138,7 +154,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-lg {
-    --radio-size: calc(var(--size-selector) * 7);
     --radio-pad: 0.3125rem;
 }
 
@@ -147,7 +162,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-xl {
-    --radio-size: calc(var(--size-selector) * 8);
     --radio-pad: 0.375rem;
 }
 

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

@@ -1,7 +1,3 @@
-.zx-rating-group__root {
-    --rating-size: calc(var(--size-selector) * 6);
-}
-
 .zx-root .zx-rating-group__root {
     --rating-fill: #c68005;
 }
@@ -23,7 +19,7 @@
 }
 
 .zx-rating-group__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -58,7 +54,7 @@
 }
 
 .zx-rating-group__control {
-    display: inline-flex;
+    display: flex;
     gap: var(--space-2xs);
 }
 
@@ -73,7 +69,7 @@
 }
 
 .zx-rating-group__item {
-    font-size: var(--rating-size);
+    font-size: calc(var(--size-selector) * 6);
     line-height: var(--leading-none);
     cursor: pointer;
     user-select: none;
@@ -84,6 +80,22 @@
     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);
 }
 
+.zx-rating-group__item.zx-a-size-xs {
+    font-size: calc(var(--size-selector) * 4);
+}
+
+.zx-rating-group__item.zx-a-size-sm {
+    font-size: calc(var(--size-selector) * 5);
+}
+
+.zx-rating-group__item.zx-a-size-lg {
+    font-size: calc(var(--size-selector) * 7);
+}
+
+.zx-rating-group__item.zx-a-size-xl {
+    font-size: calc(var(--size-selector) * 8);
+}
+
 .zx-root .zx-rating-group__item {
     color: #07070899;
 }
@@ -291,19 +303,3 @@
 .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-error {
     --rating-fill: #b18182;
 }
-
-.zx-rating-group__root.zx-a-size-xs {
-    --rating-size: calc(var(--size-selector) * 4);
-}
-
-.zx-rating-group__root.zx-a-size-sm {
-    --rating-size: calc(var(--size-selector) * 5);
-}
-
-.zx-rating-group__root.zx-a-size-lg {
-    --rating-size: calc(var(--size-selector) * 7);
-}
-
-.zx-rating-group__root.zx-a-size-xl {
-    --rating-size: calc(var(--size-selector) * 8);
-}

package/dist/lynx/components/select.css

@@ -3,13 +3,13 @@
 }
 
 .zx-select__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
 }
 
 .zx-select__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--space-lg);

package/dist/lynx/components/slider.css

@@ -52,6 +52,7 @@
 .zx-slider__range {
     height: 100%;
     border-radius: 9999px;
+    background: var(--slider-accent);
 }
 
 .zx-slider__thumb {
@@ -62,9 +63,11 @@
     translate: 0 -50%;
     margin-inline-start: calc(var(--size-selector) * -2.5);
     border-radius: 9999px;
+    background: var(--color-base-100);
     cursor: pointer;
     outline: none;
     touch-action: none;
+    border: 0.25rem solid var(--slider-accent);
 }
 
 .zx-slider__thumb.zx-f-focus-visible {