@hirobius/design-system 0.20.0 → 0.21.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 (76) hide show
  1. package/AGENTS.md +123 -0
  2. package/CONSUMING.md +4 -2
  3. package/DESIGN.md +28 -17
  4. package/NOTICE.md +1 -1
  5. package/README.md +37 -5
  6. package/dist/chunks/empty-state-DNoThgfV.js +1227 -0
  7. package/dist/chunks/form-By82qZcC.js +66 -0
  8. package/dist/fonts/geist-mono-400.woff2 +0 -0
  9. package/dist/fonts/satoshi-400.woff2 +0 -0
  10. package/dist/fonts/satoshi-500.woff2 +0 -0
  11. package/dist/fonts/satoshi-700.woff2 +0 -0
  12. package/dist/fonts.css +53 -0
  13. package/dist/form.js +1 -1
  14. package/dist/hirobius-ui.js +876 -877
  15. package/dist/manifest.js +1 -1
  16. package/dist/patterns.js +189 -170
  17. package/dist/styles.css +2 -2
  18. package/dist/tokens.css +1 -1
  19. package/dist/tokens.js +136 -57
  20. package/dist/types/src/app/components/alert-dialog.d.ts +5 -0
  21. package/dist/types/src/app/components/asset-img.d.ts +1 -0
  22. package/dist/types/src/app/components/avatar-group.d.ts +1 -0
  23. package/dist/types/src/app/components/badge.d.ts +1 -1
  24. package/dist/types/src/app/components/blockquote.d.ts +1 -0
  25. package/dist/types/src/app/components/button.d.ts +2 -0
  26. package/dist/types/src/app/components/card.d.ts +3 -2
  27. package/dist/types/src/app/components/data-table-section.d.ts +1 -0
  28. package/dist/types/src/app/components/destructive-section.d.ts +1 -0
  29. package/dist/types/src/app/components/dialog.d.ts +1 -0
  30. package/dist/types/src/app/components/error-pattern.d.ts +6 -1
  31. package/dist/types/src/app/components/form-actions.d.ts +1 -0
  32. package/dist/types/src/app/components/form-control.d.ts +10 -0
  33. package/dist/types/src/app/components/grid.d.ts +5 -0
  34. package/dist/types/src/app/components/icon.d.ts +1 -0
  35. package/dist/types/src/app/components/kbd.d.ts +1 -0
  36. package/dist/types/src/app/components/metadata-list.d.ts +1 -0
  37. package/dist/types/src/app/components/metric-tiles.d.ts +1 -0
  38. package/dist/types/src/app/components/progress.d.ts +1 -1
  39. package/dist/types/src/app/components/skeleton.d.ts +1 -1
  40. package/dist/types/src/app/components/stat.d.ts +4 -3
  41. package/dist/types/src/app/components/status-tile.d.ts +3 -2
  42. package/dist/types/src/app/components/table.d.ts +5 -0
  43. package/dist/types/src/app/components/text.d.ts +53 -6
  44. package/dist/types/src/app/components/timestamp.d.ts +1 -0
  45. package/dist/types/src/app/data/manifest-types.d.ts +4 -0
  46. package/dist/types/src/app/design-system/generated-token-refs.d.ts +37 -28
  47. package/dist/types/src/app/design-system/generated-token-values.d.ts +3 -0
  48. package/dist/types/src/app/design-system/tokens.d.ts +117 -15
  49. package/dist/types/src/index.d.ts +43 -40
  50. package/dist/variables.css +41 -33
  51. package/docs/CONSUMING.md +63 -39
  52. package/hirobius.tokens.json +77 -73
  53. package/llms.txt +158 -50
  54. package/mcp/catalog.mjs +366 -0
  55. package/mcp/guide.mjs +315 -0
  56. package/mcp/hds-mcp.mjs +49 -0
  57. package/mcp/server.mjs +94 -0
  58. package/package.json +35 -9
  59. package/public/hds-manifest.json +348 -254
  60. package/public/llms/components.txt +4 -3
  61. package/public/llms/layout.txt +1 -1
  62. package/public/llms-full.txt +190 -70
  63. package/public/llms.txt +158 -50
  64. package/scripts/eslint-plugin-hds/index.d.mts +29 -0
  65. package/scripts/eslint-plugin-hds/index.mjs +55 -0
  66. package/scripts/eslint-plugin-hds/package.json +30 -0
  67. package/scripts/eslint-plugin-hds/rules/no-raw-controls.mjs +47 -0
  68. package/scripts/eslint-plugin-hds/rules/no-raw-hex.mjs +70 -0
  69. package/scripts/eslint-plugin-hds/rules/no-raw-px-spacing.mjs +125 -0
  70. package/scripts/eslint-plugin-hds/rules/prefer-hds-layout-primitive.mjs +54 -0
  71. package/scripts/eslint-plugin-hds/rules/sx-token-first.mjs +111 -0
  72. package/scripts/eslint-plugin-hds/rules/utils.mjs +66 -0
  73. package/src/app/data/component-api.json +114 -53
  74. package/dist/chunks/empty-state-BBqhCx0S.js +0 -1217
  75. package/dist/chunks/form-COP3vK9_.js +0 -66
  76. package/dist/types/src/app/components/status-dot.d.ts +0 -39
@@ -1,1217 +0,0 @@
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
- };