@sigx/zero-daisyui 0.5.0 → 0.7.0

package/dist/lynx/components/select.css

@@ -5,6 +5,8 @@
 .zx-select__root {
     display: flex;
     flex-direction: column;
+    position: relative;
+    max-width: 100%;
 }
 
 .zx-select__trigger {
@@ -24,9 +26,15 @@
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
     box-sizing: border-box;
-    min-width: 13rem;
+    min-width: 3rem;
     padding-left: calc(var(--size-field) * 4);
     padding-right: calc(var(--size-field) * 4);
+    width: 20rem;
+    max-width: 100%;
+}
+
+.zx-select__trigger.zx-f-readonly {
+    cursor: default;
 }
 
 .zx-select__trigger.zx-f-disabled {
@@ -47,6 +55,10 @@
     outline-offset: 2px;
 }
 
+.zx-select__trigger.zx-f-pressed {
+    background: var(--color-base-200);
+}
+
 .zx-root .zx-select__value.zx-f-placeholder {
     color: #18181b99;
 }
@@ -76,6 +88,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);
@@ -135,11 +194,21 @@
     cursor: not-allowed;
 }
 
+.zx-select__item.zx-f-pressed {
+    background: var(--color-base-200);
+}
+
 .zx-select__item-indicator {
     font-size: var(--text-xs);
     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

@@ -2,6 +2,26 @@
     --slider-accent: var(--color-primary);
 }
 
+.zx-root .zx-slider__root {
+    --slider-fill: #3c2cc0;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root {
+    --slider-fill: #6b70ff;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root {
+    --slider-fill: #a1e596;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root {
+    --slider-fill: #5979a0;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root {
+    --slider-fill: #f78d69;
+}
+
 .zx-slider__root {
     display: flex;
     flex-direction: column;
@@ -13,15 +33,45 @@
     opacity: var(--disabled-opacity);
 }
 
+.zx-slider__root.zx-o-vertical {
+    width: auto;
+    align-items: center;
+}
+
 .zx-slider__label {
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
 }
 
 .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,41 +84,161 @@
 }
 
 .zx-slider__control.zx-f-invalid {
-    accent-color: var(--color-error);
+    --slider-accent: var(--color-error);
+}
+
+.zx-root .zx-slider__control.zx-f-invalid {
+    --slider-fill: #e55b72;
+}
+
+.zx-root.zx-theme-dark .zx-slider__control.zx-f-invalid {
+    --slider-fill: #ff748a;
+}
+
+.zx-root.zx-theme-dim .zx-slider__control.zx-f-invalid {
+    --slider-fill: #f8b2a1;
+}
+
+.zx-root.zx-theme-nord .zx-slider__control.zx-f-invalid {
+    --slider-fill: #b05d66;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__control.zx-f-invalid {
+    --slider-fill: #f6bbbf;
+}
+
+.zx-slider__control.zx-o-vertical {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 40);
+}
+
+.zx-slider__control.zx-o-vertical.zx-a-size-xs {
+    width: calc(var(--size-selector) * 4);
+}
+
+.zx-slider__control.zx-o-vertical.zx-a-size-sm {
+    width: calc(var(--size-selector) * 5);
+}
+
+.zx-slider__control.zx-o-vertical.zx-a-size-lg {
+    width: calc(var(--size-selector) * 7);
+}
+
+.zx-slider__control.zx-o-vertical.zx-a-size-xl {
+    width: calc(var(--size-selector) * 8);
 }
 
 .zx-slider__track {
-    height: calc(var(--size-selector) * 2);
-    border-radius: 9999px;
+    height: calc(var(--size-selector) * 3);
+    border-radius: var(--radius-selector);
     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 {
     cursor: not-allowed;
 }
 
+.zx-slider__track.zx-o-vertical {
+    width: calc(var(--size-selector) * 3);
+    height: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.zx-slider__track.zx-o-vertical.zx-a-size-xs {
+    width: calc(var(--size-selector) * 2);
+}
+
+.zx-slider__track.zx-o-vertical.zx-a-size-sm {
+    width: calc(var(--size-selector) * 2.5);
+}
+
+.zx-slider__track.zx-o-vertical.zx-a-size-lg {
+    width: calc(var(--size-selector) * 3.5);
+}
+
+.zx-slider__track.zx-o-vertical.zx-a-size-xl {
+    width: calc(var(--size-selector) * 4);
+}
+
 .zx-slider__range {
     height: 100%;
-    border-radius: 9999px;
-    background: var(--slider-accent);
+    border-radius: var(--radius-selector);
+    background: var(--slider-fill);
 }
 
 .zx-slider__thumb {
     box-sizing: border-box;
-    width: calc(var(--size-selector) * 5);
-    height: calc(var(--size-selector) * 5);
-    border-radius: 9999px;
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
+    border-radius: calc(var(--radius-selector) + 0.25rem);
     background: var(--color-base-100);
     cursor: pointer;
     outline: none;
     touch-action: none;
-    border: 0.25rem solid var(--slider-accent);
+    border: 0.25rem solid var(--slider-fill);
+    box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
     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 +246,10 @@
     outline-offset: 2px;
 }
 
+.zx-slider__thumb.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-slider__thumb.zx-f-disabled {
     cursor: not-allowed;
 }
@@ -85,7 +259,52 @@
     line-height: 1;
     white-space: nowrap;
     opacity: 0.6;
-    padding-top: calc(var(--size-selector) * 2 + var(--space-2xs));
+    top: 0;
+    width: 2px;
+    height: calc(var(--size-selector) * 3);
+    margin-left: -1px;
+    padding-top: 0;
+    background-color: var(--color-base-content);
+}
+
+.zx-slider__mark.zx-a-size-xs {
+    height: calc(var(--size-selector) * 2);
+}
+
+.zx-slider__mark.zx-a-size-sm {
+    height: calc(var(--size-selector) * 2.5);
+}
+
+.zx-slider__mark.zx-a-size-lg {
+    height: calc(var(--size-selector) * 3.5);
+}
+
+.zx-slider__mark.zx-a-size-xl {
+    height: calc(var(--size-selector) * 4);
+}
+
+.zx-slider__mark.zx-o-vertical {
+    left: 0;
+    width: calc(var(--size-selector) * 3);
+    height: 2px;
+    margin-left: 0;
+    margin-top: -1px;
+}
+
+.zx-slider__mark.zx-o-vertical.zx-a-size-xs {
+    width: calc(var(--size-selector) * 2);
+}
+
+.zx-slider__mark.zx-o-vertical.zx-a-size-sm {
+    width: calc(var(--size-selector) * 2.5);
+}
+
+.zx-slider__mark.zx-o-vertical.zx-a-size-lg {
+    width: calc(var(--size-selector) * 3.5);
+}
+
+.zx-slider__mark.zx-o-vertical.zx-a-size-xl {
+    width: calc(var(--size-selector) * 4);
 }
 
 .zx-slider__value-text {
@@ -97,44 +316,196 @@
     --slider-accent: var(--color-primary);
 }
 
+.zx-root .zx-slider__root.zx-a-color-primary {
+    --slider-fill: #3c2cc0;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-primary {
+    --slider-fill: #6b70ff;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-primary {
+    --slider-fill: #a1e596;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-primary {
+    --slider-fill: #5979a0;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-primary {
+    --slider-fill: #f78d69;
+}
+
 .zx-slider__root.zx-a-color-secondary {
     --slider-accent: var(--color-secondary);
 }
 
+.zx-root .zx-slider__root.zx-a-color-secondary {
+    --slider-fill: #dc318a;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-secondary {
+    --slider-fill: #f74fa2;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-secondary {
+    --slider-fill: #f9876b;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-secondary {
+    --slider-fill: #7895b3;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-secondary {
+    --slider-fill: #f679a1;
+}
+
 .zx-slider__root.zx-a-color-accent {
     --slider-accent: var(--color-accent);
 }
 
+.zx-root .zx-slider__root.zx-a-color-accent {
+    --slider-fill: #1abea9;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-accent {
+    --slider-fill: #41d7c2;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-accent {
+    --slider-fill: #c598e7;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-accent {
+    --slider-fill: #7eb1c0;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-accent {
+    --slider-fill: #b18df6;
+}
+
 .zx-slider__root.zx-a-color-neutral {
     --slider-accent: var(--color-neutral);
 }
 
+.zx-root .zx-slider__root.zx-a-color-neutral {
+    --slider-fill: #0a0a0d;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-neutral {
+    --slider-fill: #1b1b1e;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-neutral {
+    --slider-fill: #29303a;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-neutral {
+    --slider-fill: #495266;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-neutral {
+    --slider-fill: #26333a;
+}
+
 .zx-slider__root.zx-a-color-info {
     --slider-accent: var(--color-info);
 }
 
+.zx-root .zx-slider__root.zx-a-color-info {
+    --slider-fill: #17a8e4;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-info {
+    --slider-fill: #3dc1ff;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-info {
+    --slider-fill: #48e8fb;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-info {
+    --slider-fill: #a684a1;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-info {
+    --slider-fill: #8cdce8;
+}
+
 .zx-slider__root.zx-a-color-success {
     --slider-accent: var(--color-success);
 }
 
+.zx-root .zx-slider__root.zx-a-color-success {
+    --slider-fill: #19be83;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-success {
+    --slider-fill: #41d79b;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-success {
+    --slider-fill: #6eecc0;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-success {
+    --slider-fill: #96af85;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-success {
+    --slider-fill: #acdbb1;
+}
+
 .zx-slider__root.zx-a-color-warning {
     --slider-accent: var(--color-warning);
 }
 
+.zx-root .zx-slider__root.zx-a-color-warning {
+    --slider-fill: #e2a519;
+}
+
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-warning {
+    --slider-fill: #fbbe41;
+}
+
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-warning {
+    --slider-fill: #e9d069;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-warning {
+    --slider-fill: #d6bb84;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-warning {
+    --slider-fill: #e9c799;
+}
+
 .zx-slider__root.zx-a-color-error {
     --slider-accent: var(--color-error);
 }
 
-.zx-slider__control.zx-a-size-xs {
-    height: calc(var(--size-selector) * 3);
+.zx-root .zx-slider__root.zx-a-color-error {
+    --slider-fill: #e55b72;
 }
 
-.zx-slider__label.zx-a-size-xs {
-    font-size: var(--text-xs);
+.zx-root.zx-theme-dark .zx-slider__root.zx-a-color-error {
+    --slider-fill: #ff748a;
 }
 
-.zx-slider__control.zx-a-size-sm {
-    height: calc(var(--size-selector) * 4);
+.zx-root.zx-theme-dim .zx-slider__root.zx-a-color-error {
+    --slider-fill: #f8b2a1;
+}
+
+.zx-root.zx-theme-nord .zx-slider__root.zx-a-color-error {
+    --slider-fill: #b05d66;
+}
+
+.zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-error {
+    --slider-fill: #f6bbbf;
+}
+
+.zx-slider__label.zx-a-size-xs {
+    font-size: var(--text-xs);
 }
 
 .zx-slider__label.zx-a-size-sm {
@@ -145,18 +516,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);
 }