@nqmcreative/ui 0.1.1 → 0.2.1

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 (308) hide show
  1. package/README.md +89 -34
  2. package/cli/index.mjs +83 -33
  3. package/dist/core/calendar.d.ts +3 -0
  4. package/dist/core/calendar.js +36 -0
  5. package/dist/core/dialog.svelte.d.ts +14 -0
  6. package/dist/core/dialog.svelte.js +23 -0
  7. package/dist/core/files.d.ts +35 -0
  8. package/dist/core/files.js +62 -0
  9. package/dist/core/index.d.ts +37 -0
  10. package/dist/core/index.js +35 -0
  11. package/dist/core/list.svelte.d.ts +41 -0
  12. package/dist/core/list.svelte.js +77 -0
  13. package/dist/core/number.d.ts +7 -0
  14. package/dist/core/number.js +17 -0
  15. package/dist/core/pagination.d.ts +6 -0
  16. package/dist/core/pagination.js +21 -0
  17. package/dist/core/password.d.ts +8 -0
  18. package/dist/core/password.js +23 -0
  19. package/dist/core/table.d.ts +22 -0
  20. package/dist/core/table.js +41 -0
  21. package/dist/core/theme.svelte.d.ts +16 -0
  22. package/dist/core/theme.svelte.js +34 -0
  23. package/dist/core/trigger.d.ts +35 -0
  24. package/dist/core/trigger.js +77 -0
  25. package/dist/index.d.ts +11 -103
  26. package/dist/index.js +11 -75
  27. package/dist/{components → styles/matte}/AccordionItem.svelte +1 -1
  28. package/dist/{components → styles/matte}/AccordionItem.svelte.d.ts +1 -1
  29. package/dist/{components → styles/matte}/Alert.svelte +8 -2
  30. package/dist/{components → styles/matte}/Alert.svelte.d.ts +1 -1
  31. package/dist/{components → styles/matte}/Avatar.svelte +1 -1
  32. package/dist/{components → styles/matte}/Avatar.svelte.d.ts +1 -1
  33. package/dist/{components → styles/matte}/Badge.svelte +8 -3
  34. package/dist/{components → styles/matte}/Badge.svelte.d.ts +1 -3
  35. package/dist/{components → styles/matte}/Breadcrumb.svelte +2 -2
  36. package/dist/{components → styles/matte}/Breadcrumb.svelte.d.ts +1 -1
  37. package/dist/{components → styles/matte}/Button.svelte +1 -1
  38. package/dist/{components → styles/matte}/Button.svelte.d.ts +1 -1
  39. package/dist/styles/matte/CTASection.svelte +76 -0
  40. package/dist/styles/matte/CTASection.svelte.d.ts +18 -0
  41. package/dist/{components → styles/matte}/Calendar.svelte +7 -17
  42. package/dist/{components → styles/matte}/Calendar.svelte.d.ts +1 -1
  43. package/dist/{components → styles/matte}/Card.svelte +1 -1
  44. package/dist/{components → styles/matte}/Card.svelte.d.ts +1 -1
  45. package/dist/{components → styles/matte}/Checkbox.svelte +1 -1
  46. package/dist/{components → styles/matte}/Checkbox.svelte.d.ts +1 -1
  47. package/dist/{components → styles/matte}/CheckboxGroup.svelte +1 -1
  48. package/dist/{components → styles/matte}/CheckboxGroup.svelte.d.ts +1 -1
  49. package/dist/{components → styles/matte}/Combobox.svelte +31 -42
  50. package/dist/{components → styles/matte}/Combobox.svelte.d.ts +1 -1
  51. package/dist/{components → styles/matte}/CommandPalette.svelte +26 -41
  52. package/dist/{components → styles/matte}/CommandPalette.svelte.d.ts +1 -1
  53. package/dist/{components → styles/matte}/ConfirmDialog.svelte +2 -2
  54. package/dist/{components → styles/matte}/ConfirmDialog.svelte.d.ts +2 -2
  55. package/dist/{components → styles/matte}/ContextMenu.svelte +5 -7
  56. package/dist/{components → styles/matte}/DatePicker.svelte +7 -11
  57. package/dist/{components → styles/matte}/DatePicker.svelte.d.ts +1 -1
  58. package/dist/{components → styles/matte}/Drawer.svelte +4 -7
  59. package/dist/{components → styles/matte}/Dropdown.svelte +18 -36
  60. package/dist/{components → styles/matte}/Dropdown.svelte.d.ts +1 -1
  61. package/dist/{components → styles/matte}/Dropzone.svelte +11 -43
  62. package/dist/{components → styles/matte}/Dropzone.svelte.d.ts +2 -5
  63. package/dist/{components → styles/matte}/EmptyState.svelte +1 -1
  64. package/dist/{components → styles/matte}/EmptyState.svelte.d.ts +1 -1
  65. package/dist/styles/matte/FeatureCard.svelte +58 -0
  66. package/dist/styles/matte/FeatureCard.svelte.d.ts +16 -0
  67. package/dist/styles/matte/FeatureGrid.svelte +62 -0
  68. package/dist/styles/matte/FeatureGrid.svelte.d.ts +16 -0
  69. package/dist/{components → styles/matte}/Footer.svelte +1 -1
  70. package/dist/{components → styles/matte}/Footer.svelte.d.ts +1 -1
  71. package/dist/styles/matte/HeroSection.svelte +80 -0
  72. package/dist/styles/matte/HeroSection.svelte.d.ts +21 -0
  73. package/dist/{components → styles/matte}/Input.svelte +1 -1
  74. package/dist/{components → styles/matte}/Input.svelte.d.ts +1 -1
  75. package/dist/{components → styles/matte}/Link.svelte +1 -1
  76. package/dist/{components → styles/matte}/Link.svelte.d.ts +1 -1
  77. package/dist/{components → styles/matte}/LocaleProvider.svelte +1 -1
  78. package/dist/{components → styles/matte}/LocaleProvider.svelte.d.ts +1 -1
  79. package/dist/styles/matte/LogoCloud.svelte +61 -0
  80. package/dist/styles/matte/LogoCloud.svelte.d.ts +19 -0
  81. package/dist/{components → styles/matte}/MenuItem.svelte +1 -1
  82. package/dist/{components → styles/matte}/MenuItem.svelte.d.ts +1 -1
  83. package/dist/{components → styles/matte}/Modal.svelte +4 -7
  84. package/dist/{components → styles/matte}/MultiSelect.svelte +18 -37
  85. package/dist/{components → styles/matte}/MultiSelect.svelte.d.ts +1 -1
  86. package/dist/{components → styles/matte}/Navbar.svelte +2 -2
  87. package/dist/{components → styles/matte}/Navbar.svelte.d.ts +1 -1
  88. package/dist/{components → styles/matte}/NumberInput.svelte +4 -8
  89. package/dist/{components → styles/matte}/NumberInput.svelte.d.ts +1 -1
  90. package/dist/{components → styles/matte}/Pagination.svelte +4 -15
  91. package/dist/{components → styles/matte}/Pagination.svelte.d.ts +1 -1
  92. package/dist/{components → styles/matte}/PasswordInput.svelte +4 -13
  93. package/dist/{components → styles/matte}/PasswordInput.svelte.d.ts +1 -1
  94. package/dist/{components → styles/matte}/Popover.svelte +16 -41
  95. package/dist/{components → styles/matte}/Popover.svelte.d.ts +1 -1
  96. package/dist/styles/matte/PricingCard.svelte +107 -0
  97. package/dist/styles/matte/PricingCard.svelte.d.ts +25 -0
  98. package/dist/{components → styles/matte}/Progress.svelte +3 -2
  99. package/dist/{components → styles/matte}/Progress.svelte.d.ts +1 -1
  100. package/dist/{components → styles/matte}/Radio.svelte +1 -1
  101. package/dist/{components → styles/matte}/Radio.svelte.d.ts +1 -1
  102. package/dist/{components → styles/matte}/RadioGroup.svelte +1 -1
  103. package/dist/{components → styles/matte}/RadioGroup.svelte.d.ts +1 -1
  104. package/dist/{components → styles/matte}/SegmentedControl.svelte +1 -1
  105. package/dist/{components → styles/matte}/SegmentedControl.svelte.d.ts +1 -1
  106. package/dist/{components → styles/matte}/Select.svelte +1 -1
  107. package/dist/{components → styles/matte}/Select.svelte.d.ts +1 -1
  108. package/dist/{components → styles/matte}/Sidebar.svelte +2 -2
  109. package/dist/{components → styles/matte}/Sidebar.svelte.d.ts +1 -1
  110. package/dist/{components → styles/matte}/Slider.svelte +3 -2
  111. package/dist/{components → styles/matte}/Slider.svelte.d.ts +1 -1
  112. package/dist/{components → styles/matte}/Spinner.svelte +2 -2
  113. package/dist/{components → styles/matte}/Spinner.svelte.d.ts +1 -1
  114. package/dist/{components → styles/matte}/Stat.svelte +1 -1
  115. package/dist/{components → styles/matte}/Stat.svelte.d.ts +1 -1
  116. package/dist/styles/matte/StatsBand.svelte +57 -0
  117. package/dist/styles/matte/StatsBand.svelte.d.ts +20 -0
  118. package/dist/{components → styles/matte}/Steps.svelte +1 -1
  119. package/dist/{components → styles/matte}/Steps.svelte.d.ts +1 -1
  120. package/dist/{components → styles/matte}/Switch.svelte +1 -1
  121. package/dist/{components → styles/matte}/Switch.svelte.d.ts +1 -1
  122. package/dist/{components → styles/matte}/Table.svelte +6 -28
  123. package/dist/{components → styles/matte}/Table.svelte.d.ts +2 -6
  124. package/dist/{components → styles/matte}/Tabs.svelte +8 -1
  125. package/dist/{components → styles/matte}/Tabs.svelte.d.ts +1 -1
  126. package/dist/styles/matte/Testimonial.svelte +67 -0
  127. package/dist/styles/matte/Testimonial.svelte.d.ts +19 -0
  128. package/dist/{components → styles/matte}/Textarea.svelte +1 -1
  129. package/dist/{components → styles/matte}/Textarea.svelte.d.ts +1 -1
  130. package/dist/{components → styles/matte}/ThemeToggle.svelte +14 -27
  131. package/dist/{components → styles/matte}/ThemeToggle.svelte.d.ts +2 -6
  132. package/dist/{components → styles/matte}/Toaster.svelte +4 -4
  133. package/dist/styles/matte/index.d.ts +109 -0
  134. package/dist/styles/matte/index.js +83 -0
  135. package/dist/styles/paper/Accordion.svelte +17 -0
  136. package/dist/styles/paper/Accordion.svelte.d.ts +8 -0
  137. package/dist/styles/paper/AccordionItem.svelte +46 -0
  138. package/dist/styles/paper/AccordionItem.svelte.d.ts +14 -0
  139. package/dist/styles/paper/Alert.svelte +99 -0
  140. package/dist/styles/paper/Alert.svelte.d.ts +18 -0
  141. package/dist/styles/paper/Avatar.svelte +60 -0
  142. package/dist/styles/paper/Avatar.svelte.d.ts +16 -0
  143. package/dist/styles/paper/AvatarGroup.svelte +17 -0
  144. package/dist/styles/paper/AvatarGroup.svelte.d.ts +8 -0
  145. package/dist/styles/paper/Badge.svelte +58 -0
  146. package/dist/styles/paper/Badge.svelte.d.ts +16 -0
  147. package/dist/styles/paper/Breadcrumb.svelte +49 -0
  148. package/dist/styles/paper/Breadcrumb.svelte.d.ts +14 -0
  149. package/dist/styles/paper/Button.svelte +96 -0
  150. package/dist/styles/paper/Button.svelte.d.ts +21 -0
  151. package/dist/styles/paper/CTASection.svelte +76 -0
  152. package/dist/styles/paper/CTASection.svelte.d.ts +18 -0
  153. package/dist/styles/paper/Calendar.svelte +202 -0
  154. package/dist/styles/paper/Calendar.svelte.d.ts +22 -0
  155. package/dist/styles/paper/Card.svelte +78 -0
  156. package/dist/styles/paper/Card.svelte.d.ts +21 -0
  157. package/dist/styles/paper/Checkbox.svelte +75 -0
  158. package/dist/styles/paper/Checkbox.svelte.d.ts +15 -0
  159. package/dist/styles/paper/CheckboxGroup.svelte +111 -0
  160. package/dist/styles/paper/CheckboxGroup.svelte.d.ts +30 -0
  161. package/dist/styles/paper/Combobox.svelte +266 -0
  162. package/dist/styles/paper/Combobox.svelte.d.ts +29 -0
  163. package/dist/styles/paper/CommandPalette.svelte +209 -0
  164. package/dist/styles/paper/CommandPalette.svelte.d.ts +32 -0
  165. package/dist/styles/paper/ConfirmDialog.svelte +97 -0
  166. package/dist/styles/paper/ConfirmDialog.svelte.d.ts +22 -0
  167. package/dist/styles/paper/ContextMenu.svelte +88 -0
  168. package/dist/styles/paper/ContextMenu.svelte.d.ts +15 -0
  169. package/dist/styles/paper/DatePicker.svelte +192 -0
  170. package/dist/styles/paper/DatePicker.svelte.d.ts +23 -0
  171. package/dist/styles/paper/Divider.svelte +30 -0
  172. package/dist/styles/paper/Divider.svelte.d.ts +10 -0
  173. package/dist/styles/paper/Drawer.svelte +165 -0
  174. package/dist/styles/paper/Drawer.svelte.d.ts +20 -0
  175. package/dist/styles/paper/Dropdown.svelte +94 -0
  176. package/dist/styles/paper/Dropdown.svelte.d.ts +23 -0
  177. package/dist/styles/paper/Dropzone.svelte +210 -0
  178. package/dist/styles/paper/Dropzone.svelte.d.ts +29 -0
  179. package/dist/styles/paper/EmptyState.svelte +71 -0
  180. package/dist/styles/paper/EmptyState.svelte.d.ts +18 -0
  181. package/dist/styles/paper/FeatureCard.svelte +58 -0
  182. package/dist/styles/paper/FeatureCard.svelte.d.ts +16 -0
  183. package/dist/styles/paper/FeatureGrid.svelte +62 -0
  184. package/dist/styles/paper/FeatureGrid.svelte.d.ts +16 -0
  185. package/dist/styles/paper/Field.svelte +42 -0
  186. package/dist/styles/paper/Field.svelte.d.ts +16 -0
  187. package/dist/styles/paper/Footer.svelte +91 -0
  188. package/dist/styles/paper/Footer.svelte.d.ts +25 -0
  189. package/dist/styles/paper/HeroSection.svelte +86 -0
  190. package/dist/styles/paper/HeroSection.svelte.d.ts +21 -0
  191. package/dist/styles/paper/Input.svelte +60 -0
  192. package/dist/styles/paper/Input.svelte.d.ts +18 -0
  193. package/dist/styles/paper/InputGroup.svelte +20 -0
  194. package/dist/styles/paper/InputGroup.svelte.d.ts +11 -0
  195. package/dist/styles/paper/Kbd.svelte +17 -0
  196. package/dist/styles/paper/Kbd.svelte.d.ts +8 -0
  197. package/dist/styles/paper/Label.svelte +16 -0
  198. package/dist/styles/paper/Label.svelte.d.ts +9 -0
  199. package/dist/styles/paper/Link.svelte +44 -0
  200. package/dist/styles/paper/Link.svelte.d.ts +16 -0
  201. package/dist/styles/paper/LocaleProvider.svelte +24 -0
  202. package/dist/styles/paper/LocaleProvider.svelte.d.ts +10 -0
  203. package/dist/styles/paper/LogoCloud.svelte +61 -0
  204. package/dist/styles/paper/LogoCloud.svelte.d.ts +19 -0
  205. package/dist/styles/paper/MenuItem.svelte +64 -0
  206. package/dist/styles/paper/MenuItem.svelte.d.ts +18 -0
  207. package/dist/styles/paper/MenuSeparator.svelte +22 -0
  208. package/dist/styles/paper/MenuSeparator.svelte.d.ts +8 -0
  209. package/dist/styles/paper/Modal.svelte +118 -0
  210. package/dist/styles/paper/Modal.svelte.d.ts +21 -0
  211. package/dist/styles/paper/MultiSelect.svelte +287 -0
  212. package/dist/styles/paper/MultiSelect.svelte.d.ts +31 -0
  213. package/dist/styles/paper/Navbar.svelte +201 -0
  214. package/dist/styles/paper/Navbar.svelte.d.ts +33 -0
  215. package/dist/styles/paper/NumberInput.svelte +96 -0
  216. package/dist/styles/paper/NumberInput.svelte.d.ts +15 -0
  217. package/dist/styles/paper/Pagination.svelte +83 -0
  218. package/dist/styles/paper/Pagination.svelte.d.ts +15 -0
  219. package/dist/styles/paper/PasswordInput.svelte +100 -0
  220. package/dist/styles/paper/PasswordInput.svelte.d.ts +12 -0
  221. package/dist/styles/paper/Popover.svelte +89 -0
  222. package/dist/styles/paper/Popover.svelte.d.ts +19 -0
  223. package/dist/styles/paper/PricingCard.svelte +108 -0
  224. package/dist/styles/paper/PricingCard.svelte.d.ts +25 -0
  225. package/dist/styles/paper/Progress.svelte +59 -0
  226. package/dist/styles/paper/Progress.svelte.d.ts +17 -0
  227. package/dist/styles/paper/Radio.svelte +55 -0
  228. package/dist/styles/paper/Radio.svelte.d.ts +15 -0
  229. package/dist/styles/paper/RadioGroup.svelte +95 -0
  230. package/dist/styles/paper/RadioGroup.svelte.d.ts +27 -0
  231. package/dist/styles/paper/SegmentedControl.svelte +88 -0
  232. package/dist/styles/paper/SegmentedControl.svelte.d.ts +25 -0
  233. package/dist/styles/paper/Select.svelte +61 -0
  234. package/dist/styles/paper/Select.svelte.d.ts +20 -0
  235. package/dist/styles/paper/Sidebar.svelte +206 -0
  236. package/dist/styles/paper/Sidebar.svelte.d.ts +36 -0
  237. package/dist/styles/paper/Skeleton.svelte +46 -0
  238. package/dist/styles/paper/Skeleton.svelte.d.ts +13 -0
  239. package/dist/styles/paper/Slider.svelte +80 -0
  240. package/dist/styles/paper/Slider.svelte.d.ts +19 -0
  241. package/dist/styles/paper/Spinner.svelte +34 -0
  242. package/dist/styles/paper/Spinner.svelte.d.ts +13 -0
  243. package/dist/styles/paper/Stat.svelte +51 -0
  244. package/dist/styles/paper/Stat.svelte.d.ts +16 -0
  245. package/dist/styles/paper/StatsBand.svelte +63 -0
  246. package/dist/styles/paper/StatsBand.svelte.d.ts +20 -0
  247. package/dist/styles/paper/Steps.svelte +141 -0
  248. package/dist/styles/paper/Steps.svelte.d.ts +24 -0
  249. package/dist/styles/paper/Switch.svelte +64 -0
  250. package/dist/styles/paper/Switch.svelte.d.ts +14 -0
  251. package/dist/styles/paper/Table.svelte +217 -0
  252. package/dist/styles/paper/Table.svelte.d.ts +66 -0
  253. package/dist/styles/paper/Tabs.svelte +102 -0
  254. package/dist/styles/paper/Tabs.svelte.d.ts +23 -0
  255. package/dist/styles/paper/Testimonial.svelte +64 -0
  256. package/dist/styles/paper/Testimonial.svelte.d.ts +19 -0
  257. package/dist/styles/paper/Textarea.svelte +54 -0
  258. package/dist/styles/paper/Textarea.svelte.d.ts +12 -0
  259. package/dist/styles/paper/ThemeToggle.svelte +130 -0
  260. package/dist/styles/paper/ThemeToggle.svelte.d.ts +16 -0
  261. package/dist/styles/paper/Toaster.svelte +132 -0
  262. package/dist/styles/paper/Toaster.svelte.d.ts +8 -0
  263. package/dist/styles/paper/Tooltip.svelte +33 -0
  264. package/dist/styles/paper/Tooltip.svelte.d.ts +12 -0
  265. package/dist/styles/paper/fonts.css +46 -0
  266. package/dist/styles/paper/index.d.ts +109 -0
  267. package/dist/styles/paper/index.js +83 -0
  268. package/dist/styles/paper/theme.css +222 -0
  269. package/package.json +531 -201
  270. package/registry.json +658 -339
  271. /package/dist/{actions → core/actions}/anchor.d.ts +0 -0
  272. /package/dist/{actions → core/actions}/anchor.js +0 -0
  273. /package/dist/{actions → core/actions}/dismissable.d.ts +0 -0
  274. /package/dist/{actions → core/actions}/dismissable.js +0 -0
  275. /package/dist/{date.d.ts → core/date.d.ts} +0 -0
  276. /package/dist/{date.js → core/date.js} +0 -0
  277. /package/dist/{locale.svelte.d.ts → core/locale.svelte.d.ts} +0 -0
  278. /package/dist/{locale.svelte.js → core/locale.svelte.js} +0 -0
  279. /package/dist/{toast.svelte.d.ts → core/toast.svelte.d.ts} +0 -0
  280. /package/dist/{toast.svelte.js → core/toast.svelte.js} +0 -0
  281. /package/dist/{tones.d.ts → core/tones.d.ts} +0 -0
  282. /package/dist/{tones.js → core/tones.js} +0 -0
  283. /package/dist/{components → styles/matte}/Accordion.svelte +0 -0
  284. /package/dist/{components → styles/matte}/Accordion.svelte.d.ts +0 -0
  285. /package/dist/{components → styles/matte}/AvatarGroup.svelte +0 -0
  286. /package/dist/{components → styles/matte}/AvatarGroup.svelte.d.ts +0 -0
  287. /package/dist/{components → styles/matte}/ContextMenu.svelte.d.ts +0 -0
  288. /package/dist/{components → styles/matte}/Divider.svelte +0 -0
  289. /package/dist/{components → styles/matte}/Divider.svelte.d.ts +0 -0
  290. /package/dist/{components → styles/matte}/Drawer.svelte.d.ts +0 -0
  291. /package/dist/{components → styles/matte}/Field.svelte +0 -0
  292. /package/dist/{components → styles/matte}/Field.svelte.d.ts +0 -0
  293. /package/dist/{components → styles/matte}/InputGroup.svelte +0 -0
  294. /package/dist/{components → styles/matte}/InputGroup.svelte.d.ts +0 -0
  295. /package/dist/{components → styles/matte}/Kbd.svelte +0 -0
  296. /package/dist/{components → styles/matte}/Kbd.svelte.d.ts +0 -0
  297. /package/dist/{components → styles/matte}/Label.svelte +0 -0
  298. /package/dist/{components → styles/matte}/Label.svelte.d.ts +0 -0
  299. /package/dist/{components → styles/matte}/MenuSeparator.svelte +0 -0
  300. /package/dist/{components → styles/matte}/MenuSeparator.svelte.d.ts +0 -0
  301. /package/dist/{components → styles/matte}/Modal.svelte.d.ts +0 -0
  302. /package/dist/{components → styles/matte}/Skeleton.svelte +0 -0
  303. /package/dist/{components → styles/matte}/Skeleton.svelte.d.ts +0 -0
  304. /package/dist/{components → styles/matte}/Toaster.svelte.d.ts +0 -0
  305. /package/dist/{components → styles/matte}/Tooltip.svelte +0 -0
  306. /package/dist/{components → styles/matte}/Tooltip.svelte.d.ts +0 -0
  307. /package/dist/{fonts.css → styles/matte/fonts.css} +0 -0
  308. /package/dist/{theme.css → styles/matte/theme.css} +0 -0
package/dist/{components → styles/matte}/ThemeToggle.svelte RENAMED
@@ -1,26 +1,16 @@
1
- <script module lang="ts">
2
- export type Theme = 'light' | 'dark' | 'system';
3
-
4
- const STORAGE_KEY = 'nqm-theme';
5
-
6
- /** Writes the theme classes `theme.css` reads. Safe to call before mount. */
7
- export function applyTheme(theme: Theme) {
8
- const root = document.documentElement;
9
- root.classList.toggle('dark', theme === 'dark');
10
- root.classList.toggle('light', theme === 'light');
11
- }
12
-
13
- /** The stored choice, or `'system'` when the visitor has never picked one. */
14
- export function storedTheme(): Theme {
15
- if (typeof localStorage === 'undefined') return 'system';
16
- const saved = localStorage.getItem(STORAGE_KEY);
17
- return saved === 'light' || saved === 'dark' ? saved : 'system';
18
- }
19
- </script>
20
-
21
1
  <script lang="ts">
22
- import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
23
- import { useLocale } from '../locale.svelte.js';
2
+ // Choosing a theme is style-agnostic: every style reads the same two classes
3
+ // off <html>, so `applyTheme`, `storedTheme` and `Theme` live in core and
4
+ // are re-exported by the style barrel — not by this component.
5
+ import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
6
+ import {
7
+ applyTheme,
8
+ nextTheme,
9
+ persistTheme,
10
+ storedTheme,
11
+ type Theme
12
+ } from '../../core/theme.svelte.js';
13
+ import { useLocale } from '../../core/locale.svelte.js';
24
14
 
25
15
  interface Props {
26
16
  /** Bindable. `'system'` follows the OS until the visitor chooses. */
@@ -47,10 +37,7 @@
47
37
 
48
38
  $effect(() => {
49
39
  applyTheme(theme);
50
- if (persist && typeof localStorage !== 'undefined') {
51
- if (theme === 'system') localStorage.removeItem(STORAGE_KEY);
52
- else localStorage.setItem(STORAGE_KEY, theme);
53
- }
40
+ if (persist) persistTheme(theme);
54
41
  });
55
42
 
56
43
  function set(next: Theme) {
@@ -59,7 +46,7 @@
59
46
  }
60
47
 
61
48
  function cycle() {
62
- set(theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light');
49
+ set(nextTheme(theme));
63
50
  }
64
51
 
65
52
  const options = $derived([
package/dist/{components → styles/matte}/ThemeToggle.svelte.d.ts RENAMED
@@ -1,9 +1,5 @@
1
- export type Theme = 'light' | 'dark' | 'system';
2
- /** Writes the theme classes `theme.css` reads. Safe to call before mount. */
3
- export declare function applyTheme(theme: Theme): void;
4
- /** The stored choice, or `'system'` when the visitor has never picked one. */
5
- export declare function storedTheme(): Theme;
6
- import { type Tone } from '../tones.js';
1
+ import { type Tone } from '../../core/tones.js';
2
+ import { type Theme } from '../../core/theme.svelte.js';
7
3
  interface Props {
8
4
  /** Bindable. `'system'` follows the OS until the visitor chooses. */
9
5
  theme?: Theme;
package/dist/{components → styles/matte}/Toaster.svelte RENAMED
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">
2
2
  import { flip } from 'svelte/animate';
3
3
  import { fly } from 'svelte/transition';
4
- import { portal } from '../actions/dismissable.js';
5
- import { toast } from '../toast.svelte.js';
6
- import { toneBorderSoft, toneSurface, toneText } from '../tones.js';
4
+ import { portal } from '../../core/actions/dismissable.js';
5
+ import { toast } from '../../core/toast.svelte.js';
6
+ import { toneBorderSoft, toneSurface, toneText } from '../../core/tones.js';
7
7
  import Spinner from './Spinner.svelte';
8
- import { useLocale } from '../locale.svelte.js';
8
+ import { useLocale } from '../../core/locale.svelte.js';
9
9
 
10
10
  export type ToasterPosition =
11
11
  'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
package/dist/styles/matte/index.d.ts ADDED
@@ -0,0 +1,109 @@
1
+ /**
2
+ * Matte — Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do.
3
+ *
4
+ * Generated by `bun run index`. Behaviour comes from
5
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
6
+ * the whole style.
7
+ */
8
+ export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
9
+ export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
10
+ export { default as LocaleProvider } from './LocaleProvider.svelte';
11
+ export { default as Button } from './Button.svelte';
12
+ export type { ButtonVariant, ButtonSize } from './Button.svelte';
13
+ export { default as Link } from './Link.svelte';
14
+ export { default as Input } from './Input.svelte';
15
+ export type { InputSize } from './Input.svelte';
16
+ export { default as Textarea } from './Textarea.svelte';
17
+ export { default as Select } from './Select.svelte';
18
+ export type { SelectOption } from './Select.svelte';
19
+ export { default as Checkbox } from './Checkbox.svelte';
20
+ export { default as Radio } from './Radio.svelte';
21
+ export { default as Switch } from './Switch.svelte';
22
+ export type { SwitchSize } from './Switch.svelte';
23
+ export { default as Field } from './Field.svelte';
24
+ export { default as Label } from './Label.svelte';
25
+ export { default as PasswordInput } from './PasswordInput.svelte';
26
+ export { default as NumberInput } from './NumberInput.svelte';
27
+ export { default as Slider } from './Slider.svelte';
28
+ export { default as RadioGroup } from './RadioGroup.svelte';
29
+ export type { RadioOption } from './RadioGroup.svelte';
30
+ export { default as CheckboxGroup } from './CheckboxGroup.svelte';
31
+ export type { CheckboxOption } from './CheckboxGroup.svelte';
32
+ export { default as SegmentedControl } from './SegmentedControl.svelte';
33
+ export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
34
+ export { default as InputGroup } from './InputGroup.svelte';
35
+ export { default as Combobox } from './Combobox.svelte';
36
+ export type { ComboboxOption } from './Combobox.svelte';
37
+ export { default as MultiSelect } from './MultiSelect.svelte';
38
+ export type { MultiSelectOption } from './MultiSelect.svelte';
39
+ export { default as DatePicker } from './DatePicker.svelte';
40
+ export { default as Calendar } from './Calendar.svelte';
41
+ export { default as Dropzone } from './Dropzone.svelte';
42
+ export { default as Badge } from './Badge.svelte';
43
+ export type { BadgeVariant, BadgeSize } from './Badge.svelte';
44
+ export { default as Avatar } from './Avatar.svelte';
45
+ export type { AvatarSize } from './Avatar.svelte';
46
+ export { default as AvatarGroup } from './AvatarGroup.svelte';
47
+ export { default as Card } from './Card.svelte';
48
+ export type { CardVariant } from './Card.svelte';
49
+ export { default as Stat } from './Stat.svelte';
50
+ export type { StatTrend } from './Stat.svelte';
51
+ export { default as Table } from './Table.svelte';
52
+ export type { TableColumn } from './Table.svelte';
53
+ export { default as Kbd } from './Kbd.svelte';
54
+ export { default as Alert } from './Alert.svelte';
55
+ export type { AlertVariant } from './Alert.svelte';
56
+ export { default as Progress } from './Progress.svelte';
57
+ export type { ProgressSize } from './Progress.svelte';
58
+ export { default as Spinner } from './Spinner.svelte';
59
+ export type { SpinnerSize } from './Spinner.svelte';
60
+ export { default as Skeleton } from './Skeleton.svelte';
61
+ export type { SkeletonVariant } from './Skeleton.svelte';
62
+ export { default as EmptyState } from './EmptyState.svelte';
63
+ export { default as Toaster } from './Toaster.svelte';
64
+ export type { ToasterPosition } from './Toaster.svelte';
65
+ export { default as Divider } from './Divider.svelte';
66
+ export type { DividerOrientation } from './Divider.svelte';
67
+ export { default as Tabs } from './Tabs.svelte';
68
+ export type { TabItem, TabsVariant } from './Tabs.svelte';
69
+ export { default as Accordion } from './Accordion.svelte';
70
+ export { default as AccordionItem } from './AccordionItem.svelte';
71
+ export { default as Breadcrumb } from './Breadcrumb.svelte';
72
+ export type { BreadcrumbItem } from './Breadcrumb.svelte';
73
+ export { default as Pagination } from './Pagination.svelte';
74
+ export { default as Steps } from './Steps.svelte';
75
+ export type { StepItem } from './Steps.svelte';
76
+ export { default as Navbar } from './Navbar.svelte';
77
+ export type { NavItem } from './Navbar.svelte';
78
+ export { default as Sidebar } from './Sidebar.svelte';
79
+ export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
80
+ export { default as Footer } from './Footer.svelte';
81
+ export type { FooterLink, FooterColumn } from './Footer.svelte';
82
+ export { default as HeroSection } from './HeroSection.svelte';
83
+ export { default as FeatureGrid } from './FeatureGrid.svelte';
84
+ export type { FeatureColumns } from './FeatureGrid.svelte';
85
+ export { default as FeatureCard } from './FeatureCard.svelte';
86
+ export { default as PricingCard } from './PricingCard.svelte';
87
+ export { default as Testimonial } from './Testimonial.svelte';
88
+ export type { TestimonialVariant } from './Testimonial.svelte';
89
+ export { default as LogoCloud } from './LogoCloud.svelte';
90
+ export type { Logo } from './LogoCloud.svelte';
91
+ export { default as CTASection } from './CTASection.svelte';
92
+ export type { CTAVariant } from './CTASection.svelte';
93
+ export { default as StatsBand } from './StatsBand.svelte';
94
+ export type { BandStat } from './StatsBand.svelte';
95
+ export { default as Modal } from './Modal.svelte';
96
+ export type { ModalSize } from './Modal.svelte';
97
+ export { default as Drawer } from './Drawer.svelte';
98
+ export type { DrawerSide, DrawerSize } from './Drawer.svelte';
99
+ export { default as ConfirmDialog } from './ConfirmDialog.svelte';
100
+ export { default as CommandPalette } from './CommandPalette.svelte';
101
+ export type { CommandItem } from './CommandPalette.svelte';
102
+ export { default as ContextMenu } from './ContextMenu.svelte';
103
+ export { default as Dropdown } from './Dropdown.svelte';
104
+ export { default as MenuItem } from './MenuItem.svelte';
105
+ export { default as MenuSeparator } from './MenuSeparator.svelte';
106
+ export { default as Popover } from './Popover.svelte';
107
+ export { default as ThemeToggle } from './ThemeToggle.svelte';
108
+ export { default as Tooltip } from './Tooltip.svelte';
109
+ export type { TooltipPlacement } from './Tooltip.svelte';
package/dist/styles/matte/index.js ADDED
@@ -0,0 +1,83 @@
1
+ /**
2
+ * Matte — Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do.
3
+ *
4
+ * Generated by `bun run index`. Behaviour comes from
5
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
6
+ * the whole style.
7
+ */
8
+ /* --- shared behaviour --- */
9
+ export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
10
+ /* --- locale --- */
11
+ export { default as LocaleProvider } from './LocaleProvider.svelte';
12
+ /* --- actions --- */
13
+ export { default as Button } from './Button.svelte';
14
+ export { default as Link } from './Link.svelte';
15
+ /* --- forms --- */
16
+ export { default as Input } from './Input.svelte';
17
+ export { default as Textarea } from './Textarea.svelte';
18
+ export { default as Select } from './Select.svelte';
19
+ export { default as Checkbox } from './Checkbox.svelte';
20
+ export { default as Radio } from './Radio.svelte';
21
+ export { default as Switch } from './Switch.svelte';
22
+ export { default as Field } from './Field.svelte';
23
+ export { default as Label } from './Label.svelte';
24
+ export { default as PasswordInput } from './PasswordInput.svelte';
25
+ export { default as NumberInput } from './NumberInput.svelte';
26
+ export { default as Slider } from './Slider.svelte';
27
+ export { default as RadioGroup } from './RadioGroup.svelte';
28
+ export { default as CheckboxGroup } from './CheckboxGroup.svelte';
29
+ export { default as SegmentedControl } from './SegmentedControl.svelte';
30
+ export { default as InputGroup } from './InputGroup.svelte';
31
+ export { default as Combobox } from './Combobox.svelte';
32
+ export { default as MultiSelect } from './MultiSelect.svelte';
33
+ export { default as DatePicker } from './DatePicker.svelte';
34
+ export { default as Calendar } from './Calendar.svelte';
35
+ export { default as Dropzone } from './Dropzone.svelte';
36
+ /* --- data display --- */
37
+ export { default as Badge } from './Badge.svelte';
38
+ export { default as Avatar } from './Avatar.svelte';
39
+ export { default as AvatarGroup } from './AvatarGroup.svelte';
40
+ export { default as Card } from './Card.svelte';
41
+ export { default as Stat } from './Stat.svelte';
42
+ export { default as Table } from './Table.svelte';
43
+ export { default as Kbd } from './Kbd.svelte';
44
+ /* --- feedback --- */
45
+ export { default as Alert } from './Alert.svelte';
46
+ export { default as Progress } from './Progress.svelte';
47
+ export { default as Spinner } from './Spinner.svelte';
48
+ export { default as Skeleton } from './Skeleton.svelte';
49
+ export { default as EmptyState } from './EmptyState.svelte';
50
+ export { default as Toaster } from './Toaster.svelte';
51
+ /* --- layout & navigation --- */
52
+ export { default as Divider } from './Divider.svelte';
53
+ export { default as Tabs } from './Tabs.svelte';
54
+ export { default as Accordion } from './Accordion.svelte';
55
+ export { default as AccordionItem } from './AccordionItem.svelte';
56
+ export { default as Breadcrumb } from './Breadcrumb.svelte';
57
+ export { default as Pagination } from './Pagination.svelte';
58
+ export { default as Steps } from './Steps.svelte';
59
+ /* --- app shell --- */
60
+ export { default as Navbar } from './Navbar.svelte';
61
+ export { default as Sidebar } from './Sidebar.svelte';
62
+ export { default as Footer } from './Footer.svelte';
63
+ /* --- marketing --- */
64
+ export { default as HeroSection } from './HeroSection.svelte';
65
+ export { default as FeatureGrid } from './FeatureGrid.svelte';
66
+ export { default as FeatureCard } from './FeatureCard.svelte';
67
+ export { default as PricingCard } from './PricingCard.svelte';
68
+ export { default as Testimonial } from './Testimonial.svelte';
69
+ export { default as LogoCloud } from './LogoCloud.svelte';
70
+ export { default as CTASection } from './CTASection.svelte';
71
+ export { default as StatsBand } from './StatsBand.svelte';
72
+ /* --- overlay --- */
73
+ export { default as Modal } from './Modal.svelte';
74
+ export { default as Drawer } from './Drawer.svelte';
75
+ export { default as ConfirmDialog } from './ConfirmDialog.svelte';
76
+ export { default as CommandPalette } from './CommandPalette.svelte';
77
+ export { default as ContextMenu } from './ContextMenu.svelte';
78
+ export { default as Dropdown } from './Dropdown.svelte';
79
+ export { default as MenuItem } from './MenuItem.svelte';
80
+ export { default as MenuSeparator } from './MenuSeparator.svelte';
81
+ export { default as Popover } from './Popover.svelte';
82
+ export { default as ThemeToggle } from './ThemeToggle.svelte';
83
+ export { default as Tooltip } from './Tooltip.svelte';
package/dist/styles/paper/Accordion.svelte ADDED
@@ -0,0 +1,17 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+
5
+ interface Props extends HTMLAttributes<HTMLDivElement> {
6
+ children: Snippet;
7
+ }
8
+
9
+ let { class: className = '', children, ...rest }: Props = $props();
10
+ </script>
11
+
12
+ <div
13
+ class="flex flex-col overflow-hidden rounded-lg border border-hairline bg-bg {className}"
14
+ {...rest}
15
+ >
16
+ {@render children()}
17
+ </div>
package/dist/styles/paper/Accordion.svelte.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ interface Props extends HTMLAttributes<HTMLDivElement> {
4
+ children: Snippet;
5
+ }
6
+ declare const Accordion: import("svelte").Component<Props, {}, "">;
7
+ type Accordion = ReturnType<typeof Accordion>;
8
+ export default Accordion;
package/dist/styles/paper/AccordionItem.svelte ADDED
@@ -0,0 +1,46 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ import { toneText, type Tone } from '../../core/tones.js';
5
+
6
+ interface Props extends HTMLAttributes<HTMLDetailsElement> {
7
+ title: string;
8
+ open?: boolean;
9
+ tone?: Tone;
10
+ /** Short text on the right of the summary row. */
11
+ meta?: string;
12
+ children: Snippet;
13
+ }
14
+
15
+ let {
16
+ title,
17
+ open = $bindable(false),
18
+ tone = 'brand',
19
+ meta,
20
+ class: className = '',
21
+ children,
22
+ ...rest
23
+ }: Props = $props();
24
+ </script>
25
+
26
+ <details bind:open class="group border-b border-hairline last:border-b-0 {className}" {...rest}>
27
+ <summary
28
+ class="flex cursor-pointer list-none items-center gap-4 px-4 py-3.5 font-sans text-sm font-medium text-text transition-colors duration-150 ease-brand-out select-none hover:bg-bg-alt focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-current [&::-webkit-details-marker]:hidden"
29
+ >
30
+ <span class="flex-1">{title}</span>
31
+ {#if meta}<span class="text-[13px] font-normal text-text-muted">{meta}</span>{/if}
32
+ <svg
33
+ class="size-4 shrink-0 transition-transform duration-200 ease-brand-out group-open:rotate-180 {toneText[
34
+ tone
35
+ ]}"
36
+ viewBox="0 0 16 16"
37
+ fill="none"
38
+ aria-hidden="true"
39
+ >
40
+ <path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
41
+ </svg>
42
+ </summary>
43
+ <div class="px-4 pb-4 font-sans text-sm leading-relaxed text-text-secondary">
44
+ {@render children()}
45
+ </div>
46
+ </details>
package/dist/styles/paper/AccordionItem.svelte.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import { type Tone } from '../../core/tones.js';
4
+ interface Props extends HTMLAttributes<HTMLDetailsElement> {
5
+ title: string;
6
+ open?: boolean;
7
+ tone?: Tone;
8
+ /** Short text on the right of the summary row. */
9
+ meta?: string;
10
+ children: Snippet;
11
+ }
12
+ declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
13
+ type AccordionItem = ReturnType<typeof AccordionItem>;
14
+ export default AccordionItem;
package/dist/styles/paper/Alert.svelte ADDED
@@ -0,0 +1,99 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ import {
5
+ toneBorder,
6
+ toneBorderSoft,
7
+ toneSurface,
8
+ toneText,
9
+ type Tone
10
+ } from '../../core/tones.js';
11
+ import { useLocale } from '../../core/locale.svelte.js';
12
+
13
+ export type AlertVariant = 'soft' | 'outline' | 'accent';
14
+
15
+ interface Props extends HTMLAttributes<HTMLDivElement> {
16
+ tone?: Tone;
17
+ variant?: AlertVariant;
18
+ title?: string;
19
+ /** Shows a close button and fires `ondismiss`. */
20
+ dismissible?: boolean;
21
+ ondismiss?: () => void;
22
+ /** Replaces the built-in status glyph. */
23
+ icon?: Snippet;
24
+ children?: Snippet;
25
+ }
26
+
27
+ let {
28
+ tone = 'info',
29
+ variant = 'soft',
30
+ title,
31
+ dismissible = false,
32
+ ondismiss,
33
+ icon,
34
+ class: className = '',
35
+ children,
36
+ ...rest
37
+ }: Props = $props();
38
+
39
+ const t = useLocale();
40
+ let open = $state(true);
41
+
42
+ const variants = $derived({
43
+ soft: `${toneSurface[tone]} border ${toneBorderSoft[tone]}`,
44
+ outline: `bg-bg shadow-xs border ${toneBorderSoft[tone]}`,
45
+ accent: `${toneSurface[tone]} border-l-4 ${toneBorder[tone]}`
46
+ });
47
+
48
+ function dismiss() {
49
+ open = false;
50
+ ondismiss?.();
51
+ }
52
+ </script>
53
+
54
+ {#if open}
55
+ <div
56
+ role={tone === 'danger' ? 'alert' : 'status'}
57
+ class="flex items-start gap-3 rounded-lg p-4 font-sans {variants[variant]} {className}"
58
+ {...rest}
59
+ >
60
+ <span class="mt-0.5 shrink-0 {toneText[tone]}">
61
+ {#if icon}
62
+ {@render icon()}
63
+ {:else}
64
+ <svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
65
+ <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
66
+ <path d="M8 4.75v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
67
+ <circle cx="8" cy="11.25" r="0.85" fill="currentColor" />
68
+ </svg>
69
+ {/if}
70
+ </span>
71
+
72
+ <div class="flex min-w-0 flex-1 flex-col gap-1">
73
+ {#if title}
74
+ <p class="text-sm leading-snug font-semibold {toneText[tone]}">{title}</p>
75
+ {/if}
76
+ {#if children}
77
+ <div class="text-[13px] leading-relaxed text-text-secondary">{@render children()}</div>
78
+ {/if}
79
+ </div>
80
+
81
+ {#if dismissible}
82
+ <button
83
+ type="button"
84
+ onclick={dismiss}
85
+ aria-label={t.current.dismiss}
86
+ class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg/60 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
87
+ >
88
+ <svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
89
+ <path
90
+ d="m2 2 10 10M12 2 2 12"
91
+ stroke="currentColor"
92
+ stroke-width="1.6"
93
+ stroke-linecap="round"
94
+ />
95
+ </svg>
96
+ </button>
97
+ {/if}
98
+ </div>
99
+ {/if}
package/dist/styles/paper/Alert.svelte.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import { type Tone } from '../../core/tones.js';
4
+ export type AlertVariant = 'soft' | 'outline' | 'accent';
5
+ interface Props extends HTMLAttributes<HTMLDivElement> {
6
+ tone?: Tone;
7
+ variant?: AlertVariant;
8
+ title?: string;
9
+ /** Shows a close button and fires `ondismiss`. */
10
+ dismissible?: boolean;
11
+ ondismiss?: () => void;
12
+ /** Replaces the built-in status glyph. */
13
+ icon?: Snippet;
14
+ children?: Snippet;
15
+ }
16
+ declare const Alert: import("svelte").Component<Props, {}, "">;
17
+ type Alert = ReturnType<typeof Alert>;
18
+ export default Alert;
package/dist/styles/paper/Avatar.svelte ADDED
@@ -0,0 +1,60 @@
1
+ <script lang="ts">
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import { toneSoft, type Tone } from '../../core/tones.js';
4
+
5
+ export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
6
+
7
+ interface Props extends HTMLAttributes<HTMLSpanElement> {
8
+ src?: string;
9
+ alt?: string;
10
+ /** Falls back to the initials of this name when there is no `src`. */
11
+ name?: string;
12
+ size?: AvatarSize;
13
+ tone?: Tone;
14
+ /** Rounded square instead of the default circle. */
15
+ squared?: boolean;
16
+ }
17
+
18
+ let {
19
+ src,
20
+ alt,
21
+ name = '',
22
+ size = 'md',
23
+ tone = 'brand',
24
+ squared = false,
25
+ class: className = '',
26
+ ...rest
27
+ }: Props = $props();
28
+
29
+ const sizes: Record<AvatarSize, string> = {
30
+ xs: 'size-6 text-[10px]',
31
+ sm: 'size-8 text-xs',
32
+ md: 'size-10 text-sm',
33
+ lg: 'size-12 text-base',
34
+ xl: 'size-16 text-lg'
35
+ };
36
+
37
+ const initials = $derived(
38
+ name
39
+ .trim()
40
+ .split(/\s+/)
41
+ .slice(0, 2)
42
+ .map((part) => part[0] ?? '')
43
+ .join('')
44
+ .toUpperCase()
45
+ );
46
+ </script>
47
+
48
+ <span
49
+ class="inline-flex shrink-0 items-center justify-center overflow-hidden font-sans font-semibold select-none
50
+ {squared ? 'rounded-lg' : 'rounded-full'} {sizes[size]} {src
51
+ ? 'bg-bg-inset'
52
+ : toneSoft[tone]} {className}"
53
+ {...rest}
54
+ >
55
+ {#if src}
56
+ <img {src} alt={alt ?? name} class="size-full object-cover" />
57
+ {:else}
58
+ {initials}
59
+ {/if}
60
+ </span>
package/dist/styles/paper/Avatar.svelte.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import { type Tone } from '../../core/tones.js';
3
+ export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
4
+ interface Props extends HTMLAttributes<HTMLSpanElement> {
5
+ src?: string;
6
+ alt?: string;
7
+ /** Falls back to the initials of this name when there is no `src`. */
8
+ name?: string;
9
+ size?: AvatarSize;
10
+ tone?: Tone;
11
+ /** Rounded square instead of the default circle. */
12
+ squared?: boolean;
13
+ }
14
+ declare const Avatar: import("svelte").Component<Props, {}, "">;
15
+ type Avatar = ReturnType<typeof Avatar>;
16
+ export default Avatar;
package/dist/styles/paper/AvatarGroup.svelte ADDED
@@ -0,0 +1,17 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+
5
+ interface Props extends HTMLAttributes<HTMLDivElement> {
6
+ children: Snippet;
7
+ }
8
+
9
+ let { class: className = '', children, ...rest }: Props = $props();
10
+ </script>
11
+
12
+ <div
13
+ class="flex items-center *:-ml-2 *:ring-2 *:ring-bg [&>*:first-child]:ml-0 {className}"
14
+ {...rest}
15
+ >
16
+ {@render children()}
17
+ </div>
package/dist/styles/paper/AvatarGroup.svelte.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ interface Props extends HTMLAttributes<HTMLDivElement> {
4
+ children: Snippet;
5
+ }
6
+ declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
7
+ type AvatarGroup = ReturnType<typeof AvatarGroup>;
8
+ export default AvatarGroup;
package/dist/styles/paper/Badge.svelte ADDED
@@ -0,0 +1,58 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ import {
5
+ toneBorderSoft,
6
+ toneFill,
7
+ toneSoft,
8
+ toneSolid,
9
+ toneText,
10
+ type Tone
11
+ } from '../../core/tones.js';
12
+
13
+ export type BadgeVariant = 'soft' | 'solid' | 'outline';
14
+ export type BadgeSize = 'sm' | 'md';
15
+
16
+ interface Props extends HTMLAttributes<HTMLSpanElement> {
17
+ tone?: Tone;
18
+ variant?: BadgeVariant;
19
+ size?: BadgeSize;
20
+ /** Small filled circle before the label. */
21
+ dot?: boolean;
22
+ children: Snippet;
23
+ }
24
+
25
+ let {
26
+ tone = 'brand',
27
+ variant = 'soft',
28
+ size = 'md',
29
+ dot = false,
30
+ class: className = '',
31
+ children,
32
+ ...rest
33
+ }: Props = $props();
34
+
35
+ const variants: Record<BadgeVariant, string> = $derived({
36
+ soft: toneSoft[tone],
37
+ solid: toneSolid[tone],
38
+ outline: `border ${toneBorderSoft[tone]} ${toneText[tone]} bg-bg`
39
+ });
40
+
41
+ const sizes: Record<BadgeSize, string> = {
42
+ sm: 'px-2 py-0.5 text-[11px]',
43
+ md: 'px-2.5 py-0.5 text-xs'
44
+ };
45
+ </script>
46
+
47
+ <span
48
+ class="inline-flex items-center gap-1.5 rounded-md font-sans font-medium
49
+ {variants[variant]} {sizes[size]} {className}"
50
+ {...rest}
51
+ >
52
+ {#if dot}
53
+ <span
54
+ class="size-1.5 shrink-0 rounded-full {variant === 'solid' ? 'bg-current' : toneFill[tone]}"
55
+ ></span>
56
+ {/if}
57
+ {@render children()}
58
+ </span>