zabi-components 7.0.0 → 7.0.2

package/dist/zabi-components.css

@@ -130,23 +130,112 @@
     --zabi-base-925: #101013;
     --zabi-base-950: #09090b;
     --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
-    --color-brand-50: #f7faff;
-    --color-brand-100: #edf2fb;
-    --color-brand-200: #dfe7fb;
-    --color-brand-300: #ccdbfd;
-    --color-brand-400: #abc4ff;
-    --color-brand-500: #8fa8ff;
-    --color-brand-600: #6e84fa;
-    --color-brand-700: #5366e2;
-    --color-brand-800: #3f4fc0;
-    --color-brand-900: #2f3c99;
-    --color-brand-950: #1f2866;
-    --color-iris-50: #f4f4fa;
-    --color-iris-100: #e9e9f7;
-    --color-iris-200: #d6d6f0;
-    --color-iris-300: #bdbde6;
-    --color-iris-500: #6969B3;
-    --color-iris-900: #2a2a56;
+    --zabi-brand-50: #f7faff;
+    --zabi-brand-100: #edf2fb;
+    --zabi-brand-200: #dfe7fb;
+    --zabi-brand-300: #ccdbfd;
+    --zabi-brand-400: #abc4ff;
+    --zabi-brand-500: #8fa8ff;
+    --zabi-brand-600: #6e84fa;
+    --zabi-brand-700: #5366e2;
+    --zabi-brand-800: #3f4fc0;
+    --zabi-brand-900: #2f3c99;
+    --zabi-brand-950: #1f2866;
+    --color-brand-50: var(--zabi-brand-50);
+    --color-brand-100: var(--zabi-brand-100);
+    --color-brand-200: var(--zabi-brand-200);
+    --color-brand-300: var(--zabi-brand-300);
+    --color-brand-400: var(--zabi-brand-400);
+    --color-brand-500: var(--zabi-brand-500);
+    --color-brand-600: var(--zabi-brand-600);
+    --color-brand-700: var(--zabi-brand-700);
+    --color-brand-800: var(--zabi-brand-800);
+    --color-brand-900: var(--zabi-brand-900);
+    --color-brand-950: var(--zabi-brand-950);
+    --zabi-citron-50: #f9faeb;
+    --zabi-citron-100: #f1f5cf;
+    --zabi-citron-200: #e4ecaa;
+    --zabi-citron-300: #d5e184;
+    --zabi-citron-400: #c7d460;
+    --zabi-citron-500: #bbbe64;
+    --zabi-citron-600: #a3a852;
+    --zabi-citron-700: #848a43;
+    --zabi-citron-800: #666c35;
+    --zabi-citron-900: #4d5229;
+    --zabi-citron-950: #323518;
+    --color-citron-300: var(--zabi-citron-300);
+    --color-citron-400: var(--zabi-citron-400);
+    --color-citron-500: var(--zabi-citron-500);
+    --color-citron-600: var(--zabi-citron-600);
+    --color-citron-700: var(--zabi-citron-700);
+    --zabi-pine-50: #e9f6f2;
+    --zabi-pine-100: #d2ece4;
+    --zabi-pine-200: #a7d9c9;
+    --zabi-pine-300: #78c4ad;
+    --zabi-pine-400: #49ad91;
+    --zabi-pine-500: #0c5d43;
+    --zabi-pine-600: #0a513a;
+    --zabi-pine-700: #084532;
+    --zabi-pine-800: #063a2a;
+    --zabi-pine-900: #04231a;
+    --zabi-pine-950: #02160f;
+    --color-pine-600: var(--zabi-pine-600);
+    --color-pine-700: var(--zabi-pine-700);
+    --color-pine-800: var(--zabi-pine-800);
+    --color-pine-900: var(--zabi-pine-900);
+    --zabi-iris-50: #f4f4fa;
+    --zabi-iris-100: #e9e9f7;
+    --zabi-iris-200: #d6d6f0;
+    --zabi-iris-300: #bdbde6;
+    --zabi-iris-400: #a3a3d8;
+    --zabi-iris-500: #6969b3;
+    --zabi-iris-600: #58589e;
+    --zabi-iris-700: #474788;
+    --zabi-iris-800: #38386f;
+    --zabi-iris-900: #2a2a56;
+    --zabi-iris-950: #1b1b37;
+    --color-iris-50: var(--zabi-iris-50);
+    --color-iris-100: var(--zabi-iris-100);
+    --color-iris-200: var(--zabi-iris-200);
+    --color-iris-300: var(--zabi-iris-300);
+    --color-iris-400: var(--zabi-iris-400);
+    --color-iris-500: var(--zabi-iris-500);
+    --color-iris-600: var(--zabi-iris-600);
+    --color-iris-700: var(--zabi-iris-700);
+    --color-iris-800: var(--zabi-iris-800);
+    --color-iris-900: var(--zabi-iris-900);
+    --zabi-warning-50: #fffbeb;
+    --zabi-warning-100: #fef3c7;
+    --zabi-warning-200: #fde68a;
+    --zabi-warning-300: #fcd34d;
+    --zabi-warning-400: #fbbf24;
+    --zabi-warning-500: #f59e0b;
+    --zabi-warning-600: #d97706;
+    --zabi-warning-700: #b45309;
+    --zabi-warning-800: #92400e;
+    --zabi-warning-900: #78350f;
+    --zabi-warning-950: #451a03;
+    --color-warning-300: var(--zabi-warning-300);
+    --color-warning-400: var(--zabi-warning-400);
+    --color-warning-500: var(--zabi-warning-500);
+    --color-warning-600: var(--zabi-warning-600);
+    --color-warning-700: var(--zabi-warning-700);
+    --zabi-error-50: #fef2f2;
+    --zabi-error-100: #fee2e2;
+    --zabi-error-200: #fecaca;
+    --zabi-error-300: #fca5a5;
+    --zabi-error-400: #f87171;
+    --zabi-error-500: #ef4444;
+    --zabi-error-600: #dc2626;
+    --zabi-error-700: #b91c1c;
+    --zabi-error-800: #991b1b;
+    --zabi-error-900: #7f1d1d;
+    --zabi-error-950: #450a0a;
+    --color-error-300: var(--zabi-error-300);
+    --color-error-400: var(--zabi-error-400);
+    --color-error-500: var(--zabi-error-500);
+    --color-error-600: var(--zabi-error-600);
+    --color-error-700: var(--zabi-error-700);
     --color-base-50: var(--zabi-base-50);
     --color-base-75: var(--zabi-base-75);
     --color-base-100: var(--zabi-base-100);
@@ -172,11 +261,11 @@
     --color-background-secondary: var(--color-base-50);
     --color-background-tertiary: var(--color-base-100);
     --color-page: var(--color-base-100);
-    --color-card: #fff;
+    --color-card: #ffffff;
     --color-card-hover: var(--color-base-100);
     --color-card-active: var(--color-base-100);
-    --color-card-elevated: #fff;
-    --color-surface-1: #fff;
+    --color-card-elevated: #ffffff;
+    --color-surface-1: #ffffff;
     --color-surface-2: var(--color-base-50);
     --color-surface-3: var(--color-base-75);
     --color-surface-4: var(--color-base-100);
@@ -192,8 +281,8 @@
     --color-caption: var(--color-base-500);
     --color-input-placeholder: var(--color-base-400);
     --color-label: var(--color-base-700);
-    --color-link: #6e84fa;
-    --color-link-hover: #5366e2;
+    --color-link: var(--color-brand-600);
+    --color-link-hover: var(--color-brand-700);
     --color-nav-menu-item: var(--color-body);
     --color-nav-menu-item-hover: var(--color-headline);
     --color-nav-menu-item-active: var(--color-link);
@@ -201,36 +290,36 @@
     --color-nav-menu-active: var(--color-action-primary-subtle);
     --color-nav-menu-focus: var(--color-brand-500);
     --color-success-text: var(--color-success);
-    --color-warning-text: oklch(55.5% 0.163 48.998);
+    --color-warning-text: var(--color-warning-700);
     --color-neutral-text: var(--color-base-700);
-    --color-energetic-text: #848a43;
-    --color-error-text: oklch(50.5% 0.213 27.518);
-    --color-inverse: #fff;
+    --color-energetic-text: var(--color-citron-700);
+    --color-error-text: var(--color-error-700);
+    --color-inverse: var(--color-base-100);
     --color-disabled: var(--color-base-400);
     --color-border: var(--color-base-300);
     --color-border-weak: var(--color-base-300);
     --color-border-medium: var(--color-base-400);
     --color-border-strong: var(--color-base-500);
-    --color-focus: #8fa8ff;
-    --color-focus-weak: #6e84fa;
-    --color-focus-medium: #5366e2;
-    --color-focus-strong: #3f4fc0;
+    --color-focus: var(--color-brand-500);
+    --color-focus-weak: var(--color-brand-600);
+    --color-focus-medium: var(--color-brand-700);
+    --color-focus-strong: var(--color-brand-800);
     --color-focus-ring: var(--color-focus);
     --color-focus-ring-offset: var(--color-card);
-    --color-primary: #6e84fa;
-    --color-primary-weak: #5366e2;
-    --color-primary-medium: #3f4fc0;
-    --color-primary-strong: #2f3c99;
+    --color-primary: var(--color-brand-600);
+    --color-primary-weak: var(--color-brand-700);
+    --color-primary-medium: var(--color-brand-800);
+    --color-primary-strong: var(--color-brand-900);
     --color-secondary: var(--color-base-600);
     --color-secondary-weak: var(--color-base-700);
     --color-secondary-medium: var(--color-base-800);
     --color-secondary-strong: var(--color-base-900);
-    --color-success: #0a513a;
-    --color-warning: oklch(76.9% 0.188 70.08);
-    --color-error: oklch(63.7% 0.237 25.331);
-    --color-energetic: #bbbe64;
+    --color-success: var(--color-pine-600);
+    --color-warning: var(--color-warning-500);
+    --color-error: var(--color-error-500);
+    --color-energetic: var(--color-citron-500);
     --color-neutral: var(--color-base-600);
-    --color-info: #58589e;
+    --color-info: var(--color-iris-600);
     --color-info-text: var(--color-info);
     --color-action-primary: var(--color-brand-950);
     --color-action-primary-hover: var(--color-brand-900);
@@ -255,12 +344,12 @@
     --color-action-secondary-disabled: var(--color-brand-500);
     --color-action-secondary-subtle: var(--color-brand-600);
     --color-action-secondary-subtle-hover: var(--color-brand-700);
-    --color-action-danger: oklch(57.7% 0.245 27.325);
-    --color-action-danger-hover: oklch(50.5% 0.213 27.518);
-    --color-action-danger-active: oklch(44.4% 0.177 26.899);
-    --color-action-danger-disabled: oklch(80.8% 0.114 19.571);
-    --color-action-danger-subtle: oklch(97.1% 0.013 17.38);
-    --color-action-danger-subtle-hover: oklch(93.6% 0.032 17.717);
+    --color-action-danger: #dc2626;
+    --color-action-danger-hover: #b91c1c;
+    --color-action-danger-active: #991b1b;
+    --color-action-danger-disabled: #fca5a5;
+    --color-action-danger-subtle: #fef2f2;
+    --color-action-danger-subtle-hover: #fee2e2;
     --shadow-color: 0 0 0;
     --shadow-opacity: 0.1;
     --spacing-xs: 0.25rem;
@@ -275,6 +364,8 @@
     --z-popover: 1060;
     --z-tooltip: 1070;
     --z-toast: 1080;
+    --color-tooltip-bg: var(--color-base-800);
+    --color-tooltip-fg: var(--color-base-50);
   }
 }
 @layer base {
@@ -1715,6 +1806,9 @@
   .bg-surface-2 {
     background-color: var(--color-surface-2);
   }
+  .bg-tooltip-bg {
+    background-color: var(--color-tooltip-bg);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2041,6 +2135,12 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-pre {
     white-space: pre;
   }
@@ -2154,6 +2254,9 @@
   .text-success {
     color: var(--color-success);
   }
+  .text-tooltip-fg {
+    color: var(--color-tooltip-fg);
+  }
   .text-warning {
     color: var(--color-warning);
   }
@@ -2315,6 +2418,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,visibility\,transform\] {
+    transition-property: opacity,visibility,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2548,7 +2656,7 @@
   .hover\:border-primary\/20 {
     &:hover {
       @media (hover: hover) {
-        border-color: color-mix(in srgb, theme(colors.brand.600) 20%, transparent);
+        border-color: color-mix(in srgb, #6e84fa 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           & {
             border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
@@ -3593,6 +3701,12 @@
     --tw-ring-offset-color: transparent;
   }
 }
+@media (prefers-contrast: high) {
+  :root {
+    --color-tooltip-bg: CanvasText;
+    --color-tooltip-fg: Canvas;
+  }
+}
 body {
   font-family: var(--font-family-sans);
 }
@@ -3618,50 +3732,138 @@ body {
   --zabi-base-900: #18181b;
   --zabi-base-925: #101013;
   --zabi-base-950: #09090b;
-  --color-brand-50: #1f2866;
-  --color-brand-100: #2f3c99;
-  --color-brand-200: #3f4fc0;
-  --color-brand-300: #5366e2;
-  --color-brand-400: #6e84fa;
-  --color-brand-500: #8fa8ff;
-  --color-brand-600: #abc4ff;
-  --color-brand-700: #ccdbfd;
-  --color-brand-800: #dfe7fb;
-  --color-brand-900: #edf2fb;
-  --color-brand-950: #f7faff;
-  --color-citron-50: #323518;
-  --color-citron-100: #4d5229;
-  --color-citron-200: #666c35;
-  --color-citron-300: #848a43;
-  --color-citron-400: #a3a852;
-  --color-citron-500: #bbbe64;
-  --color-citron-600: #c7d460;
-  --color-citron-700: #d5e184;
-  --color-citron-800: #e4ecaa;
-  --color-citron-900: #f1f5cf;
-  --color-citron-950: #f9faeb;
-  --color-pine-50: #02160f;
-  --color-pine-100: #04231a;
-  --color-pine-200: #063a2a;
-  --color-pine-300: #084532;
-  --color-pine-400: #0a513a;
-  --color-pine-500: #0C5D43;
-  --color-pine-600: #49ad91;
-  --color-pine-700: #78c4ad;
-  --color-pine-800: #a7d9c9;
-  --color-pine-900: #d2ece4;
-  --color-pine-950: #e9f6f2;
-  --color-iris-50: #1b1b37;
-  --color-iris-100: #2a2a56;
-  --color-iris-200: #38386f;
-  --color-iris-300: #474788;
-  --color-iris-400: #58589e;
-  --color-iris-500: #6969B3;
-  --color-iris-600: #a3a3d8;
-  --color-iris-700: #bdbde6;
-  --color-iris-800: #d6d6f0;
-  --color-iris-900: #e9e9f7;
-  --color-iris-950: #f4f4fa;
+  --zabi-brand-50: #f7faff;
+  --zabi-brand-100: #edf2fb;
+  --zabi-brand-200: #dfe7fb;
+  --zabi-brand-300: #ccdbfd;
+  --zabi-brand-400: #abc4ff;
+  --zabi-brand-500: #8fa8ff;
+  --zabi-brand-600: #6e84fa;
+  --zabi-brand-700: #5366e2;
+  --zabi-brand-800: #3f4fc0;
+  --zabi-brand-900: #2f3c99;
+  --zabi-brand-950: #1f2866;
+  --color-brand-50: var(--zabi-brand-950);
+  --color-brand-100: var(--zabi-brand-900);
+  --color-brand-200: var(--zabi-brand-800);
+  --color-brand-300: var(--zabi-brand-700);
+  --color-brand-400: var(--zabi-brand-600);
+  --color-brand-500: var(--zabi-brand-500);
+  --color-brand-600: var(--zabi-brand-400);
+  --color-brand-700: var(--zabi-brand-300);
+  --color-brand-800: var(--zabi-brand-200);
+  --color-brand-900: var(--zabi-brand-100);
+  --color-brand-950: var(--zabi-brand-50);
+  --zabi-citron-50: #f9faeb;
+  --zabi-citron-100: #f1f5cf;
+  --zabi-citron-200: #e4ecaa;
+  --zabi-citron-300: #d5e184;
+  --zabi-citron-400: #c7d460;
+  --zabi-citron-500: #bbbe64;
+  --zabi-citron-600: #a3a852;
+  --zabi-citron-700: #848a43;
+  --zabi-citron-800: #666c35;
+  --zabi-citron-900: #4d5229;
+  --zabi-citron-950: #323518;
+  --color-citron-50: var(--zabi-citron-950);
+  --color-citron-100: var(--zabi-citron-900);
+  --color-citron-200: var(--zabi-citron-800);
+  --color-citron-300: var(--zabi-citron-700);
+  --color-citron-400: var(--zabi-citron-600);
+  --color-citron-500: var(--zabi-citron-500);
+  --color-citron-600: var(--zabi-citron-400);
+  --color-citron-700: var(--zabi-citron-300);
+  --color-citron-800: var(--zabi-citron-200);
+  --color-citron-900: var(--zabi-citron-100);
+  --color-citron-950: var(--zabi-citron-50);
+  --zabi-pine-50: #e9f6f2;
+  --zabi-pine-100: #d2ece4;
+  --zabi-pine-200: #a7d9c9;
+  --zabi-pine-300: #78c4ad;
+  --zabi-pine-400: #49ad91;
+  --zabi-pine-500: #0c5d43;
+  --zabi-pine-600: #0a513a;
+  --zabi-pine-700: #084532;
+  --zabi-pine-800: #063a2a;
+  --zabi-pine-900: #04231a;
+  --zabi-pine-950: #02160f;
+  --color-pine-50: var(--zabi-pine-950);
+  --color-pine-100: var(--zabi-pine-900);
+  --color-pine-200: var(--zabi-pine-800);
+  --color-pine-300: var(--zabi-pine-700);
+  --color-pine-400: var(--zabi-pine-600);
+  --color-pine-500: var(--zabi-pine-500);
+  --color-pine-600: var(--zabi-pine-400);
+  --color-pine-700: var(--zabi-pine-300);
+  --color-pine-800: var(--zabi-pine-200);
+  --color-pine-900: var(--zabi-pine-100);
+  --color-pine-950: var(--zabi-pine-50);
+  --zabi-iris-50: #f4f4fa;
+  --zabi-iris-100: #e9e9f7;
+  --zabi-iris-200: #d6d6f0;
+  --zabi-iris-300: #bdbde6;
+  --zabi-iris-400: #a3a3d8;
+  --zabi-iris-500: #6969b3;
+  --zabi-iris-600: #58589e;
+  --zabi-iris-700: #474788;
+  --zabi-iris-800: #38386f;
+  --zabi-iris-900: #2a2a56;
+  --zabi-iris-950: #1b1b37;
+  --color-iris-50: var(--zabi-iris-950);
+  --color-iris-100: var(--zabi-iris-900);
+  --color-iris-200: var(--zabi-iris-800);
+  --color-iris-300: var(--zabi-iris-700);
+  --color-iris-400: var(--zabi-iris-600);
+  --color-iris-500: var(--zabi-iris-500);
+  --color-iris-600: var(--zabi-iris-400);
+  --color-iris-700: var(--zabi-iris-300);
+  --color-iris-800: var(--zabi-iris-200);
+  --color-iris-900: var(--zabi-iris-100);
+  --color-iris-950: var(--zabi-iris-50);
+  --zabi-warning-50: #fffbeb;
+  --zabi-warning-100: #fef3c7;
+  --zabi-warning-200: #fde68a;
+  --zabi-warning-300: #fcd34d;
+  --zabi-warning-400: #fbbf24;
+  --zabi-warning-500: #f59e0b;
+  --zabi-warning-600: #d97706;
+  --zabi-warning-700: #b45309;
+  --zabi-warning-800: #92400e;
+  --zabi-warning-900: #78350f;
+  --zabi-warning-950: #451a03;
+  --color-warning-50: var(--zabi-warning-950);
+  --color-warning-100: var(--zabi-warning-900);
+  --color-warning-200: var(--zabi-warning-800);
+  --color-warning-300: var(--zabi-warning-700);
+  --color-warning-400: var(--zabi-warning-600);
+  --color-warning-500: var(--zabi-warning-500);
+  --color-warning-600: var(--zabi-warning-400);
+  --color-warning-700: var(--zabi-warning-300);
+  --color-warning-800: var(--zabi-warning-200);
+  --color-warning-900: var(--zabi-warning-100);
+  --color-warning-950: var(--zabi-warning-50);
+  --zabi-error-50: #fef2f2;
+  --zabi-error-100: #fee2e2;
+  --zabi-error-200: #fecaca;
+  --zabi-error-300: #fca5a5;
+  --zabi-error-400: #f87171;
+  --zabi-error-500: #ef4444;
+  --zabi-error-600: #dc2626;
+  --zabi-error-700: #b91c1c;
+  --zabi-error-800: #991b1b;
+  --zabi-error-900: #7f1d1d;
+  --zabi-error-950: #450a0a;
+  --color-error-50: var(--zabi-error-950);
+  --color-error-100: var(--zabi-error-900);
+  --color-error-200: var(--zabi-error-800);
+  --color-error-300: var(--zabi-error-700);
+  --color-error-400: var(--zabi-error-600);
+  --color-error-500: var(--zabi-error-500);
+  --color-error-600: var(--zabi-error-400);
+  --color-error-700: var(--zabi-error-300);
+  --color-error-800: var(--zabi-error-200);
+  --color-error-900: var(--zabi-error-100);
+  --color-error-950: var(--zabi-error-50);
   --color-base-50: #09090b;
   --color-base-75: #101013;
   --color-base-100: #18181b;
@@ -3697,35 +3899,13 @@ body {
   --color-input-hover: var(--color-base-300);
   --color-input-focus: var(--color-base-300);
   --color-input-disabled: var(--color-base-300);
-  --color-success: #49ad91;
-  --color-success-weak: #0C5D43;
-  --color-success-medium: #78c4ad;
-  --color-success-strong: #a7d9c9;
-  --color-warning: oklch(76.9% 0.188 70.08);
-  --color-warning-weak: oklch(66.6% 0.179 58.318);
-  --color-warning-medium: oklch(82.8% 0.189 84.429);
-  --color-warning-strong: oklch(87.9% 0.169 91.605);
-  --color-error: oklch(63.7% 0.237 25.331);
-  --color-error-weak: oklch(57.7% 0.245 27.325);
-  --color-error-medium: oklch(70.4% 0.191 22.216);
-  --color-error-strong: oklch(80.8% 0.114 19.571);
-  --color-energetic: #c7d460;
-  --color-energetic-weak: #bbbe64;
-  --color-energetic-medium: #d5e184;
-  --color-energetic-strong: #e4ecaa;
-  --color-info: #6969B3;
-  --color-info-weak: #58589e;
-  --color-info-active: #a3a3d8;
-  --color-info-medium: #a3a3d8;
-  --color-info-strong: #bdbde6;
-  --color-info-text: var(--color-info);
   --color-action-primary-text: var(--color-brand-50);
-  --color-action-danger: oklch(63.7% 0.237 25.331);
-  --color-action-danger-hover: oklch(57.7% 0.245 27.325);
-  --color-action-danger-active: oklch(50.5% 0.213 27.518);
-  --color-action-danger-disabled: oklch(50.5% 0.213 27.518);
-  --color-action-danger-subtle: oklch(25.8% 0.092 26.042);
-  --color-action-danger-subtle-hover: oklch(39.6% 0.141 25.723);
+  --color-action-danger: #ef4444;
+  --color-action-danger-hover: #dc2626;
+  --color-action-danger-active: #b91c1c;
+  --color-action-danger-disabled: #b91c1c;
+  --color-action-danger-subtle: #450a0a;
+  --color-action-danger-subtle-hover: #7f1d1d;
   --shadow-opacity: 0.3;
   --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
   --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));

package/docs/lucide-icons.md

@@ -0,0 +1,24 @@
+# Lucide icons used by zabi-components
+
+The package depends on `@lucide/svelte`. If your app **aliases** `@lucide/svelte` to a hand-authored barrel, re-export every icon the library imports, or drop the alias and use the real package (or per-icon paths only).
+
+## Packaged components (from the `zabi-components` build)
+
+| Source | Import style | Icons |
+|--------|--------------|--------|
+| `CodeBlock` | Per-icon path | `check`, `copy` |
+| `ThemeToggle` | Barrel | `Sun`, `Moon` |
+| `ListItem` | Barrel | `ArrowRight` |
+| `Badge` | Barrel | `Check`, `AlertTriangle`, `X`, `Info` |
+| `ImageUpload` | Barrel | `Image` |
+| `Input` | Barrel | `CheckCircle`, `AlertTriangle`, `AlertCircle` |
+| `Select` | Barrel | `ChevronDown`, `CheckCircle`, `AlertTriangle`, `AlertCircle` |
+| `SidebarPanel` | Barrel | `Search`, `X` |
+| `SidebarAccountPanel` | Barrel | `LogOut`, `Moon`, `Sun`, `User` |
+| `SidebarNavigation` | Barrel | `Command`, `Search` |
+
+Showcase and demo routes under this repo import additional icons (e.g. `CircleQuestionMark`, `Heart`); those are **not** required for consumers who only install the library.
+
+## Typings for `@lucide/svelte/icons/*`
+
+Some versions of `@lucide/svelte` ship per-icon `.d.ts` files that confuse certain TypeScript setups. The published package runs **`postinstall`** → `scripts/fix-lucide-svelte-icon-dts.js` (the script is included in the npm tarball). Keep install scripts enabled, or run that script manually after install if you use `--ignore-scripts`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "Svelte 5 UI components with TypeScript and Tailwind CSS v4. Accessible, easy to theme, works with SSR.",
   "type": "module",
   "main": "dist/index.js",
@@ -62,7 +62,9 @@
     "README.md",
     "THEME.md",
     "THEMING.md",
-    "docs/theme-imports.md"
+    "docs/theme-imports.md",
+    "docs/lucide-icons.md",
+    "scripts/fix-lucide-svelte-icon-dts.js"
   ],
   "keywords": [
     "svelte",
@@ -79,7 +81,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sabnor/zabi-components.git"
+    "url": "git+https://github.com/sabnor/zabi-components.git"
   },
   "scripts": {
     "dev": "vite dev",
@@ -122,7 +124,6 @@
     "@types/node": "^24.5.2",
     "@types/react": "^19.2.2",
     "autoprefixer": "^10.4.17",
-    "baseline-browser-mapping": "^2.10.18",
     "culori": "^4.0.2",
     "jsdom": "^29.0.2",
     "postcss": "^8.4.35",

package/scripts/fix-lucide-svelte-icon-dts.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+/**
+ * @lucide/svelte (0.544.x) ships `dist/icons/*.svelte.d.ts` with a duplicate
+ * `type X = ReturnType<typeof X>` line that makes some TypeScript language
+ * services treat the file as a non-module; re-exports from the package root
+ * then fail (e.g. `Check` / `Copy` missing). Strip those lines after install.
+ */
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const iconsDir = path.join(__dirname, "..", "node_modules", "@lucide", "svelte", "dist", "icons");
+
+const duplicateTypeLine = /\r?\ntype (\w+) = ReturnType<typeof \1>;\r?\n/g;
+
+function fixFile(filePath) {
+    let text = fs.readFileSync(filePath, "utf8");
+    const next = text.replace(duplicateTypeLine, "\n");
+    if (next !== text) {
+        fs.writeFileSync(filePath, next);
+    }
+}
+
+function main() {
+    if (!fs.existsSync(iconsDir)) {
+        return;
+    }
+    for (const name of fs.readdirSync(iconsDir)) {
+        if (!name.endsWith(".svelte.d.ts")) continue;
+        fixFile(path.join(iconsDir, name));
+    }
+}
+
+main();