zabi-components 5.0.22 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/README.md +41 -44
  2. package/THEME.md +473 -0
  3. package/THEMING.md +248 -0
  4. package/dist/atoms/Card.svelte +40 -67
  5. package/dist/atoms/Card.svelte.d.ts +3 -3
  6. package/dist/atoms/CardHeader.svelte +10 -1
  7. package/dist/atoms/CardHeader.svelte.d.ts +3 -0
  8. package/dist/atoms/CodeBlock.svelte +1 -1
  9. package/dist/atoms/ColorPicker.svelte +1 -1
  10. package/dist/atoms/Input.svelte +2 -2
  11. package/dist/atoms/Progress.svelte +1 -1
  12. package/dist/atoms/Select.svelte +7 -5
  13. package/dist/atoms/Textarea.svelte +2 -2
  14. package/dist/atoms/Toast.svelte +1 -1
  15. package/dist/components/index.d.ts +1 -2
  16. package/dist/components/index.d.ts.map +1 -1
  17. package/dist/components/organisms/index.d.ts +1 -2
  18. package/dist/components/organisms/index.d.ts.map +1 -1
  19. package/dist/index.d.ts +1 -2
  20. package/dist/index.js +1 -2
  21. package/dist/lib/showcase/components-catalog.d.ts +3 -0
  22. package/dist/lib/showcase/components-catalog.d.ts.map +1 -0
  23. package/dist/lib/showcase/components-showcase-constants.d.ts +63 -0
  24. package/dist/lib/showcase/components-showcase-constants.d.ts.map +1 -0
  25. package/dist/lib/showcase/docs-sidebar-helpers.d.ts +15 -0
  26. package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map +1 -0
  27. package/dist/molecules/Alert.svelte +1 -1
  28. package/dist/molecules/ComponentDemo.svelte +53 -50
  29. package/dist/molecules/ContactForm.svelte +69 -64
  30. package/dist/molecules/Dropdown.svelte +2 -1
  31. package/dist/molecules/ImageUpload.svelte +1 -1
  32. package/dist/molecules/Modal.svelte +2 -2
  33. package/dist/molecules/NavigationMenuContent.svelte +1 -1
  34. package/dist/molecules/NavigationMenuLink.svelte +1 -1
  35. package/dist/molecules/NavigationMenuTrigger.svelte +1 -4
  36. package/dist/molecules/Section.svelte +12 -12
  37. package/dist/molecules/SlideUp.svelte +2 -2
  38. package/dist/molecules/Tabs.svelte +3 -3
  39. package/dist/organisms/Navbar.svelte +170 -53
  40. package/dist/organisms/Navbar.svelte.d.ts +31 -4
  41. package/dist/organisms/SidebarNavigation.svelte +209 -165
  42. package/dist/organisms/SidebarNavigation.svelte.d.ts +5 -0
  43. package/dist/organisms/{SidebarProjectPanel.svelte → SidebarPanel.svelte} +18 -17
  44. package/dist/organisms/{SidebarProjectPanel.svelte.d.ts → SidebarPanel.svelte.d.ts} +6 -6
  45. package/dist/organisms/index.d.ts +1 -2
  46. package/dist/organisms/index.js +1 -2
  47. package/dist/types/page.types.d.ts +32 -0
  48. package/dist/types/page.types.d.ts.map +1 -0
  49. package/dist/types/variants.ts +76 -0
  50. package/dist/zabi-components-colors.css +347 -324
  51. package/dist/zabi-components-theme-dark-only.css +159 -151
  52. package/dist/zabi-components-theme-dark.css +159 -151
  53. package/dist/zabi-components-theme-only.css +245 -230
  54. package/dist/zabi-components-theme.css +245 -230
  55. package/dist/zabi-components.css +437 -101
  56. package/docs/theme-imports.md +112 -0
  57. package/package.json +16 -6
  58. package/dist/organisms/Navigation.svelte +0 -119
  59. package/dist/organisms/Navigation.svelte.d.ts +0 -21
package/docs/theme-imports.md ADDED
@@ -0,0 +1,112 @@
1
+ # Theme CSS imports (consumers)
2
+
3
+ Published CSS files are **generated** from `src/app.css` when you run `npm run build:css`. Do not edit files under `dist/` by hand.
4
+
5
+ ## Canonical recommendation
6
+
7
+ For most Tailwind v4 apps, use:
8
+
9
+ ```css
10
+ @import "tailwindcss";
11
+ @import "zabi-components/theme-only";
12
+ @import "zabi-components/theme-dark-only";
13
+ ```
14
+
15
+ Use short package exports by default. Legacy deep `dist` imports remain supported for compatibility.
16
+
17
+ ## Package export paths
18
+
19
+ Use these subpaths with your bundler or `npm`/`pnpm` resolution:
20
+
21
+ | Export | Resolves to | Use case |
22
+ |--------|-------------|----------|
23
+ | `zabi-components/theme` | `zabi-components-theme.css` | Tailwind **not** already in the project; ships `@import "tailwindcss"` + `@theme`. |
24
+ | `zabi-components/theme-only` | `zabi-components-theme-only.css` | Tailwind **already** configured; merge only the `@theme` block. |
25
+ | `zabi-components/theme-dark` | `zabi-components-theme-dark.css` | Same as `theme` but for **dark**; includes Tailwind import + `.dark { … }`. |
26
+ | `zabi-components/theme-dark-only` | `zabi-components-theme-dark-only.css` | Tailwind present; **only** `.dark { … }` overrides (import after light theme). |
27
+ | `zabi-components/colors` | `zabi-components-colors.css` | **No Tailwind**: `:root` + `.dark` CSS variables only. |
28
+ | `zabi-components/css` | `zabi-components.css` | Full compiled CSS (utilities, components styles, dark). |
29
+
30
+ ### Legacy export paths (supported, deprecated in docs)
31
+
32
+ These are still exported for backward compatibility but are not the recommended imports for new integration:
33
+
34
+ | Legacy export | Resolves to |
35
+ |--------|-------------|
36
+ | `zabi-components/dist/zabi-components.css` | `zabi-components.css` |
37
+ | `zabi-components/dist/zabi-components-colors.css` | `zabi-components-colors.css` |
38
+ | `zabi-components/dist/zabi-components-theme.css` | `zabi-components-theme.css` |
39
+ | `zabi-components/dist/zabi-components-theme-only.css` | `zabi-components-theme-only.css` |
40
+ | `zabi-components/dist/zabi-components-theme-dark.css` | `zabi-components-theme-dark.css` |
41
+ | `zabi-components/dist/zabi-components-theme-dark-only.css` | `zabi-components-theme-dark-only.css` |
42
+
43
+ ## Decision matrix
44
+
45
+ 1. **Vanilla CSS or no Tailwind** → `colors` (or full `css` if you need utility classes from the bundle).
46
+ 2. **Tailwind v4 app, extend design tokens** → `theme-only` (+ `theme-dark-only` if you use `class="dark"` / dark mode).
47
+ 3. **Minimal setup, one import for light** → `theme`.
48
+ 4. **Dark as a second file** → `theme` + `theme-dark`, or `theme-only` + `theme-dark-only`.
49
+
50
+ ## Examples
51
+
52
+ ### Vite / SvelteKit (Tailwind already installed)
53
+
54
+ ```css
55
+ /* src/app.css */
56
+ @import "tailwindcss";
57
+ @import "zabi-components/theme-only";
58
+ @import "zabi-components/theme-dark-only";
59
+ ```
60
+
61
+ ### Vite (no Tailwind; variables only)
62
+
63
+ ```css
64
+ @import "zabi-components/colors";
65
+ ```
66
+
67
+ ### Full stylesheet (Storybook, demos)
68
+
69
+ ```css
70
+ @import "zabi-components/css";
71
+ ```
72
+
73
+ ### Next.js App Router (global CSS)
74
+
75
+ ```css
76
+ /* app/globals.css */
77
+ @import "tailwindcss";
78
+ @import "zabi-components/theme-only";
79
+ @import "zabi-components/theme-dark-only";
80
+ ```
81
+
82
+ ### Vanilla CSS app (no Tailwind)
83
+
84
+ ```css
85
+ @import "zabi-components/colors";
86
+ ```
87
+
88
+ Toggle `.dark` at the root element to activate dark tokens:
89
+
90
+ ```html
91
+ <html class="dark">
92
+ ```
93
+
94
+ ## Maintainer checklist (token changes)
95
+
96
+ 1. Edit **`src/app.css`** only (`@theme` for light tokens, `.dark` for overrides).
97
+ 2. If you change **physical base ramp** hexes, keep the **mirrored** `--zabi-base-*` block inside `.dark` in sync with `@theme` (required for standalone dark imports).
98
+ 3. Run **`npm run build:css`** (or **`npm run build:lib`** before publish).
99
+ 4. Confirm **`node scripts/verify-build.js`** passes in CI or locally after builds.
100
+
101
+ ## Generated outputs (reference)
102
+
103
+ | File | Contents |
104
+ |------|----------|
105
+ | `zabi-components.css` | PostCSS/Tailwind output: utilities + theme + `.dark`. |
106
+ | `zabi-components-theme.css` | `@import tailwind` + `@theme`. |
107
+ | `zabi-components-theme-only.css` | `@theme` only. |
108
+ | `zabi-components-theme-dark.css` | `@import tailwind` + `.dark`. |
109
+ | `zabi-components-theme-dark-only.css` | `.dark` only. |
110
+ | `zabi-components-colors.css` | `:root` + `.dark` as plain custom properties. |
111
+
112
+ Build logic lives in **`scripts/build-css.js`** (see file header for behavior).
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "zabi-components",
3
- "version": "5.0.22",
4
- "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
3
+ "version": "6.0.0",
4
+ "description": "Svelte 5 UI components with TypeScript and Tailwind CSS v4. Accessible, easy to theme, works with SSR.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -53,11 +53,16 @@
53
53
  "./theme-only": "./dist/zabi-components-theme-only.css",
54
54
  "./theme-dark": "./dist/zabi-components-theme-dark.css",
55
55
  "./theme-dark-only": "./dist/zabi-components-theme-dark-only.css",
56
+ "./colors": "./dist/zabi-components-colors.css",
57
+ "./css": "./dist/zabi-components.css",
56
58
  "./package.json": "./package.json"
57
59
  },
58
60
  "files": [
59
61
  "dist",
60
- "README.md"
62
+ "README.md",
63
+ "THEME.md",
64
+ "THEMING.md",
65
+ "docs/theme-imports.md"
61
66
  ],
62
67
  "keywords": [
63
68
  "svelte",
@@ -80,17 +85,20 @@
80
85
  "dev": "vite dev",
81
86
  "build": "vite build && npm run build:types",
82
87
  "build:components": "svelte-package -o dist --input src/components",
83
- "build:lib-files": "mkdir -p dist/routes/lib && 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",
88
+ "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/",
84
89
  "build:fix-imports": "node scripts/fix-modal-import.js",
85
90
  "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",
86
- "build:css": "node scripts/build-css.js && node scripts/validate-theme.js && node scripts/cleanup-css.js",
91
+ "sync:tokens": "node scripts/sync-theme-tokens.js",
92
+ "build:css": "npm run sync:tokens && node scripts/build-css.js && node scripts/validate-theme.js",
87
93
  "check:tokens": "node scripts/check-token-violations.js",
88
94
  "build:types": "tsc --project tsconfig.lib.json",
89
95
  "preview": "vite preview",
90
96
  "check": "svelte-check --tsconfig ./tsconfig.json",
91
97
  "storybook": "storybook dev -p 6006",
92
98
  "build-storybook": "storybook build",
93
- "prepublishOnly": "npm run build:lib"
99
+ "test:themes": "node --test tests/theme-output.test.js",
100
+ "prepublishOnly": "npm run build:lib",
101
+ "publish:npm": "npm publish --access public --registry https://registry.npmjs.org/"
94
102
  },
95
103
  "devDependencies": {
96
104
  "@storybook/addon-docs": "^10.2.19",
@@ -104,6 +112,8 @@
104
112
  "@types/node": "^24.5.2",
105
113
  "@types/react": "^19.2.2",
106
114
  "autoprefixer": "^10.4.17",
115
+ "baseline-browser-mapping": "^2.10.18",
116
+ "culori": "^4.0.2",
107
117
  "postcss": "^8.4.35",
108
118
  "storybook": "^10.2.19",
109
119
  "svelte": "^5.43.8",
package/dist/organisms/Navigation.svelte DELETED
@@ -1,119 +0,0 @@
1
- <script lang="ts">
2
- import type { Component } from "svelte";
3
-
4
- interface NavigationItem {
5
- label: string;
6
- href: string;
7
- icon?: Component<any>; // Outline icon component
8
- iconFilled?: Component<any>; // Filled icon component (for active state)
9
- }
10
-
11
- interface Props {
12
- variant?: "header" | "sidebar";
13
- items?: NavigationItem[];
14
- currentPath?: string;
15
- preventNavigation?: boolean;
16
- onclick?: (event: Event) => void;
17
- className?: string;
18
- }
19
-
20
- let {
21
- variant = "header",
22
- items = [],
23
- currentPath = "",
24
- preventNavigation = false,
25
- onclick,
26
- className = "",
27
- ...restProps
28
- }: Props & { children?: any } = $props();
29
-
30
- function handleClick(event: MouseEvent) {
31
- if (preventNavigation) {
32
- event.preventDefault();
33
- }
34
- if (onclick) {
35
- onclick(event as any);
36
- }
37
- }
38
-
39
- const ulClasses = $derived(() => {
40
- return variant === "sidebar"
41
- ? "flex flex-col gap-1"
42
- : "flex flex-col gap-1 md:flex-row md:items-center md:justify-between";
43
- });
44
-
45
- function getNavItemClasses(itemHref: string): string {
46
- const baseClasses = "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer w-full md:w-auto";
47
-
48
- return baseClasses;
49
- }
50
-
51
- function getIconContainerClasses(itemHref: string): string {
52
- const isActive = currentPath === itemHref;
53
- const baseClasses = "flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 transition-colors duration-200";
54
-
55
- if (isActive) {
56
- return `${baseClasses} bg-action-primary-subtle-hover`;
57
- }
58
- return `${baseClasses}`;
59
- }
60
-
61
- function getStateLayerClasses(): string {
62
- return "box-border flex gap-1 h-10 items-center px-4 py-2 relative shrink-0";
63
- }
64
-
65
- function getLabelClasses(itemHref: string): string {
66
- const isActive = currentPath === itemHref;
67
- const baseClasses = "font-medium leading-4 relative shrink-0 text-center text-nowrap tracking-[0.5px] whitespace-pre text-xs";
68
-
69
- if (isActive) {
70
- return `${baseClasses} text-link`;
71
- }
72
- return `${baseClasses} text-description`;
73
- }
74
-
75
- function getIconClasses(itemHref: string): string {
76
- const isActive = currentPath === itemHref;
77
-
78
- if (isActive) {
79
- return "text-link";
80
- }
81
- return "text-description";
82
- }
83
- </script>
84
-
85
- <ul class="{ulClasses()} {className}" {...restProps}>
86
- {#each items as item}
87
- {@const isActive = currentPath === item.href}
88
- {@const navItemClasses = getNavItemClasses(item.href)}
89
- {@const iconContainerClasses = getIconContainerClasses(item.href)}
90
- {@const labelClasses = getLabelClasses(item.href)}
91
- <li class={navItemClasses}>
92
- <a
93
- href={item.href}
94
- class={iconContainerClasses}
95
- onclick={handleClick}
96
- aria-current={isActive ? "page" : undefined}
97
- >
98
- <div class={getStateLayerClasses()}>
99
- {#if item.iconFilled && isActive}
100
- {@const iconClasses = getIconClasses(item.href)}
101
- {@const Icon = item.iconFilled}
102
- <div class="overflow-clip relative shrink-0 size-4 {iconClasses}">
103
- <Icon size={16} class="w-4 h-4" />
104
- </div>
105
- {:else if item.icon}
106
- {@const iconClasses = getIconClasses(item.href)}
107
- {@const Icon = item.icon}
108
- <div class="overflow-clip relative shrink-0 size-4 {iconClasses}">
109
- <Icon size={16} class="w-4 h-4" />
110
- </div>
111
- {/if}
112
- <p class={labelClasses}>
113
- {item.label}
114
- </p>
115
- </div>
116
- </a>
117
- </li>
118
- {/each}
119
- </ul>
package/dist/organisms/Navigation.svelte.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import type { Component } from "svelte";
2
- interface NavigationItem {
3
- label: string;
4
- href: string;
5
- icon?: Component<any>;
6
- iconFilled?: Component<any>;
7
- }
8
- interface Props {
9
- variant?: "header" | "sidebar";
10
- items?: NavigationItem[];
11
- currentPath?: string;
12
- preventNavigation?: boolean;
13
- onclick?: (event: Event) => void;
14
- className?: string;
15
- }
16
- type $$ComponentProps = Props & {
17
- children?: any;
18
- };
19
- declare const Navigation: Component<$$ComponentProps, {}, "">;
20
- type Navigation = ReturnType<typeof Navigation>;
21
- export default Navigation;