@igne-agency/react-web-ui 0.5.0 → 0.6.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 (254) hide show
  1. package/dist/components/accordion/accordion.css +21 -21
  2. package/dist/components/accordion/accordion.d.ts +17 -4
  3. package/dist/components/accordion/accordion.js +83 -36
  4. package/dist/components/accordion/accordion.module.js +6 -6
  5. package/dist/components/attachment-tile/attachment-preview.d.ts +56 -13
  6. package/dist/components/attachment-tile/attachment-preview.js +388 -119
  7. package/dist/components/attachment-tile/attachment-tile.css +31 -25
  8. package/dist/components/attachment-tile/attachment-tile.d.ts +32 -10
  9. package/dist/components/attachment-tile/attachment-tile.js +160 -43
  10. package/dist/components/attachment-tile/attachment-tile.module.js +8 -8
  11. package/dist/components/attachment-tile/index.d.ts +1 -1
  12. package/dist/components/avatar/avatar.css +9 -9
  13. package/dist/components/avatar/avatar.d.ts +50 -5
  14. package/dist/components/avatar/avatar.js +178 -64
  15. package/dist/components/avatar/avatar.module.js +3 -3
  16. package/dist/components/avatar-group/avatar-group-context.d.ts +2 -4
  17. package/dist/components/avatar-group/avatar-group-context.js +2 -2
  18. package/dist/components/avatar-group/avatar-group.css +26 -20
  19. package/dist/components/avatar-group/avatar-group.d.ts +85 -27
  20. package/dist/components/avatar-group/avatar-group.js +400 -246
  21. package/dist/components/avatar-group/avatar-group.module.js +8 -8
  22. package/dist/components/breadcrumbs/breadcrumbs.css +12 -12
  23. package/dist/components/breadcrumbs/breadcrumbs.d.ts +69 -23
  24. package/dist/components/breadcrumbs/breadcrumbs.js +299 -248
  25. package/dist/components/breadcrumbs/breadcrumbs.module.js +8 -8
  26. package/dist/components/button/button.css +29 -31
  27. package/dist/components/button/button.d.ts +20 -16
  28. package/dist/components/button/button.js +140 -145
  29. package/dist/components/button/button.module.js +1 -1
  30. package/dist/components/button/index.js +1 -1
  31. package/dist/components/checkbox-field/checkbox-field.js +63 -49
  32. package/dist/components/checkbox-field/checkbox.css +105 -56
  33. package/dist/components/checkbox-field/checkbox.d.ts +3 -2
  34. package/dist/components/checkbox-field/checkbox.js +12 -9
  35. package/dist/components/checkbox-field/checkbox.module.js +4 -4
  36. package/dist/components/checkbox-group-field/checkbox-group-field.js +78 -72
  37. package/dist/components/checkbox-group-field/checkbox-group.css +14 -10
  38. package/dist/components/checkbox-group-field/checkbox-group.d.ts +2 -2
  39. package/dist/components/checkbox-group-field/checkbox-group.js +2 -2
  40. package/dist/components/checkbox-group-field/checkbox-group.module.js +2 -2
  41. package/dist/components/collapsible/collapsible.css +20 -20
  42. package/dist/components/collapsible/collapsible.d.ts +17 -4
  43. package/dist/components/collapsible/collapsible.js +83 -36
  44. package/dist/components/collapsible/collapsible.module.js +5 -5
  45. package/dist/components/combobox-field/combobox-field.js +206 -158
  46. package/dist/components/combobox-field/combobox.css +492 -277
  47. package/dist/components/combobox-field/combobox.d.ts +148 -39
  48. package/dist/components/combobox-field/combobox.js +506 -206
  49. package/dist/components/combobox-field/combobox.module.js +21 -21
  50. package/dist/components/combobox-field/value-state-view.css +5 -5
  51. package/dist/components/combobox-field/value-state-view.module.js +4 -4
  52. package/dist/components/composer/composer-attachments.d.ts +30 -11
  53. package/dist/components/composer/composer-attachments.js +45 -40
  54. package/dist/components/composer/composer-editor.css +40 -35
  55. package/dist/components/composer/composer-editor.d.ts +14 -4
  56. package/dist/components/composer/composer-editor.js +134 -44
  57. package/dist/components/composer/composer-editor.module.js +5 -5
  58. package/dist/components/composer/composer.css +22 -22
  59. package/dist/components/composer/composer.d.ts +13 -2
  60. package/dist/components/composer/composer.js +78 -63
  61. package/dist/components/composer/composer.module.js +5 -5
  62. package/dist/components/composer/index.d.ts +2 -2
  63. package/dist/components/composer/mention-text.css +5 -5
  64. package/dist/components/composer/mention-text.module.js +1 -1
  65. package/dist/components/confirm-dialog/confirm-dialog.css +29 -29
  66. package/dist/components/confirm-dialog/confirm-dialog.d.ts +57 -3
  67. package/dist/components/confirm-dialog/confirm-dialog.js +266 -108
  68. package/dist/components/confirm-dialog/confirm-dialog.module.js +5 -5
  69. package/dist/components/conversation/conversation.css +52 -52
  70. package/dist/components/conversation/conversation.d.ts +43 -18
  71. package/dist/components/conversation/conversation.js +120 -78
  72. package/dist/components/conversation/conversation.module.js +15 -15
  73. package/dist/components/date-field/date-field.d.ts +1 -1
  74. package/dist/components/date-field/date-field.js +202 -100
  75. package/dist/components/date-field/date-input.d.ts +73 -37
  76. package/dist/components/date-field/date-input.js +72 -45
  77. package/dist/components/date-field/index.d.ts +1 -1
  78. package/dist/components/date-range-field/date-range-field.d.ts +1 -1
  79. package/dist/components/date-range-field/date-range-field.js +219 -107
  80. package/dist/components/date-range-field/date-range-input.d.ts +84 -40
  81. package/dist/components/date-range-field/date-range-input.js +83 -48
  82. package/dist/components/dialog/dialog.css +32 -32
  83. package/dist/components/dialog/dialog.d.ts +8 -7
  84. package/dist/components/dialog/dialog.js +8 -26
  85. package/dist/components/dialog/dialog.module.js +6 -6
  86. package/dist/components/divider/divider.css +6 -6
  87. package/dist/components/divider/divider.d.ts +36 -2
  88. package/dist/components/divider/divider.js +195 -29
  89. package/dist/components/divider/divider.module.js +3 -3
  90. package/dist/components/drawer/drawer.css +55 -56
  91. package/dist/components/drawer/drawer.d.ts +8 -7
  92. package/dist/components/drawer/drawer.js +8 -26
  93. package/dist/components/drawer/drawer.module.js +6 -6
  94. package/dist/components/field/field.css +34 -24
  95. package/dist/components/field/field.d.ts +60 -37
  96. package/dist/components/field/field.js +242 -157
  97. package/dist/components/field/field.module.js +12 -10
  98. package/dist/components/field/input-parts.d.ts +11 -13
  99. package/dist/components/field/input-parts.js +23 -42
  100. package/dist/components/field-placeholder/field-placeholder.css +6 -6
  101. package/dist/components/field-placeholder/field-placeholder.module.js +4 -4
  102. package/dist/components/fieldset/field-group.d.ts +1 -1
  103. package/dist/components/fieldset/field-group.js +48 -42
  104. package/dist/components/fieldset/fieldset-root.d.ts +1 -1
  105. package/dist/components/fieldset/fieldset-root.js +19 -17
  106. package/dist/components/fieldset/fieldset.d.ts +2 -2
  107. package/dist/components/fieldset/fieldset.js +2 -2
  108. package/dist/components/file-field/file-field.css +126 -60
  109. package/dist/components/file-field/file-field.js +201 -109
  110. package/dist/components/file-field/file-field.module.js +4 -4
  111. package/dist/components/file-field/file-input.d.ts +66 -40
  112. package/dist/components/file-field/file-input.js +188 -132
  113. package/dist/components/filter-bar/filter-bar.css +8 -8
  114. package/dist/components/filter-bar/filter-bar.d.ts +12 -3
  115. package/dist/components/filter-bar/filter-bar.js +23 -25
  116. package/dist/components/filter-bar/filter-bar.module.js +5 -5
  117. package/dist/components/form/form.d.ts +19 -7
  118. package/dist/components/form/form.js +80 -29
  119. package/dist/components/icon/icon.css +2 -2
  120. package/dist/components/icon/icon.module.js +1 -1
  121. package/dist/components/link/link.css +6 -5
  122. package/dist/components/link/link.module.js +1 -1
  123. package/dist/components/menu/menu.css +52 -47
  124. package/dist/components/menu/menu.d.ts +32 -25
  125. package/dist/components/menu/menu.js +75 -124
  126. package/dist/components/menu/menu.module.js +8 -8
  127. package/dist/components/nav/nav-context.d.ts +1 -1
  128. package/dist/components/nav/nav-item-view.d.ts +10 -13
  129. package/dist/components/nav/nav-item-view.js +42 -54
  130. package/dist/components/nav/nav.css +150 -119
  131. package/dist/components/nav/nav.d.ts +61 -17
  132. package/dist/components/nav/nav.js +271 -176
  133. package/dist/components/nav/nav.module.js +17 -15
  134. package/dist/components/number-field/number-field.css +153 -64
  135. package/dist/components/number-field/number-field.d.ts +2 -2
  136. package/dist/components/number-field/number-field.js +112 -91
  137. package/dist/components/number-field/number-field.module.js +6 -6
  138. package/dist/components/number-field/number-input.d.ts +43 -23
  139. package/dist/components/number-field/number-input.js +179 -125
  140. package/dist/components/otp-field/otp-field.css +153 -60
  141. package/dist/components/otp-field/otp-field.d.ts +2 -2
  142. package/dist/components/otp-field/otp-field.js +62 -46
  143. package/dist/components/otp-field/otp-field.module.js +4 -4
  144. package/dist/components/otp-field/otp-input.d.ts +8 -6
  145. package/dist/components/otp-field/otp-input.js +92 -92
  146. package/dist/components/pagination/pagination.d.ts +46 -15
  147. package/dist/components/pagination/pagination.js +217 -224
  148. package/dist/components/password-field/password-field.css +23 -23
  149. package/dist/components/password-field/password-field.js +107 -85
  150. package/dist/components/password-field/password-field.module.js +8 -8
  151. package/dist/components/password-field/password-strength.d.ts +107 -3
  152. package/dist/components/password-field/password-strength.js +569 -92
  153. package/dist/components/photo-field/photo-field.js +137 -112
  154. package/dist/components/photo-field/photo-input.css +67 -44
  155. package/dist/components/photo-field/photo-input.d.ts +59 -15
  156. package/dist/components/photo-field/photo-input.js +173 -86
  157. package/dist/components/photo-field/photo-input.module.js +10 -8
  158. package/dist/components/popover/popover.css +41 -41
  159. package/dist/components/popover/popover.d.ts +66 -25
  160. package/dist/components/popover/popover.js +332 -217
  161. package/dist/components/popover/popover.module.js +15 -19
  162. package/dist/components/radio-group-field/radio-group-field.js +80 -71
  163. package/dist/components/radio-group-field/radio-group.css +112 -60
  164. package/dist/components/radio-group-field/radio-group.d.ts +19 -3
  165. package/dist/components/radio-group-field/radio-group.js +66 -23
  166. package/dist/components/radio-group-field/radio-group.module.js +4 -4
  167. package/dist/components/segmented-control-field/segmented-control-field.d.ts +1 -1
  168. package/dist/components/segmented-control-field/segmented-control-field.js +111 -96
  169. package/dist/components/segmented-control-field/segmented-control.css +132 -79
  170. package/dist/components/segmented-control-field/segmented-control.d.ts +39 -15
  171. package/dist/components/segmented-control-field/segmented-control.js +124 -41
  172. package/dist/components/segmented-control-field/segmented-control.module.js +4 -4
  173. package/dist/components/select-field/select.css +214 -101
  174. package/dist/components/select-field/select.d.ts +43 -11
  175. package/dist/components/select-field/select.js +194 -109
  176. package/dist/components/select-field/select.module.js +14 -14
  177. package/dist/components/skeleton/skeleton.css +4 -4
  178. package/dist/components/skeleton/skeleton.module.js +3 -3
  179. package/dist/components/stale/stale.css +15 -15
  180. package/dist/components/stale/stale.d.ts +27 -3
  181. package/dist/components/stale/stale.js +147 -66
  182. package/dist/components/stale/stale.module.js +6 -6
  183. package/dist/components/status-message/status-message.css +22 -22
  184. package/dist/components/status-message/status-message.module.js +6 -6
  185. package/dist/components/switch-field/switch-field.js +77 -57
  186. package/dist/components/switch-field/switch.css +112 -63
  187. package/dist/components/switch-field/switch.d.ts +20 -3
  188. package/dist/components/switch-field/switch.js +70 -27
  189. package/dist/components/switch-field/switch.module.js +4 -4
  190. package/dist/components/tabs/tabs.css +32 -32
  191. package/dist/components/tabs/tabs.d.ts +21 -7
  192. package/dist/components/tabs/tabs.js +73 -14
  193. package/dist/components/tabs/tabs.module.js +7 -7
  194. package/dist/components/tag/tag.css +84 -84
  195. package/dist/components/tag/tag.module.js +3 -3
  196. package/dist/components/tag-group/tag-group.css +94 -94
  197. package/dist/components/tag-group/tag-group.module.js +4 -4
  198. package/dist/components/text-field/text-field.css +159 -82
  199. package/dist/components/text-field/text-field.d.ts +1 -1
  200. package/dist/components/text-field/text-field.js +139 -110
  201. package/dist/components/text-field/text-field.module.js +9 -9
  202. package/dist/components/text-field/text-input.d.ts +81 -45
  203. package/dist/components/text-field/text-input.js +366 -217
  204. package/dist/components/textarea-field/textarea-field.css +7 -2
  205. package/dist/components/textarea-field/textarea-field.js +72 -56
  206. package/dist/components/textarea-field/textarea-field.module.js +2 -2
  207. package/dist/components/time-field/time-field.js +153 -60
  208. package/dist/components/time-field/time-input.d.ts +21 -10
  209. package/dist/components/time-field/time-input.js +22 -11
  210. package/dist/components/toast/toast-provider.css +34 -31
  211. package/dist/components/toast/toast-provider.d.ts +63 -14
  212. package/dist/components/toast/toast-provider.js +174 -111
  213. package/dist/components/toast/toast-provider.module.js +7 -7
  214. package/dist/components/toggle-group-field/toggle-group-field.d.ts +1 -1
  215. package/dist/components/toggle-group-field/toggle-group-field.js +95 -89
  216. package/dist/components/toggle-group-field/toggle-group.css +117 -67
  217. package/dist/components/toggle-group-field/toggle-group.d.ts +2 -2
  218. package/dist/components/toggle-group-field/toggle-group.js +2 -2
  219. package/dist/components/toggle-group-field/toggle-group.module.js +2 -2
  220. package/dist/components/tooltip/tooltip.css +4 -4
  221. package/dist/components/tooltip/tooltip.module.js +1 -1
  222. package/dist/data-table/data-table-content.js +6 -5
  223. package/dist/data-table/data-table-parts.d.ts +41 -13
  224. package/dist/data-table/data-table-parts.js +213 -172
  225. package/dist/data-table/data-table-selection.d.ts +105 -3
  226. package/dist/data-table/data-table-selection.js +654 -145
  227. package/dist/data-table/data-table.css +125 -128
  228. package/dist/data-table/data-table.d.ts +21 -26
  229. package/dist/data-table/data-table.js +20 -23
  230. package/dist/data-table/data-table.module.js +32 -34
  231. package/dist/data-table/index.d.ts +2 -2
  232. package/dist/index.js +3 -3
  233. package/dist/lib/calendar/calendar-navigation.d.ts +39 -5
  234. package/dist/lib/calendar/calendar-navigation.js +185 -118
  235. package/dist/lib/calendar/calendar-parts.d.ts +143 -0
  236. package/dist/lib/calendar/calendar-parts.js +540 -0
  237. package/dist/lib/calendar/calendar-prefab.d.ts +52 -0
  238. package/dist/lib/calendar/calendar-prefab.js +311 -0
  239. package/dist/lib/calendar/calendar-year.d.ts +3 -1
  240. package/dist/lib/calendar/calendar-year.js +139 -131
  241. package/dist/lib/calendar/temporal.css +325 -232
  242. package/dist/lib/calendar/temporal.d.ts +67 -82
  243. package/dist/lib/calendar/temporal.js +258 -569
  244. package/dist/lib/calendar/temporal.module.js +38 -38
  245. package/dist/lib/forms/use-connected-field.d.ts +1 -1
  246. package/dist/lib/forms/use-connected-field.js +1 -1
  247. package/dist/lib/render-as.d.ts +13 -0
  248. package/dist/lib/render-as.js +46 -0
  249. package/dist/tokens.css +6 -3
  250. package/package.json +1 -1
  251. package/tokens/dark.tokens.json +6 -0
  252. package/tokens/sys.tokens.json +7 -0
  253. package/dist/components/button/close-button.d.ts +0 -16
  254. package/dist/components/button/close-button.js +0 -30
@@ -17,6 +17,8 @@ export type StaleRootProps = useRender.ComponentProps<"div"> & Readonly<{
17
17
  }>;
18
18
  export type StaleContentProps = useRender.ComponentProps<"div">;
19
19
  export type StaleOverlayProps = useRender.ComponentProps<"div">;
20
+ export type StaleStatusProps = useRender.ComponentProps<"p">;
21
+ export type StaleIllustrationProps = useRender.ComponentProps<"span">;
20
22
  export type StaleMessageProps = useRender.ComponentProps<"p"> & Readonly<{
21
23
  /** The moving indicator above the copy, such as the app's animated logo. @default <Spinner size={2} /> */
22
24
  illustration?: ReactNode;
@@ -34,8 +36,27 @@ declare const Root: ({ busy, busyAfter, busyMinDuration, slowAfter, stuckAfter,
34
36
  declare const Content: ({ render, className, ref, ...props }: StaleContentProps) => ReactElement;
35
37
  /** What covers the content once the refresh is slow, fading in and out. */
36
38
  declare const Overlay: ({ render, className, ref, ...props }: StaleOverlayProps) => ReactElement | null;
37
- /** The overlay's status: a moving indicator over its copy. */
38
- declare const Message: ({ illustration, render, className, ref, children, ...props }: StaleMessageProps) => ReactElement;
39
+ /**
40
+ * The overlay's status line, announced as it appears: an `Illustration` over
41
+ * its copy.
42
+ *
43
+ * @example
44
+ * <Stale.Status>
45
+ * <Stale.Illustration><Logo animated /></Stale.Illustration>
46
+ * This is taking longer than usual.
47
+ * </Stale.Status>
48
+ */
49
+ declare const Status: ({ render, className, ref, ...props }: StaleStatusProps) => ReactElement;
50
+ /**
51
+ * The moving indicator above the status's copy, such as a spinner or the
52
+ * app's animated logo, hidden from assistive technology.
53
+ *
54
+ * @example
55
+ * <Stale.Illustration><Spinner size={2} /></Stale.Illustration>
56
+ */
57
+ declare const Illustration: ({ render, className, ref, ...props }: StaleIllustrationProps) => ReactElement;
58
+ /** The overlay's status: a moving indicator over its copy, a spinner unless `illustration` names another. */
59
+ declare const Message: ({ illustration, children, ...props }: StaleMessageProps) => ReactElement;
39
60
  /** The way out once the refresh looks stuck: a button that appears only then. */
40
61
  declare const Retry: ({ onRetry, children, className, ...props }: StaleRetryProps) => ReactNode;
41
62
  type StaleNamespace = Readonly<{
@@ -43,13 +64,16 @@ type StaleNamespace = Readonly<{
43
64
  Content: typeof Content;
44
65
  Overlay: typeof Overlay;
45
66
  Message: typeof Message;
67
+ Status: typeof Status;
68
+ Illustration: typeof Illustration;
46
69
  Retry: typeof Retry;
47
70
  }>;
48
71
  /**
49
72
  * Content that stays visible while a background refresh runs, escalating the
50
73
  * longer the refresh takes: `Content` dims once busy, `Overlay` surfaces once
51
74
  * slow with its `Message`, and `Retry` appears once stuck. A refresh that
52
- * finishes within `busyAfter` shows nothing.
75
+ * finishes within `busyAfter` shows nothing. `Message` composes a `Status`
76
+ * and its `Illustration`, which compose one by hand.
53
77
  *
54
78
  * @example
55
79
  * <Stale.Root busy={query.isFetching}>
@@ -7,7 +7,7 @@ import stale_module_default from "./stale.module.js";
7
7
  import { c } from "react/compiler-runtime";
8
8
  import { useRender } from "@base-ui/react/use-render";
9
9
  import { clsx } from "clsx";
10
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
10
+ import { jsx, jsxs } from "react/jsx-runtime";
11
11
  import { createContext, useRef } from "react";
12
12
  // src/components/stale/stale.tsx
13
13
  var StaleContext = createContext(null);
@@ -250,88 +250,166 @@ var Overlay = (t0) => {
250
250
  } else t7 = $[19];
251
251
  return useRender(t7);
252
252
  };
253
- /** The overlay's status: a moving indicator over its copy. */
254
- var Message = (t0) => {
255
- const $ = c(24);
256
- let children;
253
+ /**
254
+ * The overlay's status line, announced as it appears: an `Illustration` over
255
+ * its copy.
256
+ *
257
+ * @example
258
+ * <Stale.Status>
259
+ * <Stale.Illustration><Logo animated /></Stale.Illustration>
260
+ * This is taking longer than usual.
261
+ * </Stale.Status>
262
+ */
263
+ var Status = (t0) => {
264
+ const $ = c(14);
257
265
  let className;
258
- let illustration;
259
266
  let props;
260
267
  let ref;
261
268
  let render;
262
269
  if ($[0] !== t0) {
263
- ({illustration, render, className, ref, children, ...props} = t0);
270
+ ({render, className, ref, ...props} = t0);
264
271
  $[0] = t0;
265
- $[1] = children;
266
- $[2] = className;
267
- $[3] = illustration;
268
- $[4] = props;
269
- $[5] = ref;
270
- $[6] = render;
272
+ $[1] = className;
273
+ $[2] = props;
274
+ $[3] = ref;
275
+ $[4] = render;
271
276
  } else {
272
- children = $[1];
273
- className = $[2];
274
- illustration = $[3];
275
- props = $[4];
276
- ref = $[5];
277
- render = $[6];
277
+ className = $[1];
278
+ props = $[2];
279
+ ref = $[3];
280
+ render = $[4];
278
281
  }
279
282
  let t1;
280
- if ($[7] !== className) {
283
+ if ($[5] !== className) {
281
284
  t1 = clsx(stale_module_default.message, className);
282
- $[7] = className;
283
- $[8] = t1;
284
- } else t1 = $[8];
285
+ $[5] = className;
286
+ $[6] = t1;
287
+ } else t1 = $[6];
285
288
  let t2;
286
- if ($[9] !== illustration) {
287
- t2 = illustration ?? /* @__PURE__ */ jsx(Spinner, { size: 2 });
288
- $[9] = illustration;
289
- $[10] = t2;
290
- } else t2 = $[10];
291
- let t3;
292
- if ($[11] !== t2) {
293
- t3 = /* @__PURE__ */ jsx("span", {
294
- className: stale_module_default.illustration,
295
- "aria-hidden": "true",
296
- children: t2
297
- });
298
- $[11] = t2;
299
- $[12] = t3;
300
- } else t3 = $[12];
301
- let t4;
302
- if ($[13] !== children || $[14] !== t3) {
303
- t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, children] });
304
- $[13] = children;
305
- $[14] = t3;
306
- $[15] = t4;
307
- } else t4 = $[15];
308
- let t5;
309
- if ($[16] !== props || $[17] !== t1 || $[18] !== t4) {
310
- t5 = {
289
+ if ($[7] !== props || $[8] !== t1) {
290
+ t2 = {
311
291
  role: "status",
312
292
  ...props,
313
- className: t1,
314
- children: t4
293
+ className: t1
315
294
  };
316
- $[16] = props;
317
- $[17] = t1;
318
- $[18] = t4;
319
- $[19] = t5;
320
- } else t5 = $[19];
321
- let t6;
322
- if ($[20] !== ref || $[21] !== render || $[22] !== t5) {
323
- t6 = {
295
+ $[7] = props;
296
+ $[8] = t1;
297
+ $[9] = t2;
298
+ } else t2 = $[9];
299
+ let t3;
300
+ if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
301
+ t3 = {
324
302
  defaultTagName: "p",
325
303
  render,
326
304
  ref,
327
- props: t5
305
+ props: t2
328
306
  };
329
- $[20] = ref;
330
- $[21] = render;
331
- $[22] = t5;
332
- $[23] = t6;
333
- } else t6 = $[23];
334
- return useRender(t6);
307
+ $[10] = ref;
308
+ $[11] = render;
309
+ $[12] = t2;
310
+ $[13] = t3;
311
+ } else t3 = $[13];
312
+ return useRender(t3);
313
+ };
314
+ /**
315
+ * The moving indicator above the status's copy, such as a spinner or the
316
+ * app's animated logo, hidden from assistive technology.
317
+ *
318
+ * @example
319
+ * <Stale.Illustration><Spinner size={2} /></Stale.Illustration>
320
+ */
321
+ var Illustration = (t0) => {
322
+ const $ = c(14);
323
+ let className;
324
+ let props;
325
+ let ref;
326
+ let render;
327
+ if ($[0] !== t0) {
328
+ ({render, className, ref, ...props} = t0);
329
+ $[0] = t0;
330
+ $[1] = className;
331
+ $[2] = props;
332
+ $[3] = ref;
333
+ $[4] = render;
334
+ } else {
335
+ className = $[1];
336
+ props = $[2];
337
+ ref = $[3];
338
+ render = $[4];
339
+ }
340
+ let t1;
341
+ if ($[5] !== className) {
342
+ t1 = clsx(stale_module_default.illustration, className);
343
+ $[5] = className;
344
+ $[6] = t1;
345
+ } else t1 = $[6];
346
+ let t2;
347
+ if ($[7] !== props || $[8] !== t1) {
348
+ t2 = {
349
+ "aria-hidden": true,
350
+ ...props,
351
+ className: t1
352
+ };
353
+ $[7] = props;
354
+ $[8] = t1;
355
+ $[9] = t2;
356
+ } else t2 = $[9];
357
+ let t3;
358
+ if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
359
+ t3 = {
360
+ defaultTagName: "span",
361
+ render,
362
+ ref,
363
+ props: t2
364
+ };
365
+ $[10] = ref;
366
+ $[11] = render;
367
+ $[12] = t2;
368
+ $[13] = t3;
369
+ } else t3 = $[13];
370
+ return useRender(t3);
371
+ };
372
+ /** The overlay's status: a moving indicator over its copy, a spinner unless `illustration` names another. */
373
+ var Message = (t0) => {
374
+ const $ = c(12);
375
+ let children;
376
+ let illustration;
377
+ let props;
378
+ if ($[0] !== t0) {
379
+ ({illustration, children, ...props} = t0);
380
+ $[0] = t0;
381
+ $[1] = children;
382
+ $[2] = illustration;
383
+ $[3] = props;
384
+ } else {
385
+ children = $[1];
386
+ illustration = $[2];
387
+ props = $[3];
388
+ }
389
+ let t1;
390
+ if ($[4] !== illustration) {
391
+ t1 = illustration ?? /* @__PURE__ */ jsx(Spinner, { size: 2 });
392
+ $[4] = illustration;
393
+ $[5] = t1;
394
+ } else t1 = $[5];
395
+ let t2;
396
+ if ($[6] !== t1) {
397
+ t2 = /* @__PURE__ */ jsx(Illustration, { children: t1 });
398
+ $[6] = t1;
399
+ $[7] = t2;
400
+ } else t2 = $[7];
401
+ let t3;
402
+ if ($[8] !== children || $[9] !== props || $[10] !== t2) {
403
+ t3 = /* @__PURE__ */ jsxs(Status, {
404
+ ...props,
405
+ children: [t2, children]
406
+ });
407
+ $[8] = children;
408
+ $[9] = props;
409
+ $[10] = t2;
410
+ $[11] = t3;
411
+ } else t3 = $[11];
412
+ return t3;
335
413
  };
336
414
  /** The way out once the refresh looks stuck: a button that appears only then. */
337
415
  var Retry = (t0) => {
@@ -388,7 +466,8 @@ var Retry = (t0) => {
388
466
  * Content that stays visible while a background refresh runs, escalating the
389
467
  * longer the refresh takes: `Content` dims once busy, `Overlay` surfaces once
390
468
  * slow with its `Message`, and `Retry` appears once stuck. A refresh that
391
- * finishes within `busyAfter` shows nothing.
469
+ * finishes within `busyAfter` shows nothing. `Message` composes a `Status`
470
+ * and its `Illustration`, which compose one by hand.
392
471
  *
393
472
  * @example
394
473
  * <Stale.Root busy={query.isFetching}>
@@ -404,6 +483,8 @@ var Stale = {
404
483
  Content,
405
484
  Overlay,
406
485
  Message,
486
+ Status,
487
+ Illustration,
407
488
  Retry
408
489
  };
409
490
  export { Stale };
@@ -1,10 +1,10 @@
1
1
  import './stale.css';// src/components/stale/stale.module.scss
2
- var root = "_root_1tgdq_3";
3
- var content = "_content_1tgdq_7";
4
- var overlay = "_overlay_1tgdq_15";
5
- var message = "_message_1tgdq_38";
6
- var illustration = "_illustration_1tgdq_46";
7
- var retry = "_retry_1tgdq_52";
2
+ var root = "_root_1w3l8_3";
3
+ var content = "_content_1w3l8_7";
4
+ var overlay = "_overlay_1w3l8_15";
5
+ var message = "_message_1w3l8_38";
6
+ var illustration = "_illustration_1w3l8_46";
7
+ var retry = "_retry_1w3l8_52";
8
8
  var stale_module_default = {
9
9
  root,
10
10
  content,
@@ -1,6 +1,6 @@
1
1
  @layer kit.reset, kit.base, kit.components;
2
2
  @layer kit.components {
3
- ._root_lpaie_3 {
3
+ ._root_cz81o_3 {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  align-items: center;
@@ -9,112 +9,112 @@
9
9
  color: var(--status-message-fg, var(--sys-color-text));
10
10
  text-align: center;
11
11
  }
12
- ._disc_lpaie_12[data-variant=subtle] {
12
+ ._disc_cz81o_12[data-variant=subtle] {
13
13
  --_status-message-disc-bg: var(--sys-color-neutral-bg);
14
14
  --_status-message-disc-fg: var(--sys-color-neutral-fg);
15
15
  --_status-message-disc-border: transparent;
16
16
  }
17
- ._disc_lpaie_12[data-variant=solid] {
17
+ ._disc_cz81o_12[data-variant=solid] {
18
18
  --_status-message-disc-bg: var(--sys-color-neutral-fg);
19
19
  --_status-message-disc-fg: var(--sys-color-neutral-bg);
20
20
  --_status-message-disc-border: transparent;
21
21
  }
22
- ._disc_lpaie_12[data-variant=outline] {
22
+ ._disc_cz81o_12[data-variant=outline] {
23
23
  --_status-message-disc-bg: transparent;
24
24
  --_status-message-disc-fg: var(--sys-color-neutral-fg);
25
25
  --_status-message-disc-border: var(--sys-color-neutral-border);
26
26
  }
27
- ._disc_lpaie_12[data-tone=info][data-variant=subtle] {
27
+ ._disc_cz81o_12[data-tone=info][data-variant=subtle] {
28
28
  --_status-message-disc-bg: var(--sys-color-info-bg);
29
29
  --_status-message-disc-fg: var(--sys-color-info-fg);
30
30
  --_status-message-disc-border: transparent;
31
31
  }
32
- ._disc_lpaie_12[data-tone=info][data-variant=solid] {
32
+ ._disc_cz81o_12[data-tone=info][data-variant=solid] {
33
33
  --_status-message-disc-bg: var(--sys-color-info-fg);
34
34
  --_status-message-disc-fg: var(--sys-color-info-bg);
35
35
  --_status-message-disc-border: transparent;
36
36
  }
37
- ._disc_lpaie_12[data-tone=info][data-variant=outline] {
37
+ ._disc_cz81o_12[data-tone=info][data-variant=outline] {
38
38
  --_status-message-disc-bg: transparent;
39
39
  --_status-message-disc-fg: var(--sys-color-info-fg);
40
40
  --_status-message-disc-border: var(
41
41
  --sys-color-info-border
42
42
  );
43
43
  }
44
- ._disc_lpaie_12[data-tone=success][data-variant=subtle] {
44
+ ._disc_cz81o_12[data-tone=success][data-variant=subtle] {
45
45
  --_status-message-disc-bg: var(--sys-color-success-bg);
46
46
  --_status-message-disc-fg: var(--sys-color-success-fg);
47
47
  --_status-message-disc-border: transparent;
48
48
  }
49
- ._disc_lpaie_12[data-tone=success][data-variant=solid] {
49
+ ._disc_cz81o_12[data-tone=success][data-variant=solid] {
50
50
  --_status-message-disc-bg: var(--sys-color-success-fg);
51
51
  --_status-message-disc-fg: var(--sys-color-success-bg);
52
52
  --_status-message-disc-border: transparent;
53
53
  }
54
- ._disc_lpaie_12[data-tone=success][data-variant=outline] {
54
+ ._disc_cz81o_12[data-tone=success][data-variant=outline] {
55
55
  --_status-message-disc-bg: transparent;
56
56
  --_status-message-disc-fg: var(--sys-color-success-fg);
57
57
  --_status-message-disc-border: var(
58
58
  --sys-color-success-border
59
59
  );
60
60
  }
61
- ._disc_lpaie_12[data-tone=warning][data-variant=subtle] {
61
+ ._disc_cz81o_12[data-tone=warning][data-variant=subtle] {
62
62
  --_status-message-disc-bg: var(--sys-color-warning-bg);
63
63
  --_status-message-disc-fg: var(--sys-color-warning-fg);
64
64
  --_status-message-disc-border: transparent;
65
65
  }
66
- ._disc_lpaie_12[data-tone=warning][data-variant=solid] {
66
+ ._disc_cz81o_12[data-tone=warning][data-variant=solid] {
67
67
  --_status-message-disc-bg: var(--sys-color-warning-fg);
68
68
  --_status-message-disc-fg: var(--sys-color-warning-bg);
69
69
  --_status-message-disc-border: transparent;
70
70
  }
71
- ._disc_lpaie_12[data-tone=warning][data-variant=outline] {
71
+ ._disc_cz81o_12[data-tone=warning][data-variant=outline] {
72
72
  --_status-message-disc-bg: transparent;
73
73
  --_status-message-disc-fg: var(--sys-color-warning-fg);
74
74
  --_status-message-disc-border: var(
75
75
  --sys-color-warning-border
76
76
  );
77
77
  }
78
- ._disc_lpaie_12[data-tone=error][data-variant=subtle] {
78
+ ._disc_cz81o_12[data-tone=error][data-variant=subtle] {
79
79
  --_status-message-disc-bg: var(--sys-color-error-bg);
80
80
  --_status-message-disc-fg: var(--sys-color-error-fg);
81
81
  --_status-message-disc-border: transparent;
82
82
  }
83
- ._disc_lpaie_12[data-tone=error][data-variant=solid] {
83
+ ._disc_cz81o_12[data-tone=error][data-variant=solid] {
84
84
  --_status-message-disc-bg: var(--sys-color-error-fg);
85
85
  --_status-message-disc-fg: var(--sys-color-error-bg);
86
86
  --_status-message-disc-border: transparent;
87
87
  }
88
- ._disc_lpaie_12[data-tone=error][data-variant=outline] {
88
+ ._disc_cz81o_12[data-tone=error][data-variant=outline] {
89
89
  --_status-message-disc-bg: transparent;
90
90
  --_status-message-disc-fg: var(--sys-color-error-fg);
91
91
  --_status-message-disc-border: var(
92
92
  --sys-color-error-border
93
93
  );
94
94
  }
95
- ._disc_lpaie_12 {
95
+ ._disc_cz81o_12 {
96
96
  display: grid;
97
97
  place-items: center;
98
98
  inline-size: var(--status-message-disc-size, var(--sys-unit-32));
99
99
  block-size: var(--status-message-disc-size, var(--sys-unit-32));
100
- border-radius: var(--sys-radius-full);
100
+ border-radius: var(--status-message-disc-radius, var(--sys-radius-full));
101
101
  font-size: var(--status-message-icon-size, 2em);
102
102
  background: var(--status-message-disc-bg, var(--_status-message-disc-bg));
103
103
  color: var(--status-message-disc-fg, var(--_status-message-disc-fg));
104
104
  }
105
- ._illustration_lpaie_105 {
105
+ ._illustration_cz81o_105 {
106
106
  display: grid;
107
107
  place-items: center;
108
108
  color: var(--status-message-illustration-fg, var(--sys-color-primary));
109
109
  }
110
- ._title_lpaie_110 {
110
+ ._title_cz81o_110 {
111
111
  font: var(--status-message-title-font, var(--sys-font-heading-medium));
112
112
  }
113
- ._description_lpaie_113 {
113
+ ._description_cz81o_113 {
114
114
  max-inline-size: var(--status-message-measure, 40ch);
115
115
  font: var(--status-message-description-font, var(--sys-font-body-medium));
116
116
  }
117
- ._action_lpaie_117 {
117
+ ._action_cz81o_117 {
118
118
  display: flex;
119
119
  flex-wrap: wrap;
120
120
  justify-content: center;
@@ -1,10 +1,10 @@
1
1
  import './status-message.css';// src/components/status-message/status-message.module.scss
2
- var root = "_root_lpaie_3";
3
- var disc = "_disc_lpaie_12";
4
- var illustration = "_illustration_lpaie_105";
5
- var title = "_title_lpaie_110";
6
- var description = "_description_lpaie_113";
7
- var action = "_action_lpaie_117";
2
+ var root = "_root_cz81o_3";
3
+ var disc = "_disc_cz81o_12";
4
+ var illustration = "_illustration_cz81o_105";
5
+ var title = "_title_cz81o_110";
6
+ var description = "_description_cz81o_113";
7
+ var action = "_action_cz81o_117";
8
8
  var status_message_module_default = {
9
9
  root,
10
10
  disc,
@@ -17,7 +17,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
17
17
  * />
18
18
  */
19
19
  var SwitchField = (t0) => {
20
- const $ = c(41);
20
+ const $ = c(44);
21
21
  let className;
22
22
  let description;
23
23
  let dirty;
@@ -60,52 +60,72 @@ var SwitchField = (t0) => {
60
60
  const t1 = props.checked === true;
61
61
  const t2 = requiredness === "required";
62
62
  let t3;
63
- if ($[12] !== ids.controlId || $[13] !== props || $[14] !== t2) {
64
- t3 = /* @__PURE__ */ jsx(Switch.Control, {
63
+ if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
64
+ t3 = /* @__PURE__ */ jsx(Switch.Thumb, {});
65
+ $[12] = t3;
66
+ } else t3 = $[12];
67
+ let t4;
68
+ if ($[13] !== ids.controlId || $[14] !== props || $[15] !== t2) {
69
+ t4 = /* @__PURE__ */ jsx(Switch.Control, {
65
70
  name: ids.controlId,
66
71
  inputRef: detachHiddenInput,
67
72
  required: t2,
68
- ...props
69
- });
70
- $[12] = ids.controlId;
71
- $[13] = props;
72
- $[14] = t2;
73
- $[15] = t3;
74
- } else t3 = $[15];
75
- let t4;
76
- if ($[16] !== label || $[17] !== optionalLabel || $[18] !== requiredness) {
77
- t4 = /* @__PURE__ */ jsx(Field.InlineLabelText, {
78
- label,
79
- requiredness,
80
- optionalLabel
73
+ ...props,
74
+ children: t3
81
75
  });
82
- $[16] = label;
83
- $[17] = optionalLabel;
84
- $[18] = requiredness;
85
- $[19] = t4;
86
- } else t4 = $[19];
76
+ $[13] = ids.controlId;
77
+ $[14] = props;
78
+ $[15] = t2;
79
+ $[16] = t4;
80
+ } else t4 = $[16];
87
81
  let t5;
88
- if ($[20] !== t3 || $[21] !== t4) {
89
- t5 = /* @__PURE__ */ jsxs(Switch.Label, { children: [t3, t4] });
90
- $[20] = t3;
91
- $[21] = t4;
92
- $[22] = t5;
93
- } else t5 = $[22];
82
+ if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
83
+ t5 = /* @__PURE__ */ jsx(Field.RequiredMark, {});
84
+ $[17] = t5;
85
+ } else t5 = $[17];
94
86
  let t6;
95
- if ($[23] !== description) {
96
- t6 = /* @__PURE__ */ jsx(Switch.Description, { children: description });
97
- $[23] = description;
98
- $[24] = t6;
99
- } else t6 = $[24];
87
+ if ($[18] !== label) {
88
+ t6 = /* @__PURE__ */ jsxs(Field.InlineLabelText, { children: [
89
+ label,
90
+ " ",
91
+ t5
92
+ ] });
93
+ $[18] = label;
94
+ $[19] = t6;
95
+ } else t6 = $[19];
100
96
  let t7;
101
- if ($[25] !== errors) {
102
- t7 = /* @__PURE__ */ jsx(Switch.Error, { children: errors });
103
- $[25] = errors;
104
- $[26] = t7;
105
- } else t7 = $[26];
97
+ if ($[20] !== optionalLabel) {
98
+ t7 = /* @__PURE__ */ jsx(Field.InlineOptional, { optionalLabel });
99
+ $[20] = optionalLabel;
100
+ $[21] = t7;
101
+ } else t7 = $[21];
106
102
  let t8;
107
- if ($[27] !== className || $[28] !== dirty || $[29] !== errors || $[30] !== name || $[31] !== pending || $[32] !== props.disabled || $[33] !== props.readOnly || $[34] !== requiredness || $[35] !== t1 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== touched) {
108
- t8 = /* @__PURE__ */ jsxs(Switch.Root, {
103
+ if ($[22] !== t4 || $[23] !== t6 || $[24] !== t7) {
104
+ t8 = /* @__PURE__ */ jsxs(Switch.Label, { children: [
105
+ t4,
106
+ t6,
107
+ t7
108
+ ] });
109
+ $[22] = t4;
110
+ $[23] = t6;
111
+ $[24] = t7;
112
+ $[25] = t8;
113
+ } else t8 = $[25];
114
+ let t9;
115
+ if ($[26] !== description) {
116
+ t9 = /* @__PURE__ */ jsx(Switch.Description, { children: description });
117
+ $[26] = description;
118
+ $[27] = t9;
119
+ } else t9 = $[27];
120
+ let t10;
121
+ if ($[28] !== errors) {
122
+ t10 = /* @__PURE__ */ jsx(Switch.Error, { children: errors });
123
+ $[28] = errors;
124
+ $[29] = t10;
125
+ } else t10 = $[29];
126
+ let t11;
127
+ if ($[30] !== className || $[31] !== dirty || $[32] !== errors || $[33] !== name || $[34] !== pending || $[35] !== props.disabled || $[36] !== props.readOnly || $[37] !== requiredness || $[38] !== t1 || $[39] !== t10 || $[40] !== t8 || $[41] !== t9 || $[42] !== touched) {
128
+ t11 = /* @__PURE__ */ jsxs(Switch.Root, {
109
129
  name,
110
130
  className,
111
131
  disabled: props.disabled,
@@ -117,26 +137,26 @@ var SwitchField = (t0) => {
117
137
  pending,
118
138
  filled: t1,
119
139
  children: [
120
- t5,
121
- t6,
122
- t7
140
+ t8,
141
+ t9,
142
+ t10
123
143
  ]
124
144
  });
125
- $[27] = className;
126
- $[28] = dirty;
127
- $[29] = errors;
128
- $[30] = name;
129
- $[31] = pending;
130
- $[32] = props.disabled;
131
- $[33] = props.readOnly;
132
- $[34] = requiredness;
133
- $[35] = t1;
134
- $[36] = t5;
135
- $[37] = t6;
136
- $[38] = t7;
137
- $[39] = touched;
145
+ $[30] = className;
146
+ $[31] = dirty;
147
+ $[32] = errors;
148
+ $[33] = name;
149
+ $[34] = pending;
150
+ $[35] = props.disabled;
151
+ $[36] = props.readOnly;
152
+ $[37] = requiredness;
153
+ $[38] = t1;
154
+ $[39] = t10;
138
155
  $[40] = t8;
139
- } else t8 = $[40];
140
- return t8;
156
+ $[41] = t9;
157
+ $[42] = touched;
158
+ $[43] = t11;
159
+ } else t11 = $[43];
160
+ return t11;
141
161
  };
142
162
  export { SwitchField };