zabi-components 6.0.0 → 7.0.1

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": "6.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",
@@ -85,22 +87,29 @@
     "dev": "vite dev",
     "build": "vite build && npm run build:types",
     "build:components": "svelte-package -o dist --input src/components",
-    "build:lib-files": "mkdir -p dist/routes/lib dist/types && cp src/routes/lib/ssr-safe.ts dist/routes/lib/ && cp src/routes/lib/variant-utils.ts dist/routes/lib/ && cp src/routes/lib/focus-utils.ts dist/routes/lib/ && cp src/routes/lib/focus-utils.d.ts dist/routes/lib/ 2>/dev/null || true && cp src/types/variants.ts dist/types/",
-    "build:fix-imports": "node scripts/fix-modal-import.js",
+    "build:lib-files": "mkdir -p dist/routes/lib dist/types && cp src/components/util/ssr-safe.ts dist/routes/lib/ && cp src/routes/lib/variant-utils.ts dist/routes/lib/ && cp src/components/util/focus-utils.ts dist/routes/lib/ && cp src/components/types/variants.ts dist/types/ && cp src/components/types/page.types.ts dist/types/",
+    "build:fix-imports": "node scripts/fix-package-imports.js",
     "build:lib": "npm run build:css && npm run build:components && npm run build:lib-files && npm run build:fix-imports && npm run build:types && npm run build:css && node scripts/verify-build.js",
     "sync:tokens": "node scripts/sync-theme-tokens.js",
     "build:css": "npm run sync:tokens && node scripts/build-css.js && node scripts/validate-theme.js",
     "check:tokens": "node scripts/check-token-violations.js",
-    "build:types": "tsc --project tsconfig.lib.json",
+    "build:types": "tsc --project tsconfig.lib.json && cp dist/components/util/focus-utils.d.ts dist/routes/lib/ && node scripts/emit-components-types-runtime.js",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-check --tsconfig ./tsconfig.json && node scripts/check-component-imports.js && node scripts/check-layout-width.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:smoke": "playwright test --grep @smoke",
+    "test:playwright": "npm run test:e2e",
     "test:themes": "node --test tests/theme-output.test.js",
     "prepublishOnly": "npm run build:lib",
-    "publish:npm": "npm publish --access public --registry https://registry.npmjs.org/"
+    "publish:npm": "npm publish --access public --registry https://registry.npmjs.org/",
+    "postinstall": "node scripts/fix-lucide-svelte-icon-dts.js"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
     "@storybook/addon-docs": "^10.2.19",
     "@storybook/sveltekit": "^10.2.19",
     "@sveltejs/adapter-auto": "^7.0.0",
@@ -108,19 +117,23 @@
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@tailwindcss/postcss": "^4.1.13",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@tsconfig/svelte": "^5.0.5",
     "@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",
     "storybook": "^10.2.19",
     "svelte": "^5.43.8",
     "svelte-check": "^4.3.1",
     "tailwindcss": "^4.1.13",
     "typescript": "~5.8.3",
-    "vite": "^7.1.6"
+    "vite": "^7.1.6",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@lucide/svelte": "^0.544.0"

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();

package/dist/organisms/Navbar.svelte.d.ts

@@ -1,41 +0,0 @@
-import type { Component, Snippet } from "svelte";
-/** Link shown in the built-in nav list (when not using the `nav` snippet). */
-export interface NavbarNavItem {
-    label: string;
-    href: string;
-    icon?: Component<{
-        size?: number;
-        class?: string;
-    }>;
-    iconFilled?: Component<{
-        size?: number;
-        class?: string;
-    }>;
-}
-interface Props {
-    brand?: string;
-    /** When set, the brand is a link (use `""` to show text only). */
-    brandHref?: string;
-    /** Accessible name for the landmark when you have more than one `nav`. */
-    ariaLabel?: string;
-    showThemeToggle?: boolean;
-    className?: string;
-    /**
-     * When true, renders only the built-in link list (or `nav` snippet) inside a `nav` landmark.
-     * Use for headers that are not the full chrome bar.
-     */
-    embedded?: boolean;
-    /** Inline nav links; ignored when the `nav` snippet is provided. */
-    items?: NavbarNavItem[];
-    navVariant?: "header" | "sidebar";
-    currentPath?: string;
-    preventNavigation?: boolean;
-    onclick?: (event: Event) => void;
-}
-type $$ComponentProps = Props & {
-    nav?: Snippet;
-    actions?: Snippet;
-};
-declare const Navbar: Component<$$ComponentProps, {}, "">;
-type Navbar = ReturnType<typeof Navbar>;
-export default Navbar;