zabi-components 5.0.22 → 7.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 (207) hide show
  1. package/README.md +139 -1478
  2. package/THEME.md +473 -0
  3. package/THEMING.md +248 -0
  4. package/dist/atoms/ActionPanel.svelte +116 -0
  5. package/dist/atoms/ActionPanel.svelte.d.ts +19 -0
  6. package/dist/atoms/Badge.svelte +1 -1
  7. package/dist/atoms/Badge.svelte.d.ts +1 -1
  8. package/dist/atoms/Button.svelte +35 -16
  9. package/dist/atoms/Button.svelte.d.ts +3 -1
  10. package/dist/atoms/Card.svelte +49 -67
  11. package/dist/atoms/Card.svelte.d.ts +4 -4
  12. package/dist/atoms/CardHeader.svelte +15 -2
  13. package/dist/atoms/CardHeader.svelte.d.ts +5 -0
  14. package/dist/atoms/Checkbox.svelte +50 -76
  15. package/dist/atoms/Checkbox.svelte.d.ts +7 -2
  16. package/dist/atoms/CodeBlock.svelte +20 -34
  17. package/dist/atoms/CodeBlock.svelte.d.ts +1 -0
  18. package/dist/atoms/ColorPicker.svelte +3 -7
  19. package/dist/atoms/Container.svelte +41 -0
  20. package/dist/atoms/Container.svelte.d.ts +12 -0
  21. package/dist/atoms/Divider.svelte +68 -0
  22. package/dist/atoms/Divider.svelte.d.ts +13 -0
  23. package/dist/atoms/FeatureCard.svelte +35 -50
  24. package/dist/atoms/FeatureCard.svelte.d.ts +9 -4
  25. package/dist/atoms/IconButton.svelte +33 -24
  26. package/dist/atoms/IconButton.svelte.d.ts +4 -8
  27. package/dist/atoms/Input.svelte +58 -26
  28. package/dist/atoms/Input.svelte.d.ts +6 -1
  29. package/dist/atoms/List.svelte +2 -7
  30. package/dist/atoms/List.svelte.d.ts +1 -6
  31. package/dist/atoms/ListItem.svelte +54 -65
  32. package/dist/atoms/ListItem.svelte.d.ts +7 -13
  33. package/dist/atoms/ListItemLeading.svelte +19 -0
  34. package/dist/atoms/ListItemLeading.svelte.d.ts +9 -0
  35. package/dist/atoms/Progress.svelte +2 -2
  36. package/dist/atoms/Radio.svelte +51 -0
  37. package/dist/atoms/Radio.svelte.d.ts +14 -0
  38. package/dist/atoms/Select.svelte +28 -33
  39. package/dist/atoms/Select.svelte.d.ts +0 -10
  40. package/dist/atoms/SelectionControl.svelte +98 -0
  41. package/dist/atoms/SelectionControl.svelte.d.ts +26 -0
  42. package/dist/atoms/Skeleton.svelte +39 -15
  43. package/dist/atoms/Skeleton.svelte.d.ts +7 -3
  44. package/dist/atoms/Table.svelte +27 -0
  45. package/dist/atoms/Table.svelte.d.ts +10 -0
  46. package/dist/atoms/Text.svelte +46 -0
  47. package/dist/atoms/Text.svelte.d.ts +13 -0
  48. package/dist/atoms/Textarea.svelte +74 -53
  49. package/dist/atoms/Textarea.svelte.d.ts +6 -2
  50. package/dist/atoms/ThemeToggle.svelte +35 -24
  51. package/dist/atoms/ThemeToggle.svelte.d.ts +1 -0
  52. package/dist/atoms/Toast.svelte +55 -31
  53. package/dist/atoms/Toast.svelte.d.ts +4 -1
  54. package/dist/atoms/Toggle.svelte +37 -22
  55. package/dist/atoms/Toggle.svelte.d.ts +2 -1
  56. package/dist/atoms/Tooltip.svelte +90 -11
  57. package/dist/atoms/index.d.ts +6 -0
  58. package/dist/atoms/index.js +6 -0
  59. package/dist/atoms/selection-control.styles.d.ts +25 -0
  60. package/dist/atoms/selection-control.styles.js +30 -0
  61. package/dist/components/atoms/index.d.ts +6 -0
  62. package/dist/components/atoms/index.d.ts.map +1 -1
  63. package/dist/components/atoms/selection-control.styles.d.ts +26 -0
  64. package/dist/components/atoms/selection-control.styles.d.ts.map +1 -0
  65. package/dist/components/index.d.ts +42 -7
  66. package/dist/components/index.d.ts.map +1 -1
  67. package/dist/components/molecules/index.d.ts +10 -0
  68. package/dist/components/molecules/index.d.ts.map +1 -1
  69. package/dist/components/molecules/navigation-menu-context.d.ts +11 -0
  70. package/dist/components/molecules/navigation-menu-context.d.ts.map +1 -1
  71. package/dist/components/molecules/toast-store.d.ts +39 -0
  72. package/dist/components/molecules/toast-store.d.ts.map +1 -0
  73. package/dist/components/organisms/index.d.ts +3 -3
  74. package/dist/components/organisms/index.d.ts.map +1 -1
  75. package/dist/components/types/page.types.d.ts +69 -0
  76. package/dist/components/types/page.types.d.ts.map +1 -0
  77. package/dist/components/types/page.types.js +1 -0
  78. package/dist/components/types/variants.d.ts +64 -0
  79. package/dist/components/types/variants.d.ts.map +1 -0
  80. package/dist/components/types/variants.js +44 -0
  81. package/dist/components/util/fixed-sidebar-flyout.d.ts +23 -0
  82. package/dist/components/util/fixed-sidebar-flyout.d.ts.map +1 -0
  83. package/dist/components/util/focus-utils.d.ts +12 -0
  84. package/dist/components/util/focus-utils.d.ts.map +1 -0
  85. package/dist/components/util/ssr-safe.d.ts +17 -0
  86. package/dist/components/util/ssr-safe.d.ts.map +1 -0
  87. package/dist/index.d.ts +42 -7
  88. package/dist/index.js +45 -10
  89. package/dist/lib/layout-width-tokens.d.ts +17 -0
  90. package/dist/lib/layout-width-tokens.d.ts.map +1 -0
  91. package/dist/lib/showcase/component-docs/Button.d.ts +3 -0
  92. package/dist/lib/showcase/component-docs/Button.d.ts.map +1 -0
  93. package/dist/lib/showcase/component-docs/Input.d.ts +3 -0
  94. package/dist/lib/showcase/component-docs/Input.d.ts.map +1 -0
  95. package/dist/lib/showcase/component-docs/List.d.ts +3 -0
  96. package/dist/lib/showcase/component-docs/List.d.ts.map +1 -0
  97. package/dist/lib/showcase/component-docs/Modal.d.ts +3 -0
  98. package/dist/lib/showcase/component-docs/Modal.d.ts.map +1 -0
  99. package/dist/lib/showcase/component-docs/Radio.d.ts +3 -0
  100. package/dist/lib/showcase/component-docs/Radio.d.ts.map +1 -0
  101. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts +3 -0
  102. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts.map +1 -0
  103. package/dist/lib/showcase/component-docs/Skeleton.d.ts +3 -0
  104. package/dist/lib/showcase/component-docs/Skeleton.d.ts.map +1 -0
  105. package/dist/lib/showcase/component-docs/_shared.d.ts +12 -0
  106. package/dist/lib/showcase/component-docs/_shared.d.ts.map +1 -0
  107. package/dist/lib/showcase/component-docs/index.d.ts +4 -0
  108. package/dist/lib/showcase/component-docs/index.d.ts.map +1 -0
  109. package/dist/lib/showcase/components-catalog.d.ts +3 -0
  110. package/dist/lib/showcase/components-catalog.d.ts.map +1 -0
  111. package/dist/lib/showcase/components-showcase-constants.d.ts +89 -0
  112. package/dist/lib/showcase/components-showcase-constants.d.ts.map +1 -0
  113. package/dist/lib/showcase/docs-sidebar-helpers.d.ts +15 -0
  114. package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map +1 -0
  115. package/dist/molecules/Alert.svelte +50 -23
  116. package/dist/molecules/Alert.svelte.d.ts +1 -1
  117. package/dist/molecules/ComponentDemo.svelte +54 -51
  118. package/dist/molecules/ContactForm.svelte +70 -65
  119. package/dist/molecules/Dropdown.svelte +99 -108
  120. package/dist/molecules/Dropdown.svelte.d.ts +12 -6
  121. package/dist/molecules/EmptyState.svelte +44 -0
  122. package/dist/molecules/EmptyState.svelte.d.ts +11 -0
  123. package/dist/molecules/FormField.svelte +89 -0
  124. package/dist/molecules/FormField.svelte.d.ts +23 -0
  125. package/dist/molecules/Header.svelte +41 -0
  126. package/dist/molecules/Header.svelte.d.ts +10 -0
  127. package/dist/molecules/ImageUpload.svelte +1 -1
  128. package/dist/molecules/Modal.svelte +39 -26
  129. package/dist/molecules/Modal.svelte.d.ts +4 -2
  130. package/dist/molecules/NavigationMenu.svelte +16 -0
  131. package/dist/molecules/NavigationMenu.svelte.d.ts +2 -0
  132. package/dist/molecules/NavigationMenuContent.svelte +9 -1
  133. package/dist/molecules/NavigationMenuLink.svelte +1 -1
  134. package/dist/molecules/NavigationMenuTrigger.svelte +9 -4
  135. package/dist/molecules/Page.svelte +16 -0
  136. package/dist/molecules/Page.svelte.d.ts +8 -0
  137. package/dist/molecules/PropsTable.svelte +61 -0
  138. package/dist/molecules/PropsTable.svelte.d.ts +8 -0
  139. package/dist/molecules/RadioGroup.svelte +197 -0
  140. package/dist/molecules/RadioGroup.svelte.d.ts +20 -0
  141. package/dist/molecules/Section.svelte +14 -23
  142. package/dist/molecules/Section.svelte.d.ts +2 -11
  143. package/dist/molecules/SidebarBrandHeader.svelte +68 -0
  144. package/dist/molecules/SidebarBrandHeader.svelte.d.ts +10 -0
  145. package/dist/molecules/SidebarFooter.svelte +119 -0
  146. package/dist/molecules/SidebarFooter.svelte.d.ts +23 -0
  147. package/dist/molecules/SidebarNavSection.svelte +49 -0
  148. package/dist/molecules/SidebarNavSection.svelte.d.ts +14 -0
  149. package/dist/molecules/SlideUp.svelte +21 -16
  150. package/dist/molecules/SlideUp.svelte.d.ts +1 -1
  151. package/dist/molecules/Tabs.svelte +6 -11
  152. package/dist/molecules/Toaster.svelte +21 -0
  153. package/dist/molecules/Toaster.svelte.d.ts +6 -0
  154. package/dist/molecules/ToasterToast.svelte +217 -0
  155. package/dist/molecules/ToasterToast.svelte.d.ts +7 -0
  156. package/dist/molecules/index.d.ts +10 -0
  157. package/dist/molecules/index.js +10 -0
  158. package/dist/molecules/navigation-menu-context.d.ts +11 -0
  159. package/dist/molecules/navigation-menu-context.js +18 -0
  160. package/dist/molecules/toast-store.d.ts +38 -0
  161. package/dist/molecules/toast-store.js +34 -0
  162. package/dist/organisms/SidebarAccountPanel.svelte +118 -0
  163. package/dist/organisms/SidebarAccountPanel.svelte.d.ts +20 -0
  164. package/dist/organisms/SidebarNavigation.svelte +286 -212
  165. package/dist/organisms/SidebarNavigation.svelte.d.ts +22 -1
  166. package/dist/organisms/{SidebarProjectPanel.svelte → SidebarPanel.svelte} +67 -34
  167. package/dist/organisms/{SidebarProjectPanel.svelte.d.ts → SidebarPanel.svelte.d.ts} +9 -6
  168. package/dist/organisms/TopNavbar.svelte +214 -0
  169. package/dist/organisms/TopNavbar.svelte.d.ts +35 -0
  170. package/dist/organisms/index.d.ts +3 -3
  171. package/dist/organisms/index.js +3 -3
  172. package/dist/routes/lib/focus-utils.d.ts +7 -18
  173. package/dist/routes/lib/focus-utils.ts +32 -34
  174. package/dist/routes/lib/ssr-safe.ts +5 -4
  175. package/dist/routes/lib/variant-utils.ts +48 -39
  176. package/dist/types/components.d.ts +187 -0
  177. package/dist/types/components.d.ts.map +1 -0
  178. package/dist/types/events.d.ts +200 -0
  179. package/dist/types/events.d.ts.map +1 -0
  180. package/dist/types/index.d.ts +171 -0
  181. package/dist/types/index.d.ts.map +1 -0
  182. package/dist/types/page.types.d.ts +3 -0
  183. package/dist/types/page.types.d.ts.map +1 -0
  184. package/dist/types/page.types.js +1 -0
  185. package/dist/types/page.types.ts +79 -0
  186. package/dist/types/variants.d.ts +3 -0
  187. package/dist/types/variants.d.ts.map +1 -0
  188. package/dist/types/variants.js +1 -0
  189. package/dist/types/variants.ts +75 -0
  190. package/dist/util/fixed-sidebar-flyout.d.ts +22 -0
  191. package/dist/util/fixed-sidebar-flyout.js +148 -0
  192. package/dist/util/focus-utils.d.ts +11 -0
  193. package/dist/util/focus-utils.js +94 -0
  194. package/dist/util/ssr-safe.d.ts +16 -0
  195. package/dist/util/ssr-safe.js +48 -0
  196. package/dist/zabi-components-colors.css +360 -324
  197. package/dist/zabi-components-theme-dark-only.css +164 -151
  198. package/dist/zabi-components-theme-dark.css +164 -151
  199. package/dist/zabi-components-theme-only.css +253 -230
  200. package/dist/zabi-components-theme.css +253 -230
  201. package/dist/zabi-components.css +1262 -241
  202. package/docs/theme-imports.md +112 -0
  203. package/package.json +32 -10
  204. package/dist/organisms/Navbar.svelte +0 -92
  205. package/dist/organisms/Navbar.svelte.d.ts +0 -14
  206. package/dist/organisms/Navigation.svelte +0 -119
  207. 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": "7.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,19 +85,29 @@
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",
84
- "build:fix-imports": "node scripts/fix-modal-import.js",
88
+ "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/",
89
+ "build:fix-imports": "node scripts/fix-package-imports.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
- "build:types": "tsc --project tsconfig.lib.json",
94
+ "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",
89
95
  "preview": "vite preview",
90
- "check": "svelte-check --tsconfig ./tsconfig.json",
96
+ "check": "svelte-check --tsconfig ./tsconfig.json && node scripts/check-component-imports.js && node scripts/check-layout-width.js",
91
97
  "storybook": "storybook dev -p 6006",
92
98
  "build-storybook": "storybook build",
93
- "prepublishOnly": "npm run build:lib"
99
+ "test": "vitest run",
100
+ "test:watch": "vitest",
101
+ "test:e2e": "playwright test",
102
+ "test:e2e:smoke": "playwright test --grep @smoke",
103
+ "test:playwright": "npm run test:e2e",
104
+ "test:themes": "node --test tests/theme-output.test.js",
105
+ "prepublishOnly": "npm run build:lib",
106
+ "publish:npm": "npm publish --access public --registry https://registry.npmjs.org/",
107
+ "postinstall": "node scripts/fix-lucide-svelte-icon-dts.js"
94
108
  },
95
109
  "devDependencies": {
110
+ "@playwright/test": "^1.52.0",
96
111
  "@storybook/addon-docs": "^10.2.19",
97
112
  "@storybook/sveltekit": "^10.2.19",
98
113
  "@sveltejs/adapter-auto": "^7.0.0",
@@ -100,17 +115,24 @@
100
115
  "@sveltejs/package": "^2.5.4",
101
116
  "@sveltejs/vite-plugin-svelte": "^6.2.0",
102
117
  "@tailwindcss/postcss": "^4.1.13",
118
+ "@testing-library/dom": "^10.4.1",
119
+ "@testing-library/svelte": "^5.3.1",
120
+ "@testing-library/user-event": "^14.6.1",
103
121
  "@tsconfig/svelte": "^5.0.5",
104
122
  "@types/node": "^24.5.2",
105
123
  "@types/react": "^19.2.2",
106
124
  "autoprefixer": "^10.4.17",
125
+ "baseline-browser-mapping": "^2.10.18",
126
+ "culori": "^4.0.2",
127
+ "jsdom": "^29.0.2",
107
128
  "postcss": "^8.4.35",
108
129
  "storybook": "^10.2.19",
109
130
  "svelte": "^5.43.8",
110
131
  "svelte-check": "^4.3.1",
111
132
  "tailwindcss": "^4.1.13",
112
133
  "typescript": "~5.8.3",
113
- "vite": "^7.1.6"
134
+ "vite": "^7.1.6",
135
+ "vitest": "^3.2.4"
114
136
  },
115
137
  "dependencies": {
116
138
  "@lucide/svelte": "^0.544.0"
package/dist/organisms/Navbar.svelte DELETED
@@ -1,92 +0,0 @@
1
- <script lang="ts">
2
- import ThemeToggle from "../atoms/ThemeToggle.svelte";
3
-
4
- interface Props {
5
- brand?: string;
6
- showThemeToggle?: boolean;
7
- className?: string;
8
- onclick?: (event: Event) => void;
9
- }
10
-
11
- let {
12
- brand = "",
13
- showThemeToggle = true,
14
- className = "",
15
- children,
16
- nav,
17
- actions,
18
- ...restProps
19
- }: Props & { children?: any; nav?: any; actions?: any } = $props();
20
-
21
- let isMenuOpen = $state(false);
22
-
23
- function toggleMenu() {
24
- isMenuOpen = !isMenuOpen;
25
- }
26
-
27
- function handleBrandClick() {
28
- }
29
- </script>
30
-
31
- <nav
32
- class="bg-base-50 border-b border-border sticky top-0 z-50 {className}"
33
- {...restProps}
34
- >
35
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
36
- <div class="flex justify-between items-center h-16">
37
- <div class="shrink-0">
38
- <button
39
- type="button"
40
- class="text-xl font-bold text-headline"
41
- onclick={handleBrandClick}
42
- >
43
- {brand}
44
- </button>
45
- </div>
46
-
47
- <div class="hidden md:block">
48
- <div class="ml-10 flex items-baseline space-x-4">
49
- {@render nav?.()}
50
- </div>
51
- </div>
52
-
53
- <div class="hidden md:block">
54
- <div class="ml-4 flex items-center space-x-4">
55
- {@render actions?.()}
56
- {#if showThemeToggle}
57
- <ThemeToggle />
58
- {/if}
59
- </div>
60
- </div>
61
-
62
- <div class="md:hidden">
63
- <button
64
- type="button"
65
- class="text-description hover:text-body"
66
- onclick={toggleMenu}
67
- aria-label="Toggle menu"
68
- >
69
- <span class="text-2xl">☰</span>
70
- </button>
71
- </div>
72
- </div>
73
-
74
- {#if isMenuOpen}
75
- <div class="md:hidden">
76
- <div
77
- class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-border"
78
- >
79
- {@render nav?.()}
80
- <div class="pt-4">
81
- {@render actions?.()}
82
- {#if showThemeToggle}
83
- <div class="mt-2">
84
- <ThemeToggle />
85
- </div>
86
- {/if}
87
- </div>
88
- </div>
89
- </div>
90
- {/if}
91
- </div>
92
- </nav>
package/dist/organisms/Navbar.svelte.d.ts DELETED
@@ -1,14 +0,0 @@
1
- interface Props {
2
- brand?: string;
3
- showThemeToggle?: boolean;
4
- className?: string;
5
- onclick?: (event: Event) => void;
6
- }
7
- type $$ComponentProps = Props & {
8
- children?: any;
9
- nav?: any;
10
- actions?: any;
11
- };
12
- declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
13
- type Navbar = ReturnType<typeof Navbar>;
14
- export default Navbar;
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;