@sigx/zero-daisyui 0.2.0-beta.5 → 0.3.0-beta.1

package/dist/lynx/components/container.css

@@ -0,0 +1,11 @@
+.zx-container__root {
+    --l-measure: none;
+    --l-pad: 0;
+    --l-pad-x: var(--l-pad);
+    --l-pad-y: var(--l-pad);
+}
+
+.zx-container__root {
+    inline-size: 100%;
+    max-inline-size: var(--l-measure);
+}

package/dist/lynx/components/countdown.css

@@ -198,6 +198,11 @@
 .zx-countdown__root.zx-a-size-xl {
     --countdown-font: var(--text-3xl);
 }
+
+.zx-countdown__root.zx-m-inline {
+    font-size: inherit;
+    font-weight: inherit;
+}
 @keyframes zero-daisyui-countdown-in {
     from { transform: translateY(0.6em); opacity: 0; }
 }

package/dist/lynx/components/dialog.css

@@ -5,7 +5,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -15,6 +14,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-dialog__trigger.zx-f-disabled {
@@ -31,7 +32,8 @@
     opacity: 0;
     transform: translateY(8px) scale(0.97);
     transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
-    padding: 1.5rem;
+    box-sizing: border-box;
+    padding: var(--space-2xl);
     max-width: 32rem;
     width: calc(100% - 2rem);
     background: var(--color-base-100);
@@ -63,30 +65,30 @@
 }
 
 .zx-root .zx-dialog__description {
-    color: #0d0d0fbf;
+    color: #18181bbf;
 }
 
 .zx-root.zx-theme-dark .zx-dialog__description {
-    color: #a0aaaebf;
+    color: #ecf9ffbf;
 }
 
 .zx-root.zx-theme-dim .zx-dialog__description {
-    color: #788a91bf;
+    color: #b2ccd6bf;
 }
 
 .zx-root.zx-theme-nord .zx-dialog__description {
-    color: #1c2028bf;
+    color: #2e3440bf;
 }
 
 .zx-root.zx-theme-sunset .zx-dialog__description {
-    color: #6b7d8dbf;
+    color: #9fb9d0bf;
 }
 
 .zx-dialog__footer {
     display: flex;
     justify-content: flex-end;
     gap: var(--space-md);
-    margin-block-start: 1.5rem;
+    margin-top: var(--space-2xl);
 }
 
 .zx-dialog__close {
@@ -96,7 +98,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -106,6 +107,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-dialog__close.zx-f-disabled {
@@ -124,7 +127,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -134,6 +136,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-dialog__cancel.zx-f-disabled {
@@ -235,26 +239,30 @@
 
 .zx-dialog__trigger.zx-a-size-xs {
     height: calc(var(--size-field) * 8);
-    padding-inline: calc(var(--size-field) * 2);
     font-size: var(--text-xs);
+    padding-left: calc(var(--size-field) * 2);
+    padding-right: calc(var(--size-field) * 2);
 }
 
 .zx-dialog__trigger.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
-    padding-inline: calc(var(--size-field) * 3);
     font-size: var(--text-sm);
+    padding-left: calc(var(--size-field) * 3);
+    padding-right: calc(var(--size-field) * 3);
 }
 
 .zx-dialog__trigger.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
-    padding-inline: calc(var(--size-field) * 5);
     font-size: var(--text-md);
+    padding-left: calc(var(--size-field) * 5);
+    padding-right: calc(var(--size-field) * 5);
 }
 
 .zx-dialog__trigger.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
-    padding-inline: calc(var(--size-field) * 6);
     font-size: var(--text-lg);
+    padding-left: calc(var(--size-field) * 6);
+    padding-right: calc(var(--size-field) * 6);
 }
 @keyframes zero-daisy-pop {
     from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }

package/dist/lynx/components/diff.css

@@ -19,19 +19,21 @@
 .zx-diff__after {
     grid-area: 1 / 1;
     position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
 }
 
 .zx-diff__handle {
-    inset-block: 0;
     inline-size: var(--diff-hit);
-    margin-inline-start: calc(var(--diff-hit) / -2);
     display: grid;
     place-items: center;
     cursor: ew-resize;
     touch-action: none;
     z-index: 1;
+    top: 0;
+    bottom: 0;
+    margin-left: calc(var(--diff-hit) / -2);
 }
 
 .zx-diff__handle.zx-f-focus-visible {

package/dist/lynx/components/drawer.css

@@ -5,7 +5,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -15,6 +14,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-drawer__trigger.zx-f-disabled {
@@ -31,12 +32,16 @@
     opacity: 0;
     transform: none;
     transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+    --drawer-travel: -100%;
     padding: var(--space-lg);
     background: var(--color-base-100);
     color: var(--color-base-content);
     border: none;
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-xl);
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: var(--l-measure);
 }
 
 .zx-drawer__panel.zx-s-open {
@@ -44,6 +49,20 @@
     transform: none;
 }
 
+.zx-drawer__panel.zx-p-end {
+    --drawer-travel: 100%;
+}
+
+.zx-drawer__panel.zx-l-dock-sheet {
+    opacity: 1;
+    transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+    position: fixed;
+    block-size: 100dvh;
+    max-block-size: 100dvh;
+    margin: 0;
+    border-radius: 0;
+}
+
 .zx-drawer__backdrop {
     background: #00000066;
 }
@@ -61,7 +80,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -71,6 +89,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-drawer__close.zx-f-disabled {
@@ -172,24 +192,28 @@
 
 .zx-drawer__trigger.zx-a-size-xs {
     height: calc(var(--size-field) * 8);
-    padding-inline: calc(var(--size-field) * 2);
     font-size: var(--text-xs);
+    padding-left: calc(var(--size-field) * 2);
+    padding-right: calc(var(--size-field) * 2);
 }
 
 .zx-drawer__trigger.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
-    padding-inline: calc(var(--size-field) * 3);
     font-size: var(--text-sm);
+    padding-left: calc(var(--size-field) * 3);
+    padding-right: calc(var(--size-field) * 3);
 }
 
 .zx-drawer__trigger.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
-    padding-inline: calc(var(--size-field) * 5);
     font-size: var(--text-md);
+    padding-left: calc(var(--size-field) * 5);
+    padding-right: calc(var(--size-field) * 5);
 }
 
 .zx-drawer__trigger.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
-    padding-inline: calc(var(--size-field) * 6);
     font-size: var(--text-lg);
+    padding-left: calc(var(--size-field) * 6);
+    padding-right: calc(var(--size-field) * 6);
 }

package/dist/lynx/components/empty-state.css

@@ -0,0 +1,342 @@
+.zx-empty-state__root {
+    --empty-tint: var(--color-base-200);
+}
+
+.zx-root .zx-empty-state__root {
+    --empty-accent: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root {
+    --empty-accent: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root {
+    --empty-accent: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root {
+    --empty-accent: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root {
+    --empty-accent: #9fb9d099;
+}
+
+.zx-empty-state__root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--space-sm);
+    padding: var(--space-2xl) var(--space-xl);
+    background: var(--empty-tint);
+    color: var(--color-base-content);
+    border-radius: var(--radius-box);
+}
+
+.zx-empty-state__icon {
+    display: flex;
+    color: var(--empty-accent);
+    font-size: var(--text-2xl);
+    line-height: var(--leading-none);
+}
+
+.zx-empty-state__title {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: var(--weight-bold);
+    line-height: var(--leading-tight);
+}
+
+.zx-empty-state__description {
+    max-inline-size: 36ch;
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+}
+
+.zx-root .zx-empty-state__description {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__description {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__description {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__description {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__description {
+    color: #9fb9d0b3;
+}
+
+.zx-empty-state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-sm);
+}
+
+.zx-empty-state__root.zx-a-color-primary {
+    --empty-tint: var(--color-primary-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-primary {
+    --empty-accent: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-primary {
+    --empty-accent: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-primary {
+    --empty-accent: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-primary {
+    --empty-accent: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-primary {
+    --empty-accent: #fb8a62;
+}
+
+.zx-empty-state__root.zx-a-color-secondary {
+    --empty-tint: var(--color-secondary-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-secondary {
+    --empty-accent: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-secondary {
+    --empty-accent: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-secondary {
+    --empty-accent: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-secondary {
+    --empty-accent: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-secondary {
+    --empty-accent: #e68aac;
+}
+
+.zx-empty-state__root.zx-a-color-accent {
+    --empty-tint: var(--color-accent-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-accent {
+    --empty-accent: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-accent {
+    --empty-accent: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-accent {
+    --empty-accent: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-accent {
+    --empty-accent: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-accent {
+    --empty-accent: #ab9fe8;
+}
+
+.zx-empty-state__root.zx-a-color-neutral {
+    --empty-tint: var(--color-neutral-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-neutral {
+    --empty-accent: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-neutral {
+    --empty-accent: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-neutral {
+    --empty-accent: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-neutral {
+    --empty-accent: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-neutral {
+    --empty-accent: #667a8a;
+}
+
+.zx-empty-state__root.zx-a-color-info {
+    --empty-tint: var(--color-info-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-info {
+    --empty-accent: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-info {
+    --empty-accent: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-info {
+    --empty-accent: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-info {
+    --empty-accent: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-info {
+    --empty-accent: #91d4e3;
+}
+
+.zx-empty-state__root.zx-a-color-success {
+    --empty-tint: var(--color-success-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-success {
+    --empty-accent: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-success {
+    --empty-accent: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-success {
+    --empty-accent: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-success {
+    --empty-accent: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-success {
+    --empty-accent: #a6cebe;
+}
+
+.zx-empty-state__root.zx-a-color-warning {
+    --empty-tint: var(--color-warning-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-warning {
+    --empty-accent: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-warning {
+    --empty-accent: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-warning {
+    --empty-accent: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-warning {
+    --empty-accent: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-warning {
+    --empty-accent: #c5c1b7;
+}
+
+.zx-empty-state__root.zx-a-color-error {
+    --empty-tint: var(--color-error-soft);
+}
+
+.zx-root .zx-empty-state__root.zx-a-color-error {
+    --empty-accent: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-empty-state__root.zx-a-color-error {
+    --empty-accent: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-empty-state__root.zx-a-color-error {
+    --empty-accent: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-empty-state__root.zx-a-color-error {
+    --empty-accent: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-empty-state__root.zx-a-color-error {
+    --empty-accent: #f2bbc0;
+}
+
+.zx-empty-state__root.zx-a-size-xs {
+    padding: var(--space-md);
+    gap: var(--space-2xs);
+}
+
+.zx-empty-state__icon.zx-a-size-xs {
+    font-size: var(--text-xl);
+}
+
+.zx-empty-state__title.zx-a-size-xs {
+    font-size: var(--text-sm);
+}
+
+.zx-empty-state__description.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-empty-state__root.zx-a-size-sm {
+    padding: var(--space-lg);
+    gap: var(--space-xs);
+}
+
+.zx-empty-state__icon.zx-a-size-sm {
+    font-size: var(--text-2xl);
+}
+
+.zx-empty-state__title.zx-a-size-sm {
+    font-size: var(--text-md);
+}
+
+.zx-empty-state__description.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
+.zx-empty-state__root.zx-a-size-lg {
+    padding: calc(var(--space-2xl) * 1.5) var(--space-2xl);
+    gap: var(--space-md);
+}
+
+.zx-empty-state__icon.zx-a-size-lg {
+    font-size: var(--text-2xl);
+}
+
+.zx-empty-state__title.zx-a-size-lg {
+    font-size: var(--text-xl);
+}
+
+.zx-empty-state__description.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-empty-state__root.zx-a-size-xl {
+    padding: calc(var(--space-2xl) * 2) var(--space-2xl);
+    gap: var(--space-lg);
+}
+
+.zx-empty-state__icon.zx-a-size-xl {
+    font-size: var(--text-2xl);
+}
+
+.zx-empty-state__title.zx-a-size-xl {
+    font-size: var(--text-2xl);
+}
+
+.zx-empty-state__description.zx-a-size-xl {
+    font-size: var(--text-md);
+}

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

@@ -76,23 +76,23 @@
 }
 
 .zx-root .zx-file-upload__dropzone {
-    color: #07070899;
+    color: #18181b99;
 }
 
 .zx-root.zx-theme-dark .zx-file-upload__dropzone {
-    color: #767d8099;
+    color: #ecf9ff99;
 }
 
 .zx-root.zx-theme-dim .zx-file-upload__dropzone {
-    color: #57656a99;
+    color: #b2ccd699;
 }
 
 .zx-root.zx-theme-nord .zx-file-upload__dropzone {
-    color: #12151b99;
+    color: #2e344099;
 }
 
 .zx-root.zx-theme-sunset .zx-file-upload__dropzone {
-    color: #4d5b6799;
+    color: #9fb9d099;
 }
 
 .zx-file-upload__dropzone.zx-f-highlighted {
@@ -143,23 +143,23 @@
 }
 
 .zx-root .zx-file-upload__item-size {
-    color: #07070899;
+    color: #18181b99;
 }
 
 .zx-root.zx-theme-dark .zx-file-upload__item-size {
-    color: #767d8099;
+    color: #ecf9ff99;
 }
 
 .zx-root.zx-theme-dim .zx-file-upload__item-size {
-    color: #57656a99;
+    color: #b2ccd699;
 }
 
 .zx-root.zx-theme-nord .zx-file-upload__item-size {
-    color: #12151b99;
+    color: #2e344099;
 }
 
 .zx-root.zx-theme-sunset .zx-file-upload__item-size {
-    color: #4d5b6799;
+    color: #9fb9d099;
 }
 
 .zx-file-upload__item-remove {

package/dist/lynx/components/grid.css

@@ -0,0 +1,28 @@
+.zx-grid__root {
+    --l-cols: none;
+    --l-track: 16rem;
+    --l-gap: 0;
+    --l-gap-x: var(--l-gap);
+    --l-gap-y: var(--l-gap);
+    --l-pad: 0;
+    --l-pad-x: var(--l-pad);
+    --l-pad-y: var(--l-pad);
+    --l-align: stretch;
+    --l-justify: stretch;
+}
+
+.zx-grid__root {
+    display: grid;
+    min-inline-size: 0;
+    grid-template-columns: var(--l-cols);
+    column-gap: var(--l-gap-x);
+    row-gap: var(--l-gap-y);
+    align-items: var(--l-align);
+    justify-items: var(--l-justify);
+}
+
+.zx-grid__cell {
+    --l-span: auto;
+    grid-column: var(--l-span);
+    min-inline-size: 0;
+}