@sigx/zero-daisyui 0.4.0 → 0.6.0

package/dist/lynx/components/input.css

@@ -40,6 +40,7 @@
 .zx-input__control {
     display: flex;
     align-items: stretch;
+    gap: var(--space-2xs);
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);
     background: var(--color-base-100);
@@ -80,6 +81,135 @@
     cursor: not-allowed;
 }
 
+.zx-input__adornment {
+    display: flex;
+    align-items: center;
+    flex: none;
+    font-size: var(--text-sm);
+    line-height: var(--leading-none);
+}
+
+.zx-root .zx-input__adornment {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-input__adornment {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-input__adornment {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-input__adornment {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-input__adornment {
+    color: #9fb9d0b3;
+}
+
+.zx-input__adornment.zx-p-start {
+    order: -1;
+}
+
+.zx-input__adornment.zx-p-end {
+    order: 1;
+}
+
+.zx-input__clear-trigger {
+    appearance: none;
+    border: none;
+    background: transparent;
+    border-radius: 9999px;
+    align-self: center;
+    flex: none;
+    order: 1;
+    padding: var(--space-2xs) var(--space-xs);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-none);
+    cursor: pointer;
+}
+
+.zx-root .zx-input__clear-trigger {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-input__clear-trigger {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-input__clear-trigger {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-input__clear-trigger {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-input__clear-trigger {
+    color: #9fb9d0b3;
+}
+
+.zx-input__clear-trigger.zx-f-disabled {
+    cursor: not-allowed;
+}
+
+.zx-input__clear-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-input__visibility-trigger {
+    appearance: none;
+    border: none;
+    background: transparent;
+    border-radius: 9999px;
+    align-self: center;
+    flex: none;
+    order: 1;
+    padding: var(--space-2xs) var(--space-xs);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-none);
+    cursor: pointer;
+}
+
+.zx-root .zx-input__visibility-trigger {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-input__visibility-trigger {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-input__visibility-trigger {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-input__visibility-trigger {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-input__visibility-trigger {
+    color: #9fb9d0b3;
+}
+
+.zx-input__visibility-trigger.zx-s-on {
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+}
+
+.zx-input__visibility-trigger.zx-f-disabled {
+    cursor: not-allowed;
+}
+
+.zx-input__visibility-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
 .zx-input__root.zx-a-color-primary {
     --input-accent: var(--color-primary);
 }
@@ -121,6 +251,18 @@
     padding: var(--space-2xs) var(--space-xs);
 }
 
+.zx-input__adornment.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-input__clear-trigger.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-input__visibility-trigger.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
 .zx-input__control.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
 }
@@ -130,6 +272,18 @@
     padding: var(--space-xs) var(--space-sm);
 }
 
+.zx-input__adornment.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
+.zx-input__clear-trigger.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
+.zx-input__visibility-trigger.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
 .zx-input__control.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
 }
@@ -139,6 +293,18 @@
     padding: var(--space-md) var(--space-lg);
 }
 
+.zx-input__adornment.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-input__clear-trigger.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-input__visibility-trigger.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
 .zx-input__control.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
 }
@@ -147,3 +313,15 @@
     font-size: var(--text-lg);
     padding: var(--space-lg) var(--space-xl);
 }
+
+.zx-input__adornment.zx-a-size-xl {
+    font-size: var(--text-lg);
+}
+
+.zx-input__clear-trigger.zx-a-size-xl {
+    font-size: var(--text-lg);
+}
+
+.zx-input__visibility-trigger.zx-a-size-xl {
+    font-size: var(--text-lg);
+}

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

@@ -104,6 +104,10 @@
     cursor: not-allowed;
 }
 
+.zx-number-input__increment-trigger.zx-f-pressed {
+    background: var(--color-base-300);
+}
+
 .zx-number-input__decrement-trigger {
     appearance: none;
     border: none;
@@ -126,6 +130,10 @@
     cursor: not-allowed;
 }
 
+.zx-number-input__decrement-trigger.zx-f-pressed {
+    background: var(--color-base-300);
+}
+
 .zx-number-input__root.zx-a-color-primary {
     --number-input-accent: var(--color-primary);
 }

package/dist/lynx/components/pagination.css

@@ -2,12 +2,16 @@
     --pg-accent: var(--color-primary);
     --pg-accent-content: var(--color-primary-content);
     --pg-font: var(--text-sm);
+    --pg-ring-room: 4px;
 }
 
 .zx-pagination__root {
     display: flex;
     align-items: center;
     gap: var(--space-2xs);
+    overflow-x: auto;
+    padding: var(--pg-ring-room);
+    scroll-padding-inline: var(--pg-ring-room);
 }
 
 .zx-pagination__item {
@@ -65,6 +69,10 @@
     outline-offset: 2px;
 }
 
+.zx-pagination__item.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-pagination__ellipsis {
     display: flex;
     align-items: center;
@@ -162,6 +170,10 @@
     outline-offset: 2px;
 }
 
+.zx-pagination__prev-trigger.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-pagination__next-trigger {
     display: flex;
     align-items: center;
@@ -209,6 +221,10 @@
     outline-offset: 2px;
 }
 
+.zx-pagination__next-trigger.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-pagination__root.zx-a-color-primary {
     --pg-accent: var(--color-primary);
     --pg-accent-content: var(--color-primary-content);

package/dist/lynx/components/progress.css

@@ -3,7 +3,7 @@
 }
 
 .zx-root.zx-theme-dark .zx-progress__root {
-    --progress-accent: #6b6fff;
+    --progress-accent: #6c70ff;
 }
 
 .zx-root.zx-theme-dim .zx-progress__root {
@@ -96,7 +96,7 @@
 }
 
 .zx-root.zx-theme-dark .zx-progress__root.zx-a-color-primary {
-    --progress-accent: #6b6fff;
+    --progress-accent: #6c70ff;
 }
 
 .zx-root.zx-theme-dim .zx-progress__root.zx-a-color-primary {
@@ -112,11 +112,11 @@
 }
 
 .zx-root .zx-progress__root.zx-a-color-secondary {
-    --progress-accent: #f74ca0;
+    --progress-accent: #de318b;
 }
 
 .zx-root.zx-theme-dark .zx-progress__root.zx-a-color-secondary {
-    --progress-accent: #f74ca0;
+    --progress-accent: #de318b;
 }
 
 .zx-root.zx-theme-dim .zx-progress__root.zx-a-color-secondary {

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

@@ -25,6 +25,10 @@
     cursor: pointer;
 }
 
+.zx-radio-group__item.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-radio-group__item.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -72,6 +76,10 @@
     animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
 }
 
+.zx-radio-group__item-control.zx-f-invalid {
+    border-color: var(--color-error);
+}
+
 .zx-radio-group__item-control.zx-f-focus-visible {
     outline: 2px solid var(--radio-accent);
     outline-offset: 2px;

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

@@ -149,7 +149,7 @@
 }
 
 .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-primary {
-    --rating-fill: #848fff;
+    --rating-fill: #8792ff;
 }
 
 .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-primary {
@@ -165,11 +165,11 @@
 }
 
 .zx-root .zx-rating-group__root.zx-a-color-secondary {
-    --rating-fill: #fb74b2;
+    --rating-fill: #b23072;
 }
 
 .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-secondary {
-    --rating-fill: #fb74b2;
+    --rating-fill: #b23072;
 }
 
 .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-secondary {

package/dist/lynx/components/select.css

@@ -5,6 +5,7 @@
 .zx-select__root {
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
 .zx-select__trigger {
@@ -29,6 +30,10 @@
     padding-right: calc(var(--size-field) * 4);
 }
 
+.zx-select__trigger.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-select__trigger.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -76,6 +81,53 @@
     transform: rotate(180deg);
 }
 
+.zx-select__clear-trigger {
+    appearance: none;
+    position: absolute;
+    min-inline-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-xs);
+    border: none;
+    background: transparent;
+    font: inherit;
+    font-size: var(--text-sm);
+    line-height: var(--leading-none);
+    border-radius: var(--radius-field);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+    top: var(--space-xs);
+    bottom: var(--space-xs);
+    right: calc(var(--size-field) * 4 + 1em + var(--space-xs));
+    min-width: 1.5rem;
+}
+
+.zx-root .zx-select__clear-trigger {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-select__clear-trigger {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-select__clear-trigger {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-select__clear-trigger {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-select__clear-trigger {
+    color: #9fb9d0b3;
+}
+
+.zx-select__clear-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
 .zx-select__popup {
     opacity: 0;
     transform: translateY(-4px);
@@ -101,6 +153,13 @@
     opacity: 0.6;
 }
 
+.zx-select__group-heading {
+    padding: var(--space-md) var(--space-lg) var(--space-xs);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-bold);
+    opacity: 0.6;
+}
+
 .zx-select__item {
     display: flex;
     align-items: center;
@@ -133,6 +192,12 @@
     color: var(--select-accent);
 }
 
+.zx-select__separator {
+    height: var(--border);
+    margin: var(--space-sm) var(--space-md);
+    background: var(--color-base-300);
+}
+
 .zx-select__root.zx-a-color-primary {
     --select-accent: var(--color-primary);
 }

package/dist/lynx/components/slider.css

@@ -19,9 +19,34 @@
 }
 
 .zx-slider__control {
+    appearance: none;
     width: 100%;
-    accent-color: var(--slider-accent);
+    height: calc(var(--size-selector) * 6);
+    margin: 0;
+    background: transparent;
     cursor: pointer;
+    outline: none;
+    accent-color: var(--slider-accent);
+}
+
+.zx-slider__control.zx-a-size-xs {
+    height: calc(var(--size-selector) * 4);
+}
+
+.zx-slider__control.zx-a-size-sm {
+    height: calc(var(--size-selector) * 5);
+}
+
+.zx-slider__control.zx-a-size-lg {
+    height: calc(var(--size-selector) * 7);
+}
+
+.zx-slider__control.zx-a-size-xl {
+    height: calc(var(--size-selector) * 8);
+}
+
+.zx-slider__control.zx-f-readonly {
+    cursor: default;
 }
 
 .zx-slider__control.zx-f-disabled {
@@ -34,16 +59,44 @@
 }
 
 .zx-slider__control.zx-f-invalid {
-    accent-color: var(--color-error);
+    --slider-accent: var(--color-error);
 }
 
 .zx-slider__track {
-    height: calc(var(--size-selector) * 2);
+    height: calc(var(--size-selector) * 3);
     border-radius: 9999px;
     background: var(--color-base-300);
     cursor: pointer;
-    margin-top: calc(var(--size-selector) * 1.5);
-    margin-bottom: calc(var(--size-selector) * 1.5);
+    margin-top: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
+    margin-bottom: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
+}
+
+.zx-slider__track.zx-a-size-xs {
+    height: calc(var(--size-selector) * 2);
+    margin-top: calc(((var(--size-selector) * 4) - (var(--size-selector) * 2)) / 2);
+    margin-bottom: calc(((var(--size-selector) * 4) - (var(--size-selector) * 2)) / 2);
+}
+
+.zx-slider__track.zx-a-size-sm {
+    height: calc(var(--size-selector) * 2.5);
+    margin-top: calc(((var(--size-selector) * 5) - (var(--size-selector) * 2.5)) / 2);
+    margin-bottom: calc(((var(--size-selector) * 5) - (var(--size-selector) * 2.5)) / 2);
+}
+
+.zx-slider__track.zx-a-size-lg {
+    height: calc(var(--size-selector) * 3.5);
+    margin-top: calc(((var(--size-selector) * 7) - (var(--size-selector) * 3.5)) / 2);
+    margin-bottom: calc(((var(--size-selector) * 7) - (var(--size-selector) * 3.5)) / 2);
+}
+
+.zx-slider__track.zx-a-size-xl {
+    height: calc(var(--size-selector) * 4);
+    margin-top: calc(((var(--size-selector) * 8) - (var(--size-selector) * 4)) / 2);
+    margin-bottom: calc(((var(--size-selector) * 8) - (var(--size-selector) * 4)) / 2);
+}
+
+.zx-slider__track.zx-f-readonly {
+    cursor: default;
 }
 
 .zx-slider__track.zx-f-disabled {
@@ -58,8 +111,8 @@
 
 .zx-slider__thumb {
     box-sizing: border-box;
-    width: calc(var(--size-selector) * 5);
-    height: calc(var(--size-selector) * 5);
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
     border-radius: 9999px;
     background: var(--color-base-100);
     cursor: pointer;
@@ -68,7 +121,31 @@
     border: 0.25rem solid var(--slider-accent);
     top: 50%;
     transform: translateY(-50%);
-    margin-left: calc(var(--size-selector) * -2.5);
+    margin-left: calc((var(--size-selector) * 6) / -2);
+}
+
+.zx-slider__thumb.zx-a-size-xs {
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
+    margin-left: calc((var(--size-selector) * 4) / -2);
+}
+
+.zx-slider__thumb.zx-a-size-sm {
+    width: calc(var(--size-selector) * 5);
+    height: calc(var(--size-selector) * 5);
+    margin-left: calc((var(--size-selector) * 5) / -2);
+}
+
+.zx-slider__thumb.zx-a-size-lg {
+    width: calc(var(--size-selector) * 7);
+    height: calc(var(--size-selector) * 7);
+    margin-left: calc((var(--size-selector) * 7) / -2);
+}
+
+.zx-slider__thumb.zx-a-size-xl {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+    margin-left: calc((var(--size-selector) * 8) / -2);
 }
 
 .zx-slider__thumb.zx-f-focus-visible {
@@ -76,6 +153,10 @@
     outline-offset: 2px;
 }
 
+.zx-slider__thumb.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-slider__thumb.zx-f-disabled {
     cursor: not-allowed;
 }
@@ -85,7 +166,23 @@
     line-height: 1;
     white-space: nowrap;
     opacity: 0.6;
-    padding-top: calc(var(--size-selector) * 2 + var(--space-2xs));
+    padding-top: calc((var(--size-selector) * 3) + var(--space-2xs));
+}
+
+.zx-slider__mark.zx-a-size-xs {
+    padding-top: calc((var(--size-selector) * 2) + var(--space-2xs));
+}
+
+.zx-slider__mark.zx-a-size-sm {
+    padding-top: calc((var(--size-selector) * 2.5) + var(--space-2xs));
+}
+
+.zx-slider__mark.zx-a-size-lg {
+    padding-top: calc((var(--size-selector) * 3.5) + var(--space-2xs));
+}
+
+.zx-slider__mark.zx-a-size-xl {
+    padding-top: calc((var(--size-selector) * 4) + var(--space-2xs));
 }
 
 .zx-slider__value-text {
@@ -125,18 +222,10 @@
     --slider-accent: var(--color-error);
 }
 
-.zx-slider__control.zx-a-size-xs {
-    height: calc(var(--size-selector) * 3);
-}
-
 .zx-slider__label.zx-a-size-xs {
     font-size: var(--text-xs);
 }
 
-.zx-slider__control.zx-a-size-sm {
-    height: calc(var(--size-selector) * 4);
-}
-
 .zx-slider__label.zx-a-size-sm {
     font-size: var(--text-sm);
 }
@@ -145,18 +234,10 @@
     font-size: var(--text-sm);
 }
 
-.zx-slider__control.zx-a-size-lg {
-    height: calc(var(--size-selector) * 7);
-}
-
 .zx-slider__label.zx-a-size-lg {
     font-size: var(--text-md);
 }
 
-.zx-slider__control.zx-a-size-xl {
-    height: calc(var(--size-selector) * 8);
-}
-
 .zx-slider__label.zx-a-size-xl {
     font-size: var(--text-lg);
 }