@hirobius/design-system 0.19.0 → 0.20.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 (144) hide show
  1. package/CONSUMING.md +9 -6
  2. package/DESIGN.md +7 -5
  3. package/README.md +14 -11
  4. package/codemods/hds-prefix.mjs +231 -0
  5. package/codemods/jsx-fold.mjs +515 -0
  6. package/codemods/not-found-pattern.mjs +71 -0
  7. package/codemods/patterns-subpath.mjs +242 -81
  8. package/codemods/patterns-subpath.names.json +41 -15
  9. package/codemods/removed-0.20.json +194 -0
  10. package/codemods/tile-grid.mjs +283 -0
  11. package/codemods/unrewritable.mjs +291 -0
  12. package/dist/chunks/DemoStateContext-Cz5TmrYu.js +32 -0
  13. package/dist/chunks/empty-state-BBqhCx0S.js +1217 -0
  14. package/dist/chunks/{form-BvNNnJ0t.js → form-COP3vK9_.js} +29 -27
  15. package/dist/contexts.js +157 -78
  16. package/dist/form.js +1 -1
  17. package/dist/hirobius-ui.js +1826 -5503
  18. package/dist/manifest.js +12 -13
  19. package/dist/patterns.js +820 -561
  20. package/dist/styles.css +1 -1
  21. package/dist/tokens.css +1 -1
  22. package/dist/tokens.js +29 -8
  23. package/dist/types/src/app/components/avatar-group.d.ts +1 -2
  24. package/dist/types/src/app/components/badge.d.ts +8 -3
  25. package/dist/types/src/app/components/blockquote.d.ts +1 -2
  26. package/dist/types/src/app/components/box-sx.d.ts +110 -13
  27. package/dist/types/src/app/components/box.d.ts +6 -3
  28. package/dist/types/src/app/components/breadcrumb.d.ts +0 -5
  29. package/dist/types/src/app/components/button.d.ts +33 -4
  30. package/dist/types/src/app/components/card.d.ts +7 -8
  31. package/dist/types/src/app/components/combobox.d.ts +47 -11
  32. package/dist/types/src/app/components/container.d.ts +2 -2
  33. package/dist/types/src/app/components/data-table-section.d.ts +1 -1
  34. package/dist/types/src/app/components/dialog.d.ts +7 -1
  35. package/dist/types/src/app/components/disclosure.d.ts +1 -5
  36. package/dist/types/src/app/components/field.d.ts +1 -2
  37. package/dist/types/src/app/components/grid.d.ts +10 -6
  38. package/dist/types/src/app/components/hds-tooltip.d.ts +12 -2
  39. package/dist/types/src/app/components/inline-code.d.ts +1 -2
  40. package/dist/types/src/app/components/input.d.ts +8 -5
  41. package/dist/types/src/app/components/kbd.d.ts +1 -2
  42. package/dist/types/src/app/components/metadata-list.d.ts +1 -2
  43. package/dist/types/src/app/components/page-header.d.ts +0 -2
  44. package/dist/types/src/app/components/popover.d.ts +8 -0
  45. package/dist/types/src/app/components/progress.d.ts +33 -6
  46. package/dist/types/src/app/components/segmented-control.d.ts +2 -26
  47. package/dist/types/src/app/components/select.d.ts +10 -1
  48. package/dist/types/src/app/components/skeleton.d.ts +2 -3
  49. package/dist/types/src/app/components/spinner.d.ts +1 -2
  50. package/dist/types/src/app/components/stack.d.ts +4 -1
  51. package/dist/types/src/app/components/stat.d.ts +1 -2
  52. package/dist/types/src/app/components/status-dot.d.ts +18 -4
  53. package/dist/types/src/app/components/status-list-item.d.ts +1 -2
  54. package/dist/types/src/app/components/surface.d.ts +2 -3
  55. package/dist/types/src/app/components/switcher.d.ts +1 -1
  56. package/dist/types/src/app/components/table.d.ts +1 -15
  57. package/dist/types/src/app/components/tag.d.ts +0 -6
  58. package/dist/types/src/app/components/text.d.ts +1 -2
  59. package/dist/types/src/app/components/textarea.d.ts +1 -2
  60. package/dist/types/src/app/components/toast.d.ts +1 -2
  61. package/dist/types/src/app/components/tooltip.d.ts +1 -1
  62. package/dist/types/src/app/context/DemoStateContext.d.ts +1 -1
  63. package/dist/types/src/app/context/RouterContext.d.ts +5 -5
  64. package/dist/types/src/app/data/manifest-types.d.ts +6 -5
  65. package/dist/types/src/app/design-system/generated-token-refs.d.ts +8 -0
  66. package/dist/types/src/app/design-system/generated-token-values.d.ts +1 -0
  67. package/dist/types/src/app/design-system/tokens.d.ts +22 -3
  68. package/dist/types/src/icons.d.ts +1 -1
  69. package/dist/types/src/index.d.ts +33 -124
  70. package/dist/types/src/patterns.d.ts +20 -25
  71. package/dist/variables.css +6 -0
  72. package/docs/CONSUMING.md +21 -13
  73. package/hirobius.tokens.json +48 -15
  74. package/llms.txt +19 -20
  75. package/package.json +18 -22
  76. package/public/hds-manifest.json +2400 -6488
  77. package/public/llms/components.txt +41 -423
  78. package/public/llms/layout.txt +4 -4
  79. package/public/llms-full.txt +67 -448
  80. package/public/llms.txt +19 -20
  81. package/src/app/data/component-api.json +1379 -3271
  82. package/dist/chunks/LanguageContext-CH_bwzCq.js +0 -83
  83. package/dist/chunks/TokenDisplayContext-evZi_214.js +0 -18
  84. package/dist/chunks/activity-feed-DIMeUJpW.js +0 -21950
  85. package/dist/types/src/app/components/activity-feed.d.ts +0 -73
  86. package/dist/types/src/app/components/app-shell.d.ts +0 -40
  87. package/dist/types/src/app/components/aspect-ratio.d.ts +0 -25
  88. package/dist/types/src/app/components/bleed.d.ts +0 -39
  89. package/dist/types/src/app/components/button-group.d.ts +0 -22
  90. package/dist/types/src/app/components/calendar.d.ts +0 -22
  91. package/dist/types/src/app/components/carousel.d.ts +0 -26
  92. package/dist/types/src/app/components/center.d.ts +0 -36
  93. package/dist/types/src/app/components/cinematic-link.d.ts +0 -18
  94. package/dist/types/src/app/components/circular-progress.d.ts +0 -28
  95. package/dist/types/src/app/components/cluster.d.ts +0 -39
  96. package/dist/types/src/app/components/command-palette.d.ts +0 -46
  97. package/dist/types/src/app/components/component-instance-matrix.d.ts +0 -27
  98. package/dist/types/src/app/components/context-menu.d.ts +0 -78
  99. package/dist/types/src/app/components/cover.d.ts +0 -43
  100. package/dist/types/src/app/components/date-input.d.ts +0 -31
  101. package/dist/types/src/app/components/date-range-input.d.ts +0 -34
  102. package/dist/types/src/app/components/date-time-input.d.ts +0 -30
  103. package/dist/types/src/app/components/doc-link-card.d.ts +0 -32
  104. package/dist/types/src/app/components/error-boundary.d.ts +0 -25
  105. package/dist/types/src/app/components/file-input.d.ts +0 -30
  106. package/dist/types/src/app/components/foundation-swatch.d.ts +0 -45
  107. package/dist/types/src/app/components/frame.d.ts +0 -38
  108. package/dist/types/src/app/components/heading-stack.d.ts +0 -52
  109. package/dist/types/src/app/components/history-card.d.ts +0 -12
  110. package/dist/types/src/app/components/hover-card.d.ts +0 -46
  111. package/dist/types/src/app/components/icon-button.d.ts +0 -22
  112. package/dist/types/src/app/components/image-lightbox.d.ts +0 -14
  113. package/dist/types/src/app/components/input-group.d.ts +0 -23
  114. package/dist/types/src/app/components/multi-selector.d.ts +0 -40
  115. package/dist/types/src/app/components/nav-group.d.ts +0 -29
  116. package/dist/types/src/app/components/nav-item.d.ts +0 -33
  117. package/dist/types/src/app/components/not-found-pattern.d.ts +0 -1
  118. package/dist/types/src/app/components/overflow-list.d.ts +0 -21
  119. package/dist/types/src/app/components/selectable-card.d.ts +0 -29
  120. package/dist/types/src/app/components/side-nav.d.ts +0 -23
  121. package/dist/types/src/app/components/sketch.d.ts +0 -19
  122. package/dist/types/src/app/components/stacked-card-rail.d.ts +0 -32
  123. package/dist/types/src/app/components/stepper-field.d.ts +0 -12
  124. package/dist/types/src/app/components/stepper.d.ts +0 -33
  125. package/dist/types/src/app/components/text-lockup.d.ts +0 -38
  126. package/dist/types/src/app/components/tile-grid.d.ts +0 -17
  127. package/dist/types/src/app/components/time-input.d.ts +0 -24
  128. package/dist/types/src/app/components/toggle-button.d.ts +0 -32
  129. package/dist/types/src/app/components/token.d.ts +0 -90
  130. package/dist/types/src/app/components/tokenUtils.d.ts +0 -38
  131. package/dist/types/src/app/components/tokenizer.d.ts +0 -24
  132. package/dist/types/src/app/components/toolbar.d.ts +0 -36
  133. package/dist/types/src/app/components/top-nav.d.ts +0 -23
  134. package/dist/types/src/app/components/tree-list.d.ts +0 -30
  135. package/dist/types/src/app/data/nav-model.d.ts +0 -39
  136. package/dist/types/src/app/hooks/useFocusVisible.d.ts +0 -9
  137. package/dist/types/src/app/layouts/CaseStudyLayout.d.ts +0 -20
  138. package/dist/types/src/app/layouts/DocLayout.d.ts +0 -14
  139. package/dist/types/src/app/layouts/EmbeddedDocLayoutContext.d.ts +0 -6
  140. package/dist/types/src/app/layouts/HdsDocsShell.d.ts +0 -72
  141. package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +0 -14
  142. package/dist/types/src/app/lib/hds-search.d.ts +0 -45
  143. package/dist/types/src/app/lib/nav-active.d.ts +0 -16
  144. package/dist/types/src/app/lib/navLevels.d.ts +0 -4
@@ -0,0 +1,1217 @@
1
+ 'use client';
2
+ import y from "../tokens.js";
3
+ import * as g from "react";
4
+ import D, { useState as Q, useEffect as Z, forwardRef as pe, useId as G } from "react";
5
+ import { jsx as i, jsxs as k, Fragment as fe } from "react/jsx-runtime";
6
+ import { Slot as me } from "@radix-ui/react-slot";
7
+ import { cva as E } from "class-variance-authority";
8
+ import { Loader2 as ue, ArrowUp as ge, ArrowDown as ye, ArrowUpDown as he } from "lucide-react";
9
+ import { cn as h } from "../cn.js";
10
+ import * as C from "@radix-ui/react-alert-dialog";
11
+ import { createPortal as ve } from "react-dom";
12
+ const ee = "(prefers-reduced-motion: reduce)";
13
+ function be() {
14
+ return typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(ee).matches;
15
+ }
16
+ function we() {
17
+ const [t, e] = Q(be);
18
+ return Z(() => {
19
+ if (typeof window > "u" || !window.matchMedia) return;
20
+ const a = window.matchMedia(ee), n = () => e(a.matches);
21
+ return a.addEventListener ? a.addEventListener("change", n) : a.addListener(n), () => {
22
+ a.removeEventListener ? a.removeEventListener("change", n) : a.removeListener(n);
23
+ };
24
+ }, []), t;
25
+ }
26
+ function Wt(t) {
27
+ const e = we(), a = y.motion[t];
28
+ return e ? { ...a, duration: 0 } : a;
29
+ }
30
+ const te = Symbol("hds.env.absent");
31
+ function xe() {
32
+ try {
33
+ return process.env.NODE_ENV;
34
+ } catch {
35
+ return te;
36
+ }
37
+ }
38
+ function ae() {
39
+ const t = xe();
40
+ return t === "production" || t === te;
41
+ }
42
+ function L() {
43
+ return !ae();
44
+ }
45
+ const Se = {
46
+ thin: 1,
47
+ light: 1.5,
48
+ regular: 2,
49
+ bold: 2.5,
50
+ fill: 2,
51
+ duotone: 2
52
+ }, ke = /* @__PURE__ */ D.forwardRef(function({
53
+ icon: e,
54
+ size: a = "small",
55
+ color: n = "currentColor",
56
+ className: r = "",
57
+ style: o,
58
+ weight: c,
59
+ "aria-hidden": d = !0
60
+ }, p) {
61
+ if (L() && !e)
62
+ return console.warn("[Icon] icon prop is missing or undefined. Provide a Lucide icon component."), null;
63
+ const s = y.iconSize[a] || a, f = c ? Se[c] : void 0, u = {
64
+ width: s,
65
+ height: s,
66
+ minWidth: s,
67
+ minHeight: s,
68
+ display: "block",
69
+ flexShrink: 0,
70
+ aspectRatio: "1 / 1",
71
+ ...o && typeof o == "object" ? o : void 0
72
+ };
73
+ return /* @__PURE__ */ i(
74
+ e,
75
+ {
76
+ ref: p,
77
+ size: typeof s == "number" ? s : void 0,
78
+ color: n,
79
+ className: r,
80
+ style: u,
81
+ strokeWidth: f,
82
+ "aria-hidden": d,
83
+ "data-hds-icon": ""
84
+ }
85
+ );
86
+ }), K = /* @__PURE__ */ new Set();
87
+ function Ce(t, e) {
88
+ ae() || K.has(t) || (K.add(t), console.warn(`[HDS deprecation] ${e} (${t})`));
89
+ }
90
+ const Ae = {
91
+ xs: 375,
92
+ sm: 640,
93
+ md: 768,
94
+ lg: 1024,
95
+ xl: 1280
96
+ }, ne = ["xs", "sm", "md", "lg", "xl"], Ne = /* @__PURE__ */ new Set([
97
+ "opacity",
98
+ "zIndex",
99
+ "fontWeight",
100
+ "lineHeight",
101
+ "flex",
102
+ "flexGrow",
103
+ "flexShrink",
104
+ "order",
105
+ "zoom",
106
+ "tabSize",
107
+ "aspectRatio"
108
+ ]), Ee = /* @__PURE__ */ new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 20, 24, 32]), R = {
109
+ xs: "var(--semantic-space-scale-xs)",
110
+ sm: "var(--semantic-space-scale-sm)",
111
+ md: "var(--semantic-space-scale-md)",
112
+ lg: "var(--semantic-space-scale-lg)",
113
+ xl: "var(--semantic-space-scale-xl)"
114
+ }, M = {
115
+ tight: R.sm,
116
+ normal: R.md,
117
+ inset: R.lg,
118
+ spacious: R.xl
119
+ }, Re = {
120
+ names: { ...M, medium: "var(--semantic-space-component-medium)" },
121
+ closed: !0
122
+ }, ze = {
123
+ names: {
124
+ ...R,
125
+ tight: "var(--semantic-space-layout-tight)",
126
+ normal: "var(--semantic-space-layout-normal)",
127
+ inset: "var(--semantic-space-layout-inset)",
128
+ spacious: "var(--semantic-space-layout-spacious)"
129
+ },
130
+ numbers: "units"
131
+ }, I = (t, e) => Object.prototype.hasOwnProperty.call(t, e) ? t[e] : void 0, De = {
132
+ tight: "sm",
133
+ normal: "md",
134
+ inset: "lg",
135
+ spacious: "xl"
136
+ }, _e = {
137
+ m: ["margin"],
138
+ mt: ["margin-top"],
139
+ mr: ["margin-right"],
140
+ mb: ["margin-bottom"],
141
+ ml: ["margin-left"],
142
+ mx: ["margin-left", "margin-right"],
143
+ my: ["margin-top", "margin-bottom"],
144
+ p: ["padding"],
145
+ pt: ["padding-top"],
146
+ pr: ["padding-right"],
147
+ pb: ["padding-bottom"],
148
+ pl: ["padding-left"],
149
+ px: ["padding-left", "padding-right"],
150
+ py: ["padding-top", "padding-bottom"],
151
+ gap: ["gap"],
152
+ rowGap: ["row-gap"],
153
+ columnGap: ["column-gap"]
154
+ };
155
+ function O(t, e) {
156
+ return "closed" in e ? typeof t == "string" ? I(e.names, t) : void 0 : typeof t == "number" ? e.numbers === "raw" ? t : Ee.has(t) ? `var(--primitive-space-${t})` : `calc(var(--primitive-space-1) * ${t})` : I(e.names, t) ?? t;
157
+ }
158
+ const Te = {
159
+ color: "color",
160
+ bgcolor: "background-color",
161
+ borderColor: "border-color",
162
+ fill: "fill",
163
+ stroke: "stroke"
164
+ }, Pe = /* @__PURE__ */ new Set(["primary", "secondary", "disabled", "inverse", "accent"]), Oe = /* @__PURE__ */ new Set(["page", "raised", "overlay", "accent"]), $e = /* @__PURE__ */ new Set(["default", "subtle", "subdued", "strong", "accent"]), Le = /* @__PURE__ */ new Set(["success", "warning", "error", "info"]), Ie = /* @__PURE__ */ new Set(["hover", "pressed", "subtle", "content"]);
165
+ function je(t) {
166
+ if (t === "accent") return "var(--semantic-accent-rest)";
167
+ const e = t.indexOf(".");
168
+ if (e === -1) return;
169
+ const a = t.slice(0, e), n = t.slice(e + 1);
170
+ if (a === "content" && Pe.has(n)) return `var(--semantic-color-content-${n})`;
171
+ if (a === "surface" && Oe.has(n)) return `var(--semantic-color-surface-${n})`;
172
+ if (a === "border" && $e.has(n)) return `var(--semantic-color-border-${n})`;
173
+ if (a === "feedback" && Le.has(n)) return `var(--semantic-color-feedback-${n})`;
174
+ if (a === "accent" && Ie.has(n)) return `var(--semantic-accent-${n})`;
175
+ }
176
+ function Me(t) {
177
+ return t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
178
+ }
179
+ function W(t, e) {
180
+ const a = _e[t];
181
+ if (a) {
182
+ const c = typeof e == "string" ? I(De, e) : void 0;
183
+ c && Ce(
184
+ `box-sx-spacing-${e}`,
185
+ `Box sx spacing name '${e}' is deprecated (hds#206) and is removed in 1.0.0. Use '${c}': same pixels at the default density, tighter under compact (MIGRATIONS.md).`
186
+ );
187
+ const d = O(e, ze);
188
+ return a.map((p) => `${p}:${d}`);
189
+ }
190
+ const n = Te[t];
191
+ if (n) {
192
+ const c = typeof e == "string" ? je(e) ?? e : String(e);
193
+ return [`${n}:${c}`];
194
+ }
195
+ const r = Me(t), o = typeof e == "number" ? Ne.has(t) ? String(e) : `${e}px` : e;
196
+ return [`${r}:${o}`];
197
+ }
198
+ function Be(t) {
199
+ return typeof t != "object" || t === null || Array.isArray(t) ? !1 : Object.keys(t).every((e) => ne.includes(e));
200
+ }
201
+ function Ve(t, e) {
202
+ const a = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = (s, f) => {
203
+ const u = a.get(s) ?? [];
204
+ u.push(...f), a.set(s, u);
205
+ }, o = (s, f, u) => {
206
+ let l = n.get(s);
207
+ l || (l = /* @__PURE__ */ new Map(), n.set(s, l));
208
+ const b = l.get(f) ?? [];
209
+ b.push(...u), l.set(f, b);
210
+ }, c = (s, f) => {
211
+ for (const [u, l] of Object.entries(s))
212
+ if (l != null) {
213
+ if (u.startsWith("&")) {
214
+ c(l, f + u.slice(1));
215
+ continue;
216
+ }
217
+ if (Be(l)) {
218
+ for (const b of ne) {
219
+ const m = l[b];
220
+ m !== void 0 && o(Ae[b], f, W(u, m));
221
+ }
222
+ continue;
223
+ }
224
+ r(f, W(u, l));
225
+ }
226
+ };
227
+ c(t, "");
228
+ const d = [];
229
+ for (const [s, f] of a)
230
+ f.length !== 0 && d.push(`.${e}${s}{${f.join(";")}}`);
231
+ const p = [...n.entries()].sort((s, f) => s[0] - f[0]);
232
+ for (const [s, f] of p) {
233
+ let u = "";
234
+ for (const [l, b] of f)
235
+ b.length !== 0 && (u += `.${e}${l}{${b.join(";")}}`);
236
+ u && d.push(`@media (min-width:${s}px){${u}}`);
237
+ }
238
+ return d;
239
+ }
240
+ function j(t) {
241
+ return t === void 0 ? "undefined" : t === null || typeof t != "object" ? JSON.stringify(t) : Array.isArray(t) ? `[${t.map(j).join(",")}]` : `{${Object.keys(t).sort().map((a) => `${JSON.stringify(a)}:${j(t[a])}`).join(",")}}`;
242
+ }
243
+ function He(t) {
244
+ let e = 5381;
245
+ for (let a = 0; a < t.length; a += 1)
246
+ e = e * 33 ^ t.charCodeAt(a);
247
+ return (e >>> 0).toString(36);
248
+ }
249
+ function Ge(t) {
250
+ return `hds-sx-${He(j(t))}`;
251
+ }
252
+ const U = /* @__PURE__ */ new Set();
253
+ let z = null;
254
+ function Ke() {
255
+ if (typeof document > "u") return null;
256
+ if (z && z.isConnected) return z;
257
+ let t = document.querySelector("style[data-hds-sx]");
258
+ return t || (t = document.createElement("style"), t.setAttribute("data-hds-sx", ""), document.head.appendChild(t)), z = t, z;
259
+ }
260
+ function Ut(t) {
261
+ const e = Ge(t);
262
+ if (U.has(e)) return e;
263
+ const a = Ke();
264
+ if (!a) return e;
265
+ const n = a.sheet;
266
+ if (!n) return e;
267
+ U.add(e);
268
+ for (const r of Ve(t, e))
269
+ try {
270
+ n.insertRule(r, n.cssRules.length);
271
+ } catch {
272
+ }
273
+ return e;
274
+ }
275
+ const We = /* @__PURE__ */ E(
276
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-[colors,filter] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:inset-shadow-[0_0_0_9999px] active:inset-shadow-pressed-overlay/5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
277
+ {
278
+ variants: {
279
+ variant: {
280
+ primary: "bg-primary text-primary-foreground hover:bg-primary/90",
281
+ secondary: "border border-input bg-background text-foreground hover:bg-accent hover:border-ring",
282
+ tertiary: "text-foreground hover:bg-accent"
283
+ },
284
+ // Semantic action color. `neutral` (default) keeps the variant's own
285
+ // colors; the status tones apply a token-driven tonal fill (tinted
286
+ // surface + matching feedback text) that clears AA in BOTH light and dark
287
+ // because the fg/bg feedback token pair flips together per theme. `!`
288
+ // (important) lets the tone override whichever `variant` colors are set,
289
+ // so `tone` composes with any variant. Drives the destructive/status
290
+ // actions consumers previously kept on MUI.
291
+ tone: {
292
+ neutral: "",
293
+ danger: "!border-transparent !bg-feedback-bg-danger !text-feedback-danger hover:!brightness-95 dark:hover:!brightness-110",
294
+ success: "!border-transparent !bg-feedback-bg-success !text-feedback-success hover:!brightness-95 dark:hover:!brightness-110",
295
+ warning: "!border-transparent !bg-feedback-bg-warning !text-feedback-warning hover:!brightness-95 dark:hover:!brightness-110",
296
+ info: "!border-transparent !bg-feedback-bg-info !text-feedback-info hover:!brightness-95 dark:hover:!brightness-110"
297
+ },
298
+ size: {
299
+ sm: "h-8 px-3 text-xs [&_svg]:size-3.5",
300
+ md: "h-10 px-4 py-2 text-sm [&_svg]:size-4",
301
+ lg: "h-12 px-6 text-base [&_svg]:size-5"
302
+ },
303
+ iconOnly: {
304
+ true: "p-0",
305
+ false: ""
306
+ }
307
+ },
308
+ compoundVariants: [
309
+ { iconOnly: !0, size: "sm", className: "w-8" },
310
+ { iconOnly: !0, size: "md", className: "w-10" },
311
+ { iconOnly: !0, size: "lg", className: "w-12" }
312
+ ],
313
+ defaultVariants: {
314
+ variant: "secondary",
315
+ tone: "neutral",
316
+ size: "md",
317
+ iconOnly: !1
318
+ }
319
+ }
320
+ ), Ue = "data-[pressed=true]:bg-accent data-[pressed=true]:text-accent-foreground";
321
+ let Y = !1, X = !1;
322
+ const Yt = /* @__PURE__ */ g.forwardRef(
323
+ function({
324
+ className: e,
325
+ variant: a,
326
+ tone: n,
327
+ size: r,
328
+ iconOnly: o = !1,
329
+ asChild: c = !1,
330
+ label: d,
331
+ loading: p = !1,
332
+ iconLeft: s,
333
+ iconRight: f,
334
+ disabled: u,
335
+ children: l,
336
+ type: b = "button",
337
+ pressed: m,
338
+ defaultPressed: v,
339
+ onPressedChange: w,
340
+ onClick: x,
341
+ ...N
342
+ }, _) {
343
+ const T = u || p, S = l ?? d, A = m !== void 0 || v !== void 0 || w !== void 0, [de, le] = g.useState(v ?? !1), P = m ?? de, B = A ? {
344
+ "aria-pressed": P,
345
+ "data-pressed": P ? "true" : "false",
346
+ onClick: (H) => {
347
+ x == null || x(H), !H.defaultPrevented && (m === void 0 && le(!P), w == null || w(!P));
348
+ }
349
+ } : { onClick: x }, V = h(
350
+ We({ variant: a, tone: n, size: r, iconOnly: o }),
351
+ A && Ue,
352
+ e
353
+ );
354
+ return c ? /* @__PURE__ */ i(
355
+ me,
356
+ {
357
+ ref: _,
358
+ className: V,
359
+ "aria-disabled": T || void 0,
360
+ "aria-busy": p || void 0,
361
+ "data-state": p ? "loading" : void 0,
362
+ "data-variant": a ?? void 0,
363
+ "data-tone": n ?? void 0,
364
+ "data-size": r ?? void 0,
365
+ ...B,
366
+ ...N,
367
+ children: l
368
+ }
369
+ ) : (o && !s && !p && !Y && L() && (Y = !0, console.warn(
370
+ "[Button] iconOnly renders only iconLeft; pass iconLeft (iconRight is hidden in iconOnly mode)."
371
+ )), o && !d && !N["aria-label"] && !N["aria-labelledby"] && !N.title && !X && L() && (X = !0, console.warn(
372
+ "[Button] iconOnly hides the label text, so the button has no accessible name; pass label (or aria-label / aria-labelledby)."
373
+ )), /* @__PURE__ */ k(
374
+ "button",
375
+ {
376
+ ref: _,
377
+ type: b,
378
+ disabled: T,
379
+ "aria-busy": p || void 0,
380
+ ...o && d ? { "aria-label": d } : {},
381
+ "data-state": p ? "loading" : void 0,
382
+ "data-variant": a ?? void 0,
383
+ "data-tone": n ?? void 0,
384
+ "data-size": r ?? void 0,
385
+ className: V,
386
+ ...B,
387
+ ...N,
388
+ children: [
389
+ p ? /* @__PURE__ */ i(ue, { className: "animate-spin", "aria-hidden": "true" }) : s,
390
+ !o && S,
391
+ !p && !o && f
392
+ ]
393
+ }
394
+ ));
395
+ }
396
+ ), Ye = /* @__PURE__ */ E("m-0 min-w-0", {
397
+ variants: {
398
+ variant: {
399
+ display: "[font-family:var(--semantic-typography-display-font-family)] [font-size:var(--semantic-typography-display-font-size)] [font-weight:var(--semantic-typography-display-font-weight)] [letter-spacing:var(--semantic-typography-display-letter-spacing)] [line-height:var(--semantic-typography-display-line-height)]",
400
+ heading1: "[font-family:var(--semantic-typography-h1-font-family)] [font-size:var(--semantic-typography-h1-font-size)] [font-weight:var(--semantic-typography-h1-font-weight)] [letter-spacing:var(--semantic-typography-h1-letter-spacing)] [line-height:var(--semantic-typography-h1-line-height)]",
401
+ heading2: "[font-family:var(--semantic-typography-h2-font-family)] [font-size:var(--semantic-typography-h2-font-size)] [font-weight:var(--semantic-typography-h2-font-weight)] [letter-spacing:var(--semantic-typography-h2-letter-spacing)] [line-height:var(--semantic-typography-h2-line-height)]",
402
+ heading3: "[font-family:var(--semantic-typography-h3-font-family)] [font-size:var(--semantic-typography-h3-font-size)] [font-weight:var(--semantic-typography-h3-font-weight)] [letter-spacing:var(--semantic-typography-h3-letter-spacing)] [line-height:var(--semantic-typography-h3-line-height)]",
403
+ body: "max-w-[var(--semantic-typography-body-max-width)] [font-family:var(--semantic-typography-body-font-family)] [font-size:var(--semantic-typography-body-font-size)] [font-weight:var(--semantic-typography-body-font-weight)] [letter-spacing:var(--semantic-typography-body-letter-spacing)] [line-height:var(--semantic-typography-body-line-height)]",
404
+ ui: "max-w-[var(--semantic-typography-ui-max-width)] [font-family:var(--semantic-typography-ui-font-family)] [font-size:var(--semantic-typography-ui-font-size)] [font-weight:var(--semantic-typography-ui-font-weight)] [letter-spacing:var(--semantic-typography-ui-letter-spacing)] [line-height:var(--semantic-typography-ui-line-height)]",
405
+ eyebrow: "[font-family:var(--semantic-typography-eyebrow-font-family)] [font-size:var(--semantic-typography-eyebrow-font-size)] [font-weight:var(--semantic-typography-eyebrow-font-weight)] [letter-spacing:var(--semantic-typography-eyebrow-letter-spacing)] [line-height:var(--semantic-typography-eyebrow-line-height)] [text-transform:var(--semantic-typography-eyebrow-text-transform)]",
406
+ caption: "[font-family:var(--semantic-typography-caption-font-family)] [font-size:var(--semantic-typography-caption-font-size)] [font-weight:var(--semantic-typography-caption-font-weight)] [letter-spacing:var(--semantic-typography-caption-letter-spacing)] [line-height:var(--semantic-typography-caption-line-height)]",
407
+ technical: "max-w-[var(--semantic-typography-mono-max-width)] [font-family:var(--semantic-typography-mono-font-family)] [font-size:var(--semantic-typography-mono-font-size)] [font-weight:var(--semantic-typography-mono-font-weight)] [letter-spacing:var(--semantic-typography-mono-letter-spacing)] [line-height:var(--semantic-typography-mono-line-height)]",
408
+ badge: "[font-family:var(--semantic-typography-eyebrow-font-family)] [font-size:var(--semantic-typography-eyebrow-font-size)] [font-weight:var(--semantic-typography-eyebrow-font-weight)] [letter-spacing:var(--semantic-typography-eyebrow-letter-spacing)] [line-height:var(--semantic-typography-eyebrow-line-height)] [text-transform:var(--semantic-typography-eyebrow-text-transform)]",
409
+ // Doc-site variants — preserved as a public API surface, now backed by
410
+ // the same body/ui/mono composites so doc pages and product UI share
411
+ // the same 8-style Swiss-canon ramp.
412
+ docLede: "max-w-[var(--semantic-typography-body-max-width)] [font-family:var(--semantic-typography-body-font-family)] [font-size:var(--semantic-typography-body-font-size)] [font-weight:var(--semantic-typography-body-font-weight)] [letter-spacing:var(--semantic-typography-body-letter-spacing)] [line-height:var(--semantic-typography-body-line-height)]",
413
+ docBody: "max-w-[var(--semantic-typography-body-max-width)] [font-family:var(--semantic-typography-body-font-family)] [font-size:var(--semantic-typography-body-font-size)] [font-weight:var(--semantic-typography-body-font-weight)] [letter-spacing:var(--semantic-typography-body-letter-spacing)] [line-height:var(--semantic-typography-body-line-height)]",
414
+ docSmall: "max-w-[var(--semantic-typography-ui-max-width)] [font-family:var(--semantic-typography-ui-font-family)] [font-size:var(--semantic-typography-ui-font-size)] [font-weight:var(--semantic-typography-ui-font-weight)] [letter-spacing:var(--semantic-typography-ui-letter-spacing)] [line-height:var(--semantic-typography-ui-line-height)]",
415
+ docCode: "max-w-[var(--semantic-typography-mono-max-width)] [font-family:var(--semantic-typography-mono-font-family)] [font-size:var(--semantic-typography-mono-font-size)] [font-weight:var(--semantic-typography-mono-font-weight)] [letter-spacing:var(--semantic-typography-mono-letter-spacing)] [line-height:var(--semantic-typography-mono-line-height)]"
416
+ }
417
+ }
418
+ }), Xe = {
419
+ display: "h1",
420
+ heading1: "h1",
421
+ heading2: "h2",
422
+ heading3: "h3",
423
+ body: "p",
424
+ ui: "p",
425
+ eyebrow: "p",
426
+ caption: "p",
427
+ technical: "p",
428
+ badge: "p",
429
+ docLede: "p",
430
+ docBody: "p",
431
+ docSmall: "p",
432
+ docCode: "span"
433
+ }, $ = /* @__PURE__ */ pe(function({ children: e, variant: a, as: n = Xe[a], className: r, style: o, ...c }, d) {
434
+ return /* @__PURE__ */ i(n, { ref: d, className: h(Ye({ variant: a }), r), style: o, ...c, children: e });
435
+ }), Fe = {
436
+ component: "var(--semantic-space-surface-padding)",
437
+ item: "16px",
438
+ px16: "16px",
439
+ px24: "24px",
440
+ none: "0"
441
+ };
442
+ function qe(t) {
443
+ return Fe[t] ?? "0";
444
+ }
445
+ const Je = {
446
+ names: { ...y.space, ...M },
447
+ numbers: "raw"
448
+ }, Qe = /* @__PURE__ */ E(
449
+ "flex h-full flex-col rounded-lg bg-card text-card-foreground",
450
+ {
451
+ variants: {
452
+ variant: {
453
+ default: "border border-transparent",
454
+ // 1px transparent preserves the layout box
455
+ accent: "border-2 border-[var(--semantic-color-border-accent)]"
456
+ },
457
+ tone: {
458
+ neutral: "",
459
+ danger: "!border !border-[var(--semantic-color-feedback-error)]",
460
+ success: "!border !border-[var(--semantic-color-feedback-success)]",
461
+ warning: "!border !border-[var(--semantic-color-feedback-warning)]",
462
+ info: "!border !border-[var(--semantic-color-feedback-info)]"
463
+ },
464
+ bordered: {
465
+ true: "",
466
+ false: ""
467
+ }
468
+ },
469
+ compoundVariants: [
470
+ {
471
+ variant: "default",
472
+ tone: "neutral",
473
+ bordered: !0,
474
+ className: "border-[var(--semantic-color-border-default)]"
475
+ }
476
+ ],
477
+ defaultVariants: { variant: "default", tone: "neutral", bordered: !1 }
478
+ }
479
+ ), Ze = "cursor-pointer hds-focus data-[selected=true]:ring-2 data-[selected=true]:ring-inset data-[selected=true]:ring-ring", et = 'a[href],button,input,select,textarea,label,summary,[contenteditable="true"],[tabindex],[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="option"],[role="menuitem"],[role="tab"]';
480
+ function tt(t) {
481
+ var a, n;
482
+ const e = (n = (a = t.target).closest) == null ? void 0 : n.call(a, et);
483
+ return !!e && e !== t.currentTarget && t.currentTarget.contains(e);
484
+ }
485
+ const at = /* @__PURE__ */ g.forwardRef(function({
486
+ className: e,
487
+ padding: a = "component",
488
+ gap: n = "tight",
489
+ noPadding: r = !1,
490
+ as: o,
491
+ style: c,
492
+ variant: d = "default",
493
+ tone: p = "neutral",
494
+ bordered: s = !1,
495
+ selectable: f = !1,
496
+ selected: u = !1,
497
+ onSelectedChange: l,
498
+ children: b,
499
+ ...m
500
+ }, v) {
501
+ const w = o ?? "div", x = r ? "none" : a, N = qe(x), _ = x === "none" ? "0" : O(n, Je), T = f ? {
502
+ role: "checkbox",
503
+ "aria-checked": u,
504
+ tabIndex: 0,
505
+ "data-selected": u ? "true" : "false",
506
+ onClick: (S) => {
507
+ var A;
508
+ (A = m.onClick) == null || A.call(m, S), !S.defaultPrevented && !tt(S) && (l == null || l(!u));
509
+ },
510
+ onKeyDown: (S) => {
511
+ var A;
512
+ (A = m.onKeyDown) == null || A.call(m, S), !(S.defaultPrevented || S.key !== " " || S.target !== S.currentTarget) && (S.preventDefault(), l == null || l(!u));
513
+ }
514
+ } : {};
515
+ return /* @__PURE__ */ i(
516
+ w,
517
+ {
518
+ ref: v,
519
+ "data-padding": x,
520
+ "data-variant": d,
521
+ "data-tone": p,
522
+ "data-bordered": s ? "true" : "false",
523
+ className: h(
524
+ Qe({ variant: d, tone: p, bordered: s }),
525
+ f && Ze,
526
+ e
527
+ ),
528
+ style: {
529
+ padding: N,
530
+ gap: _,
531
+ ...c
532
+ },
533
+ ...m,
534
+ ...T,
535
+ children: b
536
+ }
537
+ );
538
+ }), nt = /* @__PURE__ */ g.forwardRef(
539
+ function({ className: e, metadata: a, children: n, ...r }, o) {
540
+ return a !== void 0 ? /* @__PURE__ */ k("div", { ref: o, className: h("flex flex-col gap-3 p-6", e), ...r, children: [
541
+ /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: a }),
542
+ /* @__PURE__ */ i("div", { className: "flex flex-col space-y-1.5 min-w-0", children: n })
543
+ ] }) : /* @__PURE__ */ i("div", { ref: o, className: h("flex flex-col space-y-1.5 p-6", e), ...r, children: n });
544
+ }
545
+ ), rt = /* @__PURE__ */ g.forwardRef(function({ className: e, children: a, ...n }, r) {
546
+ return /* @__PURE__ */ i($, { ref: r, variant: "heading3", className: e, ...n, children: a });
547
+ }), ot = /* @__PURE__ */ g.forwardRef(function({ className: e, children: a, ...n }, r) {
548
+ return /* @__PURE__ */ i($, { ref: r, variant: "caption", className: h("text-muted-foreground", e), ...n, children: a });
549
+ }), it = /* @__PURE__ */ g.forwardRef(function({ className: e, ...a }, n) {
550
+ return /* @__PURE__ */ i("div", { ref: n, className: h("p-6 pt-0", e), ...a });
551
+ }), st = /* @__PURE__ */ g.forwardRef(function({ className: e, ...a }, n) {
552
+ return /* @__PURE__ */ i("div", { ref: n, className: h("flex items-center p-6 pt-0", e), ...a });
553
+ }), ct = {
554
+ neutral: "var(--semantic-color-content-accent)",
555
+ info: "var(--semantic-color-feedback-info)",
556
+ success: "var(--semantic-color-feedback-success)",
557
+ warning: "var(--semantic-color-feedback-warning)",
558
+ danger: "var(--semantic-color-feedback-error)"
559
+ }, dt = /* @__PURE__ */ g.forwardRef(
560
+ function({ className: e, value: a, max: n = 100, label: r, tone: o = "neutral", style: c, ...d }, p) {
561
+ const s = Math.max(0, Math.min(a, n)), f = n > 0 ? s / n * 100 : 0;
562
+ return /* @__PURE__ */ k(
563
+ "div",
564
+ {
565
+ ref: p,
566
+ className: h("px-6 pb-2", e),
567
+ style: c,
568
+ ...d,
569
+ children: [
570
+ /* @__PURE__ */ i(
571
+ "div",
572
+ {
573
+ role: "progressbar",
574
+ "aria-valuemin": 0,
575
+ "aria-valuemax": n,
576
+ "aria-valuenow": s,
577
+ "aria-label": typeof r == "string" ? r : "Progress",
578
+ style: {
579
+ height: "4px",
580
+ background: "var(--semantic-color-border-default)",
581
+ borderRadius: y.borderRadius[2],
582
+ overflow: "hidden"
583
+ },
584
+ children: /* @__PURE__ */ i(
585
+ "div",
586
+ {
587
+ style: {
588
+ height: "100%",
589
+ width: "100%",
590
+ transform: `scaleX(${f / 100})`,
591
+ transformOrigin: "left",
592
+ background: ct[o],
593
+ borderRadius: y.borderRadius[2],
594
+ transition: `transform ${y.motion.expressive.duration}s ease-out`
595
+ }
596
+ }
597
+ )
598
+ }
599
+ ),
600
+ r !== void 0 && /* @__PURE__ */ i(
601
+ "p",
602
+ {
603
+ style: {
604
+ ...y.typeStyles.caption,
605
+ margin: "6px 0 0",
606
+ color: "var(--semantic-color-content-secondary)"
607
+ },
608
+ children: r
609
+ }
610
+ )
611
+ ]
612
+ }
613
+ );
614
+ }
615
+ ), lt = {
616
+ neutral: "var(--semantic-color-content-primary)",
617
+ info: "var(--semantic-color-feedback-info)",
618
+ success: "var(--semantic-color-feedback-success)",
619
+ warning: "var(--semantic-color-feedback-warning)",
620
+ danger: "var(--semantic-color-feedback-error)"
621
+ }, pt = /* @__PURE__ */ g.forwardRef(
622
+ function({ className: e, label: a, value: n, sub: r, tone: o = "neutral", style: c, ...d }, p) {
623
+ return /* @__PURE__ */ k("div", { ref: p, className: h("flex flex-col px-6", e), style: c, ...d, children: [
624
+ /* @__PURE__ */ i(
625
+ "p",
626
+ {
627
+ style: {
628
+ ...y.typeStyles.eyebrow,
629
+ margin: "0 0 6px",
630
+ color: "var(--semantic-color-content-secondary)"
631
+ },
632
+ children: a
633
+ }
634
+ ),
635
+ /* @__PURE__ */ i(
636
+ "p",
637
+ {
638
+ style: {
639
+ ...y.typeStyles.h2,
640
+ margin: 0,
641
+ color: lt[o]
642
+ },
643
+ children: n
644
+ }
645
+ ),
646
+ r !== void 0 && /* @__PURE__ */ i(
647
+ "p",
648
+ {
649
+ style: {
650
+ ...y.typeStyles.caption,
651
+ margin: "4px 0 0",
652
+ color: "var(--semantic-color-content-secondary)"
653
+ },
654
+ children: r
655
+ }
656
+ )
657
+ ] });
658
+ }
659
+ ), Xt = /* @__PURE__ */ Object.assign(at, {
660
+ Header: nt,
661
+ Title: rt,
662
+ Description: ot,
663
+ Body: it,
664
+ Footer: st,
665
+ Progress: dt,
666
+ Metric: pt,
667
+ // Set here, not by a later `Card.displayName = …` write: a top-level
668
+ // property write is a side effect that keeps the module alive (hds#363).
669
+ displayName: "Card"
670
+ }), ft = {
671
+ content: "var(--semantic-layout-width-content)",
672
+ max: "var(--semantic-layout-width-max)"
673
+ };
674
+ function Ft({
675
+ children: t,
676
+ maxWidth: e = "max",
677
+ padding: a = "var(--semantic-space-surface-padding)",
678
+ style: n,
679
+ className: r
680
+ }) {
681
+ const o = {
682
+ marginLeft: "auto",
683
+ marginRight: "auto",
684
+ maxWidth: ft[e],
685
+ ...n
686
+ };
687
+ return /* @__PURE__ */ i("div", { className: r, style: o, children: t });
688
+ }
689
+ const re = /* @__PURE__ */ g.createContext({}), oe = /* @__PURE__ */ g.createContext(null);
690
+ function mt() {
691
+ return g.useContext(oe);
692
+ }
693
+ function qt() {
694
+ return g.useContext(re);
695
+ }
696
+ function Jt({
697
+ theme: t,
698
+ density: e,
699
+ brand: a,
700
+ fontFamily: n,
701
+ fontFamilyMono: r,
702
+ as: o = "div",
703
+ className: c,
704
+ style: d,
705
+ children: p
706
+ }) {
707
+ const s = g.useMemo(
708
+ () => ({ theme: t, density: e, brand: a, fontFamily: n, fontFamilyMono: r }),
709
+ [t, e, a, n, r]
710
+ ), [f, u] = g.useState(null), l = {};
711
+ return n && (l["--hds-font-family"] = n), r && (l["--hds-font-family-mono"] = r), /* @__PURE__ */ i(re.Provider, { value: s, children: /* @__PURE__ */ i(oe.Provider, { value: f, children: /* @__PURE__ */ i(
712
+ o,
713
+ {
714
+ ref: u,
715
+ "data-hds": "",
716
+ "data-theme": t === "dark" ? "dark" : void 0,
717
+ "data-density": e === "compact" ? "compact" : void 0,
718
+ "data-brand": a,
719
+ "data-tenant": a,
720
+ className: c,
721
+ style: { ...l, ...d },
722
+ children: p
723
+ }
724
+ ) }) });
725
+ }
726
+ const ut = typeof document > "u" ? g.useEffect : g.useLayoutEffect;
727
+ function F(t) {
728
+ return t === document.documentElement || t === document.body;
729
+ }
730
+ function gt(t) {
731
+ const e = mt(), a = g.useRef(null), [n, r] = g.useState(void 0), o = t === void 0 && e === null;
732
+ ut(() => {
733
+ var p;
734
+ if (!o) return;
735
+ const d = ((p = a.current) == null ? void 0 : p.closest("[data-hds]")) ?? null;
736
+ r(d && !F(d) ? d : null);
737
+ }, [o]);
738
+ const c = o ? /* @__PURE__ */ i("span", { ref: a, hidden: !0, "aria-hidden": "true", "data-hds-portal-anchor": "" }) : null;
739
+ return t !== void 0 ? { ready: !0, container: t ?? void 0, anchor: c } : e ? { ready: !0, container: F(e) ? void 0 : e, anchor: c } : n === void 0 ? { ready: !1, container: void 0, anchor: c } : { ready: !0, container: n ?? void 0, anchor: c };
740
+ }
741
+ function ie(t) {
742
+ function e(a) {
743
+ const { ready: n, container: r, anchor: o } = gt(
744
+ a.container
745
+ );
746
+ return /* @__PURE__ */ k(fe, { children: [
747
+ o,
748
+ n && typeof document < "u" ? /* @__PURE__ */ i(t, { ...a, container: r }) : null
749
+ ] });
750
+ }
751
+ return e.displayName = `HdsPortal(${t.displayName ?? "Portal"})`, e;
752
+ }
753
+ const Qt = /* @__PURE__ */ ie(function({
754
+ container: e,
755
+ children: a
756
+ }) {
757
+ return ve(a, e ?? document.body);
758
+ }), yt = /* @__PURE__ */ D.forwardRef(function({ children: e, colSpan: a, colOffset: n, style: r, className: o, as: c = "div" }, d) {
759
+ const p = {
760
+ ...a !== void 0 && { gridColumn: `span min(var(--current-cols, 12), ${a})` },
761
+ ...n !== void 0 && { gridColumnStart: n },
762
+ height: "100%",
763
+ minWidth: 0,
764
+ ...r
765
+ };
766
+ return /* @__PURE__ */ i(c, { ref: d, className: o, style: p, "data-hds-grid-item": "true", children: e });
767
+ }), q = "280px";
768
+ function ht(t, e) {
769
+ return t <= y.breakpoints.sm ? Math.min(4, e) : t <= y.breakpoints.lg ? Math.min(8, e) : e;
770
+ }
771
+ const vt = /* @__PURE__ */ D.forwardRef(function({
772
+ children: e,
773
+ layout: a = "fixed",
774
+ minItemWidth: n,
775
+ columns: r = 12,
776
+ gap: o = "inset",
777
+ subgrid: c = !1,
778
+ style: d,
779
+ className: p,
780
+ as: s = "div",
781
+ ...f
782
+ }, u) {
783
+ const l = a === "fixed" && !c, [b, m] = Q(r);
784
+ Z(() => {
785
+ if (!l || typeof window > "u") return;
786
+ const x = () => {
787
+ m(ht(window.innerWidth, r));
788
+ };
789
+ return x(), window.addEventListener("resize", x), () => {
790
+ window.removeEventListener("resize", x);
791
+ };
792
+ }, [r, l]);
793
+ let v;
794
+ c ? v = "subgrid" : a === "auto-fit" && n === void 0 ? v = `repeat(auto-fit, minmax(${q}, 1fr))` : a === "auto-fit" || a === "auto-fill" ? v = `repeat(${a}, minmax(min(${n ?? q}, 100%), 1fr))` : v = `repeat(${b}, minmax(0, 1fr))`;
795
+ const w = {
796
+ display: "grid",
797
+ alignItems: "stretch",
798
+ ...v !== void 0 && { gridTemplateColumns: v },
799
+ ...l && {
800
+ "--current-cols": String(b)
801
+ },
802
+ gap: O(o, Re),
803
+ ...d
804
+ };
805
+ return /* @__PURE__ */ i(
806
+ s,
807
+ {
808
+ ...f,
809
+ ref: u,
810
+ className: p,
811
+ style: w,
812
+ "data-hds-grid": "true",
813
+ "data-hds-component": "Grid",
814
+ "data-hds-metrics": `gap:${o}`,
815
+ children: e
816
+ }
817
+ );
818
+ }), Zt = /* @__PURE__ */ Object.assign(vt, { Item: yt }), bt = /* @__PURE__ */ E(
819
+ "box-border h-full border-none rounded-lg bg-[color:var(--semantic-color-surface-raised)] text-[color:var(--semantic-color-content-primary)]",
820
+ {
821
+ variants: {
822
+ padding: {
823
+ component: "p-[var(--semantic-space-surface-padding)]",
824
+ // spacing-ok: 16px/24px are the surface's fixed inset contract (not layout spacing); kept as the legacy values these named options have always resolved to
825
+ item: "p-[16px]",
826
+ px16: "p-[16px]",
827
+ px24: "p-[24px]",
828
+ none: "p-0"
829
+ },
830
+ shadow: {
831
+ // ADR-007: bind to the elevation-role token (raised) instead of a magic
832
+ // RGBA value. Resolves to --semantic-shadow-subtle; theme-aware.
833
+ true: "shadow-[var(--semantic-elevation-raised-shadow)]",
834
+ false: ""
835
+ }
836
+ },
837
+ defaultVariants: { padding: "component", shadow: !1 }
838
+ }
839
+ ), wt = /* @__PURE__ */ D.forwardRef(
840
+ function({
841
+ children: e,
842
+ padding: a = "component",
843
+ shadow: n = !1,
844
+ overflow: r,
845
+ theme: o,
846
+ style: c,
847
+ className: d,
848
+ as: p = "div",
849
+ ...s
850
+ }, f) {
851
+ const u = r !== void 0 || c ? { ...r !== void 0 && { overflow: r }, ...c } : void 0;
852
+ return /* @__PURE__ */ i(
853
+ p,
854
+ {
855
+ ref: f,
856
+ "data-theme": o,
857
+ className: h(bt({ padding: a, shadow: n }), d),
858
+ style: u,
859
+ "data-hds-surface": "true",
860
+ "data-hds-component": "Surface",
861
+ "data-hds-metrics": `padding:${a}`,
862
+ ...s,
863
+ children: e
864
+ }
865
+ );
866
+ }
867
+ ), xt = {
868
+ start: "flex-start",
869
+ center: "center",
870
+ end: "flex-end",
871
+ stretch: "stretch"
872
+ }, St = {
873
+ start: "flex-start",
874
+ center: "center",
875
+ end: "flex-end",
876
+ "space-between": "space-between"
877
+ }, kt = {
878
+ names: {
879
+ ...y.space,
880
+ ...M,
881
+ gap: R.xs,
882
+ medium: "var(--semantic-space-component-medium)",
883
+ hairline: "var(--semantic-space-subgrid-hairline)",
884
+ xs: "var(--semantic-space-subgrid-xs)",
885
+ stack: "var(--semantic-space-section-stack)"
886
+ },
887
+ numbers: "raw"
888
+ }, ea = /* @__PURE__ */ D.forwardRef(function({
889
+ children: e,
890
+ direction: a = "column",
891
+ gap: n = "tight",
892
+ align: r,
893
+ justify: o,
894
+ wrap: c,
895
+ className: d,
896
+ style: p,
897
+ as: s = "div"
898
+ }, f) {
899
+ return /* @__PURE__ */ i(
900
+ s,
901
+ {
902
+ ref: f,
903
+ className: d,
904
+ "data-hds-component": "Stack",
905
+ "data-hds-metrics": `gap:${n}`,
906
+ style: {
907
+ display: "flex",
908
+ flexDirection: a,
909
+ gap: O(n, kt),
910
+ alignItems: r ? xt[r] : a === "row" ? "stretch" : void 0,
911
+ justifyContent: o ? St[o] : void 0,
912
+ flexWrap: c,
913
+ ...p
914
+ },
915
+ children: e
916
+ }
917
+ );
918
+ }), J = /* @__PURE__ */ E(
919
+ "flex items-center bg-[var(--semantic-color-surface-overlay)] px-[var(--semantic-space-surface-padding)]",
920
+ {
921
+ variants: {
922
+ align: {
923
+ left: "justify-start text-left",
924
+ center: "justify-center text-center",
925
+ right: "justify-end text-right"
926
+ },
927
+ density: {
928
+ follow: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)] [[data-density=compact]_&]:min-h-[var(--semantic-size-row-compact)] [[data-density=compact]_&]:py-[var(--semantic-space-scale-xs)]",
929
+ comfortable: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)]",
930
+ compact: "min-h-[var(--semantic-size-row-compact)] py-[var(--semantic-space-scale-xs)]"
931
+ },
932
+ sticky: {
933
+ true: "sticky top-0 z-[var(--semantic-zIndex-sticky)]",
934
+ false: ""
935
+ }
936
+ },
937
+ defaultVariants: { align: "left", sticky: !1 }
938
+ }
939
+ ), Ct = /* @__PURE__ */ E(
940
+ "flex w-full cursor-pointer items-center gap-[var(--semantic-space-scale-xs)] border-0 bg-transparent p-0 text-inherit [font:inherit] transition-colors duration-[var(--hds-motion-productive-duration)] ease-[var(--hds-motion-productive-easing)] hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
941
+ {
942
+ variants: {
943
+ align: {
944
+ left: "justify-start",
945
+ center: "justify-center",
946
+ right: "justify-end"
947
+ }
948
+ },
949
+ defaultVariants: { align: "left" }
950
+ }
951
+ ), At = /* @__PURE__ */ E(
952
+ "flex items-start px-[var(--semantic-space-surface-padding)]",
953
+ {
954
+ variants: {
955
+ align: {
956
+ left: "justify-start text-left",
957
+ center: "justify-center text-center",
958
+ right: "justify-end text-right"
959
+ },
960
+ density: {
961
+ follow: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)] [[data-density=compact]_&]:min-h-[var(--semantic-size-row-compact)] [[data-density=compact]_&]:py-[var(--semantic-space-scale-xs)]",
962
+ comfortable: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)]",
963
+ compact: "min-h-[var(--semantic-size-row-compact)] py-[var(--semantic-space-scale-xs)]"
964
+ },
965
+ divider: {
966
+ true: "[border-bottom:var(--semantic-borderWidth-default)_solid_var(--semantic-color-border-subdued)]",
967
+ false: ""
968
+ }
969
+ },
970
+ defaultVariants: { align: "left", divider: !0 }
971
+ }
972
+ ), Nt = {
973
+ label: y.typeStyles.ui,
974
+ value: y.typeStyles.technical,
975
+ description: {
976
+ ...y.typeStyles.caption,
977
+ color: "var(--semantic-color-content-secondary)"
978
+ },
979
+ token: y.typeStyles.technical,
980
+ code: y.typeStyles.technical,
981
+ custom: y.typeStyles.ui,
982
+ icon: y.typeStyles.caption,
983
+ badge: y.typeStyles.caption,
984
+ action: y.typeStyles.ui
985
+ };
986
+ function ta({
987
+ columns: t,
988
+ rows: e,
989
+ caption: a,
990
+ captionAction: n,
991
+ description: r,
992
+ labelledBy: o,
993
+ minWidth: c,
994
+ density: d,
995
+ flush: p = !1,
996
+ stickyHeader: s = !1
997
+ }) {
998
+ const f = G(), u = G(), l = !!a, b = l ? f : o;
999
+ return /* @__PURE__ */ k("div", { children: [
1000
+ a || r ? /* @__PURE__ */ k("div", { children: [
1001
+ a ? /* @__PURE__ */ k("div", { className: "flex items-center justify-between", children: [
1002
+ /* @__PURE__ */ i(
1003
+ "div",
1004
+ {
1005
+ id: l ? f : void 0,
1006
+ className: "m-0 text-primary",
1007
+ style: y.typeStyles.ui,
1008
+ children: a
1009
+ }
1010
+ ),
1011
+ n ?? null
1012
+ ] }) : null,
1013
+ r ? /* @__PURE__ */ i("div", { className: "text-secondary", style: y.typeStyles.ui, children: r }) : null
1014
+ ] }) : null,
1015
+ /* @__PURE__ */ i(
1016
+ wt,
1017
+ {
1018
+ padding: p ? "none" : "component",
1019
+ id: u,
1020
+ role: "region",
1021
+ tabIndex: 0,
1022
+ "aria-labelledby": l ? f : o ? `${o} ${u}` : void 0,
1023
+ "aria-label": l ? void 0 : "Scrollable table content",
1024
+ style: { overflowX: "auto", overflowY: "visible" },
1025
+ children: /* @__PURE__ */ k(
1026
+ "div",
1027
+ {
1028
+ role: "table",
1029
+ "aria-labelledby": b,
1030
+ className: "grid",
1031
+ style: {
1032
+ minWidth: c,
1033
+ gridTemplateColumns: t.map((m) => m.width ?? "minmax(0, 1fr)").join(" ")
1034
+ },
1035
+ children: [
1036
+ /* @__PURE__ */ i("div", { role: "row", style: { display: "contents" }, children: t.map((m) => {
1037
+ if (!m.sortable)
1038
+ return /* @__PURE__ */ i(
1039
+ "div",
1040
+ {
1041
+ role: "columnheader",
1042
+ className: h(
1043
+ J({
1044
+ align: m.align ?? "left",
1045
+ density: d ?? "follow",
1046
+ sticky: !!s
1047
+ })
1048
+ ),
1049
+ style: y.typeStyles.technical,
1050
+ children: m.label
1051
+ },
1052
+ m.key
1053
+ );
1054
+ const v = m.sortDirection ?? "none", w = v === "ascending" ? ge : v === "descending" ? ye : he;
1055
+ return /* @__PURE__ */ i(
1056
+ "div",
1057
+ {
1058
+ role: "columnheader",
1059
+ "aria-sort": v,
1060
+ className: h(
1061
+ J({
1062
+ align: m.align ?? "left",
1063
+ density: d ?? "follow",
1064
+ sticky: !!s
1065
+ })
1066
+ ),
1067
+ style: y.typeStyles.technical,
1068
+ children: /* @__PURE__ */ k(
1069
+ "button",
1070
+ {
1071
+ type: "button",
1072
+ onClick: m.onSort,
1073
+ className: h(Ct({ align: m.align ?? "left" })),
1074
+ children: [
1075
+ m.label,
1076
+ /* @__PURE__ */ i(ke, { icon: w, size: "small", "aria-hidden": !0 })
1077
+ ]
1078
+ }
1079
+ )
1080
+ },
1081
+ m.key
1082
+ );
1083
+ }) }),
1084
+ e.map((m, v) => /* @__PURE__ */ i("div", { role: "row", style: { display: "contents" }, children: m.cells.map((w, x) => /* @__PURE__ */ i(
1085
+ "div",
1086
+ {
1087
+ role: "cell",
1088
+ className: h(
1089
+ At({
1090
+ align: w.align ?? "left",
1091
+ density: d ?? "follow",
1092
+ divider: v < e.length - 1
1093
+ })
1094
+ ),
1095
+ style: Nt[w.slot],
1096
+ children: w.content
1097
+ },
1098
+ `${m.key ?? v}-${x}`
1099
+ )) }, m.key ?? v))
1100
+ ]
1101
+ }
1102
+ )
1103
+ }
1104
+ )
1105
+ ] });
1106
+ }
1107
+ function Et(t) {
1108
+ return /* @__PURE__ */ i(C.Root, { ...t });
1109
+ }
1110
+ const Rt = C.Trigger, se = /* @__PURE__ */ ie(C.Portal), zt = C.Action, Dt = C.Cancel, ce = /* @__PURE__ */ g.forwardRef(function({ className: e, ...a }, n) {
1111
+ return /* @__PURE__ */ i(
1112
+ C.Overlay,
1113
+ {
1114
+ ref: n,
1115
+ className: h("fixed inset-0 z-50 bg-scrim/60 backdrop-blur-sm", e),
1116
+ ...a
1117
+ }
1118
+ );
1119
+ }), _t = /* @__PURE__ */ g.forwardRef(function({ className: e, container: a, ...n }, r) {
1120
+ return /* @__PURE__ */ k(se, { container: a, children: [
1121
+ /* @__PURE__ */ i(ce, {}),
1122
+ /* @__PURE__ */ i(
1123
+ C.Content,
1124
+ {
1125
+ ref: r,
1126
+ className: h(
1127
+ "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-overlay hds-focus",
1128
+ e
1129
+ ),
1130
+ ...n
1131
+ }
1132
+ )
1133
+ ] });
1134
+ }), Tt = /* @__PURE__ */ g.forwardRef(function({ className: e, ...a }, n) {
1135
+ return /* @__PURE__ */ i("div", { ref: n, className: h("flex flex-col space-y-1.5 text-left", e), ...a });
1136
+ }), Pt = /* @__PURE__ */ g.forwardRef(function({ className: e, ...a }, n) {
1137
+ return /* @__PURE__ */ i(
1138
+ "div",
1139
+ {
1140
+ ref: n,
1141
+ className: h("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", e),
1142
+ ...a
1143
+ }
1144
+ );
1145
+ }), Ot = /* @__PURE__ */ g.forwardRef(function({ className: e, children: a, ...n }, r) {
1146
+ return /* @__PURE__ */ i(C.Title, { asChild: !0, children: /* @__PURE__ */ i($, { ref: r, as: "h2", variant: "heading3", className: e, ...n, children: a }) });
1147
+ }), $t = /* @__PURE__ */ g.forwardRef(function({ className: e, children: a, ...n }, r) {
1148
+ return /* @__PURE__ */ i(C.Description, { asChild: !0, children: /* @__PURE__ */ i(
1149
+ $,
1150
+ {
1151
+ ref: r,
1152
+ as: "p",
1153
+ variant: "caption",
1154
+ className: h("text-muted-foreground", e),
1155
+ ...n,
1156
+ children: a
1157
+ }
1158
+ ) });
1159
+ }), aa = /* @__PURE__ */ Object.assign(Et, {
1160
+ Trigger: Rt,
1161
+ Portal: se,
1162
+ Overlay: ce,
1163
+ Content: _t,
1164
+ Header: Tt,
1165
+ Footer: Pt,
1166
+ Title: Ot,
1167
+ Description: $t,
1168
+ Action: zt,
1169
+ Cancel: Dt,
1170
+ // Set here, not by a later `AlertDialog.displayName = …` write: a top-level
1171
+ // property write is a side effect that keeps the module alive.
1172
+ displayName: "AlertDialog"
1173
+ }), na = /* @__PURE__ */ g.forwardRef(
1174
+ function({ title: e, description: a, className: n }, r) {
1175
+ return /* @__PURE__ */ k(
1176
+ "div",
1177
+ {
1178
+ ref: r,
1179
+ "data-hds-component": "EmptyState",
1180
+ className: h("flex flex-col gap-1 text-sm italic text-muted-foreground", n),
1181
+ children: [
1182
+ /* @__PURE__ */ i("p", { className: "m-0", children: e }),
1183
+ a && /* @__PURE__ */ i("p", { className: "m-0 not-italic text-xs", children: a })
1184
+ ]
1185
+ }
1186
+ );
1187
+ }
1188
+ );
1189
+ export {
1190
+ aa as A,
1191
+ Yt as B,
1192
+ Ft as C,
1193
+ na as E,
1194
+ Zt as G,
1195
+ Jt as H,
1196
+ ke as I,
1197
+ Re as L,
1198
+ ea as S,
1199
+ $ as T,
1200
+ wt as a,
1201
+ Xt as b,
1202
+ ta as c,
1203
+ Ce as d,
1204
+ it as e,
1205
+ ot as f,
1206
+ st as g,
1207
+ Qt as h,
1208
+ Ut as i,
1209
+ nt as j,
1210
+ pt as k,
1211
+ dt as l,
1212
+ rt as m,
1213
+ qt as n,
1214
+ O as r,
1215
+ Wt as u,
1216
+ ie as w
1217
+ };