@pearpages/pulp-react 0.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 (286) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +65 -0
  3. package/dist/ListboxOptions-DLsT-dkV.d.ts +11 -0
  4. package/dist/ToggleField-C-qKSgHh.d.ts +3 -0
  5. package/dist/accordion.css +90 -0
  6. package/dist/accordion.css.map +1 -0
  7. package/dist/accordion.d.ts +71 -0
  8. package/dist/accordion.js +6 -0
  9. package/dist/accordion.js.map +1 -0
  10. package/dist/alert.css +246 -0
  11. package/dist/alert.css.map +1 -0
  12. package/dist/alert.d.ts +46 -0
  13. package/dist/alert.js +10 -0
  14. package/dist/alert.js.map +1 -0
  15. package/dist/badge.css +89 -0
  16. package/dist/badge.css.map +1 -0
  17. package/dist/badge.d.ts +38 -0
  18. package/dist/badge.js +5 -0
  19. package/dist/badge.js.map +1 -0
  20. package/dist/button.css +162 -0
  21. package/dist/button.css.map +1 -0
  22. package/dist/button.d.ts +61 -0
  23. package/dist/button.js +8 -0
  24. package/dist/button.js.map +1 -0
  25. package/dist/calendar.css +128 -0
  26. package/dist/calendar.css.map +1 -0
  27. package/dist/calendar.d.ts +48 -0
  28. package/dist/calendar.js +6 -0
  29. package/dist/calendar.js.map +1 -0
  30. package/dist/card.css +66 -0
  31. package/dist/card.css.map +1 -0
  32. package/dist/card.d.ts +69 -0
  33. package/dist/card.js +5 -0
  34. package/dist/card.js.map +1 -0
  35. package/dist/checkbox.css +106 -0
  36. package/dist/checkbox.css.map +1 -0
  37. package/dist/checkbox.d.ts +41 -0
  38. package/dist/checkbox.js +7 -0
  39. package/dist/checkbox.js.map +1 -0
  40. package/dist/chunk-2PXTVZ7H.js +95 -0
  41. package/dist/chunk-2PXTVZ7H.js.map +1 -0
  42. package/dist/chunk-2ZP4ZBI5.js +43 -0
  43. package/dist/chunk-2ZP4ZBI5.js.map +1 -0
  44. package/dist/chunk-3GWESUGD.js +28 -0
  45. package/dist/chunk-3GWESUGD.js.map +1 -0
  46. package/dist/chunk-4HRNRTXI.js +25 -0
  47. package/dist/chunk-4HRNRTXI.js.map +1 -0
  48. package/dist/chunk-5SBKZS56.js +56 -0
  49. package/dist/chunk-5SBKZS56.js.map +1 -0
  50. package/dist/chunk-6I26MMQF.js +19 -0
  51. package/dist/chunk-6I26MMQF.js.map +1 -0
  52. package/dist/chunk-75GTNRBH.js +45 -0
  53. package/dist/chunk-75GTNRBH.js.map +1 -0
  54. package/dist/chunk-7DS4I7OJ.js +30 -0
  55. package/dist/chunk-7DS4I7OJ.js.map +1 -0
  56. package/dist/chunk-ASNTNTJW.js +27 -0
  57. package/dist/chunk-ASNTNTJW.js.map +1 -0
  58. package/dist/chunk-ASOQ2MVR.js +19 -0
  59. package/dist/chunk-ASOQ2MVR.js.map +1 -0
  60. package/dist/chunk-AWQHULJC.js +31 -0
  61. package/dist/chunk-AWQHULJC.js.map +1 -0
  62. package/dist/chunk-BBV4L5WO.js +43 -0
  63. package/dist/chunk-BBV4L5WO.js.map +1 -0
  64. package/dist/chunk-CZBCGLEM.js +9 -0
  65. package/dist/chunk-CZBCGLEM.js.map +1 -0
  66. package/dist/chunk-DWE374JX.js +65 -0
  67. package/dist/chunk-DWE374JX.js.map +1 -0
  68. package/dist/chunk-DXOOW6Q6.js +159 -0
  69. package/dist/chunk-DXOOW6Q6.js.map +1 -0
  70. package/dist/chunk-F3OFZGGE.js +116 -0
  71. package/dist/chunk-F3OFZGGE.js.map +1 -0
  72. package/dist/chunk-FH54XQ35.js +125 -0
  73. package/dist/chunk-FH54XQ35.js.map +1 -0
  74. package/dist/chunk-FXRSZUDH.js +38 -0
  75. package/dist/chunk-FXRSZUDH.js.map +1 -0
  76. package/dist/chunk-GTTXRDXV.js +181 -0
  77. package/dist/chunk-GTTXRDXV.js.map +1 -0
  78. package/dist/chunk-I4KC4V6A.js +31 -0
  79. package/dist/chunk-I4KC4V6A.js.map +1 -0
  80. package/dist/chunk-I5OZ63W7.js +50 -0
  81. package/dist/chunk-I5OZ63W7.js.map +1 -0
  82. package/dist/chunk-IDNGNQNV.js +41 -0
  83. package/dist/chunk-IDNGNQNV.js.map +1 -0
  84. package/dist/chunk-J5S2HVHO.js +67 -0
  85. package/dist/chunk-J5S2HVHO.js.map +1 -0
  86. package/dist/chunk-K5QGGQOV.js +84 -0
  87. package/dist/chunk-K5QGGQOV.js.map +1 -0
  88. package/dist/chunk-KPQGS4PG.js +77 -0
  89. package/dist/chunk-KPQGS4PG.js.map +1 -0
  90. package/dist/chunk-MI4QUKQS.js +8 -0
  91. package/dist/chunk-MI4QUKQS.js.map +1 -0
  92. package/dist/chunk-MRQWUCBA.js +57 -0
  93. package/dist/chunk-MRQWUCBA.js.map +1 -0
  94. package/dist/chunk-MXWXJZFS.js +48 -0
  95. package/dist/chunk-MXWXJZFS.js.map +1 -0
  96. package/dist/chunk-N7L66GMG.js +129 -0
  97. package/dist/chunk-N7L66GMG.js.map +1 -0
  98. package/dist/chunk-NAYFLTK6.js +32 -0
  99. package/dist/chunk-NAYFLTK6.js.map +1 -0
  100. package/dist/chunk-O6OBFL3Q.js +155 -0
  101. package/dist/chunk-O6OBFL3Q.js.map +1 -0
  102. package/dist/chunk-OGIQRHNF.js +52 -0
  103. package/dist/chunk-OGIQRHNF.js.map +1 -0
  104. package/dist/chunk-OUFAFINB.js +45 -0
  105. package/dist/chunk-OUFAFINB.js.map +1 -0
  106. package/dist/chunk-OXYP34CG.js +43 -0
  107. package/dist/chunk-OXYP34CG.js.map +1 -0
  108. package/dist/chunk-P5C2U5ZF.js +73 -0
  109. package/dist/chunk-P5C2U5ZF.js.map +1 -0
  110. package/dist/chunk-PM4YO67Q.js +53 -0
  111. package/dist/chunk-PM4YO67Q.js.map +1 -0
  112. package/dist/chunk-Q6J6BMSB.js +86 -0
  113. package/dist/chunk-Q6J6BMSB.js.map +1 -0
  114. package/dist/chunk-T76YSNTZ.js +33 -0
  115. package/dist/chunk-T76YSNTZ.js.map +1 -0
  116. package/dist/chunk-TGMDOQCL.js +53 -0
  117. package/dist/chunk-TGMDOQCL.js.map +1 -0
  118. package/dist/chunk-TVI5AXLE.js +41 -0
  119. package/dist/chunk-TVI5AXLE.js.map +1 -0
  120. package/dist/chunk-U6QRAD73.js +22 -0
  121. package/dist/chunk-U6QRAD73.js.map +1 -0
  122. package/dist/chunk-UX42PQLT.js +76 -0
  123. package/dist/chunk-UX42PQLT.js.map +1 -0
  124. package/dist/chunk-XDVS7HX7.js +100 -0
  125. package/dist/chunk-XDVS7HX7.js.map +1 -0
  126. package/dist/chunk-Y4TZA77G.js +57 -0
  127. package/dist/chunk-Y4TZA77G.js.map +1 -0
  128. package/dist/chunk-YUHS5S5Y.js +12 -0
  129. package/dist/chunk-YUHS5S5Y.js.map +1 -0
  130. package/dist/chunk-Z4PN6B2C.js +17 -0
  131. package/dist/chunk-Z4PN6B2C.js.map +1 -0
  132. package/dist/chunk-ZVDN3GRI.js +49 -0
  133. package/dist/chunk-ZVDN3GRI.js.map +1 -0
  134. package/dist/combobox.css +280 -0
  135. package/dist/combobox.css.map +1 -0
  136. package/dist/combobox.d.ts +75 -0
  137. package/dist/combobox.js +10 -0
  138. package/dist/combobox.js.map +1 -0
  139. package/dist/component-manifest.json +3370 -0
  140. package/dist/date-picker.css +267 -0
  141. package/dist/date-picker.css.map +1 -0
  142. package/dist/date-picker.d.ts +59 -0
  143. package/dist/date-picker.js +8 -0
  144. package/dist/date-picker.js.map +1 -0
  145. package/dist/dialog.css +62 -0
  146. package/dist/dialog.css.map +1 -0
  147. package/dist/dialog.d.ts +56 -0
  148. package/dist/dialog.js +3 -0
  149. package/dist/dialog.js.map +1 -0
  150. package/dist/field.css +28 -0
  151. package/dist/field.css.map +1 -0
  152. package/dist/field.d.ts +98 -0
  153. package/dist/field.js +5 -0
  154. package/dist/field.js.map +1 -0
  155. package/dist/floating-Bw-LN_QT.d.ts +5 -0
  156. package/dist/heading.css +30 -0
  157. package/dist/heading.css.map +1 -0
  158. package/dist/heading.d.ts +316 -0
  159. package/dist/heading.js +4 -0
  160. package/dist/heading.js.map +1 -0
  161. package/dist/icon-button.css +177 -0
  162. package/dist/icon-button.css.map +1 -0
  163. package/dist/icon-button.d.ts +29 -0
  164. package/dist/icon-button.js +9 -0
  165. package/dist/icon-button.js.map +1 -0
  166. package/dist/icon.css +25 -0
  167. package/dist/icon.css.map +1 -0
  168. package/dist/icon.d.ts +33 -0
  169. package/dist/icon.js +4 -0
  170. package/dist/icon.js.map +1 -0
  171. package/dist/index.css +2345 -0
  172. package/dist/index.css.map +1 -0
  173. package/dist/index.d.ts +42 -0
  174. package/dist/index.js +49 -0
  175. package/dist/index.js.map +1 -0
  176. package/dist/inline.css +63 -0
  177. package/dist/inline.css.map +1 -0
  178. package/dist/inline.d.ts +322 -0
  179. package/dist/inline.js +4 -0
  180. package/dist/inline.js.map +1 -0
  181. package/dist/listbox.css +95 -0
  182. package/dist/listbox.css.map +1 -0
  183. package/dist/listbox.d.ts +47 -0
  184. package/dist/listbox.js +7 -0
  185. package/dist/listbox.js.map +1 -0
  186. package/dist/menu.css +102 -0
  187. package/dist/menu.css.map +1 -0
  188. package/dist/menu.d.ts +76 -0
  189. package/dist/menu.js +9 -0
  190. package/dist/menu.js.map +1 -0
  191. package/dist/pagination.css +212 -0
  192. package/dist/pagination.css.map +1 -0
  193. package/dist/pagination.d.ts +52 -0
  194. package/dist/pagination.js +10 -0
  195. package/dist/pagination.js.map +1 -0
  196. package/dist/picker.css +209 -0
  197. package/dist/picker.css.map +1 -0
  198. package/dist/picker.d.ts +57 -0
  199. package/dist/picker.js +8 -0
  200. package/dist/picker.js.map +1 -0
  201. package/dist/popover.css +48 -0
  202. package/dist/popover.css.map +1 -0
  203. package/dist/popover.d.ts +68 -0
  204. package/dist/popover.js +7 -0
  205. package/dist/popover.js.map +1 -0
  206. package/dist/progress.css +83 -0
  207. package/dist/progress.css.map +1 -0
  208. package/dist/progress.d.ts +40 -0
  209. package/dist/progress.js +5 -0
  210. package/dist/progress.js.map +1 -0
  211. package/dist/radio.css +107 -0
  212. package/dist/radio.css.map +1 -0
  213. package/dist/radio.d.ts +68 -0
  214. package/dist/radio.js +6 -0
  215. package/dist/radio.js.map +1 -0
  216. package/dist/select.css +98 -0
  217. package/dist/select.css.map +1 -0
  218. package/dist/select.d.ts +39 -0
  219. package/dist/select.js +6 -0
  220. package/dist/select.js.map +1 -0
  221. package/dist/skeleton.css +59 -0
  222. package/dist/skeleton.css.map +1 -0
  223. package/dist/skeleton.d.ts +34 -0
  224. package/dist/skeleton.js +4 -0
  225. package/dist/skeleton.js.map +1 -0
  226. package/dist/slider.css +126 -0
  227. package/dist/slider.css.map +1 -0
  228. package/dist/slider.d.ts +61 -0
  229. package/dist/slider.js +5 -0
  230. package/dist/slider.js.map +1 -0
  231. package/dist/spinner.css +60 -0
  232. package/dist/spinner.css.map +1 -0
  233. package/dist/spinner.d.ts +34 -0
  234. package/dist/spinner.js +5 -0
  235. package/dist/spinner.js.map +1 -0
  236. package/dist/stack.css +60 -0
  237. package/dist/stack.css.map +1 -0
  238. package/dist/stack.d.ts +319 -0
  239. package/dist/stack.js +4 -0
  240. package/dist/stack.js.map +1 -0
  241. package/dist/switch.css +97 -0
  242. package/dist/switch.css.map +1 -0
  243. package/dist/switch.d.ts +35 -0
  244. package/dist/switch.js +7 -0
  245. package/dist/switch.js.map +1 -0
  246. package/dist/table.css +188 -0
  247. package/dist/table.css.map +1 -0
  248. package/dist/table.d.ts +137 -0
  249. package/dist/table.js +6 -0
  250. package/dist/table.js.map +1 -0
  251. package/dist/tabs.css +75 -0
  252. package/dist/tabs.css.map +1 -0
  253. package/dist/tabs.d.ts +73 -0
  254. package/dist/tabs.js +5 -0
  255. package/dist/tabs.js.map +1 -0
  256. package/dist/text-field.css +75 -0
  257. package/dist/text-field.css.map +1 -0
  258. package/dist/text-field.d.ts +43 -0
  259. package/dist/text-field.js +6 -0
  260. package/dist/text-field.js.map +1 -0
  261. package/dist/text.css +53 -0
  262. package/dist/text.css.map +1 -0
  263. package/dist/text.d.ts +331 -0
  264. package/dist/text.js +4 -0
  265. package/dist/text.js.map +1 -0
  266. package/dist/textarea.css +84 -0
  267. package/dist/textarea.css.map +1 -0
  268. package/dist/textarea.d.ts +40 -0
  269. package/dist/textarea.js +6 -0
  270. package/dist/textarea.js.map +1 -0
  271. package/dist/toast.css +300 -0
  272. package/dist/toast.css.map +1 -0
  273. package/dist/toast.d.ts +60 -0
  274. package/dist/toast.js +11 -0
  275. package/dist/toast.js.map +1 -0
  276. package/dist/tooltip.css +36 -0
  277. package/dist/tooltip.css.map +1 -0
  278. package/dist/tooltip.d.ts +34 -0
  279. package/dist/tooltip.js +5 -0
  280. package/dist/tooltip.js.map +1 -0
  281. package/dist/visually-hidden.css +15 -0
  282. package/dist/visually-hidden.css.map +1 -0
  283. package/dist/visually-hidden.d.ts +308 -0
  284. package/dist/visually-hidden.js +4 -0
  285. package/dist/visually-hidden.js.map +1 -0
  286. package/package.json +261 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Pere Pages
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,65 @@
1
+ # @pearpages/pulp-react
2
+
3
+ The React components of [pulp](https://pulp.pearpages.com): accessible, driven by tokens, styled
4
+ with CSS modules, one entry point per component. Docs, live examples and each component's
5
+ accessibility notes are at https://pulp.pearpages.com.
6
+
7
+ ## Install
8
+
9
+ ```sh
10
+ npm install @pearpages/pulp-react @pearpages/pulp-css @pearpages/pulp-tokens
11
+ ```
12
+
13
+ Requires React 19 and `react-dom`. `@pearpages/pulp-tokens` is a peer dependency.
14
+
15
+ ## Use
16
+
17
+ Load the styles once:
18
+
19
+ ```css
20
+ @import "@pearpages/pulp-css";
21
+ @import "@pearpages/pulp-react/styles.css";
22
+ ```
23
+
24
+ Every component also has its own stylesheet (`@pearpages/pulp-react/button.css`, …) if you load
25
+ only what you use.
26
+
27
+ Import each component from its own entry point, or everything from the package root:
28
+
29
+ ```tsx
30
+ import { Button } from '@pearpages/pulp-react/button';
31
+
32
+ <html data-brand="bitepals" data-scheme="dark">
33
+ <Button variant="secondary" size="lg">Save</Button>
34
+ </html>
35
+ ```
36
+
37
+ `data-brand` (`pulp` or `bitepals`) and `data-scheme` (`light`, `dark`, or none to follow the OS)
38
+ theme everything inside the element they're on.
39
+
40
+ ## Components
41
+
42
+ - **Typography**: `Heading`, `Text`
43
+ - **Layout**: `Card`, `Stack`, `Inline`
44
+ - **Actions**: `Button`, `IconButton`
45
+ - **Forms**: `Field`, `TextField`, `Textarea`, `Select`, `Checkbox`, `Switch`, `RadioGroup`,
46
+ `Radio`, `Combobox`, `Listbox`, `Picker`, `Calendar`, `DatePicker`, `Slider`
47
+ - **Navigation**: `Tabs`, `Accordion`, `Pagination`
48
+ - **Overlays**: `Dialog`, `DialogSystem`, `Menu`, `Popover`, `Tooltip`
49
+ - **Feedback**: `Alert`, `Badge`, `ToastProvider` and `useToast`, `Progress`, `Skeleton`, `Spinner`
50
+ - **Data**: `Table`
51
+ - **Utilities**: `Icon`, `VisuallyHidden`
52
+
53
+ `Combobox`, `Listbox`, `Picker`, `Calendar`, `DatePicker`, `Slider`, `Table` and `Pagination` are
54
+ **experimental**: their API may still change in a minor release. All but `Pagination` build on
55
+ React Aria Components, installed with this package and tree-shaken per entry. Their props are
56
+ pulp's, and dates cross the API as `YYYY-MM-DD` strings.
57
+
58
+ ## For tooling and coding agents
59
+
60
+ `@pearpages/pulp-react/component-manifest.json` lists every component with its status, category,
61
+ props, accessibility notes and do/don't guidance.
62
+
63
+ ## License
64
+
65
+ MIT
package/dist/ListboxOptions-DLsT-dkV.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /** One option. `id` is the value; `label` is what the user sees and types against. */
2
+ interface ListboxItem {
3
+ id: string;
4
+ label: string;
5
+ /** A second, muted line under the label. */
6
+ description?: string;
7
+ /** @default false */
8
+ disabled?: boolean;
9
+ }
10
+
11
+ export type { ListboxItem as L };
package/dist/ToggleField-C-qKSgHh.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ type ToggleSize = 'sm' | 'md' | 'lg';
2
+
3
+ export type { ToggleSize as T };
package/dist/accordion.css ADDED
@@ -0,0 +1,90 @@
1
+ /* src/icon/Icon.module.css */
2
+ @layer components {
3
+ .Icon_icon {
4
+ display: inline-flex;
5
+ flex: none;
6
+ inline-size: 1em;
7
+ block-size: 1em;
8
+ font-size: var(--icon-size-md);
9
+ vertical-align: middle;
10
+ &[data-size=sm] {
11
+ font-size: var(--icon-size-sm);
12
+ }
13
+ &[data-size=lg] {
14
+ font-size: var(--icon-size-lg);
15
+ }
16
+ &[data-size=inherit] {
17
+ font-size: inherit;
18
+ }
19
+ & > * {
20
+ inline-size: 100%;
21
+ block-size: 100%;
22
+ }
23
+ }
24
+ }
25
+
26
+ /* src/accordion/Accordion.module.css */
27
+ @layer components {
28
+ .Accordion_accordion {
29
+ display: flex;
30
+ flex-direction: column;
31
+ border: var(--size-hairline) solid var(--accordion-border);
32
+ border-radius: var(--accordion-radius);
33
+ font-family: var(--font-family-body);
34
+ }
35
+ .Accordion_item {
36
+ border-block-end: var(--size-hairline) solid var(--accordion-border);
37
+ &:last-child {
38
+ border-block-end: none;
39
+ }
40
+ }
41
+ .Accordion_heading {
42
+ margin: 0;
43
+ font-size: inherit;
44
+ font-weight: inherit;
45
+ }
46
+ .Accordion_trigger {
47
+ display: flex;
48
+ gap: var(--accordion-trigger-gap);
49
+ align-items: center;
50
+ inline-size: 100%;
51
+ padding-block: var(--accordion-trigger-padding-block);
52
+ padding-inline: var(--accordion-trigger-padding-inline);
53
+ border: none;
54
+ background-color: transparent;
55
+ color: var(--accordion-trigger-fg);
56
+ font-size: var(--accordion-trigger-font-size);
57
+ font-weight: var(--accordion-trigger-font-weight);
58
+ text-align: start;
59
+ cursor: pointer;
60
+ transition: background-color var(--accordion-duration) var(--motion-easing-standard);
61
+ &:focus-visible {
62
+ outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);
63
+ outline-offset: calc(-1 * var(--accordion-focus-ring-offset));
64
+ }
65
+ &:disabled {
66
+ cursor: not-allowed;
67
+ opacity: 0.55;
68
+ }
69
+ &:hover:not(:disabled) {
70
+ background-color: var(--accordion-trigger-bg-hover);
71
+ }
72
+ }
73
+ .Accordion_label {
74
+ flex: 1;
75
+ }
76
+ .Accordion_chevron {
77
+ color: var(--accordion-trigger-chevron);
78
+ transition: rotate var(--accordion-duration) var(--motion-easing-standard);
79
+ }
80
+ .Accordion_trigger[data-state=open] .Accordion_chevron {
81
+ rotate: 180deg;
82
+ }
83
+ .Accordion_panel {
84
+ padding-block: var(--accordion-panel-padding-block);
85
+ padding-inline: var(--accordion-panel-padding-inline);
86
+ color: var(--accordion-panel-fg);
87
+ font-size: var(--accordion-panel-font-size);
88
+ }
89
+ }
90
+ /*# sourceMappingURL=accordion.css.map */
package/dist/accordion.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/accordion/Accordion.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer components {\n .accordion {\n display: flex;\n flex-direction: column;\n border: var(--size-hairline) solid var(--accordion-border);\n border-radius: var(--accordion-radius);\n font-family: var(--font-family-body);\n }\n\n .item {\n border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n &:last-child {\n border-block-end: none;\n }\n }\n\n .heading {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n }\n\n .trigger {\n display: flex;\n gap: var(--accordion-trigger-gap);\n align-items: center;\n inline-size: 100%;\n padding-block: var(--accordion-trigger-padding-block);\n padding-inline: var(--accordion-trigger-padding-inline);\n border: none;\n background-color: transparent;\n color: var(--accordion-trigger-fg);\n font-size: var(--accordion-trigger-font-size);\n font-weight: var(--accordion-trigger-font-weight);\n text-align: start;\n cursor: pointer;\n transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--accordion-trigger-bg-hover);\n }\n }\n\n .label {\n flex: 1;\n }\n\n .chevron {\n color: var(--accordion-trigger-chevron);\n transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n }\n\n .trigger[data-state=\"open\"] .chevron {\n rotate: 180deg;\n }\n\n .panel {\n padding-block: var(--accordion-panel-padding-block);\n padding-inline: var(--accordion-panel-padding-inline);\n color: var(--accordion-panel-fg);\n font-size: var(--accordion-panel-font-size);\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;AClBA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,sBAAkB,IAAI,iBAAiB,MAAM,IAAI;AAEjD,KAAC;AACC,wBAAkB;AACpB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,eAAW;AACX,iBAAa;AACf;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,iBAAa;AACb,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,sBAAsB,IAAI;AAE3D,KAAC;AACC,eAAS,IAAI,8BAA8B,MAAM,IAAI;AACrD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK;AACV,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,WAAO,IAAI;AACX,gBAAY,OAAO,IAAI,sBAAsB,IAAI;AACnD;AAEA,GAxCCF,iBAwCO,CAAC,iBAAmB,CAL3BE;AAMC,YAAQ;AACV;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AACF;","names":["icon","accordion","item","heading","trigger","label","chevron","panel"]}
package/dist/accordion.d.ts ADDED
@@ -0,0 +1,71 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes, Ref, ReactNode, ButtonHTMLAttributes } from 'react';
3
+
4
+ type AccordionType = 'single' | 'multiple';
5
+ type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;
6
+ interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
7
+ /** `single` keeps one item open; `multiple` allows any number. @default 'single' */
8
+ type?: AccordionType;
9
+ /** Controlled open item(s): a string for `single`, an array for `multiple`. */
10
+ value?: string | string[];
11
+ defaultValue?: string | string[];
12
+ onValueChange?: (value: string | string[]) => void;
13
+ /** In `single` mode, whether the open item can be closed again. @default true */
14
+ collapsible?: boolean;
15
+ /** The heading level of every trigger, for the document outline. @default 3 */
16
+ headingLevel?: AccordionHeadingLevel;
17
+ ref?: Ref<HTMLDivElement>;
18
+ children: ReactNode;
19
+ }
20
+ /**
21
+ * Vertically stacked sections that expand one at a time or independently.
22
+ * Each trigger is a button inside a real heading, each panel a labelled
23
+ * region; arrows, Home and End move between triggers. Controlled or
24
+ * uncontrolled by `value`. Compose with `Accordion.Item`,
25
+ * `Accordion.Trigger` and `Accordion.Panel`.
26
+ *
27
+ * @status stable
28
+ * @category Navigation
29
+ * @accessibility Each trigger is a `button` inside a heading of the given `headingLevel`; each panel is a `region` labelled by its trigger. Arrows, Home and End move between triggers; Enter or Space toggles.
30
+ * @do Set `headingLevel` to fit the page outline.
31
+ * Use `multiple` when sections are independent reference material.
32
+ * @dont Nest interactive content in the trigger; it is one button.
33
+ * Use it for a single show-more; use Popover or plain content instead.
34
+ */
35
+ declare function Accordion({ type, value, defaultValue, onValueChange, collapsible, headingLevel, className, onKeyDown, ref, children, ...rest }: AccordionProps): react.JSX.Element;
36
+ declare namespace Accordion {
37
+ var displayName: string;
38
+ var Item: typeof AccordionItem;
39
+ var Trigger: typeof AccordionTrigger;
40
+ var Panel: typeof AccordionPanel;
41
+ }
42
+ interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
43
+ value: string;
44
+ disabled?: boolean;
45
+ ref?: Ref<HTMLDivElement>;
46
+ children: ReactNode;
47
+ }
48
+ declare function AccordionItem({ value, disabled, className, ref, children, ...rest }: AccordionItemProps): react.JSX.Element;
49
+ declare namespace AccordionItem {
50
+ var displayName: string;
51
+ }
52
+ interface AccordionTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
53
+ ref?: Ref<HTMLButtonElement>;
54
+ children: ReactNode;
55
+ }
56
+ declare function AccordionTrigger({ className, onClick, ref, children, ...rest }: AccordionTriggerProps): react.DetailedReactHTMLElement<{
57
+ className: string | undefined;
58
+ }, HTMLElement>;
59
+ declare namespace AccordionTrigger {
60
+ var displayName: string;
61
+ }
62
+ interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
63
+ ref?: Ref<HTMLDivElement>;
64
+ children: ReactNode;
65
+ }
66
+ declare function AccordionPanel({ className, ref, children, ...rest }: AccordionPanelProps): react.JSX.Element;
67
+ declare namespace AccordionPanel {
68
+ var displayName: string;
69
+ }
70
+
71
+ export { Accordion, type AccordionHeadingLevel, type AccordionProps, type AccordionType };
package/dist/accordion.js ADDED
@@ -0,0 +1,6 @@
1
+ export { Accordion } from './chunk-O6OBFL3Q.js';
2
+ import './chunk-I5OZ63W7.js';
3
+ import './chunk-ASNTNTJW.js';
4
+ import './chunk-MI4QUKQS.js';
5
+ //# sourceMappingURL=accordion.js.map
6
+ //# sourceMappingURL=accordion.js.map
package/dist/accordion.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"accordion.js"}
package/dist/alert.css ADDED
@@ -0,0 +1,246 @@
1
+ /* src/icon/Icon.module.css */
2
+ @layer components {
3
+ .Icon_icon {
4
+ display: inline-flex;
5
+ flex: none;
6
+ inline-size: 1em;
7
+ block-size: 1em;
8
+ font-size: var(--icon-size-md);
9
+ vertical-align: middle;
10
+ &[data-size=sm] {
11
+ font-size: var(--icon-size-sm);
12
+ }
13
+ &[data-size=lg] {
14
+ font-size: var(--icon-size-lg);
15
+ }
16
+ &[data-size=inherit] {
17
+ font-size: inherit;
18
+ }
19
+ & > * {
20
+ inline-size: 100%;
21
+ block-size: 100%;
22
+ }
23
+ }
24
+ }
25
+
26
+ /* src/visually-hidden/VisuallyHidden.module.css */
27
+ @layer components {
28
+ .VisuallyHidden_root {
29
+ position: absolute;
30
+ inline-size: var(--visually-hidden-size);
31
+ block-size: var(--visually-hidden-size);
32
+ padding: 0;
33
+ margin: 0;
34
+ overflow: hidden;
35
+ clip-path: inset(50%);
36
+ white-space: nowrap;
37
+ border: 0;
38
+ }
39
+ }
40
+
41
+ /* src/spinner/Spinner.module.css */
42
+ @layer components {
43
+ .Spinner_spinner {
44
+ --_size: var(--spinner-size-md);
45
+ --_track: var(--spinner-track);
46
+ --_indicator: var(--spinner-indicator);
47
+ display: inline-flex;
48
+ flex: none;
49
+ inline-size: var(--_size);
50
+ block-size: var(--_size);
51
+ vertical-align: middle;
52
+ &[data-size=sm] {
53
+ --_size: var(--spinner-size-sm);
54
+ }
55
+ &[data-size=lg] {
56
+ --_size: var(--spinner-size-lg);
57
+ }
58
+ &[data-size=inherit] {
59
+ --_size: 1em;
60
+ }
61
+ &[data-tone=inherit] {
62
+ --_track: transparent;
63
+ --_indicator: currentcolor;
64
+ }
65
+ }
66
+ .Spinner_ring {
67
+ inline-size: 100%;
68
+ block-size: 100%;
69
+ border: var(--spinner-width) solid var(--_track);
70
+ border-block-start-color: var(--_indicator);
71
+ border-radius: var(--radius-full);
72
+ animation: Spinner_spin var(--spinner-duration) linear infinite;
73
+ }
74
+ @keyframes Spinner_spin {
75
+ to {
76
+ rotate: 1turn;
77
+ }
78
+ }
79
+ @media (prefers-reduced-motion: reduce) {
80
+ .Spinner_ring {
81
+ animation: none;
82
+ }
83
+ }
84
+ }
85
+
86
+ /* src/button/Button.module.css */
87
+ @layer components {
88
+ .Button_button {
89
+ display: inline-flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ gap: var(--button-gap);
93
+ min-block-size: var(--button-height-md);
94
+ padding-block: 0;
95
+ padding-inline: var(--button-padding-inline-md);
96
+ border: 1px solid transparent;
97
+ border-radius: var(--button-radius);
98
+ font-family: var(--button-font-family);
99
+ font-size: var(--button-font-size-md);
100
+ font-weight: var(--button-font-weight);
101
+ line-height: 1;
102
+ text-decoration: none;
103
+ white-space: nowrap;
104
+ cursor: pointer;
105
+ user-select: none;
106
+ transition:
107
+ background-color var(--button-motion-duration) var(--motion-easing-standard),
108
+ border-color var(--button-motion-duration) var(--motion-easing-standard),
109
+ color var(--button-motion-duration) var(--motion-easing-standard);
110
+ &:focus-visible {
111
+ outline: var(--button-focus-ring-width) solid var(--button-focus-ring);
112
+ outline-offset: var(--button-focus-ring-offset);
113
+ }
114
+ &:disabled,
115
+ &[aria-disabled=true] {
116
+ cursor: not-allowed;
117
+ opacity: 0.55;
118
+ }
119
+ &[data-loading] {
120
+ cursor: progress;
121
+ }
122
+ &[data-size=sm] {
123
+ min-block-size: var(--button-height-sm);
124
+ padding-inline: var(--button-padding-inline-sm);
125
+ font-size: var(--button-font-size-sm);
126
+ }
127
+ &[data-size=lg] {
128
+ min-block-size: var(--button-height-lg);
129
+ padding-inline: var(--button-padding-inline-lg);
130
+ font-size: var(--button-font-size-lg);
131
+ }
132
+ &[data-variant=primary] {
133
+ background-color: var(--button-primary-bg);
134
+ color: var(--button-primary-fg);
135
+ &:hover:not(:disabled, [aria-disabled=true]) {
136
+ background-color: var(--button-primary-bg-hover);
137
+ }
138
+ &:active:not(:disabled, [aria-disabled=true]) {
139
+ background-color: var(--button-primary-bg-active);
140
+ }
141
+ }
142
+ &[data-variant=secondary] {
143
+ background-color: var(--button-secondary-bg);
144
+ border-color: var(--button-secondary-border);
145
+ color: var(--button-secondary-fg);
146
+ &:hover:not(:disabled, [aria-disabled=true]) {
147
+ background-color: var(--button-secondary-bg-hover);
148
+ }
149
+ }
150
+ &[data-variant=ghost] {
151
+ background-color: transparent;
152
+ color: var(--button-ghost-fg);
153
+ &:hover:not(:disabled, [aria-disabled=true]) {
154
+ background-color: var(--button-ghost-bg-hover);
155
+ }
156
+ }
157
+ }
158
+ .Button_label {
159
+ display: inline-block;
160
+ }
161
+ }
162
+
163
+ /* src/icon-button/IconButton.module.css */
164
+ @layer components {
165
+ .IconButton_iconButton[data-icon-only] {
166
+ gap: 0;
167
+ inline-size: var(--icon-button-size-md);
168
+ padding-inline: 0;
169
+ &[data-size=sm] {
170
+ inline-size: var(--icon-button-size-sm);
171
+ }
172
+ &[data-size=lg] {
173
+ inline-size: var(--icon-button-size-lg);
174
+ }
175
+ }
176
+ }
177
+
178
+ /* src/alert/Alert.module.css */
179
+ @layer components {
180
+ .Alert_alert {
181
+ --_bg: var(--alert-info-bg);
182
+ --_accent: var(--alert-info-accent);
183
+ --_title: var(--alert-info-title);
184
+ display: flex;
185
+ align-items: flex-start;
186
+ gap: var(--alert-gap);
187
+ padding: var(--alert-padding);
188
+ border: var(--alert-border-width) solid var(--_accent);
189
+ border-inline-start-width: var(--alert-accent-width);
190
+ border-radius: var(--alert-radius);
191
+ background-color: var(--_bg);
192
+ color: var(--alert-fg);
193
+ font-size: var(--alert-font-size);
194
+ &[data-tone=info] {
195
+ --_bg: var(--alert-info-bg);
196
+ --_accent: var(--alert-info-accent);
197
+ --_title: var(--alert-info-title);
198
+ }
199
+ &[data-tone=success] {
200
+ --_bg: var(--alert-success-bg);
201
+ --_accent: var(--alert-success-accent);
202
+ --_title: var(--alert-success-title);
203
+ }
204
+ &[data-tone=warning] {
205
+ --_bg: var(--alert-warning-bg);
206
+ --_accent: var(--alert-warning-accent);
207
+ --_title: var(--alert-warning-title);
208
+ }
209
+ &[data-tone=error] {
210
+ --_bg: var(--alert-error-bg);
211
+ --_accent: var(--alert-error-accent);
212
+ --_title: var(--alert-error-title);
213
+ }
214
+ }
215
+ .Alert_icon {
216
+ flex: none;
217
+ color: var(--_accent);
218
+ }
219
+ .Alert_body {
220
+ display: flex;
221
+ flex: 1;
222
+ flex-direction: column;
223
+ gap: var(--space-1);
224
+ min-inline-size: 0;
225
+ }
226
+ .Alert_title {
227
+ margin: 0;
228
+ color: var(--_title);
229
+ font-weight: var(--alert-title-font-weight);
230
+ }
231
+ .Alert_content {
232
+ overflow-wrap: anywhere;
233
+ }
234
+ .Alert_action {
235
+ display: flex;
236
+ flex-wrap: wrap;
237
+ gap: var(--space-2);
238
+ margin-block-start: var(--space-1);
239
+ }
240
+ .Alert_dismiss {
241
+ flex: none;
242
+ margin-block: calc(-1 * var(--space-1));
243
+ margin-inline-end: calc(-1 * var(--space-2));
244
+ }
245
+ }
246
+ /*# sourceMappingURL=alert.css.map */
package/dist/alert.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n .alert {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n\n display: flex;\n align-items: flex-start;\n gap: var(--alert-gap);\n padding: var(--alert-padding);\n border: var(--alert-border-width) solid var(--_accent);\n border-inline-start-width: var(--alert-accent-width);\n border-radius: var(--alert-radius);\n background-color: var(--_bg);\n color: var(--alert-fg);\n font-size: var(--alert-font-size);\n\n &[data-tone=\"info\"] {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n }\n\n &[data-tone=\"success\"] {\n --_bg: var(--alert-success-bg);\n --_accent: var(--alert-success-accent);\n --_title: var(--alert-success-title);\n }\n\n &[data-tone=\"warning\"] {\n --_bg: var(--alert-warning-bg);\n --_accent: var(--alert-warning-accent);\n --_title: var(--alert-warning-title);\n }\n\n &[data-tone=\"error\"] {\n --_bg: var(--alert-error-bg);\n --_accent: var(--alert-error-accent);\n --_title: var(--alert-error-title);\n }\n }\n\n .icon {\n flex: none;\n color: var(--_accent);\n }\n\n .body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n min-inline-size: 0;\n }\n\n .title {\n margin: 0;\n color: var(--_title);\n font-weight: var(--alert-title-font-weight);\n }\n\n .content {\n overflow-wrap: anywhere;\n }\n\n .action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-block-start: var(--space-1);\n }\n\n .dismiss {\n flex: none;\n margin-block: calc(-1 * var(--space-1));\n margin-inline-end: calc(-1 * var(--space-2));\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}
package/dist/alert.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes, ReactNode, Ref } from 'react';
3
+
4
+ type AlertTone = 'info' | 'success' | 'warning' | 'error';
5
+ type AlertLive = 'polite' | 'assertive' | 'off';
6
+ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
7
+ /** @default 'info' */
8
+ tone?: AlertTone;
9
+ title?: ReactNode;
10
+ /** Replaces the tone's default glyph; `null` shows none. */
11
+ icon?: ReactNode | null;
12
+ /** Buttons or links placed under the body. */
13
+ action?: ReactNode;
14
+ /** Renders a dismiss button that calls this. */
15
+ onDismiss?: () => void;
16
+ /** @default 'Dismiss' */
17
+ dismissLabel?: string;
18
+ /**
19
+ * How assistive technology announces it: `assertive` (`role="alert"`),
20
+ * `polite` (`role="status"`) or `off` (no live role, for content present at
21
+ * page load or inside another live region). Defaults to assertive for
22
+ * `error`, polite otherwise.
23
+ */
24
+ live?: AlertLive;
25
+ ref?: Ref<HTMLDivElement>;
26
+ children?: ReactNode;
27
+ }
28
+ /**
29
+ * An inline message with a tone. Tint, accent and title colour come from
30
+ * the status tokens; the body keeps the default text colour so long
31
+ * messages stay readable. Toast renders one Alert per notification.
32
+ *
33
+ * @status stable
34
+ * @category Feedback
35
+ * @accessibility `role="alert"` for `tone="error"` (assertive), `role="status"` otherwise (polite); `live="off"` opts out. The glyph is decorative; the tone is carried by the title and text, never by colour alone.
36
+ * @do Give it a `title` when the body is more than one sentence.
37
+ * Use `onDismiss` for messages the user can act on and clear.
38
+ * @dont Announce errors through both an Alert and a Toast.
39
+ * Use it as a page-level banner for marketing copy.
40
+ */
41
+ declare function Alert({ tone, title, icon, action, onDismiss, dismissLabel, live, className, ref, children, ...rest }: AlertProps): react.JSX.Element;
42
+ declare namespace Alert {
43
+ var displayName: string;
44
+ }
45
+
46
+ export { Alert, type AlertLive, type AlertProps, type AlertTone };
package/dist/alert.js ADDED
@@ -0,0 +1,10 @@
1
+ export { Alert } from './chunk-PM4YO67Q.js';
2
+ import './chunk-FXRSZUDH.js';
3
+ import './chunk-KPQGS4PG.js';
4
+ import './chunk-I4KC4V6A.js';
5
+ import './chunk-ZVDN3GRI.js';
6
+ import './chunk-Z4PN6B2C.js';
7
+ import './chunk-ASNTNTJW.js';
8
+ import './chunk-MI4QUKQS.js';
9
+ //# sourceMappingURL=alert.js.map
10
+ //# sourceMappingURL=alert.js.map
package/dist/alert.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"alert.js"}