@ansh-ui/react 0.2.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 (111) hide show
  1. package/LICENSE +21 -0
  2. package/dist/chunk-5CFQFMP5.js +178 -0
  3. package/dist/chunk-5CFQFMP5.js.map +1 -0
  4. package/dist/chunk-6VRF7X5C.cjs +164 -0
  5. package/dist/chunk-6VRF7X5C.cjs.map +1 -0
  6. package/dist/chunk-AVPEA5PB.cjs +718 -0
  7. package/dist/chunk-AVPEA5PB.cjs.map +1 -0
  8. package/dist/chunk-C32LKF23.cjs +198 -0
  9. package/dist/chunk-C32LKF23.cjs.map +1 -0
  10. package/dist/chunk-C5JG6TMM.cjs +1200 -0
  11. package/dist/chunk-C5JG6TMM.cjs.map +1 -0
  12. package/dist/chunk-DATBU46V.cjs +614 -0
  13. package/dist/chunk-DATBU46V.cjs.map +1 -0
  14. package/dist/chunk-EGG4CP7C.js +320 -0
  15. package/dist/chunk-EGG4CP7C.js.map +1 -0
  16. package/dist/chunk-H34OXXJU.js +55 -0
  17. package/dist/chunk-H34OXXJU.js.map +1 -0
  18. package/dist/chunk-HO2YSF5O.js +187 -0
  19. package/dist/chunk-HO2YSF5O.js.map +1 -0
  20. package/dist/chunk-HPGCILO4.js +760 -0
  21. package/dist/chunk-HPGCILO4.js.map +1 -0
  22. package/dist/chunk-IBXLC5IE.js +154 -0
  23. package/dist/chunk-IBXLC5IE.js.map +1 -0
  24. package/dist/chunk-LDCZQP3R.js +1185 -0
  25. package/dist/chunk-LDCZQP3R.js.map +1 -0
  26. package/dist/chunk-LXCIXR5T.js +27 -0
  27. package/dist/chunk-LXCIXR5T.js.map +1 -0
  28. package/dist/chunk-O2PX54KX.js +94 -0
  29. package/dist/chunk-O2PX54KX.js.map +1 -0
  30. package/dist/chunk-OHBWBXLO.cjs +101 -0
  31. package/dist/chunk-OHBWBXLO.cjs.map +1 -0
  32. package/dist/chunk-OJN5JBNP.cjs +776 -0
  33. package/dist/chunk-OJN5JBNP.cjs.map +1 -0
  34. package/dist/chunk-OLTS6G5M.js +606 -0
  35. package/dist/chunk-OLTS6G5M.js.map +1 -0
  36. package/dist/chunk-PO5DU3FU.cjs +29 -0
  37. package/dist/chunk-PO5DU3FU.cjs.map +1 -0
  38. package/dist/chunk-QO3E7TJS.js +2940 -0
  39. package/dist/chunk-QO3E7TJS.js.map +1 -0
  40. package/dist/chunk-RHTLNSVW.cjs +2976 -0
  41. package/dist/chunk-RHTLNSVW.cjs.map +1 -0
  42. package/dist/chunk-SFU5EPSN.cjs +61 -0
  43. package/dist/chunk-SFU5EPSN.cjs.map +1 -0
  44. package/dist/chunk-T4AK2KLM.js +699 -0
  45. package/dist/chunk-T4AK2KLM.js.map +1 -0
  46. package/dist/chunk-WGYNCSTP.cjs +333 -0
  47. package/dist/chunk-WGYNCSTP.cjs.map +1 -0
  48. package/dist/chunk-XEP6P7E6.js +279 -0
  49. package/dist/chunk-XEP6P7E6.js.map +1 -0
  50. package/dist/chunk-XMXECSQO.cjs +286 -0
  51. package/dist/chunk-XMXECSQO.cjs.map +1 -0
  52. package/dist/chunk-ZWAFLHC2.cjs +181 -0
  53. package/dist/chunk-ZWAFLHC2.cjs.map +1 -0
  54. package/dist/data.cjs +71 -0
  55. package/dist/data.cjs.map +1 -0
  56. package/dist/data.d.cts +316 -0
  57. package/dist/data.d.ts +316 -0
  58. package/dist/data.js +6 -0
  59. package/dist/data.js.map +1 -0
  60. package/dist/form.cjs +153 -0
  61. package/dist/form.cjs.map +1 -0
  62. package/dist/form.d.cts +660 -0
  63. package/dist/form.d.ts +660 -0
  64. package/dist/form.js +8 -0
  65. package/dist/form.js.map +1 -0
  66. package/dist/index.cjs +1641 -0
  67. package/dist/index.cjs.map +1 -0
  68. package/dist/index.d.cts +552 -0
  69. package/dist/index.d.ts +552 -0
  70. package/dist/index.js +956 -0
  71. package/dist/index.js.map +1 -0
  72. package/dist/layout.cjs +68 -0
  73. package/dist/layout.cjs.map +1 -0
  74. package/dist/layout.d.cts +169 -0
  75. package/dist/layout.d.ts +169 -0
  76. package/dist/layout.js +7 -0
  77. package/dist/layout.js.map +1 -0
  78. package/dist/motion-CQmCq6_k.d.ts +395 -0
  79. package/dist/motion-CSX4g2N8.d.cts +395 -0
  80. package/dist/motion.cjs +79 -0
  81. package/dist/motion.cjs.map +1 -0
  82. package/dist/motion.d.cts +4 -0
  83. package/dist/motion.d.ts +4 -0
  84. package/dist/motion.js +6 -0
  85. package/dist/motion.js.map +1 -0
  86. package/dist/navigation.cjs +48 -0
  87. package/dist/navigation.cjs.map +1 -0
  88. package/dist/navigation.d.cts +210 -0
  89. package/dist/navigation.d.ts +210 -0
  90. package/dist/navigation.js +7 -0
  91. package/dist/navigation.js.map +1 -0
  92. package/dist/overlay.cjs +69 -0
  93. package/dist/overlay.cjs.map +1 -0
  94. package/dist/overlay.d.cts +330 -0
  95. package/dist/overlay.d.ts +330 -0
  96. package/dist/overlay.js +8 -0
  97. package/dist/overlay.js.map +1 -0
  98. package/dist/position-DVScKcaa.d.cts +66 -0
  99. package/dist/position-DVScKcaa.d.ts +66 -0
  100. package/dist/primitives.cjs +162 -0
  101. package/dist/primitives.cjs.map +1 -0
  102. package/dist/primitives.d.cts +294 -0
  103. package/dist/primitives.d.ts +294 -0
  104. package/dist/primitives.js +9 -0
  105. package/dist/primitives.js.map +1 -0
  106. package/dist/sidebar-D-PafAXw.d.cts +71 -0
  107. package/dist/sidebar-D-PafAXw.d.ts +71 -0
  108. package/dist/styles.css +5575 -0
  109. package/dist/use-observers-B9qtimrk.d.cts +99 -0
  110. package/dist/use-observers-B9qtimrk.d.ts +99 -0
  111. package/package.json +92 -0
@@ -0,0 +1,614 @@
1
+ 'use strict';
2
+
3
+ var chunkPO5DU3FU_cjs = require('./chunk-PO5DU3FU.cjs');
4
+ var chunkSFU5EPSN_cjs = require('./chunk-SFU5EPSN.cjs');
5
+ var react = require('react');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+
8
+ function Tabs({
9
+ items,
10
+ value,
11
+ defaultValue,
12
+ onChange,
13
+ variant = "underline",
14
+ orientation = "horizontal",
15
+ size = "md",
16
+ fitted = false,
17
+ activateOnFocus = true,
18
+ label,
19
+ className,
20
+ children
21
+ }) {
22
+ const [active, setActive] = chunkPO5DU3FU_cjs.useControllableState({
23
+ value,
24
+ defaultValue: defaultValue ?? items.find((item) => !item.disabled)?.id ?? "",
25
+ onChange
26
+ });
27
+ const baseId = react.useId();
28
+ const tabRefs = react.useRef([]);
29
+ const activeIndex = items.findIndex((item) => item.id === active);
30
+ const activeItem = items[activeIndex];
31
+ const move = (delta) => {
32
+ if (items.length === 0) return;
33
+ let next = activeIndex < 0 ? 0 : activeIndex;
34
+ for (let attempts = 0; attempts < items.length; attempts++) {
35
+ next = (next + delta + items.length) % items.length;
36
+ if (!items[next]?.disabled) break;
37
+ }
38
+ tabRefs.current[next]?.focus();
39
+ if (activateOnFocus) setActive(items[next].id);
40
+ };
41
+ const onKeyDown = (event) => {
42
+ const forward = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
43
+ const backward = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
44
+ switch (event.key) {
45
+ case forward:
46
+ event.preventDefault();
47
+ move(1);
48
+ break;
49
+ case backward:
50
+ event.preventDefault();
51
+ move(-1);
52
+ break;
53
+ case "Home": {
54
+ event.preventDefault();
55
+ const first = items.findIndex((item) => !item.disabled);
56
+ if (first >= 0) {
57
+ tabRefs.current[first]?.focus();
58
+ if (activateOnFocus) setActive(items[first].id);
59
+ }
60
+ break;
61
+ }
62
+ case "End": {
63
+ event.preventDefault();
64
+ for (let i = items.length - 1; i >= 0; i--) {
65
+ if (!items[i]?.disabled) {
66
+ tabRefs.current[i]?.focus();
67
+ if (activateOnFocus) setActive(items[i].id);
68
+ break;
69
+ }
70
+ }
71
+ break;
72
+ }
73
+ }
74
+ };
75
+ return /* @__PURE__ */ jsxRuntime.jsxs(
76
+ "div",
77
+ {
78
+ className: chunkSFU5EPSN_cjs.cx(
79
+ "ansh-tabs",
80
+ `ansh-tabs--${variant}`,
81
+ `ansh-tabs--${orientation}`,
82
+ `ansh-tabs--${size}`,
83
+ className
84
+ ),
85
+ children: [
86
+ /* @__PURE__ */ jsxRuntime.jsx(
87
+ "div",
88
+ {
89
+ role: "tablist",
90
+ "aria-label": label,
91
+ "aria-orientation": orientation,
92
+ className: chunkSFU5EPSN_cjs.cx("ansh-tabs__list", fitted && "ansh-tabs__list--fitted"),
93
+ onKeyDown,
94
+ children: items.map((item, index) => {
95
+ const selected = item.id === active;
96
+ return /* @__PURE__ */ jsxRuntime.jsxs(
97
+ "button",
98
+ {
99
+ ref: (node) => {
100
+ tabRefs.current[index] = node;
101
+ },
102
+ type: "button",
103
+ role: "tab",
104
+ id: `${baseId}-tab-${item.id}`,
105
+ "aria-selected": selected,
106
+ "aria-controls": `${baseId}-panel-${item.id}`,
107
+ tabIndex: selected ? 0 : -1,
108
+ disabled: item.disabled,
109
+ className: chunkSFU5EPSN_cjs.cx(
110
+ "ansh-tabs__tab",
111
+ selected && "ansh-tabs__tab--active",
112
+ "ansh-focusable"
113
+ ),
114
+ onClick: () => setActive(item.id),
115
+ children: [
116
+ item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-tabs__icon", children: item.icon }) : null,
117
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
118
+ item.badge !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-tabs__badge", children: item.badge }) : null
119
+ ]
120
+ },
121
+ item.id
122
+ );
123
+ })
124
+ }
125
+ ),
126
+ activeItem?.content !== void 0 || children ? /* @__PURE__ */ jsxRuntime.jsx(
127
+ "div",
128
+ {
129
+ role: "tabpanel",
130
+ id: `${baseId}-panel-${active}`,
131
+ "aria-labelledby": `${baseId}-tab-${active}`,
132
+ tabIndex: 0,
133
+ className: "ansh-tabs__panel ansh-focusable",
134
+ children: activeItem?.content ?? children
135
+ }
136
+ ) : null
137
+ ]
138
+ }
139
+ );
140
+ }
141
+ function Breadcrumbs({
142
+ items,
143
+ maxItems = Number.POSITIVE_INFINITY,
144
+ separator,
145
+ className
146
+ }) {
147
+ const [expanded, setExpanded] = react.useState(false);
148
+ const collapsed = !expanded && items.length > maxItems && maxItems >= 2;
149
+ const shown = collapsed ? [items[0], ...items.slice(-2)] : items;
150
+ const gapAfter = collapsed ? 0 : -1;
151
+ const chevron = separator ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
152
+ "path",
153
+ {
154
+ d: "M4.5 2.5L8 6l-3.5 3.5",
155
+ stroke: "currentColor",
156
+ strokeWidth: "1.5",
157
+ fill: "none",
158
+ strokeLinecap: "round",
159
+ strokeLinejoin: "round"
160
+ }
161
+ ) });
162
+ return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: chunkSFU5EPSN_cjs.cx("ansh-breadcrumbs", className), children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "ansh-breadcrumbs__list", children: shown.map((crumb, index) => {
163
+ const isLast = index === shown.length - 1;
164
+ return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "ansh-breadcrumbs__item", children: [
165
+ index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-breadcrumbs__separator", "aria-hidden": "true", children: chevron }) : null,
166
+ isLast ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ansh-breadcrumbs__current", "aria-current": "page", children: [
167
+ crumb.icon,
168
+ crumb.label
169
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
170
+ "a",
171
+ {
172
+ href: crumb.href ?? "#",
173
+ className: "ansh-breadcrumbs__link ansh-focusable",
174
+ onClick: crumb.onClick ? (event) => {
175
+ event.preventDefault();
176
+ crumb.onClick();
177
+ } : void 0,
178
+ children: [
179
+ crumb.icon,
180
+ crumb.label
181
+ ]
182
+ }
183
+ ),
184
+ index === gapAfter ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
185
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-breadcrumbs__separator", "aria-hidden": "true", children: chevron }),
186
+ /* @__PURE__ */ jsxRuntime.jsx(
187
+ "button",
188
+ {
189
+ type: "button",
190
+ className: "ansh-breadcrumbs__more ansh-focusable",
191
+ "aria-label": `Show ${items.length - 3} hidden breadcrumbs`,
192
+ "aria-expanded": false,
193
+ onClick: () => setExpanded(true),
194
+ children: "\u2026"
195
+ }
196
+ )
197
+ ] }) : null
198
+ ] }, index);
199
+ }) }) });
200
+ }
201
+ function Stepper({
202
+ steps,
203
+ current,
204
+ onStepChange,
205
+ orientation = "horizontal",
206
+ className
207
+ }) {
208
+ return /* @__PURE__ */ jsxRuntime.jsx(
209
+ "nav",
210
+ {
211
+ className: chunkSFU5EPSN_cjs.cx("ansh-stepper", `ansh-stepper--${orientation}`, className),
212
+ "aria-label": "Progress",
213
+ children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "ansh-stepper__list", children: steps.map((step, index) => {
214
+ const complete = index < current;
215
+ const active = index === current;
216
+ const state = step.error ? "error" : complete ? "complete" : active ? "current" : "upcoming";
217
+ const interactive = step.clickable && onStepChange && index !== current;
218
+ const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
219
+ /* @__PURE__ */ jsxRuntime.jsx(
220
+ "span",
221
+ {
222
+ className: chunkSFU5EPSN_cjs.cx("ansh-stepper__marker", `ansh-stepper__marker--${state}`),
223
+ "aria-hidden": "true",
224
+ children: step.error ? "!" : complete ? /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", width: "12", height: "12", children: /* @__PURE__ */ jsxRuntime.jsx(
225
+ "path",
226
+ {
227
+ d: "M2.5 7.5l3 3 6-6.5",
228
+ stroke: "currentColor",
229
+ strokeWidth: "2",
230
+ strokeLinecap: "round",
231
+ strokeLinejoin: "round",
232
+ fill: "none"
233
+ }
234
+ ) }) : index + 1
235
+ }
236
+ ),
237
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ansh-stepper__text", children: [
238
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-stepper__label", children: step.label }),
239
+ step.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-stepper__description", children: step.description }) : null,
240
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-visually-hidden", children: step.error ? " \u2014 has errors" : complete ? " \u2014 completed" : active ? " \u2014 current step" : " \u2014 not started" })
241
+ ] })
242
+ ] });
243
+ return /* @__PURE__ */ jsxRuntime.jsx(
244
+ "li",
245
+ {
246
+ className: chunkSFU5EPSN_cjs.cx("ansh-stepper__item", `ansh-stepper__item--${state}`),
247
+ "aria-current": active ? "step" : void 0,
248
+ children: interactive ? /* @__PURE__ */ jsxRuntime.jsx(
249
+ "button",
250
+ {
251
+ type: "button",
252
+ className: "ansh-stepper__button ansh-focusable",
253
+ onClick: () => onStepChange(index),
254
+ children: inner
255
+ }
256
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-stepper__button", children: inner })
257
+ },
258
+ step.id
259
+ );
260
+ }) })
261
+ }
262
+ );
263
+ }
264
+ function NavigationMenu({
265
+ items,
266
+ label = "Main navigation",
267
+ className
268
+ }) {
269
+ const [openId, setOpenId] = react.useState(null);
270
+ const timerRef = react.useRef(void 0);
271
+ const rootRef = react.useRef(null);
272
+ const baseId = react.useId();
273
+ const schedule = (next, delay) => {
274
+ clearTimeout(timerRef.current);
275
+ timerRef.current = setTimeout(() => setOpenId(next), delay);
276
+ };
277
+ react.useEffect(() => () => clearTimeout(timerRef.current), []);
278
+ react.useEffect(() => {
279
+ if (!openId) return;
280
+ const root = rootRef.current;
281
+ if (!root) return;
282
+ const onFocusOut = (event) => {
283
+ const next = event.relatedTarget;
284
+ if (next && root.contains(next)) return;
285
+ setOpenId(null);
286
+ };
287
+ const onKeyDown = (event) => {
288
+ if (event.key !== "Escape") return;
289
+ setOpenId(null);
290
+ root.querySelector(`[aria-expanded="true"]`)?.focus();
291
+ };
292
+ root.addEventListener("focusout", onFocusOut);
293
+ document.addEventListener("keydown", onKeyDown);
294
+ return () => {
295
+ root.removeEventListener("focusout", onFocusOut);
296
+ document.removeEventListener("keydown", onKeyDown);
297
+ };
298
+ }, [openId]);
299
+ return /* @__PURE__ */ jsxRuntime.jsx(
300
+ "nav",
301
+ {
302
+ ref: rootRef,
303
+ className: chunkSFU5EPSN_cjs.cx("ansh-navmenu", className),
304
+ "aria-label": label,
305
+ onMouseLeave: () => schedule(null, 200),
306
+ children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ansh-navmenu__list", children: items.map((item) => {
307
+ const hasPanel = Boolean(item.columns?.length);
308
+ const open = openId === item.id;
309
+ const panelId = `${baseId}-${item.id}`;
310
+ if (!hasPanel) {
311
+ return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ansh-navmenu__item", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href ?? "#", className: "ansh-navmenu__link ansh-focusable", children: item.label }) }, item.id);
312
+ }
313
+ return /* @__PURE__ */ jsxRuntime.jsxs(
314
+ "li",
315
+ {
316
+ className: chunkSFU5EPSN_cjs.cx("ansh-navmenu__item", open && "ansh-navmenu__item--open"),
317
+ onMouseEnter: () => schedule(item.id, 80),
318
+ children: [
319
+ /* @__PURE__ */ jsxRuntime.jsxs(
320
+ "button",
321
+ {
322
+ type: "button",
323
+ className: "ansh-navmenu__link ansh-navmenu__link--trigger ansh-focusable",
324
+ "aria-expanded": open,
325
+ "aria-controls": panelId,
326
+ onClick: () => setOpenId(open ? null : item.id),
327
+ onKeyDown: (event) => {
328
+ if (event.key === "ArrowDown") {
329
+ event.preventDefault();
330
+ setOpenId(item.id);
331
+ requestAnimationFrame(() => {
332
+ document.getElementById(panelId)?.querySelector("a, button")?.focus();
333
+ });
334
+ }
335
+ },
336
+ children: [
337
+ item.label,
338
+ /* @__PURE__ */ jsxRuntime.jsx(
339
+ "span",
340
+ {
341
+ className: chunkSFU5EPSN_cjs.cx("ansh-navmenu__chevron", open && "ansh-navmenu__chevron--open"),
342
+ "aria-hidden": "true",
343
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", width: "10", height: "10", children: /* @__PURE__ */ jsxRuntime.jsx(
344
+ "path",
345
+ {
346
+ d: "M3 4.5L6 7.5l3-3",
347
+ stroke: "currentColor",
348
+ strokeWidth: "1.5",
349
+ fill: "none",
350
+ strokeLinecap: "round",
351
+ strokeLinejoin: "round"
352
+ }
353
+ ) })
354
+ }
355
+ )
356
+ ]
357
+ }
358
+ ),
359
+ /* @__PURE__ */ jsxRuntime.jsx(
360
+ "div",
361
+ {
362
+ id: panelId,
363
+ className: "ansh-navmenu__panel",
364
+ hidden: !open,
365
+ onMouseEnter: () => clearTimeout(timerRef.current),
366
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ansh-navmenu__grid", children: [
367
+ item.columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ansh-navmenu__column", children: [
368
+ column.heading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ansh-navmenu__heading", children: column.heading }) : null,
369
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ansh-navmenu__links", children: column.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
370
+ "a",
371
+ {
372
+ href: link.href ?? "#",
373
+ className: "ansh-navmenu__entry ansh-focusable",
374
+ onClick: link.onClick ? (event) => {
375
+ event.preventDefault();
376
+ link.onClick();
377
+ setOpenId(null);
378
+ } : () => setOpenId(null),
379
+ children: [
380
+ link.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-navmenu__icon", "aria-hidden": "true", children: link.icon }) : null,
381
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ansh-navmenu__entry-text", children: [
382
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-navmenu__entry-label", children: link.label }),
383
+ link.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-navmenu__entry-description", children: link.description }) : null
384
+ ] })
385
+ ]
386
+ }
387
+ ) }, link.id)) })
388
+ ] }, column.id)),
389
+ item.feature ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ansh-navmenu__feature", children: item.feature }) : null
390
+ ] })
391
+ }
392
+ )
393
+ ]
394
+ },
395
+ item.id
396
+ );
397
+ }) })
398
+ }
399
+ );
400
+ }
401
+ function Collapsible({
402
+ open,
403
+ defaultOpen = false,
404
+ onOpenChange,
405
+ trigger,
406
+ bare = false,
407
+ className,
408
+ children
409
+ }) {
410
+ const [isOpen, setOpen] = chunkPO5DU3FU_cjs.useControllableState({
411
+ value: open,
412
+ defaultValue: defaultOpen,
413
+ onChange: onOpenChange
414
+ });
415
+ const id = react.useId();
416
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkSFU5EPSN_cjs.cx("ansh-collapsible", className), "data-state": isOpen ? "open" : "closed", children: [
417
+ /* @__PURE__ */ jsxRuntime.jsxs(
418
+ "button",
419
+ {
420
+ type: "button",
421
+ className: chunkSFU5EPSN_cjs.cx(
422
+ bare ? "ansh-collapsible__bare" : "ansh-collapsible__trigger",
423
+ "ansh-focusable"
424
+ ),
425
+ "aria-expanded": isOpen,
426
+ "aria-controls": id,
427
+ onClick: () => setOpen(!isOpen),
428
+ children: [
429
+ trigger,
430
+ /* @__PURE__ */ jsxRuntime.jsx(
431
+ "span",
432
+ {
433
+ className: chunkSFU5EPSN_cjs.cx("ansh-collapsible__chevron", isOpen && "ansh-collapsible__chevron--open"),
434
+ "aria-hidden": "true",
435
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsxRuntime.jsx(
436
+ "path",
437
+ {
438
+ d: "M3 4.5L6 7.5l3-3",
439
+ stroke: "currentColor",
440
+ strokeWidth: "1.5",
441
+ fill: "none",
442
+ strokeLinecap: "round",
443
+ strokeLinejoin: "round"
444
+ }
445
+ ) })
446
+ }
447
+ )
448
+ ]
449
+ }
450
+ ),
451
+ /* @__PURE__ */ jsxRuntime.jsx(
452
+ "div",
453
+ {
454
+ className: "ansh-collapsible__region",
455
+ id,
456
+ role: "region",
457
+ "data-state": isOpen ? "open" : "closed",
458
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ansh-collapsible__inner", ...isOpen ? null : { inert: true }, children })
459
+ }
460
+ )
461
+ ] });
462
+ }
463
+ function Accordion({
464
+ items,
465
+ multiple = false,
466
+ value,
467
+ defaultValue = [],
468
+ onChange,
469
+ variant = "bordered",
470
+ className
471
+ }) {
472
+ const [openIds, setOpenIds] = chunkPO5DU3FU_cjs.useControllableState({
473
+ value,
474
+ defaultValue,
475
+ onChange
476
+ });
477
+ const baseId = react.useId();
478
+ const headerRefs = react.useRef([]);
479
+ const toggle = (id) => {
480
+ if (openIds.includes(id)) {
481
+ setOpenIds(openIds.filter((entry) => entry !== id));
482
+ } else {
483
+ setOpenIds(multiple ? [...openIds, id] : [id]);
484
+ }
485
+ };
486
+ const onKeyDown = (index) => (event) => {
487
+ const enabled = items.map((item, i) => ({ item, i })).filter(({ item }) => !item.disabled).map(({ i }) => i);
488
+ const position = enabled.indexOf(index);
489
+ let next;
490
+ switch (event.key) {
491
+ case "ArrowDown":
492
+ next = enabled[(position + 1) % enabled.length];
493
+ break;
494
+ case "ArrowUp":
495
+ next = enabled[(position - 1 + enabled.length) % enabled.length];
496
+ break;
497
+ case "Home":
498
+ next = enabled[0];
499
+ break;
500
+ case "End":
501
+ next = enabled[enabled.length - 1];
502
+ break;
503
+ default:
504
+ return;
505
+ }
506
+ event.preventDefault();
507
+ if (next !== void 0) headerRefs.current[next]?.focus();
508
+ };
509
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSFU5EPSN_cjs.cx("ansh-accordion", `ansh-accordion--${variant}`, className), children: items.map((item, index) => {
510
+ const open = openIds.includes(item.id);
511
+ const panelId = `${baseId}-panel-${item.id}`;
512
+ const headerId = `${baseId}-header-${item.id}`;
513
+ return /* @__PURE__ */ jsxRuntime.jsxs(
514
+ "div",
515
+ {
516
+ className: chunkSFU5EPSN_cjs.cx("ansh-accordion__item", open && "ansh-accordion__item--open"),
517
+ "data-state": open ? "open" : "closed",
518
+ children: [
519
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ansh-accordion__heading", children: /* @__PURE__ */ jsxRuntime.jsxs(
520
+ "button",
521
+ {
522
+ ref: (node) => {
523
+ headerRefs.current[index] = node;
524
+ },
525
+ type: "button",
526
+ id: headerId,
527
+ className: "ansh-accordion__trigger ansh-focusable",
528
+ "aria-expanded": open,
529
+ "aria-controls": panelId,
530
+ disabled: item.disabled,
531
+ onClick: () => toggle(item.id),
532
+ onKeyDown: onKeyDown(index),
533
+ children: [
534
+ item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-accordion__icon", children: item.icon }) : null,
535
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ansh-accordion__text", children: [
536
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-accordion__title", children: item.title }),
537
+ item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ansh-accordion__subtitle", children: item.subtitle }) : null
538
+ ] }),
539
+ /* @__PURE__ */ jsxRuntime.jsx(
540
+ "span",
541
+ {
542
+ className: chunkSFU5EPSN_cjs.cx("ansh-accordion__chevron", open && "ansh-accordion__chevron--open"),
543
+ "aria-hidden": "true",
544
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsxRuntime.jsx(
545
+ "path",
546
+ {
547
+ d: "M3 4.5L6 7.5l3-3",
548
+ stroke: "currentColor",
549
+ strokeWidth: "1.5",
550
+ fill: "none",
551
+ strokeLinecap: "round",
552
+ strokeLinejoin: "round"
553
+ }
554
+ ) })
555
+ }
556
+ )
557
+ ]
558
+ }
559
+ ) }),
560
+ /* @__PURE__ */ jsxRuntime.jsx(
561
+ "div",
562
+ {
563
+ className: "ansh-accordion__region",
564
+ id: panelId,
565
+ role: "region",
566
+ "aria-labelledby": headerId,
567
+ "data-state": open ? "open" : "closed",
568
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ansh-accordion__panel", ...open ? null : { inert: true }, children: item.content })
569
+ }
570
+ )
571
+ ]
572
+ },
573
+ item.id
574
+ );
575
+ }) });
576
+ }
577
+ function DisclosureList({
578
+ items,
579
+ initial = 3,
580
+ moreLabel = (hidden) => `Show ${hidden} more`,
581
+ lessLabel = "Show less",
582
+ className
583
+ }) {
584
+ const [expanded, setExpanded] = react.useState(false);
585
+ const id = react.useId();
586
+ const hidden = items.length - initial;
587
+ if (hidden <= 0) {
588
+ return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: chunkSFU5EPSN_cjs.cx("ansh-disclosure-list", className), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item }, index)) });
589
+ }
590
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
591
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ansh-disclosure-list", id, children: (expanded ? items : items.slice(0, initial)).map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item }, index)) }),
592
+ /* @__PURE__ */ jsxRuntime.jsx(
593
+ "button",
594
+ {
595
+ type: "button",
596
+ className: "ansh-disclosure-list__toggle ansh-focusable",
597
+ "aria-expanded": expanded,
598
+ "aria-controls": id,
599
+ onClick: () => setExpanded((v) => !v),
600
+ children: expanded ? lessLabel : moreLabel(hidden)
601
+ }
602
+ )
603
+ ] });
604
+ }
605
+
606
+ exports.Accordion = Accordion;
607
+ exports.Breadcrumbs = Breadcrumbs;
608
+ exports.Collapsible = Collapsible;
609
+ exports.DisclosureList = DisclosureList;
610
+ exports.NavigationMenu = NavigationMenu;
611
+ exports.Stepper = Stepper;
612
+ exports.Tabs = Tabs;
613
+ //# sourceMappingURL=chunk-DATBU46V.cjs.map
614
+ //# sourceMappingURL=chunk-DATBU46V.cjs.map