@nqmcreative/ui 0.2.3 → 0.4.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 (232) hide show
  1. package/README.md +209 -15
  2. package/cli/index.mjs +328 -112
  3. package/dist/core/color.d.ts +24 -0
  4. package/dist/core/color.js +39 -0
  5. package/dist/core/index.d.ts +8 -1
  6. package/dist/core/index.js +5 -1
  7. package/dist/core/locale.svelte.d.ts +8 -0
  8. package/dist/core/locale.svelte.js +14 -0
  9. package/dist/core/number.d.ts +22 -0
  10. package/dist/core/number.js +33 -0
  11. package/dist/core/pin.d.ts +23 -0
  12. package/dist/core/pin.js +38 -0
  13. package/dist/core/tags.d.ts +37 -0
  14. package/dist/core/tags.js +51 -0
  15. package/dist/core/time.d.ts +30 -0
  16. package/dist/core/time.js +78 -0
  17. package/dist/core/toast.svelte.d.ts +3 -0
  18. package/dist/styles/matte/AccordionItem.svelte +5 -0
  19. package/dist/styles/matte/AccordionItem.svelte.d.ts +2 -0
  20. package/dist/styles/matte/Avatar.svelte +15 -0
  21. package/dist/styles/matte/Avatar.svelte.d.ts +3 -0
  22. package/dist/styles/matte/Badge.svelte +5 -0
  23. package/dist/styles/matte/Badge.svelte.d.ts +2 -0
  24. package/dist/styles/matte/Breadcrumb.svelte +11 -4
  25. package/dist/styles/matte/Breadcrumb.svelte.d.ts +3 -0
  26. package/dist/styles/matte/Button.svelte +58 -7
  27. package/dist/styles/matte/Button.svelte.d.ts +14 -2
  28. package/dist/styles/matte/Card.svelte +6 -1
  29. package/dist/styles/matte/Card.svelte.d.ts +2 -0
  30. package/dist/styles/matte/CheckboxGroup.svelte +6 -0
  31. package/dist/styles/matte/CheckboxGroup.svelte.d.ts +2 -0
  32. package/dist/styles/matte/ColorInput.svelte +110 -0
  33. package/dist/styles/matte/ColorInput.svelte.d.ts +16 -0
  34. package/dist/styles/matte/Combobox.svelte +5 -0
  35. package/dist/styles/matte/Combobox.svelte.d.ts +3 -0
  36. package/dist/styles/matte/CommandPalette.svelte +6 -0
  37. package/dist/styles/matte/CommandPalette.svelte.d.ts +3 -0
  38. package/dist/styles/matte/CurrencyInput.svelte +108 -0
  39. package/dist/styles/matte/CurrencyInput.svelte.d.ts +26 -0
  40. package/dist/styles/matte/Drawer.svelte +5 -0
  41. package/dist/styles/matte/Drawer.svelte.d.ts +2 -0
  42. package/dist/styles/matte/FileInput.svelte +194 -0
  43. package/dist/styles/matte/FileInput.svelte.d.ts +32 -0
  44. package/dist/styles/matte/Footer.svelte +6 -2
  45. package/dist/styles/matte/Footer.svelte.d.ts +2 -0
  46. package/dist/styles/matte/InputAddon.svelte +36 -0
  47. package/dist/styles/matte/InputAddon.svelte.d.ts +13 -0
  48. package/dist/styles/matte/Link.svelte +9 -0
  49. package/dist/styles/matte/Link.svelte.d.ts +4 -0
  50. package/dist/styles/matte/MenuItem.svelte +2 -1
  51. package/dist/styles/matte/Modal.svelte +5 -0
  52. package/dist/styles/matte/Modal.svelte.d.ts +2 -0
  53. package/dist/styles/matte/MultiSelect.svelte +7 -1
  54. package/dist/styles/matte/MultiSelect.svelte.d.ts +3 -0
  55. package/dist/styles/matte/Navbar.svelte +18 -4
  56. package/dist/styles/matte/Navbar.svelte.d.ts +2 -0
  57. package/dist/styles/matte/PinInput.svelte +137 -0
  58. package/dist/styles/matte/PinInput.svelte.d.ts +25 -0
  59. package/dist/styles/matte/PricingCard.svelte +16 -8
  60. package/dist/styles/matte/PricingCard.svelte.d.ts +2 -0
  61. package/dist/styles/matte/RadioGroup.svelte +6 -0
  62. package/dist/styles/matte/RadioGroup.svelte.d.ts +2 -0
  63. package/dist/styles/matte/SearchInput.svelte +87 -0
  64. package/dist/styles/matte/SearchInput.svelte.d.ts +24 -0
  65. package/dist/styles/matte/SegmentedControl.svelte +16 -2
  66. package/dist/styles/matte/SegmentedControl.svelte.d.ts +5 -0
  67. package/dist/styles/matte/Sidebar.svelte +2 -1
  68. package/dist/styles/matte/Stat.svelte +8 -1
  69. package/dist/styles/matte/Stat.svelte.d.ts +3 -0
  70. package/dist/styles/matte/Steps.svelte +7 -0
  71. package/dist/styles/matte/Steps.svelte.d.ts +3 -0
  72. package/dist/styles/matte/Table.svelte +153 -97
  73. package/dist/styles/matte/Table.svelte.d.ts +12 -0
  74. package/dist/styles/matte/Tabs.svelte +5 -0
  75. package/dist/styles/matte/Tabs.svelte.d.ts +3 -0
  76. package/dist/styles/matte/TagsInput.svelte +173 -0
  77. package/dist/styles/matte/TagsInput.svelte.d.ts +29 -0
  78. package/dist/styles/matte/TimeInput.svelte +129 -0
  79. package/dist/styles/matte/TimeInput.svelte.d.ts +21 -0
  80. package/dist/styles/matte/Toaster.svelte +3 -0
  81. package/dist/styles/matte/icon.d.ts +21 -0
  82. package/dist/styles/matte/icon.js +21 -0
  83. package/dist/styles/matte/index.d.ts +8 -2
  84. package/dist/styles/matte/index.js +8 -2
  85. package/dist/styles/paper/AccordionItem.svelte +5 -0
  86. package/dist/styles/paper/AccordionItem.svelte.d.ts +2 -0
  87. package/dist/styles/paper/Avatar.svelte +15 -0
  88. package/dist/styles/paper/Avatar.svelte.d.ts +3 -0
  89. package/dist/styles/paper/Badge.svelte +5 -0
  90. package/dist/styles/paper/Badge.svelte.d.ts +2 -0
  91. package/dist/styles/paper/Breadcrumb.svelte +8 -4
  92. package/dist/styles/paper/Breadcrumb.svelte.d.ts +3 -0
  93. package/dist/styles/paper/Button.svelte +58 -7
  94. package/dist/styles/paper/Button.svelte.d.ts +14 -2
  95. package/dist/styles/paper/Card.svelte +6 -1
  96. package/dist/styles/paper/Card.svelte.d.ts +2 -0
  97. package/dist/styles/paper/CheckboxGroup.svelte +6 -0
  98. package/dist/styles/paper/CheckboxGroup.svelte.d.ts +2 -0
  99. package/dist/styles/paper/ColorInput.svelte +112 -0
  100. package/dist/styles/paper/ColorInput.svelte.d.ts +16 -0
  101. package/dist/styles/paper/Combobox.svelte +5 -0
  102. package/dist/styles/paper/Combobox.svelte.d.ts +3 -0
  103. package/dist/styles/paper/CommandPalette.svelte +6 -0
  104. package/dist/styles/paper/CommandPalette.svelte.d.ts +3 -0
  105. package/dist/styles/paper/CurrencyInput.svelte +108 -0
  106. package/dist/styles/paper/CurrencyInput.svelte.d.ts +26 -0
  107. package/dist/styles/paper/Drawer.svelte +5 -0
  108. package/dist/styles/paper/Drawer.svelte.d.ts +2 -0
  109. package/dist/styles/paper/FileInput.svelte +204 -0
  110. package/dist/styles/paper/FileInput.svelte.d.ts +32 -0
  111. package/dist/styles/paper/Footer.svelte +6 -2
  112. package/dist/styles/paper/Footer.svelte.d.ts +2 -0
  113. package/dist/styles/paper/InputAddon.svelte +36 -0
  114. package/dist/styles/paper/InputAddon.svelte.d.ts +13 -0
  115. package/dist/styles/paper/Link.svelte +9 -0
  116. package/dist/styles/paper/Link.svelte.d.ts +4 -0
  117. package/dist/styles/paper/MenuItem.svelte +2 -1
  118. package/dist/styles/paper/Modal.svelte +5 -0
  119. package/dist/styles/paper/Modal.svelte.d.ts +2 -0
  120. package/dist/styles/paper/MultiSelect.svelte +7 -1
  121. package/dist/styles/paper/MultiSelect.svelte.d.ts +3 -0
  122. package/dist/styles/paper/Navbar.svelte +18 -4
  123. package/dist/styles/paper/Navbar.svelte.d.ts +2 -0
  124. package/dist/styles/paper/PinInput.svelte +137 -0
  125. package/dist/styles/paper/PinInput.svelte.d.ts +25 -0
  126. package/dist/styles/paper/PricingCard.svelte +23 -15
  127. package/dist/styles/paper/PricingCard.svelte.d.ts +2 -0
  128. package/dist/styles/paper/RadioGroup.svelte +6 -0
  129. package/dist/styles/paper/RadioGroup.svelte.d.ts +2 -0
  130. package/dist/styles/paper/SearchInput.svelte +92 -0
  131. package/dist/styles/paper/SearchInput.svelte.d.ts +24 -0
  132. package/dist/styles/paper/SegmentedControl.svelte +16 -2
  133. package/dist/styles/paper/SegmentedControl.svelte.d.ts +5 -0
  134. package/dist/styles/paper/Sidebar.svelte +2 -1
  135. package/dist/styles/paper/Stat.svelte +8 -1
  136. package/dist/styles/paper/Stat.svelte.d.ts +3 -0
  137. package/dist/styles/paper/Steps.svelte +7 -0
  138. package/dist/styles/paper/Steps.svelte.d.ts +3 -0
  139. package/dist/styles/paper/Table.svelte +153 -97
  140. package/dist/styles/paper/Table.svelte.d.ts +12 -0
  141. package/dist/styles/paper/Tabs.svelte +5 -0
  142. package/dist/styles/paper/Tabs.svelte.d.ts +3 -0
  143. package/dist/styles/paper/TagsInput.svelte +178 -0
  144. package/dist/styles/paper/TagsInput.svelte.d.ts +29 -0
  145. package/dist/styles/paper/TimeInput.svelte +155 -0
  146. package/dist/styles/paper/TimeInput.svelte.d.ts +21 -0
  147. package/dist/styles/paper/Toaster.svelte +3 -0
  148. package/dist/styles/paper/icon.d.ts +21 -0
  149. package/dist/styles/paper/icon.js +21 -0
  150. package/dist/styles/paper/index.d.ts +8 -2
  151. package/dist/styles/paper/index.js +8 -2
  152. package/dist/styles/sprout/AccordionItem.svelte +5 -0
  153. package/dist/styles/sprout/AccordionItem.svelte.d.ts +2 -0
  154. package/dist/styles/sprout/Avatar.svelte +15 -0
  155. package/dist/styles/sprout/Avatar.svelte.d.ts +3 -0
  156. package/dist/styles/sprout/Badge.svelte +5 -0
  157. package/dist/styles/sprout/Badge.svelte.d.ts +2 -0
  158. package/dist/styles/sprout/Breadcrumb.svelte +8 -4
  159. package/dist/styles/sprout/Breadcrumb.svelte.d.ts +3 -0
  160. package/dist/styles/sprout/Button.svelte +58 -7
  161. package/dist/styles/sprout/Button.svelte.d.ts +14 -2
  162. package/dist/styles/sprout/Card.svelte +6 -1
  163. package/dist/styles/sprout/Card.svelte.d.ts +2 -0
  164. package/dist/styles/sprout/CheckboxGroup.svelte +6 -0
  165. package/dist/styles/sprout/CheckboxGroup.svelte.d.ts +2 -0
  166. package/dist/styles/sprout/ColorInput.svelte +112 -0
  167. package/dist/styles/sprout/ColorInput.svelte.d.ts +16 -0
  168. package/dist/styles/sprout/Combobox.svelte +5 -0
  169. package/dist/styles/sprout/Combobox.svelte.d.ts +3 -0
  170. package/dist/styles/sprout/CommandPalette.svelte +6 -0
  171. package/dist/styles/sprout/CommandPalette.svelte.d.ts +3 -0
  172. package/dist/styles/sprout/CurrencyInput.svelte +108 -0
  173. package/dist/styles/sprout/CurrencyInput.svelte.d.ts +26 -0
  174. package/dist/styles/sprout/Drawer.svelte +5 -0
  175. package/dist/styles/sprout/Drawer.svelte.d.ts +2 -0
  176. package/dist/styles/sprout/FileInput.svelte +205 -0
  177. package/dist/styles/sprout/FileInput.svelte.d.ts +32 -0
  178. package/dist/styles/sprout/Footer.svelte +6 -2
  179. package/dist/styles/sprout/Footer.svelte.d.ts +2 -0
  180. package/dist/styles/sprout/InputAddon.svelte +37 -0
  181. package/dist/styles/sprout/InputAddon.svelte.d.ts +13 -0
  182. package/dist/styles/sprout/Link.svelte +9 -0
  183. package/dist/styles/sprout/Link.svelte.d.ts +4 -0
  184. package/dist/styles/sprout/MenuItem.svelte +2 -1
  185. package/dist/styles/sprout/Modal.svelte +5 -0
  186. package/dist/styles/sprout/Modal.svelte.d.ts +2 -0
  187. package/dist/styles/sprout/MultiSelect.svelte +7 -1
  188. package/dist/styles/sprout/MultiSelect.svelte.d.ts +3 -0
  189. package/dist/styles/sprout/Navbar.svelte +18 -4
  190. package/dist/styles/sprout/Navbar.svelte.d.ts +2 -0
  191. package/dist/styles/sprout/PinInput.svelte +138 -0
  192. package/dist/styles/sprout/PinInput.svelte.d.ts +25 -0
  193. package/dist/styles/sprout/PricingCard.svelte +23 -15
  194. package/dist/styles/sprout/PricingCard.svelte.d.ts +2 -0
  195. package/dist/styles/sprout/RadioGroup.svelte +6 -0
  196. package/dist/styles/sprout/RadioGroup.svelte.d.ts +2 -0
  197. package/dist/styles/sprout/SearchInput.svelte +92 -0
  198. package/dist/styles/sprout/SearchInput.svelte.d.ts +24 -0
  199. package/dist/styles/sprout/SegmentedControl.svelte +16 -2
  200. package/dist/styles/sprout/SegmentedControl.svelte.d.ts +5 -0
  201. package/dist/styles/sprout/Sidebar.svelte +2 -1
  202. package/dist/styles/sprout/Stat.svelte +8 -1
  203. package/dist/styles/sprout/Stat.svelte.d.ts +3 -0
  204. package/dist/styles/sprout/Steps.svelte +7 -0
  205. package/dist/styles/sprout/Steps.svelte.d.ts +3 -0
  206. package/dist/styles/sprout/Table.svelte +153 -97
  207. package/dist/styles/sprout/Table.svelte.d.ts +12 -0
  208. package/dist/styles/sprout/Tabs.svelte +5 -0
  209. package/dist/styles/sprout/Tabs.svelte.d.ts +3 -0
  210. package/dist/styles/sprout/TagsInput.svelte +179 -0
  211. package/dist/styles/sprout/TagsInput.svelte.d.ts +29 -0
  212. package/dist/styles/sprout/TimeInput.svelte +155 -0
  213. package/dist/styles/sprout/TimeInput.svelte.d.ts +21 -0
  214. package/dist/styles/sprout/Toaster.svelte +3 -0
  215. package/dist/styles/sprout/icon.d.ts +21 -0
  216. package/dist/styles/sprout/icon.js +21 -0
  217. package/dist/styles/sprout/index.d.ts +8 -2
  218. package/dist/styles/sprout/index.js +8 -2
  219. package/package.json +98 -26
  220. package/registry.json +143 -35
  221. package/dist/styles/matte/NumberInput.svelte +0 -96
  222. package/dist/styles/matte/NumberInput.svelte.d.ts +0 -15
  223. package/dist/styles/matte/PasswordInput.svelte +0 -95
  224. package/dist/styles/matte/PasswordInput.svelte.d.ts +0 -12
  225. package/dist/styles/paper/NumberInput.svelte +0 -96
  226. package/dist/styles/paper/NumberInput.svelte.d.ts +0 -15
  227. package/dist/styles/paper/PasswordInput.svelte +0 -100
  228. package/dist/styles/paper/PasswordInput.svelte.d.ts +0 -12
  229. package/dist/styles/sprout/NumberInput.svelte +0 -97
  230. package/dist/styles/sprout/NumberInput.svelte.d.ts +0 -15
  231. package/dist/styles/sprout/PasswordInput.svelte +0 -101
  232. package/dist/styles/sprout/PasswordInput.svelte.d.ts +0 -12
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # @nqmcreative/ui
2
2
 
3
3
  Svelte 5 (runes) + Tailwind CSS v4 component library. One package, **three
4
- styles**, 65 components each — the same props, the same behaviour, a different
4
+ styles**, 71 components each — the same props, the same behaviour, a different
5
5
  look. Eight tones, light and dark, no runtime dependencies.
6
6
 
7
7
  | style | import | character |
@@ -65,6 +65,131 @@ preconnect plus the no-flash theme script in `src/app.html`, above
65
65
 
66
66
  </details>
67
67
 
68
+ ## Without SvelteKit
69
+
70
+ Nothing in the library imports `$app/*`, `$env/*` or `@sveltejs/kit`. The only
71
+ peer dependency is `svelte` ^5, and every DOM call sits inside an action or an
72
+ effect — so anything that compiles Svelte components runs these: a plain Vite
73
+ app, or a Laravel app with Vite as its front end.
74
+
75
+ The components ship as `.svelte` source, published under a `svelte` export
76
+ condition. `@sveltejs/vite-plugin-svelte` is what resolves that condition and
77
+ compiles them, so it is required outside SvelteKit. `nqm-ui init` detects which
78
+ of the three project shapes it is in and wires the files that shape uses.
79
+
80
+ ### Svelte + Vite
81
+
82
+ ```bash
83
+ npm create vite@latest myapp -- --template svelte-ts
84
+ cd myapp
85
+ npm i @nqmcreative/ui
86
+ npm i -D tailwindcss @tailwindcss/vite
87
+ npx nqm-ui init --style matte
88
+ ```
89
+
90
+ `init` writes `src/app.css`, patches the `<head>` in `index.html`, and adds the
91
+ CSS import to `src/main.ts`. The Vite config is the one thing it prints rather
92
+ than rewrites:
93
+
94
+ ```ts
95
+ // vite.config.ts
96
+ import { defineConfig } from 'vite';
97
+ import { svelte } from '@sveltejs/vite-plugin-svelte';
98
+ import tailwindcss from '@tailwindcss/vite';
99
+
100
+ export default defineConfig({
101
+ plugins: [tailwindcss(), svelte()]
102
+ });
103
+ ```
104
+
105
+ ### Laravel
106
+
107
+ Vite is already how Laravel builds its front end, so Svelte and this package are
108
+ the only additions.
109
+
110
+ ```bash
111
+ npm i @nqmcreative/ui
112
+ npm i -D svelte @sveltejs/vite-plugin-svelte tailwindcss @tailwindcss/vite
113
+ npx nqm-ui init --style matte
114
+ ```
115
+
116
+ ```js
117
+ // vite.config.js
118
+ import { defineConfig } from 'vite';
119
+ import laravel from 'laravel-vite-plugin';
120
+ import { svelte } from '@sveltejs/vite-plugin-svelte';
121
+ import tailwindcss from '@tailwindcss/vite';
122
+
123
+ export default defineConfig({
124
+ plugins: [
125
+ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true }),
126
+ tailwindcss(),
127
+ svelte()
128
+ ]
129
+ });
130
+ ```
131
+
132
+ The entry CSS is `resources/css/app.css`, two levels below the project root, so
133
+ `@source` walks two up. Laravel keeps its markup outside that folder, so point
134
+ Tailwind at your own files too — otherwise the classes you write in Blade and in
135
+ your Svelte islands go missing the same way the package's would:
136
+
137
+ ```css
138
+ /* resources/css/app.css */
139
+ @import 'tailwindcss';
140
+ @import '@nqmcreative/ui/matte/theme.css';
141
+ @import '@nqmcreative/ui/matte/fonts.css';
142
+
143
+ @source '../../node_modules/@nqmcreative/ui/dist/styles/matte';
144
+ @source '../js';
145
+ @source '../views';
146
+ ```
147
+
148
+ Nothing imports that CSS from JavaScript — Blade hands the path to Vite. The
149
+ preconnect and the no-flash theme script go in the same `<head>`, which is what
150
+ `init` patches:
151
+
152
+ ```blade
153
+ {{-- resources/views/app.blade.php --}}
154
+ <head>
155
+ @vite(['resources/css/app.css', 'resources/js/app.js'])
156
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
157
+ <script>
158
+ const saved = localStorage.getItem('nqm-theme');
159
+ if (saved === 'dark' || saved === 'light') document.documentElement.classList.add(saved);
160
+ </script>
161
+ </head>
162
+ ```
163
+
164
+ Then mount Svelte wherever the page needs it — one root component, or an island
165
+ per view:
166
+
167
+ ```js
168
+ // resources/js/app.js
169
+ import { mount } from 'svelte';
170
+ import App from './App.svelte';
171
+
172
+ const target = document.getElementById('app');
173
+ if (target) mount(App, { target });
174
+ ```
175
+
176
+ ```svelte
177
+ <!-- resources/js/App.svelte -->
178
+ <script>
179
+ import { Button, Field, Input } from '@nqmcreative/ui/matte';
180
+
181
+ let email = $state('');
182
+ </script>
183
+
184
+ <Field label="Work email">
185
+ <Input bind:value={email} placeholder="you@example.com" />
186
+ </Field>
187
+ <Button tone="accent">Get started</Button>
188
+ ```
189
+
190
+ Blade renders the shell, Svelte renders the component — the two never fight over
191
+ the same node, because the mount target is the only thing they share.
192
+
68
193
  ## Use
69
194
 
70
195
  The import names the style:
@@ -91,6 +216,75 @@ to nothing, on purpose: a style is a choice, and picking one by accident is the
91
216
  mistake this layout exists to prevent. Switching later is a find-and-replace of
92
217
  the word after `@nqmcreative/ui/`.
93
218
 
219
+ ### Form inputs
220
+
221
+ `Input` takes any `type`, so an email or a URL field is a prop away, not a
222
+ component:
223
+
224
+ ```svelte
225
+ <Input type="email" inputmode="email" autocomplete="email" />
226
+ ```
227
+
228
+ The eight below exist because each adds behaviour a `type` cannot — a second
229
+ value, a keyboard rule, or a format that has to survive a round trip. All of
230
+ them take `size`, `tone`, `invalid` and `disabled`, and mean the same by them as
231
+ `Input` does.
232
+
233
+ | component | binds | what it adds |
234
+ | --------------- | ---------------- | ------------------------------------------------------------------ |
235
+ | `SearchInput` | `string` | Clear button, plus `onsearch` debounced separately from the value. |
236
+ | `InputAddon` | — | Fixed label welded to an `InputGroup`: `https://`, `.com`, `kg`. |
237
+ | `PinInput` | `string` | One box per character, paste spreading, arrow keys, `oncomplete`. |
238
+ | `TagsInput` | `string[]` | Free-text tokens on Enter, deduplicated, capped, split on paste. |
239
+ | `CurrencyInput` | `number \| null` | Grouping applied on blur, so the bound value stays a number. |
240
+ | `TimeInput` | `string` | Steppers and bounds over an `HH:MM` string. |
241
+ | `ColorInput` | `string` | Native swatch and hex field kept in step, normalised to `#rrggbb`. |
242
+ | `FileInput` | `File[]` | One-line picker with `Dropzone`'s type, size and count validation. |
243
+
244
+ Four of them wrap `Input` and fill its prefix or suffix slot — `SearchInput`,
245
+ `CurrencyInput`, `TimeInput`, `ColorInput` — so a change to the field's border
246
+ or focus ring reaches them for free. The other four draw their own box.
247
+
248
+ ```svelte
249
+ <script lang="ts">
250
+ import { CurrencyInput, PinInput, TagsInput, TimeInput } from '@nqmcreative/ui/matte';
251
+
252
+ let price = $state<number | null>(1250000); // a number, not a formatted string
253
+ let code = $state(''); // shorter than `length` means incomplete
254
+ let tags = $state(['svelte']);
255
+ let start = $state('09:00'); // what <input type="time"> would post
256
+ </script>
257
+
258
+ <CurrencyInput bind:value={price} currency="Rp" group="." decimal="," precision={0} />
259
+ <PinInput bind:value={code} length={6} groupAfter={3} oncomplete={verify} />
260
+ <TagsInput bind:tags max={6} onreject={(reason) => toast.error(reason)} />
261
+ <TimeInput bind:value={start} min="08:00" max="17:00" step={15} />
262
+ ```
263
+
264
+ Two details worth knowing before you wire them up. `CurrencyInput` groups on
265
+ blur and not under the caret, because formatting as you type is what pushes the
266
+ caret around mid-word. And `TagsInput` reports every refusal — duplicate, too
267
+ short, list full — through `onreject`, because a field that silently ignores
268
+ Enter reads as broken.
269
+
270
+ The rules are all in `@nqmcreative/ui/core`, not in any style:
271
+
272
+ ```ts
273
+ import {
274
+ addTag,
275
+ splitTags, // tokens
276
+ fillFrom,
277
+ sanitisePin, // codes
278
+ parseTime,
279
+ clampTime, // clock
280
+ formatGrouped,
281
+ parseGrouped, // money
282
+ normaliseHex, // colour
283
+ sortFiles,
284
+ formatSize // files
285
+ } from '@nqmcreative/ui/core';
286
+ ```
287
+
94
288
  ### Tones
95
289
 
96
290
  Eight of them — `brand`, `accent`, `violet`, `info`, `success`, `warning`,
@@ -131,9 +325,9 @@ Under SSR use `<LocaleProvider>` instead, so the locale is scoped to a request.
131
325
 
132
326
  ```
133
327
  src/lib/core/ behaviour, a11y, types — no markup, no classes
134
- src/lib/styles/matte/ 65 components
135
- src/lib/styles/paper/ 65 components
136
- src/lib/styles/sprout/ 65 components
328
+ src/lib/styles/matte/ 71 components
329
+ src/lib/styles/paper/ 71 components
330
+ src/lib/styles/sprout/ 71 components
137
331
  scripts/catalogue.mjs the list every style must implement
138
332
  ```
139
333
 
@@ -150,17 +344,17 @@ same.
150
344
 
151
345
  ## Components
152
346
 
153
- | group | components |
154
- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
155
- | Actions | `Button`, `Link` |
156
- | Forms | `Input`, `Textarea`, `Select`, `Combobox`, `MultiSelect`, `DatePicker`, `Calendar`, `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup`, `SegmentedControl`, `Switch`, `Slider`, `NumberInput`, `PasswordInput`, `InputGroup`, `Dropzone`, `Field`, `Label` |
157
- | Data display | `Badge`, `Avatar`, `AvatarGroup`, `Card`, `Stat`, `Table`, `Kbd` |
158
- | Feedback | `Alert`, `Toaster` + `toast`, `Progress`, `Spinner`, `Skeleton`, `EmptyState` |
159
- | Layout & nav | `Divider`, `Tabs`, `Accordion`, `AccordionItem`, `Breadcrumb`, `Pagination`, `Steps` |
160
- | App shell | `Navbar`, `Sidebar`, `Footer` |
161
- | Overlay | `Modal`, `ConfirmDialog`, `Drawer`, `Dropdown` + `MenuItem` + `MenuSeparator`, `ContextMenu`, `CommandPalette`, `Popover`, `Tooltip` |
162
- | Marketing | `HeroSection`, `FeatureGrid`, `FeatureCard`, `PricingCard`, `Testimonial`, `LogoCloud`, `CTASection`, `StatsBand` |
163
- | System | `ThemeToggle`, `LocaleProvider` |
347
+ | group | components |
348
+ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
349
+ | Actions | `Button`, `Link` |
350
+ | Forms | `Input`, `Textarea`, `Select`, `Combobox`, `MultiSelect`, `DatePicker`, `Calendar`, `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup`, `SegmentedControl`, `Switch`, `Slider`, `InputGroup`, `InputAddon`, `SearchInput`, `PinInput`, `TagsInput`, `CurrencyInput`, `TimeInput`, `ColorInput`, `FileInput`, `Dropzone`, `Field`, `Label` |
351
+ | Data display | `Badge`, `Avatar`, `AvatarGroup`, `Card`, `Stat`, `Table`, `Kbd` |
352
+ | Feedback | `Alert`, `Toaster` + `toast`, `Progress`, `Spinner`, `Skeleton`, `EmptyState` |
353
+ | Layout & nav | `Divider`, `Tabs`, `Accordion`, `AccordionItem`, `Breadcrumb`, `Pagination`, `Steps` |
354
+ | App shell | `Navbar`, `Sidebar`, `Footer` |
355
+ | Overlay | `Modal`, `ConfirmDialog`, `Drawer`, `Dropdown` + `MenuItem` + `MenuSeparator`, `ContextMenu`, `CommandPalette`, `Popover`, `Tooltip` |
356
+ | Marketing | `HeroSection`, `FeatureGrid`, `FeatureCard`, `PricingCard`, `Testimonial`, `LogoCloud`, `CTASection`, `StatsBand` |
357
+ | System | `ThemeToggle`, `LocaleProvider` |
164
358
 
165
359
  Overlays are built on the native top layer and three in-house actions
166
360
  (`portal`, `focusTrap`, `anchored`) rather than a positioning dependency.