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

package/dist/lynx/components/drawer.css

@@ -32,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 {
@@ -45,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;
 }

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;
+}

package/dist/lynx/components/kbd.css

@@ -8,7 +8,7 @@
     align-items: center;
     justify-content: center;
     min-inline-size: 1.75em;
-    padding: 0.0625rem 0.4375rem;
+    padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
     background: var(--kbd-fill);
     color: var(--kbd-ink);
     border: var(--border) solid var(--color-base-300);

package/dist/lynx/components/menu.css

@@ -53,7 +53,7 @@
 .zx-menu__item {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
@@ -75,7 +75,7 @@
 .zx-menu__checkbox-item {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
@@ -97,7 +97,7 @@
 .zx-menu__radio-item {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
@@ -126,7 +126,7 @@
 .zx-menu__sub-trigger {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);