@craftzbay/ui 0.9.0 → 0.11.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 (208) hide show
  1. package/README.md +82 -10
  2. package/dist-lib/__tests__/helpers/color.d.ts +9 -0
  3. package/dist-lib/__tests__/helpers/theme.d.ts +18 -0
  4. package/dist-lib/components/ui/Accordion.js +71 -0
  5. package/dist-lib/components/ui/Accordion.js.map +1 -0
  6. package/dist-lib/components/ui/Alert.d.ts +17 -1
  7. package/dist-lib/components/ui/Alert.js +79 -0
  8. package/dist-lib/components/ui/Alert.js.map +1 -0
  9. package/dist-lib/components/ui/Avatar.d.ts +3 -3
  10. package/dist-lib/components/ui/Avatar.js +94 -0
  11. package/dist-lib/components/ui/Avatar.js.map +1 -0
  12. package/dist-lib/components/ui/Badge.d.ts +4 -2
  13. package/dist-lib/components/ui/Badge.js +76 -0
  14. package/dist-lib/components/ui/Badge.js.map +1 -0
  15. package/dist-lib/components/ui/Breadcrumbs.d.ts +2 -0
  16. package/dist-lib/components/ui/Breadcrumbs.js +52 -0
  17. package/dist-lib/components/ui/Breadcrumbs.js.map +1 -0
  18. package/dist-lib/components/ui/Button.d.ts +6 -4
  19. package/dist-lib/components/ui/Button.js +131 -0
  20. package/dist-lib/components/ui/Button.js.map +1 -0
  21. package/dist-lib/components/ui/Calendar.d.ts +7 -1
  22. package/dist-lib/components/ui/Calendar.js +139 -0
  23. package/dist-lib/components/ui/Calendar.js.map +1 -0
  24. package/dist-lib/components/ui/Card.d.ts +3 -1
  25. package/dist-lib/components/ui/Card.js +97 -0
  26. package/dist-lib/components/ui/Card.js.map +1 -0
  27. package/dist-lib/components/ui/Carousel.d.ts +11 -7
  28. package/dist-lib/components/ui/Carousel.js +174 -0
  29. package/dist-lib/components/ui/Carousel.js.map +1 -0
  30. package/dist-lib/components/ui/Chart.d.ts +68 -7
  31. package/dist-lib/components/ui/Chart.js +487 -0
  32. package/dist-lib/components/ui/Chart.js.map +1 -0
  33. package/dist-lib/components/ui/Checkbox.js +70 -0
  34. package/dist-lib/components/ui/Checkbox.js.map +1 -0
  35. package/dist-lib/components/ui/Combobox.d.ts +9 -0
  36. package/dist-lib/components/ui/Combobox.js +195 -0
  37. package/dist-lib/components/ui/Combobox.js.map +1 -0
  38. package/dist-lib/components/ui/CommandPalette.d.ts +9 -6
  39. package/dist-lib/components/ui/CommandPalette.js +179 -0
  40. package/dist-lib/components/ui/CommandPalette.js.map +1 -0
  41. package/dist-lib/components/ui/ContextMenu.d.ts +7 -2
  42. package/dist-lib/components/ui/ContextMenu.js +165 -0
  43. package/dist-lib/components/ui/ContextMenu.js.map +1 -0
  44. package/dist-lib/components/ui/DataGrid.d.ts +17 -4
  45. package/dist-lib/components/ui/DataGrid.js +99 -0
  46. package/dist-lib/components/ui/DataGrid.js.map +1 -0
  47. package/dist-lib/components/ui/DatePicker.d.ts +16 -13
  48. package/dist-lib/components/ui/DatePicker.js +193 -0
  49. package/dist-lib/components/ui/DatePicker.js.map +1 -0
  50. package/dist-lib/components/ui/DesignSystemProvider.d.ts +102 -41
  51. package/dist-lib/components/ui/DesignSystemProvider.js +135 -0
  52. package/dist-lib/components/ui/DesignSystemProvider.js.map +1 -0
  53. package/dist-lib/components/ui/Dialog.d.ts +19 -4
  54. package/dist-lib/components/ui/Dialog.js +165 -0
  55. package/dist-lib/components/ui/Dialog.js.map +1 -0
  56. package/dist-lib/components/ui/Drawer.d.ts +23 -2
  57. package/dist-lib/components/ui/Drawer.js +132 -0
  58. package/dist-lib/components/ui/Drawer.js.map +1 -0
  59. package/dist-lib/components/ui/DropdownMenu.js +169 -0
  60. package/dist-lib/components/ui/DropdownMenu.js.map +1 -0
  61. package/dist-lib/components/ui/EmptyState.d.ts +2 -0
  62. package/dist-lib/components/ui/EmptyState.js +46 -0
  63. package/dist-lib/components/ui/EmptyState.js.map +1 -0
  64. package/dist-lib/components/ui/ErrorState.d.ts +13 -2
  65. package/dist-lib/components/ui/ErrorState.js +69 -0
  66. package/dist-lib/components/ui/ErrorState.js.map +1 -0
  67. package/dist-lib/components/ui/FileUpload.d.ts +3 -0
  68. package/dist-lib/components/ui/FileUpload.js +111 -0
  69. package/dist-lib/components/ui/FileUpload.js.map +1 -0
  70. package/dist-lib/components/ui/Form.d.ts +16 -2
  71. package/dist-lib/components/ui/Form.js +131 -0
  72. package/dist-lib/components/ui/Form.js.map +1 -0
  73. package/dist-lib/components/ui/Icon.d.ts +1 -1
  74. package/dist-lib/components/ui/Icon.js +32 -0
  75. package/dist-lib/components/ui/Icon.js.map +1 -0
  76. package/dist-lib/components/ui/IconButton.d.ts +3 -3
  77. package/dist-lib/components/ui/IconButton.js +64 -0
  78. package/dist-lib/components/ui/IconButton.js.map +1 -0
  79. package/dist-lib/components/ui/Input.d.ts +9 -4
  80. package/dist-lib/components/ui/Input.js +149 -0
  81. package/dist-lib/components/ui/Input.js.map +1 -0
  82. package/dist-lib/components/ui/Kbd.js +24 -0
  83. package/dist-lib/components/ui/Kbd.js.map +1 -0
  84. package/dist-lib/components/ui/MultiSelect.d.ts +3 -1
  85. package/dist-lib/components/ui/MultiSelect.js +210 -0
  86. package/dist-lib/components/ui/MultiSelect.js.map +1 -0
  87. package/dist-lib/components/ui/Pagination.d.ts +23 -0
  88. package/dist-lib/components/ui/Pagination.js +153 -0
  89. package/dist-lib/components/ui/Pagination.js.map +1 -0
  90. package/dist-lib/components/ui/Popover.js +35 -0
  91. package/dist-lib/components/ui/Popover.js.map +1 -0
  92. package/dist-lib/components/ui/Progress.d.ts +3 -3
  93. package/dist-lib/components/ui/Progress.js +100 -0
  94. package/dist-lib/components/ui/Progress.js.map +1 -0
  95. package/dist-lib/components/ui/RadioGroup.d.ts +1 -1
  96. package/dist-lib/components/ui/RadioGroup.js +81 -0
  97. package/dist-lib/components/ui/RadioGroup.js.map +1 -0
  98. package/dist-lib/components/ui/RelativeTime.d.ts +19 -0
  99. package/dist-lib/components/ui/RelativeTime.js +31 -0
  100. package/dist-lib/components/ui/RelativeTime.js.map +1 -0
  101. package/dist-lib/components/ui/ScrollArea.d.ts +9 -1
  102. package/dist-lib/components/ui/ScrollArea.js +60 -0
  103. package/dist-lib/components/ui/ScrollArea.js.map +1 -0
  104. package/dist-lib/components/ui/Select.d.ts +6 -1
  105. package/dist-lib/components/ui/Select.js +139 -0
  106. package/dist-lib/components/ui/Select.js.map +1 -0
  107. package/dist-lib/components/ui/Separator.js +26 -0
  108. package/dist-lib/components/ui/Separator.js.map +1 -0
  109. package/dist-lib/components/ui/Sheet.d.ts +10 -1
  110. package/dist-lib/components/ui/Sheet.js +136 -0
  111. package/dist-lib/components/ui/Sheet.js.map +1 -0
  112. package/dist-lib/components/ui/Sidebar.d.ts +29 -14
  113. package/dist-lib/components/ui/Sidebar.js +212 -0
  114. package/dist-lib/components/ui/Sidebar.js.map +1 -0
  115. package/dist-lib/components/ui/Skeleton.d.ts +13 -2
  116. package/dist-lib/components/ui/Skeleton.js +29 -0
  117. package/dist-lib/components/ui/Skeleton.js.map +1 -0
  118. package/dist-lib/components/ui/Slider.js +64 -0
  119. package/dist-lib/components/ui/Slider.js.map +1 -0
  120. package/dist-lib/components/ui/Snackbar.d.ts +1 -1
  121. package/dist-lib/components/ui/Snackbar.js +57 -0
  122. package/dist-lib/components/ui/Snackbar.js.map +1 -0
  123. package/dist-lib/components/ui/Spinner.js +54 -0
  124. package/dist-lib/components/ui/Spinner.js.map +1 -0
  125. package/dist-lib/components/ui/Stepper.d.ts +6 -0
  126. package/dist-lib/components/ui/Stepper.js +111 -0
  127. package/dist-lib/components/ui/Stepper.js.map +1 -0
  128. package/dist-lib/components/ui/Switch.js +80 -0
  129. package/dist-lib/components/ui/Switch.js.map +1 -0
  130. package/dist-lib/components/ui/Table.d.ts +41 -5
  131. package/dist-lib/components/ui/Table.js +179 -0
  132. package/dist-lib/components/ui/Table.js.map +1 -0
  133. package/dist-lib/components/ui/Tabs.d.ts +1 -1
  134. package/dist-lib/components/ui/Tabs.js +91 -0
  135. package/dist-lib/components/ui/Tabs.js.map +1 -0
  136. package/dist-lib/components/ui/TagInput.d.ts +17 -2
  137. package/dist-lib/components/ui/TagInput.js +111 -0
  138. package/dist-lib/components/ui/TagInput.js.map +1 -0
  139. package/dist-lib/components/ui/Textarea.js +88 -0
  140. package/dist-lib/components/ui/Textarea.js.map +1 -0
  141. package/dist-lib/components/ui/Timeline.d.ts +16 -6
  142. package/dist-lib/components/ui/Timeline.js +56 -0
  143. package/dist-lib/components/ui/Timeline.js.map +1 -0
  144. package/dist-lib/components/ui/Toast.d.ts +1 -1
  145. package/dist-lib/components/ui/Toast.js +158 -0
  146. package/dist-lib/components/ui/Toast.js.map +1 -0
  147. package/dist-lib/components/ui/Tooltip.d.ts +4 -1
  148. package/dist-lib/components/ui/Tooltip.js +60 -0
  149. package/dist-lib/components/ui/Tooltip.js.map +1 -0
  150. package/dist-lib/components/ui/TopNav.d.ts +7 -3
  151. package/dist-lib/components/ui/TopNav.js +62 -0
  152. package/dist-lib/components/ui/TopNav.js.map +1 -0
  153. package/dist-lib/components/ui/Tree.d.ts +34 -7
  154. package/dist-lib/components/ui/Tree.js +170 -0
  155. package/dist-lib/components/ui/Tree.js.map +1 -0
  156. package/dist-lib/hooks/use-debounce.d.ts +19 -0
  157. package/dist-lib/hooks/use-debounce.js +36 -0
  158. package/dist-lib/hooks/use-debounce.js.map +1 -0
  159. package/dist-lib/hooks/use-delayed-loading.d.ts +21 -0
  160. package/dist-lib/hooks/use-delayed-loading.js +20 -0
  161. package/dist-lib/hooks/use-delayed-loading.js.map +1 -0
  162. package/dist-lib/hooks/use-field-ids.d.ts +30 -0
  163. package/dist-lib/hooks/use-field-ids.js +18 -0
  164. package/dist-lib/hooks/use-field-ids.js.map +1 -0
  165. package/dist-lib/hooks/use-media-query.d.ts +3 -1
  166. package/dist-lib/hooks/use-media-query.js +22 -0
  167. package/dist-lib/hooks/use-media-query.js.map +1 -0
  168. package/dist-lib/hooks/use-modifier-key.d.ts +13 -0
  169. package/dist-lib/hooks/use-modifier-key.js +19 -0
  170. package/dist-lib/hooks/use-modifier-key.js.map +1 -0
  171. package/dist-lib/hooks/use-strings.d.ts +5 -0
  172. package/dist-lib/hooks/use-strings.js +12 -0
  173. package/dist-lib/hooks/use-strings.js.map +1 -0
  174. package/dist-lib/hooks/use-toast.d.ts +7 -2
  175. package/dist-lib/hooks/use-toast.js +67 -0
  176. package/dist-lib/hooks/use-toast.js.map +1 -0
  177. package/dist-lib/icon.d.ts +8 -0
  178. package/dist-lib/icon.js +7 -0
  179. package/dist-lib/icon.js.map +1 -0
  180. package/dist-lib/icons/index.d.ts +80 -88
  181. package/dist-lib/icons/index.js +163 -0
  182. package/dist-lib/icons/index.js.map +1 -0
  183. package/dist-lib/illustrations/index.d.ts +1 -0
  184. package/dist-lib/illustrations/index.js +114 -0
  185. package/dist-lib/illustrations/index.js.map +1 -0
  186. package/dist-lib/index.d.ts +68 -59
  187. package/dist-lib/index.js +288 -4530
  188. package/dist-lib/index.js.map +1 -1
  189. package/dist-lib/lib/format.d.ts +65 -0
  190. package/dist-lib/lib/format.js +95 -0
  191. package/dist-lib/lib/format.js.map +1 -0
  192. package/dist-lib/lib/return-focus.d.ts +11 -0
  193. package/dist-lib/lib/return-focus.js +12 -0
  194. package/dist-lib/lib/return-focus.js.map +1 -0
  195. package/dist-lib/lib/strings.d.ts +190 -0
  196. package/dist-lib/lib/strings.js +141 -0
  197. package/dist-lib/lib/strings.js.map +1 -0
  198. package/dist-lib/lib/strings.mn.d.ts +3 -0
  199. package/dist-lib/lib/strings.mn.js +115 -0
  200. package/dist-lib/lib/strings.mn.js.map +1 -0
  201. package/dist-lib/lib/utils.d.ts +0 -1
  202. package/dist-lib/lib/utils.js +10 -0
  203. package/dist-lib/lib/utils.js.map +1 -0
  204. package/dist-lib/styles.css +1 -1
  205. package/dist-lib/theme.css +840 -0
  206. package/package.json +38 -8
  207. package/dist-lib/index.cjs +0 -8
  208. package/dist-lib/index.cjs.map +0 -1
package/dist-lib/components/ui/DesignSystemProvider.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { HTMLAttributes, ReactNode } from 'react';
2
+ import { DeepPartial, UiStrings } from '../../lib/strings.js';
2
3
  /**
3
4
  * Per-brand token overrides. Keys are CSS variable names (without the `--`
4
5
  * prefix); values are CSS values. Any unspecified token falls back to the
@@ -15,72 +16,132 @@ import { HTMLAttributes, ReactNode } from 'react';
15
16
  * </DesignSystemProvider>
16
17
  */
17
18
  export type BrandTokens = Record<string, string>;
19
+ /**
20
+ * Mode-aware token overrides: `light` applies always, `dark` wins under the
21
+ * `.dark` class (on `<html>` or any ancestor). Use this for anything with a
22
+ * different value per mode — accent, subtle surfaces, ring.
23
+ */
24
+ export interface BrandTokenPair {
25
+ light: BrandTokens;
26
+ dark?: BrandTokens;
27
+ }
18
28
  export interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {
19
- /** Token overrides (CSS variable name → value). */
20
- tokens?: BrandTokens;
29
+ /**
30
+ * Token overrides (CSS variable name → value). A flat record applies in both
31
+ * modes; a `{ light, dark }` pair applies `dark` under `.dark`.
32
+ */
33
+ tokens?: BrandTokens | BrandTokenPair;
34
+ /**
35
+ * Override any of the library's built-in UI strings (aria-labels,
36
+ * placeholders, empty states). Partial — merged over the parent provider /
37
+ * English defaults. Pass `mnStrings` for Mongolian.
38
+ */
39
+ strings?: DeepPartial<UiStrings>;
21
40
  /** Children to scope this brand to. */
22
41
  children: ReactNode;
23
42
  }
24
- export declare function DesignSystemProvider({ tokens, className, children, style, ...props }: DesignSystemProviderProps): import("react/jsx-runtime").JSX.Element;
43
+ export declare function DesignSystemProvider({ tokens, strings, className, children, style, ...props }: DesignSystemProviderProps): import("react/jsx-runtime").JSX.Element;
25
44
  /**
26
45
  * Built-in accent presets — swap the system's single accent colour without
27
46
  * touching anything else.
28
47
  *
29
- * These override the *semantic* tokens the utilities resolve to. globals.css
48
+ * These override the *semantic* tokens the utilities resolve to. theme.css
30
49
  * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →
31
50
  * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override
32
51
  * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /
33
52
  * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/
34
53
  * active steps (`--color-accent-700/800`) come from the raw palette and are
35
- * overridden directly. `default` is the built-in graphite-indigo.
54
+ * mode-agnostic. Values mirror the `[data-accent]` presets in theme.css: the
55
+ * dark half lifts the accent to the 400 step (readable as text on neutral-950)
56
+ * and darkens the subtle surface. `default` is the built-in graphite-indigo.
36
57
  */
37
58
  export declare const brandPresets: {
38
59
  /** The library default — graphite indigo. */
39
- readonly default: BrandTokens;
60
+ default: BrandTokenPair;
40
61
  /** Blue. */
41
- readonly blue: {
42
- readonly accent: "oklch(0.55 0.16 250)";
43
- readonly 'color-accent-700': "oklch(0.47 0.16 250)";
44
- readonly 'color-accent-800': "oklch(0.39 0.14 250)";
45
- readonly 'accent-subtle': "oklch(0.95 0.04 250)";
46
- readonly 'accent-subtle-foreground': "oklch(0.45 0.15 250)";
47
- readonly ring: "oklch(0.62 0.16 250)";
62
+ blue: {
63
+ light: {
64
+ accent: string;
65
+ 'color-accent-700': string;
66
+ 'color-accent-800': string;
67
+ 'accent-subtle': string;
68
+ 'accent-subtle-foreground': string;
69
+ ring: string;
70
+ };
71
+ dark: {
72
+ accent: string;
73
+ 'accent-subtle': string;
74
+ 'accent-subtle-foreground': string;
75
+ ring: string;
76
+ };
48
77
  };
49
78
  /** Violet. */
50
- readonly violet: {
51
- readonly accent: "oklch(0.53 0.20 295)";
52
- readonly 'color-accent-700': "oklch(0.45 0.18 295)";
53
- readonly 'color-accent-800': "oklch(0.38 0.16 295)";
54
- readonly 'accent-subtle': "oklch(0.95 0.04 295)";
55
- readonly 'accent-subtle-foreground': "oklch(0.45 0.18 295)";
56
- readonly ring: "oklch(0.60 0.20 295)";
79
+ violet: {
80
+ light: {
81
+ accent: string;
82
+ 'color-accent-700': string;
83
+ 'color-accent-800': string;
84
+ 'accent-subtle': string;
85
+ 'accent-subtle-foreground': string;
86
+ ring: string;
87
+ };
88
+ dark: {
89
+ accent: string;
90
+ 'accent-subtle': string;
91
+ 'accent-subtle-foreground': string;
92
+ ring: string;
93
+ };
57
94
  };
58
95
  /** Emerald. */
59
- readonly emerald: {
60
- readonly accent: "oklch(0.55 0.13 160)";
61
- readonly 'color-accent-700': "oklch(0.47 0.13 160)";
62
- readonly 'color-accent-800': "oklch(0.39 0.12 160)";
63
- readonly 'accent-subtle': "oklch(0.95 0.04 160)";
64
- readonly 'accent-subtle-foreground': "oklch(0.42 0.12 160)";
65
- readonly ring: "oklch(0.60 0.13 160)";
96
+ emerald: {
97
+ light: {
98
+ accent: string;
99
+ 'color-accent-700': string;
100
+ 'color-accent-800': string;
101
+ 'accent-subtle': string;
102
+ 'accent-subtle-foreground': string;
103
+ ring: string;
104
+ };
105
+ dark: {
106
+ accent: string;
107
+ 'accent-subtle': string;
108
+ 'accent-subtle-foreground': string;
109
+ ring: string;
110
+ };
66
111
  };
67
112
  /** Rose. */
68
- readonly rose: {
69
- readonly accent: "oklch(0.57 0.19 12)";
70
- readonly 'color-accent-700': "oklch(0.49 0.18 12)";
71
- readonly 'color-accent-800': "oklch(0.41 0.16 12)";
72
- readonly 'accent-subtle': "oklch(0.95 0.035 12)";
73
- readonly 'accent-subtle-foreground': "oklch(0.48 0.18 12)";
74
- readonly ring: "oklch(0.62 0.19 12)";
113
+ rose: {
114
+ light: {
115
+ accent: string;
116
+ 'color-accent-700': string;
117
+ 'color-accent-800': string;
118
+ 'accent-subtle': string;
119
+ 'accent-subtle-foreground': string;
120
+ ring: string;
121
+ };
122
+ dark: {
123
+ accent: string;
124
+ 'accent-subtle': string;
125
+ 'accent-subtle-foreground': string;
126
+ ring: string;
127
+ };
75
128
  };
76
129
  /** Amber. */
77
- readonly amber: {
78
- readonly accent: "oklch(0.62 0.14 65)";
79
- readonly 'color-accent-700': "oklch(0.54 0.13 65)";
80
- readonly 'color-accent-800': "oklch(0.46 0.12 65)";
81
- readonly 'accent-subtle': "oklch(0.95 0.05 75)";
82
- readonly 'accent-subtle-foreground': "oklch(0.48 0.12 65)";
83
- readonly ring: "oklch(0.66 0.14 65)";
130
+ amber: {
131
+ light: {
132
+ accent: string;
133
+ 'color-accent-700': string;
134
+ 'color-accent-800': string;
135
+ 'accent-subtle': string;
136
+ 'accent-subtle-foreground': string;
137
+ ring: string;
138
+ };
139
+ dark: {
140
+ accent: string;
141
+ 'accent-subtle': string;
142
+ 'accent-subtle-foreground': string;
143
+ ring: string;
144
+ };
84
145
  };
85
146
  };
86
147
  export type BrandName = keyof typeof brandPresets;
package/dist-lib/components/ui/DesignSystemProvider.js ADDED
@@ -0,0 +1,135 @@
1
+ "use client";
2
+ import { jsxs as f, jsx as h } from "react/jsx-runtime";
3
+ import { useMemo as m, useId as p } from "react";
4
+ import { cn as $ } from "../../lib/utils.js";
5
+ import { useStrings as v, StringsContext as j } from "../../hooks/use-strings.js";
6
+ import { mergeStrings as y } from "../../lib/strings.js";
7
+ function S(c) {
8
+ return "light" in c && typeof c.light == "object";
9
+ }
10
+ function s(c) {
11
+ return Object.entries(c).map(([e, l]) => `${e.startsWith("--") ? e : `--${e}`}:${l}`).join(";");
12
+ }
13
+ function W({
14
+ tokens: c,
15
+ strings: e,
16
+ className: l,
17
+ children: k,
18
+ style: i,
19
+ ...u
20
+ }) {
21
+ const r = v(), d = m(
22
+ () => y(r, e),
23
+ [r, e]
24
+ ), n = p(), a = { ...i };
25
+ let t = null;
26
+ if (c)
27
+ if (S(c)) {
28
+ const o = `[data-brand-scope="${n}"]`;
29
+ t = `${o}{${s(c.light)}}`, c.dark && (t += `.dark ${o},.dark${o}{${s(c.dark)}}`);
30
+ } else
31
+ for (const [o, g] of Object.entries(c)) {
32
+ const b = o.startsWith("--") ? o : `--${o}`;
33
+ a[b] = g;
34
+ }
35
+ return /* @__PURE__ */ f(j.Provider, { value: d, children: [
36
+ t && /* @__PURE__ */ h("style", { "data-brand-scope-style": n, children: t }),
37
+ /* @__PURE__ */ h("div", { "data-brand-scope": n, className: $("contents", l), style: a, ...u, children: k })
38
+ ] });
39
+ }
40
+ const C = {
41
+ /** The library default — graphite indigo. */
42
+ default: { light: {} },
43
+ /** Blue. */
44
+ blue: {
45
+ light: {
46
+ accent: "oklch(0.55 0.16 250)",
47
+ "color-accent-700": "oklch(0.47 0.16 250)",
48
+ "color-accent-800": "oklch(0.39 0.14 250)",
49
+ "accent-subtle": "oklch(0.96 0.03 250)",
50
+ "accent-subtle-foreground": "oklch(0.45 0.15 250)",
51
+ ring: "oklch(0.62 0.16 250)"
52
+ },
53
+ dark: {
54
+ accent: "oklch(0.64 0.15 250)",
55
+ "accent-subtle": "oklch(0.24 0.06 250)",
56
+ "accent-subtle-foreground": "oklch(0.82 0.1 250)",
57
+ ring: "oklch(0.68 0.15 250)"
58
+ }
59
+ },
60
+ /** Violet. */
61
+ violet: {
62
+ light: {
63
+ accent: "oklch(0.53 0.20 295)",
64
+ "color-accent-700": "oklch(0.45 0.18 295)",
65
+ "color-accent-800": "oklch(0.38 0.16 295)",
66
+ "accent-subtle": "oklch(0.96 0.03 295)",
67
+ "accent-subtle-foreground": "oklch(0.46 0.18 295)",
68
+ ring: "oklch(0.60 0.20 295)"
69
+ },
70
+ dark: {
71
+ accent: "oklch(0.64 0.18 295)",
72
+ "accent-subtle": "oklch(0.25 0.07 295)",
73
+ "accent-subtle-foreground": "oklch(0.83 0.12 295)",
74
+ ring: "oklch(0.68 0.18 295)"
75
+ }
76
+ },
77
+ /** Emerald. */
78
+ emerald: {
79
+ light: {
80
+ accent: "oklch(0.55 0.13 160)",
81
+ "color-accent-700": "oklch(0.47 0.13 160)",
82
+ "color-accent-800": "oklch(0.39 0.12 160)",
83
+ "accent-subtle": "oklch(0.96 0.03 160)",
84
+ "accent-subtle-foreground": "oklch(0.42 0.12 160)",
85
+ ring: "oklch(0.60 0.13 160)"
86
+ },
87
+ dark: {
88
+ accent: "oklch(0.64 0.14 160)",
89
+ "accent-subtle": "oklch(0.23 0.05 160)",
90
+ "accent-subtle-foreground": "oklch(0.8 0.12 160)",
91
+ ring: "oklch(0.68 0.14 160)"
92
+ }
93
+ },
94
+ /** Rose. */
95
+ rose: {
96
+ light: {
97
+ accent: "oklch(0.57 0.19 12)",
98
+ "color-accent-700": "oklch(0.49 0.18 12)",
99
+ "color-accent-800": "oklch(0.41 0.16 12)",
100
+ "accent-subtle": "oklch(0.96 0.03 12)",
101
+ "accent-subtle-foreground": "oklch(0.48 0.18 12)",
102
+ ring: "oklch(0.62 0.19 12)"
103
+ },
104
+ dark: {
105
+ accent: "oklch(0.65 0.18 12)",
106
+ "accent-subtle": "oklch(0.25 0.07 12)",
107
+ "accent-subtle-foreground": "oklch(0.83 0.12 12)",
108
+ ring: "oklch(0.7 0.18 12)"
109
+ }
110
+ },
111
+ /** Amber. */
112
+ amber: {
113
+ light: {
114
+ // 0.56 keeps white text at 4.8:1 (0.62 was 3.8:1).
115
+ accent: "oklch(0.56 0.14 65)",
116
+ "color-accent-700": "oklch(0.54 0.13 65)",
117
+ "color-accent-800": "oklch(0.46 0.12 65)",
118
+ "accent-subtle": "oklch(0.96 0.04 75)",
119
+ "accent-subtle-foreground": "oklch(0.48 0.12 65)",
120
+ ring: "oklch(0.64 0.14 65)"
121
+ // 3.17:1 on background-muted (0.66 was 2.93)
122
+ },
123
+ dark: {
124
+ accent: "oklch(0.66 0.14 65)",
125
+ "accent-subtle": "oklch(0.26 0.05 70)",
126
+ "accent-subtle-foreground": "oklch(0.85 0.12 80)",
127
+ ring: "oklch(0.72 0.14 65)"
128
+ }
129
+ }
130
+ };
131
+ export {
132
+ W as DesignSystemProvider,
133
+ C as brandPresets
134
+ };
135
+ //# sourceMappingURL=DesignSystemProvider.js.map
package/dist-lib/components/ui/DesignSystemProvider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DesignSystemProvider.js","sources":["../../../src/components/ui/DesignSystemProvider.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { StringsContext, useStrings } from '@/hooks/use-strings';\nimport { mergeStrings, type DeepPartial, type UiStrings } from '@/lib/strings';\n\n/**\n * Per-brand token overrides. Keys are CSS variable names (without the `--`\n * prefix); values are CSS values. Any unspecified token falls back to the\n * design system default.\n *\n * @example\n * <DesignSystemProvider tokens={{ accent: '#ff5555', 'radius-md': '10px' }}>\n * <App />\n * </DesignSystemProvider>\n *\n * @example Swap in one of the built-in accent presets\n * <DesignSystemProvider tokens={brandPresets.violet}>\n * <Card>...</Card>\n * </DesignSystemProvider>\n */\nexport type BrandTokens = Record<string, string>;\n\n/**\n * Mode-aware token overrides: `light` applies always, `dark` wins under the\n * `.dark` class (on `<html>` or any ancestor). Use this for anything with a\n * different value per mode — accent, subtle surfaces, ring.\n */\nexport interface BrandTokenPair {\n light: BrandTokens;\n dark?: BrandTokens;\n}\n\nfunction isPair(t: BrandTokens | BrandTokenPair): t is BrandTokenPair {\n return 'light' in t && typeof t.light === 'object';\n}\n\nfunction toDeclarations(tokens: BrandTokens): string {\n return Object.entries(tokens)\n .map(([k, v]) => `${k.startsWith('--') ? k : `--${k}`}:${v}`)\n .join(';');\n}\n\nexport interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Token overrides (CSS variable name → value). A flat record applies in both\n * modes; a `{ light, dark }` pair applies `dark` under `.dark`.\n */\n tokens?: BrandTokens | BrandTokenPair;\n /**\n * Override any of the library's built-in UI strings (aria-labels,\n * placeholders, empty states). Partial — merged over the parent provider /\n * English defaults. Pass `mnStrings` for Mongolian.\n */\n strings?: DeepPartial<UiStrings>;\n /** Children to scope this brand to. */\n children: ReactNode;\n}\n\nexport function DesignSystemProvider({\n tokens,\n strings,\n className,\n children,\n style,\n ...props\n}: DesignSystemProviderProps) {\n // Build the inline style from tokens — wrapping every key with `--` so\n // consumers can pass either `accent` or `color-accent` without remembering\n // the prefix dance.\n const parentStrings = useStrings();\n const resolvedStrings = useMemo(\n () => mergeStrings(parentStrings, strings),\n [parentStrings, strings],\n );\n const scopeId = useId();\n const css: CSSProperties = { ...style };\n let sheet: string | null = null;\n if (tokens) {\n if (isPair(tokens)) {\n // Mode-aware tokens cannot be inline (inline beats `.dark` rules), so\n // they go through a scoped <style>: light on the scope, dark under .dark.\n const scope = `[data-brand-scope=\"${scopeId}\"]`;\n sheet = `${scope}{${toDeclarations(tokens.light)}}`;\n if (tokens.dark) {\n sheet += `.dark ${scope},.dark${scope}{${toDeclarations(tokens.dark)}}`;\n }\n } else {\n for (const [k, v] of Object.entries(tokens)) {\n const key = k.startsWith('--') ? k : `--${k}`;\n (css as Record<string, string>)[key] = v;\n }\n }\n }\n\n return (\n <StringsContext.Provider value={resolvedStrings}>\n {sheet && <style data-brand-scope-style={scopeId}>{sheet}</style>}\n <div data-brand-scope={scopeId} className={cn('contents', className)} style={css} {...props}>\n {children}\n </div>\n </StringsContext.Provider>\n );\n}\n\n/**\n * Built-in accent presets — swap the system's single accent colour without\n * touching anything else.\n *\n * These override the *semantic* tokens the utilities resolve to. theme.css\n * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →\n * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override\n * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /\n * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/\n * active steps (`--color-accent-700/800`) come from the raw palette and are\n * mode-agnostic. Values mirror the `[data-accent]` presets in theme.css: the\n * dark half lifts the accent to the 400 step (readable as text on neutral-950)\n * and darkens the subtle surface. `default` is the built-in graphite-indigo.\n */\nexport const brandPresets = {\n /** The library default — graphite indigo. */\n default: { light: {} } as BrandTokenPair,\n /** Blue. */\n blue: {\n light: {\n accent: 'oklch(0.55 0.16 250)',\n 'color-accent-700': 'oklch(0.47 0.16 250)',\n 'color-accent-800': 'oklch(0.39 0.14 250)',\n 'accent-subtle': 'oklch(0.96 0.03 250)',\n 'accent-subtle-foreground': 'oklch(0.45 0.15 250)',\n ring: 'oklch(0.62 0.16 250)',\n },\n dark: {\n accent: 'oklch(0.64 0.15 250)',\n 'accent-subtle': 'oklch(0.24 0.06 250)',\n 'accent-subtle-foreground': 'oklch(0.82 0.1 250)',\n ring: 'oklch(0.68 0.15 250)',\n },\n },\n /** Violet. */\n violet: {\n light: {\n accent: 'oklch(0.53 0.20 295)',\n 'color-accent-700': 'oklch(0.45 0.18 295)',\n 'color-accent-800': 'oklch(0.38 0.16 295)',\n 'accent-subtle': 'oklch(0.96 0.03 295)',\n 'accent-subtle-foreground': 'oklch(0.46 0.18 295)',\n ring: 'oklch(0.60 0.20 295)',\n },\n dark: {\n accent: 'oklch(0.64 0.18 295)',\n 'accent-subtle': 'oklch(0.25 0.07 295)',\n 'accent-subtle-foreground': 'oklch(0.83 0.12 295)',\n ring: 'oklch(0.68 0.18 295)',\n },\n },\n /** Emerald. */\n emerald: {\n light: {\n accent: 'oklch(0.55 0.13 160)',\n 'color-accent-700': 'oklch(0.47 0.13 160)',\n 'color-accent-800': 'oklch(0.39 0.12 160)',\n 'accent-subtle': 'oklch(0.96 0.03 160)',\n 'accent-subtle-foreground': 'oklch(0.42 0.12 160)',\n ring: 'oklch(0.60 0.13 160)',\n },\n dark: {\n accent: 'oklch(0.64 0.14 160)',\n 'accent-subtle': 'oklch(0.23 0.05 160)',\n 'accent-subtle-foreground': 'oklch(0.8 0.12 160)',\n ring: 'oklch(0.68 0.14 160)',\n },\n },\n /** Rose. */\n rose: {\n light: {\n accent: 'oklch(0.57 0.19 12)',\n 'color-accent-700': 'oklch(0.49 0.18 12)',\n 'color-accent-800': 'oklch(0.41 0.16 12)',\n 'accent-subtle': 'oklch(0.96 0.03 12)',\n 'accent-subtle-foreground': 'oklch(0.48 0.18 12)',\n ring: 'oklch(0.62 0.19 12)',\n },\n dark: {\n accent: 'oklch(0.65 0.18 12)',\n 'accent-subtle': 'oklch(0.25 0.07 12)',\n 'accent-subtle-foreground': 'oklch(0.83 0.12 12)',\n ring: 'oklch(0.7 0.18 12)',\n },\n },\n /** Amber. */\n amber: {\n light: {\n // 0.56 keeps white text at 4.8:1 (0.62 was 3.8:1).\n accent: 'oklch(0.56 0.14 65)',\n 'color-accent-700': 'oklch(0.54 0.13 65)',\n 'color-accent-800': 'oklch(0.46 0.12 65)',\n 'accent-subtle': 'oklch(0.96 0.04 75)',\n 'accent-subtle-foreground': 'oklch(0.48 0.12 65)',\n ring: 'oklch(0.64 0.14 65)', // 3.17:1 on background-muted (0.66 was 2.93)\n },\n dark: {\n accent: 'oklch(0.66 0.14 65)',\n 'accent-subtle': 'oklch(0.26 0.05 70)',\n 'accent-subtle-foreground': 'oklch(0.85 0.12 80)',\n ring: 'oklch(0.72 0.14 65)',\n },\n },\n} satisfies Record<string, BrandTokenPair>;\n\nexport type BrandName = keyof typeof brandPresets;\n"],"names":["isPair","t","toDeclarations","tokens","k","v","DesignSystemProvider","strings","className","children","style","props","parentStrings","useStrings","resolvedStrings","useMemo","mergeStrings","scopeId","useId","css","sheet","scope","key","jsxs","StringsContext","jsx","cn","brandPresets"],"mappings":"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"}
package/dist-lib/components/ui/Dialog.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
2
- import { ButtonProps } from './Button';
2
+ import { ButtonProps } from './Button.js';
3
+ import { ReturnFocusRef } from '../../lib/return-focus.js';
3
4
  import * as DialogPrimitive from '@radix-ui/react-dialog';
4
5
  export declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
5
6
  export declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -11,6 +12,14 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
11
12
  showClose?: boolean;
12
13
  /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */
13
14
  size?: 'sm' | 'md' | 'lg';
15
+ /**
16
+ * Element to focus when the overlay closes. Overrides Radix's default
17
+ * (the element focused when the content mounted), which is `<body>` for
18
+ * controlled overlays opened from a pointer click on a non-focusable /
19
+ * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and
20
+ * wins if it calls `preventDefault()`.
21
+ */
22
+ returnFocusTo?: ReturnFocusRef;
14
23
  }
15
24
  export declare const DialogContent: import('react').ForwardRefExoticComponent<DialogContentProps & import('react').RefAttributes<HTMLDivElement>>;
16
25
  export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
@@ -34,10 +43,16 @@ export interface ConfirmationDialogProps {
34
43
  cancelLabel?: string;
35
44
  /** Variant of the confirm button — typically `primary` or `destructive`. */
36
45
  confirmVariant?: ButtonProps['variant'];
37
- /** Called when the user confirms. Awaited — shows a spinner while pending. */
46
+ /**
47
+ * Called when the user confirms. Awaited — the confirm button shows a
48
+ * spinner while pending and a rejection is rendered inline (the dialog stays
49
+ * open so the user can retry or cancel).
50
+ */
38
51
  onConfirm: () => void | Promise<void>;
39
- /** Whether the confirm button is currently submitting. */
52
+ /** Force the submitting state from outside (in addition to the awaited `onConfirm`). */
40
53
  loading?: boolean;
54
+ /** Map a rejected `onConfirm` to the message shown. Defaults to `Error.message`. */
55
+ formatError?: (err: unknown) => ReactNode;
41
56
  }
42
57
  /**
43
58
  * Confirmation dialog with title, description, cancel + confirm buttons.
@@ -56,7 +71,7 @@ export interface ConfirmationDialogProps {
56
71
  * State consequences in the description.
57
72
  * @dont Use for low-risk reversible actions — those don't need a dialog.
58
73
  */
59
- export declare function ConfirmationDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, loading, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
74
+ export declare function ConfirmationDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, loading, formatError, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
60
75
  export declare namespace ConfirmationDialog {
61
76
  var displayName: string;
62
77
  }
package/dist-lib/components/ui/Dialog.js ADDED
@@ -0,0 +1,165 @@
1
+ "use client";
2
+ import { jsx as e, jsxs as s } from "react/jsx-runtime";
3
+ import { useState as b, forwardRef as c } from "react";
4
+ import * as n from "@radix-ui/react-dialog";
5
+ import { X as S } from "../../icons/index.js";
6
+ import { cn as r } from "../../lib/utils.js";
7
+ import { useStrings as C } from "../../hooks/use-strings.js";
8
+ import { Button as N } from "./Button.js";
9
+ import { withReturnFocus as k } from "../../lib/return-focus.js";
10
+ const B = n.Root, Q = n.Trigger, E = n.Portal, H = n.Close, w = c(function({ className: a, ...i }, o) {
11
+ return /* @__PURE__ */ e(
12
+ n.Overlay,
13
+ {
14
+ ref: o,
15
+ className: r(
16
+ "bg-overlay fixed inset-0 z-[var(--z-overlay)]",
17
+ "data-[state=open]:animate-in data-[state=closed]:animate-out",
18
+ "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
19
+ a
20
+ ),
21
+ ...i
22
+ }
23
+ );
24
+ });
25
+ w.displayName = "DialogOverlay";
26
+ const z = c(function({ className: a, children: i, showClose: o = !0, size: l = "md", returnFocusTo: m, onCloseAutoFocus: g, ...u }, f) {
27
+ const p = C();
28
+ return /* @__PURE__ */ s(E, { children: [
29
+ /* @__PURE__ */ e(w, {}),
30
+ /* @__PURE__ */ s(
31
+ n.Content,
32
+ {
33
+ ref: f,
34
+ onCloseAutoFocus: k(m, g),
35
+ className: r(
36
+ "fixed top-1/2 left-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2",
37
+ "border-border bg-card text-card-foreground w-[calc(100%-2rem)] rounded-xl border shadow-lg",
38
+ "p-6",
39
+ "data-[state=open]:animate-in data-[state=closed]:animate-out",
40
+ "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
41
+ "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
42
+ l === "sm" && "max-w-[400px]",
43
+ l === "md" && "max-w-[520px]",
44
+ l === "lg" && "max-w-[720px]",
45
+ a
46
+ ),
47
+ ...u,
48
+ children: [
49
+ i,
50
+ o && /* @__PURE__ */ e(
51
+ n.Close,
52
+ {
53
+ "aria-label": p.dialog.close,
54
+ className: r(
55
+ "text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md",
56
+ "hover:bg-background-muted hover:text-foreground",
57
+ "focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
58
+ "transition-colors duration-[var(--duration-fast)]"
59
+ ),
60
+ children: /* @__PURE__ */ e(S, { className: "size-4", "aria-hidden": !0 })
61
+ }
62
+ )
63
+ ]
64
+ }
65
+ )
66
+ ] });
67
+ });
68
+ z.displayName = "DialogContent";
69
+ function F({ className: t, ...a }) {
70
+ return /* @__PURE__ */ e("div", { className: r("flex flex-col gap-1 pb-4", t), ...a });
71
+ }
72
+ F.displayName = "DialogHeader";
73
+ function T({ className: t, ...a }) {
74
+ return /* @__PURE__ */ e(
75
+ "div",
76
+ {
77
+ className: r("flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end", t),
78
+ ...a
79
+ }
80
+ );
81
+ }
82
+ T.displayName = "DialogFooter";
83
+ const O = c(function({ className: a, ...i }, o) {
84
+ return /* @__PURE__ */ e(
85
+ n.Title,
86
+ {
87
+ ref: o,
88
+ className: r("text-foreground text-lg leading-tight font-semibold", a),
89
+ ...i
90
+ }
91
+ );
92
+ });
93
+ O.displayName = "DialogTitle";
94
+ const j = c(function({ className: a, ...i }, o) {
95
+ return /* @__PURE__ */ e(
96
+ n.Description,
97
+ {
98
+ ref: o,
99
+ className: r("text-foreground-muted text-sm", a),
100
+ ...i
101
+ }
102
+ );
103
+ });
104
+ j.displayName = "DialogDescription";
105
+ function A({
106
+ open: t,
107
+ onOpenChange: a,
108
+ title: i,
109
+ description: o,
110
+ confirmLabel: l,
111
+ cancelLabel: m,
112
+ confirmVariant: g = "primary",
113
+ onConfirm: u,
114
+ loading: f,
115
+ formatError: p = X
116
+ }) {
117
+ const x = C(), [P, h] = b(!1), [v, D] = b(null), y = !!f || P, R = async () => {
118
+ D(null), h(!0);
119
+ try {
120
+ await u();
121
+ } catch (d) {
122
+ D(p(d));
123
+ } finally {
124
+ h(!1);
125
+ }
126
+ };
127
+ return /* @__PURE__ */ e(
128
+ B,
129
+ {
130
+ open: t,
131
+ onOpenChange: (d) => {
132
+ d || D(null), a(d);
133
+ },
134
+ children: /* @__PURE__ */ s(z, { size: "sm", ...o ? {} : { "aria-describedby": void 0 }, children: [
135
+ /* @__PURE__ */ s(F, { children: [
136
+ /* @__PURE__ */ e(O, { children: i }),
137
+ o && /* @__PURE__ */ e(j, { children: o })
138
+ ] }),
139
+ v && /* @__PURE__ */ e("p", { role: "alert", className: "text-danger-text text-sm", children: v }),
140
+ /* @__PURE__ */ s(T, { children: [
141
+ /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ e(N, { variant: "outline", disabled: y, children: m ?? x.confirmationDialog.cancel }) }),
142
+ /* @__PURE__ */ e(N, { variant: g, loading: y, onClick: R, children: l ?? x.confirmationDialog.confirm })
143
+ ] })
144
+ ] })
145
+ }
146
+ );
147
+ }
148
+ function X(t) {
149
+ return t instanceof Error ? t.message : String(t);
150
+ }
151
+ A.displayName = "ConfirmationDialog";
152
+ export {
153
+ A as ConfirmationDialog,
154
+ B as Dialog,
155
+ H as DialogClose,
156
+ z as DialogContent,
157
+ j as DialogDescription,
158
+ T as DialogFooter,
159
+ F as DialogHeader,
160
+ w as DialogOverlay,
161
+ E as DialogPortal,
162
+ O as DialogTitle,
163
+ Q as DialogTrigger
164
+ };
165
+ //# sourceMappingURL=Dialog.js.map
package/dist-lib/components/ui/Dialog.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dialog.js","sources":["../../../src/components/ui/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n forwardRef,\n useState,\n type ComponentPropsWithoutRef,\n type ElementRef,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { Button, type ButtonProps } from './Button';\nimport { withReturnFocus, type ReturnFocusRef } from '@/lib/return-focus';\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = forwardRef<\n ElementRef<typeof DialogPrimitive.Overlay>,\n ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, ...props }, ref) {\n return (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'bg-overlay fixed inset-0 z-[var(--z-overlay)]',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n className,\n )}\n {...props}\n />\n );\n});\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps extends ComponentPropsWithoutRef<\n typeof DialogPrimitive.Content\n> {\n /** Show the default close (×) button in the top-right. */\n showClose?: boolean;\n /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Element to focus when the overlay closes. Overrides Radix's default\n * (the element focused when the content mounted), which is `<body>` for\n * controlled overlays opened from a pointer click on a non-focusable /\n * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and\n * wins if it calls `preventDefault()`.\n */\n returnFocusTo?: ReturnFocusRef;\n}\n\nexport const DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(function DialogContent(\n { className, children, showClose = true, size = 'md', returnFocusTo, onCloseAutoFocus, ...props },\n ref,\n) {\n const strings = useStrings();\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n onCloseAutoFocus={withReturnFocus(returnFocusTo, onCloseAutoFocus)}\n className={cn(\n 'fixed top-1/2 left-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2',\n 'border-border bg-card text-card-foreground w-[calc(100%-2rem)] rounded-xl border shadow-lg',\n 'p-6',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n size === 'sm' && 'max-w-[400px]',\n size === 'md' && 'max-w-[520px]',\n size === 'lg' && 'max-w-[720px]',\n className,\n )}\n {...props}\n >\n {children}\n {showClose && (\n <DialogPrimitive.Close\n aria-label={strings.dialog.close}\n className={cn(\n 'text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md',\n 'hover:bg-background-muted hover:text-foreground',\n 'focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n 'transition-colors duration-[var(--duration-fast)]',\n )}\n >\n <X className=\"size-4\" aria-hidden />\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DialogPortal>\n );\n});\nDialogContent.displayName = 'DialogContent';\n\nexport function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n return <div className={cn('flex flex-col gap-1 pb-4', className)} {...props} />;\n}\nDialogHeader.displayName = 'DialogHeader';\n\nexport function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={cn('flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end', className)}\n {...props}\n />\n );\n}\nDialogFooter.displayName = 'DialogFooter';\n\nexport const DialogTitle = forwardRef<\n ElementRef<typeof DialogPrimitive.Title>,\n ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function DialogTitle({ className, ...props }, ref) {\n return (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-foreground text-lg leading-tight font-semibold', className)}\n {...props}\n />\n );\n});\nDialogTitle.displayName = 'DialogTitle';\n\nexport const DialogDescription = forwardRef<\n ElementRef<typeof DialogPrimitive.Description>,\n ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function DialogDescription({ className, ...props }, ref) {\n return (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-foreground-muted text-sm', className)}\n {...props}\n />\n );\n});\nDialogDescription.displayName = 'DialogDescription';\n\n/* -----------------------------------------------------------------------------\n * ConfirmationDialog — pre-composed pattern for destructive/important\n * confirmations. Use this when the body is a single sentence and the only\n * controls are Cancel + Confirm.\n * --------------------------------------------------------------------------- */\n\nexport interface ConfirmationDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n title: ReactNode;\n description?: ReactNode;\n /** Label of the confirm button. */\n confirmLabel?: string;\n /** Label of the cancel button. */\n cancelLabel?: string;\n /** Variant of the confirm button — typically `primary` or `destructive`. */\n confirmVariant?: ButtonProps['variant'];\n /**\n * Called when the user confirms. Awaited — the confirm button shows a\n * spinner while pending and a rejection is rendered inline (the dialog stays\n * open so the user can retry or cancel).\n */\n onConfirm: () => void | Promise<void>;\n /** Force the submitting state from outside (in addition to the awaited `onConfirm`). */\n loading?: boolean;\n /** Map a rejected `onConfirm` to the message shown. Defaults to `Error.message`. */\n formatError?: (err: unknown) => ReactNode;\n}\n\n/**\n * Confirmation dialog with title, description, cancel + confirm buttons.\n *\n * @example Destructive confirmation\n * <ConfirmationDialog\n * open={open} onOpenChange={setOpen}\n * title=\"Delete project?\"\n * description=\"This permanently deletes the project and all its data.\"\n * confirmLabel=\"Delete project\"\n * confirmVariant=\"destructive\"\n * onConfirm={handleDelete}\n * />\n *\n * @do Lead the title with the action: \"Delete project?\" not \"Are you sure?\".\n * State consequences in the description.\n * @dont Use for low-risk reversible actions — those don't need a dialog.\n */\nexport function ConfirmationDialog({\n open,\n onOpenChange,\n title,\n description,\n confirmLabel,\n cancelLabel,\n confirmVariant = 'primary',\n onConfirm,\n loading,\n formatError = defaultFormatError,\n}: ConfirmationDialogProps) {\n const strings = useStrings();\n const [pending, setPending] = useState(false);\n const [failure, setFailure] = useState<ReactNode>(null);\n const busy = Boolean(loading) || pending;\n\n const handleConfirm = async () => {\n setFailure(null);\n setPending(true);\n try {\n await onConfirm();\n } catch (err) {\n setFailure(formatError(err));\n } finally {\n setPending(false);\n }\n };\n\n return (\n <Dialog\n open={open}\n onOpenChange={(next) => {\n if (!next) setFailure(null);\n onOpenChange(next);\n }}\n >\n {/* No description → drop aria-describedby so Radix does not warn and AT is not pointed at nothing. */}\n <DialogContent size=\"sm\" {...(description ? {} : { 'aria-describedby': undefined })}>\n <DialogHeader>\n <DialogTitle>{title}</DialogTitle>\n {description && <DialogDescription>{description}</DialogDescription>}\n </DialogHeader>\n {failure && (\n <p role=\"alert\" className=\"text-danger-text text-sm\">\n {failure}\n </p>\n )}\n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\" disabled={busy}>\n {cancelLabel ?? strings.confirmationDialog.cancel}\n </Button>\n </DialogClose>\n <Button variant={confirmVariant} loading={busy} onClick={handleConfirm}>\n {confirmLabel ?? strings.confirmationDialog.confirm}\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n}\n\nfunction defaultFormatError(err: unknown): ReactNode {\n return err instanceof Error ? err.message : String(err);\n}\nConfirmationDialog.displayName = 'ConfirmationDialog';\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","jsx","cn","DialogContent","children","showClose","size","returnFocusTo","onCloseAutoFocus","strings","useStrings","jsxs","withReturnFocus","X","DialogHeader","DialogFooter","DialogTitle","DialogDescription","ConfirmationDialog","open","onOpenChange","title","description","confirmLabel","cancelLabel","confirmVariant","onConfirm","loading","formatError","defaultFormatError","pending","setPending","useState","failure","setFailure","busy","handleConfirm","err","next","Button"],"mappings":"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"}
package/dist-lib/components/ui/Drawer.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
2
2
  import { Drawer as DrawerPrimitive } from 'vaul';
3
+ import { ReturnFocusRef } from '../../lib/return-focus.js';
3
4
  type Direction = 'top' | 'right' | 'bottom' | 'left';
4
5
  export declare const Drawer: {
5
- ({ shouldScaleBackground, ...props }: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
6
+ ({ shouldScaleBackground, direction, ...props }: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
6
7
  displayName: string;
7
8
  };
8
9
  export declare const DrawerTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -10,14 +11,34 @@ export declare const DrawerPortal: typeof import('vaul').Portal;
10
11
  export declare const DrawerClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
11
12
  export declare const DrawerOverlay: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
12
13
  export interface DrawerContentProps extends ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
13
- /** Side the drawer slides in from. Default `bottom`. */
14
+ /**
15
+ * Side the drawer slides in from. Prefer setting `direction` on `<Drawer>`
16
+ * (vaul needs it there for drag physics); this prop only overrides the
17
+ * visual placement.
18
+ */
14
19
  direction?: Direction;
15
20
  /** Hide the drag handle. */
16
21
  hideHandle?: boolean;
22
+ /** Show the close (×) button. Default `true`. */
23
+ showClose?: boolean;
24
+ /**
25
+ * Element to focus when the overlay closes. Overrides Radix's default
26
+ * (the element focused when the content mounted), which is `<body>` for
27
+ * controlled overlays opened from a pointer click on a non-focusable /
28
+ * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and
29
+ * wins if it calls `preventDefault()`.
30
+ */
31
+ returnFocusTo?: ReturnFocusRef;
17
32
  }
18
33
  export declare const DrawerContent: import('react').ForwardRefExoticComponent<DrawerContentProps & import('react').RefAttributes<HTMLDivElement>>;
19
34
  export declare function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
35
+ export declare namespace DrawerHeader {
36
+ var displayName: string;
37
+ }
20
38
  export declare function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
39
+ export declare namespace DrawerFooter {
40
+ var displayName: string;
41
+ }
21
42
  export declare const DrawerTitle: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
22
43
  export declare const DrawerDescription: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
23
44
  export {};