zabi-components 7.0.0 → 7.0.1

package/dist/zabi-components.css

@@ -141,11 +141,29 @@
     --color-brand-800: #3f4fc0;
     --color-brand-900: #2f3c99;
     --color-brand-950: #1f2866;
+    --color-citron-200: #e4ecaa;
+    --color-citron-300: #d5e184;
+    --color-citron-400: #c7d460;
+    --color-citron-500: #bbbe64;
+    --color-citron-600: #a3a852;
+    --color-citron-700: #848a43;
+    --color-pine-200: #a7d9c9;
+    --color-pine-300: #78c4ad;
+    --color-pine-400: #49ad91;
+    --color-pine-500: #0C5D43;
+    --color-pine-600: #0a513a;
+    --color-pine-700: #084532;
+    --color-pine-800: #063a2a;
+    --color-pine-900: #04231a;
     --color-iris-50: #f4f4fa;
     --color-iris-100: #e9e9f7;
     --color-iris-200: #d6d6f0;
     --color-iris-300: #bdbde6;
+    --color-iris-400: #a3a3d8;
     --color-iris-500: #6969B3;
+    --color-iris-600: #58589e;
+    --color-iris-700: #474788;
+    --color-iris-800: #38386f;
     --color-iris-900: #2a2a56;
     --color-base-50: var(--zabi-base-50);
     --color-base-75: var(--zabi-base-75);
@@ -172,11 +190,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 +210,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 +219,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: #b45309;
     --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: #b91c1c;
+    --color-inverse: #ffffff;
     --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: #f59e0b;
+    --color-error: #ef4444;
+    --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 +273,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;
@@ -2548,7 +2566,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);
@@ -3645,7 +3663,7 @@ body {
   --color-pine-200: #063a2a;
   --color-pine-300: #084532;
   --color-pine-400: #0a513a;
-  --color-pine-500: #0C5D43;
+  --color-pine-500: #0c5d43;
   --color-pine-600: #49ad91;
   --color-pine-700: #78c4ad;
   --color-pine-800: #a7d9c9;
@@ -3656,7 +3674,7 @@ body {
   --color-iris-200: #38386f;
   --color-iris-300: #474788;
   --color-iris-400: #58589e;
-  --color-iris-500: #6969B3;
+  --color-iris-500: #6969b3;
   --color-iris-600: #a3a3d8;
   --color-iris-700: #bdbde6;
   --color-iris-800: #d6d6f0;
@@ -3697,35 +3715,35 @@ 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-success: var(--color-pine-400);
+  --color-success-weak: var(--color-pine-500);
+  --color-success-medium: var(--color-pine-300);
+  --color-success-strong: var(--color-pine-200);
+  --color-warning: #f59e0b;
+  --color-warning-weak: #d97706;
+  --color-warning-medium: #fbbf24;
+  --color-warning-strong: #fcd34d;
+  --color-error: #ef4444;
+  --color-error-weak: #dc2626;
+  --color-error-medium: #f87171;
+  --color-error-strong: #fca5a5;
+  --color-energetic: var(--color-citron-400);
+  --color-energetic-weak: var(--color-citron-500);
+  --color-energetic-medium: var(--color-citron-300);
+  --color-energetic-strong: var(--color-citron-200);
+  --color-info: var(--color-iris-500);
+  --color-info-weak: var(--color-iris-600);
+  --color-info-active: var(--color-iris-400);
+  --color-info-medium: var(--color-iris-400);
+  --color-info-strong: var(--color-iris-300);
   --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.1",
   "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",
@@ -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();