@actioneer/ads 0.5.7 → 0.5.9

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 (147) hide show
  1. package/bin/ads-init.mjs +6 -0
  2. package/components/accordion.js +50 -48
  3. package/components/agent-icon.d.ts +12 -0
  4. package/components/agent-icon.js +133 -120
  5. package/components/ai-elements/chain-of-thought.d.ts +1 -1
  6. package/components/ai-elements/chain-of-thought.js +108 -108
  7. package/components/ai-elements/chart.js +16 -14
  8. package/components/ai-elements/inline-citation.js +41 -41
  9. package/components/ai-elements/message.js +4 -4
  10. package/components/ai-elements/queue.js +7 -7
  11. package/components/ai-elements/research-activity.js +114 -114
  12. package/components/ai-elements/shimmer.d.ts +2 -2
  13. package/components/ai-elements/speech-input.js +28 -28
  14. package/components/ai-elements/task-progress.js +26 -16
  15. package/components/ai-elements/task.js +17 -17
  16. package/components/ai-elements/tool.js +6 -6
  17. package/components/ai-elements/transcript.js +6 -5
  18. package/components/ai-elements/voice.js +1 -1
  19. package/components/alert.js +10 -10
  20. package/components/answer-sources.js +1 -1
  21. package/components/answer.js +115 -114
  22. package/components/assistant-ui/action-bar.js +94 -48
  23. package/components/assistant-ui/attachment.js +103 -75
  24. package/components/assistant-ui/badge.d.ts +1 -1
  25. package/components/assistant-ui/badge.js +17 -17
  26. package/components/assistant-ui/chain-of-thought.d.ts +1 -1
  27. package/components/assistant-ui/composer-add-context.js +9 -9
  28. package/components/assistant-ui/composer-deep-research.js +5 -5
  29. package/components/assistant-ui/composer-harness.js +11 -9
  30. package/components/assistant-ui/composer-trigger-popover.js +45 -34
  31. package/components/assistant-ui/composer.js +59 -59
  32. package/components/assistant-ui/error.js +14 -14
  33. package/components/assistant-ui/file.d.ts +1 -1
  34. package/components/assistant-ui/image.d.ts +1 -1
  35. package/components/assistant-ui/image.js +113 -103
  36. package/components/assistant-ui/markdown-text.js +18 -18
  37. package/components/assistant-ui/message.js +46 -45
  38. package/components/assistant-ui/quote.js +1 -1
  39. package/components/assistant-ui/reasoning.d.ts +1 -1
  40. package/components/assistant-ui/reasoning.js +66 -77
  41. package/components/assistant-ui/suggestions.js +4 -4
  42. package/components/assistant-ui/thread.js +22 -22
  43. package/components/assistant-ui/tool-fallback.js +60 -63
  44. package/components/assistant-ui/tool-group.d.ts +1 -1
  45. package/components/assistant-ui/tool-group.js +36 -42
  46. package/components/audio-waveform.js +25 -24
  47. package/components/autocomplete.d.ts +1 -0
  48. package/components/autocomplete.js +45 -43
  49. package/components/avatar.d.ts +1 -0
  50. package/components/avatar.js +27 -26
  51. package/components/badge.d.ts +1 -1
  52. package/components/breadcrumbs.d.ts +2 -0
  53. package/components/breadcrumbs.js +52 -50
  54. package/components/button.d.ts +2 -2
  55. package/components/button.js +22 -20
  56. package/components/card.js +8 -8
  57. package/components/carousel.js +105 -104
  58. package/components/chart.d.ts +6 -0
  59. package/components/chart.js +743 -672
  60. package/components/checkbox.js +74 -38
  61. package/components/chip.d.ts +1 -1
  62. package/components/code-block.js +3 -3
  63. package/components/collapsible.js +67 -23
  64. package/components/connector-card.js +6 -6
  65. package/components/drawer.d.ts +18 -11
  66. package/components/drawer.js +81 -78
  67. package/components/dropdown.d.ts +2 -0
  68. package/components/dropdown.js +88 -79
  69. package/components/empty-state.d.ts +1 -1
  70. package/components/empty-state.js +7 -7
  71. package/components/field.d.ts +4 -0
  72. package/components/field.js +45 -34
  73. package/components/file-dropzone.js +12 -12
  74. package/components/index.d.ts +3 -0
  75. package/components/index.js +584 -558
  76. package/components/input-field.js +51 -46
  77. package/components/input.js +20 -20
  78. package/components/link.js +9 -9
  79. package/components/modal.d.ts +5 -1
  80. package/components/modal.js +121 -76
  81. package/components/navbar.d.ts +1 -1
  82. package/components/navbar.js +1 -1
  83. package/components/number-field.js +38 -29
  84. package/components/page-header.js +12 -12
  85. package/components/pagination.js +19 -19
  86. package/components/panel.js +2 -2
  87. package/components/pixel-blast-svg.js +3 -3
  88. package/components/pixel-icon.d.ts +4 -0
  89. package/components/pixel-icon.js +210 -164
  90. package/components/popover.d.ts +1 -1
  91. package/components/popover.js +66 -64
  92. package/components/progress-circle.js +36 -32
  93. package/components/progress.js +28 -24
  94. package/components/radio.js +59 -49
  95. package/components/resizable-panel.js +1 -1
  96. package/components/reveal.d.ts +2 -2
  97. package/components/ripple.d.ts +3 -3
  98. package/components/scroll-area.js +17 -16
  99. package/components/segmented.d.ts +1 -0
  100. package/components/segmented.js +39 -36
  101. package/components/select.d.ts +7 -0
  102. package/components/select.js +186 -137
  103. package/components/setting-row.js +45 -42
  104. package/components/sidebar.js +131 -127
  105. package/components/skeleton.js +5 -5
  106. package/components/spinner.d.ts +13 -4
  107. package/components/spinner.js +42 -42
  108. package/components/stepper.js +21 -21
  109. package/components/switch.js +41 -39
  110. package/components/table.d.ts +16 -0
  111. package/components/table.js +393 -260
  112. package/components/tabs.js +149 -137
  113. package/components/toast.js +66 -66
  114. package/components/tooltip.js +2 -2
  115. package/components/tree.js +62 -51
  116. package/components/typography.d.ts +2 -1
  117. package/components/typography.js +33 -32
  118. package/components/ui/button.d.ts +2 -2
  119. package/components/ui/button.js +19 -19
  120. package/components/ui/collapsible.d.ts +1 -5
  121. package/components/ui/dialog.d.ts +3 -3
  122. package/components/ui/dialog.js +95 -58
  123. package/components/ui/tooltip.d.ts +2 -2
  124. package/components/ui/tooltip.js +67 -33
  125. package/components/viz-charts.js +95 -95
  126. package/demo/components/add-to-artifact.js +363 -0
  127. package/demo/lib/artifact-library.js +142 -0
  128. package/demo/lib/artifact-pin-guard.js +12 -0
  129. package/fonts/aribau-grotesk-medium.woff2 +0 -0
  130. package/fonts/aribau-grotesk-regular.woff2 +0 -0
  131. package/fonts.css +11 -11
  132. package/hooks/agents-ui/use-agent-audio-visualizer-aura.js +17 -16
  133. package/hooks/agents-ui/use-agent-audio-visualizer-wave.js +21 -20
  134. package/lib/icons.d.ts +24 -0
  135. package/lib/icons.js +114 -108
  136. package/lib/motion.d.ts +42 -39
  137. package/lib/motion.js +112 -52
  138. package/lib/spinner-mark.d.ts +9 -0
  139. package/lib/spinner-mark.js +98 -0
  140. package/llms.txt +53 -19
  141. package/manifest.json +258 -36
  142. package/package.json +1 -1
  143. package/styles.css +143 -124
  144. package/theme.css +90 -93
  145. package/components/ui/collapsible.js +0 -35
  146. package/fonts/aribau-grotesk-500.otf +0 -0
  147. package/fonts/aribau-grotesk-600.woff2 +0 -0
@@ -1,91 +1,96 @@
1
1
  "use client";
2
- import { jsx as e, jsxs as j } from "react/jsx-runtime";
2
+ import { jsx as e, jsxs as _ } from "react/jsx-runtime";
3
3
  import * as a from "react";
4
- import { cn as k } from "../lib/cn.js";
5
- import { EyeOff as B, Eye as S } from "../lib/icons.js";
6
- import { inputBaseClass as _, Field as C } from "./field.js";
7
- const H = {
4
+ import { cn as $ } from "../lib/cn.js";
5
+ import { EyeOff as C, Eye as H } from "../lib/icons.js";
6
+ import { inputBaseClass as O, Field as A } from "./field.js";
7
+ const D = {
8
8
  sm: "h-8 text-xs",
9
9
  md: "h-10 text-xs",
10
10
  lg: "h-11 text-base"
11
- }, O = a.forwardRef(
11
+ }, G = a.forwardRef(
12
12
  ({
13
13
  // Field props
14
14
  label: l,
15
- description: d,
15
+ description: r,
16
16
  error: s,
17
17
  required: c,
18
- className: w,
18
+ className: N,
19
19
  // Input props
20
- id: y,
21
- inputClassName: b,
22
- size: N = "md",
23
- startContent: o,
24
- endContent: z,
20
+ id: I,
21
+ inputClassName: z,
22
+ size: B = "md",
23
+ startContent: t,
24
+ endContent: E,
25
25
  isInvalid: u,
26
26
  type: f,
27
- multiline: i = !1,
28
- rows: E,
27
+ multiline: n = !1,
28
+ rows: F,
29
+ "aria-describedby": j,
29
30
  ...p
30
31
  }, m) => {
31
- const F = a.useId(), r = y ?? F, [n, I] = a.useState(!1), x = !i && f === "password", t = z ?? (x ? /* @__PURE__ */ e(
32
+ const R = a.useId(), o = I ?? R, x = `${o}-error`, g = `${o}-description`, v = [j, s ? x : r ? g : null].filter(Boolean).join(" ") || void 0, [d, k] = a.useState(!1), h = !n && f === "password", i = E ?? (h ? /* @__PURE__ */ e(
32
33
  "button",
33
34
  {
34
35
  type: "button",
35
- "aria-label": n ? "Hide password" : "Show password",
36
- onClick: () => I((R) => !R),
36
+ "aria-label": d ? "Hide password" : "Show password",
37
+ onClick: () => k((S) => !S),
37
38
  className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
38
- children: n ? /* @__PURE__ */ e(B, {}) : /* @__PURE__ */ e(S, {})
39
+ children: d ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(H, {})
39
40
  }
40
- ) : void 0), g = k(
41
- _,
42
- i ? "min-h-20 resize-y py-2 text-xs" : H[N],
43
- o && "pl-9",
44
- t && "pr-9",
45
- b
46
- ), h = i ? /* @__PURE__ */ e(
41
+ ) : void 0), b = $(
42
+ O,
43
+ n ? "min-h-20 resize-y py-2 text-xs" : D[B],
44
+ t && "pl-9",
45
+ i && "pr-9",
46
+ z
47
+ ), y = n ? /* @__PURE__ */ e(
47
48
  "textarea",
48
49
  {
49
50
  ref: m,
50
- id: r,
51
- rows: E ?? 3,
51
+ id: o,
52
+ rows: F ?? 3,
52
53
  "aria-invalid": u || !!s || void 0,
53
- className: g,
54
+ "aria-describedby": v,
55
+ className: b,
54
56
  ...p
55
57
  }
56
58
  ) : /* @__PURE__ */ e(
57
59
  "input",
58
60
  {
59
61
  ref: m,
60
- id: r,
61
- type: x && n ? "text" : f,
62
+ id: o,
63
+ type: h && d ? "text" : f,
62
64
  "aria-invalid": u || !!s || void 0,
63
- className: g,
65
+ "aria-describedby": v,
66
+ className: b,
64
67
  ...p
65
68
  }
66
- ), v = o || t ? (
69
+ ), w = t || i ? (
67
70
  // group/field: adornment icons follow the field's interactive states.
68
- /* @__PURE__ */ j("div", { className: "group/field relative w-full", children: [
69
- o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
70
- h,
71
- t && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: t })
71
+ /* @__PURE__ */ _("div", { className: "group/field relative w-full", children: [
72
+ t && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: t }),
73
+ y,
74
+ i && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: i })
72
75
  ] })
73
- ) : h;
74
- return !l && !d && !s && !c ? v : /* @__PURE__ */ e(
75
- C,
76
+ ) : y;
77
+ return !l && !r && !s && !c ? w : /* @__PURE__ */ e(
78
+ A,
76
79
  {
77
80
  label: l,
78
- description: d,
81
+ description: r,
79
82
  error: s,
80
83
  required: c,
81
- htmlFor: r,
82
- className: w,
83
- children: v
84
+ htmlFor: o,
85
+ errorId: x,
86
+ descriptionId: g,
87
+ className: N,
88
+ children: w
84
89
  }
85
90
  );
86
91
  }
87
92
  );
88
- O.displayName = "InputField";
93
+ G.displayName = "InputField";
89
94
  export {
90
- O as InputField
95
+ G as InputField
91
96
  };
@@ -1,56 +1,56 @@
1
1
  "use client";
2
2
  import { jsx as e, jsxs as g } from "react/jsx-runtime";
3
- import * as l from "react";
3
+ import * as d from "react";
4
4
  import { cn as v } from "../lib/cn.js";
5
5
  import { EyeOff as h, Eye as w } from "../lib/icons.js";
6
6
  import { inputBaseClass as b } from "./field.js";
7
7
  const y = {
8
- sm: "h-8 text-xs",
9
- md: "h-10 text-xs",
10
- lg: "h-11 text-base"
11
- }, N = l.forwardRef(
8
+ sm: "h-8 rounded-sm text-xs",
9
+ md: "h-10 rounded-md text-xs",
10
+ lg: "h-11 rounded-md text-base"
11
+ }, N = d.forwardRef(
12
12
  ({
13
- className: a,
14
- size: d = "md",
13
+ className: l,
14
+ size: a = "md",
15
15
  startContent: o,
16
16
  endContent: u,
17
17
  isInvalid: f,
18
18
  type: t,
19
19
  ...c
20
- }, p) => {
21
- const [r, m] = l.useState(!1), i = t === "password", s = u ?? (i ? /* @__PURE__ */ e(
20
+ }, m) => {
21
+ const [s, p] = d.useState(!1), i = t === "password", r = u ?? (i ? /* @__PURE__ */ e(
22
22
  "button",
23
23
  {
24
24
  type: "button",
25
- "aria-label": r ? "Hide password" : "Show password",
26
- onClick: () => m((x) => !x),
25
+ "aria-label": s ? "Hide password" : "Show password",
26
+ onClick: () => p((x) => !x),
27
27
  className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
28
- children: r ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(w, {})
28
+ children: s ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(w, {})
29
29
  }
30
30
  ) : void 0), n = /* @__PURE__ */ e(
31
31
  "input",
32
32
  {
33
- ref: p,
34
- type: i && r ? "text" : t,
33
+ ref: m,
34
+ type: i && s ? "text" : t,
35
35
  "aria-invalid": f || void 0,
36
36
  className: v(
37
37
  b,
38
- y[d],
38
+ y[a],
39
39
  o && "pl-9",
40
- s && "pr-9",
41
- a
40
+ r && "pr-9",
41
+ l
42
42
  ),
43
43
  ...c
44
44
  }
45
45
  );
46
- return !o && !s ? n : (
46
+ return !o && !r ? n : (
47
47
  // group/field: adornment icons follow the field's interactive states —
48
48
  // muted at rest, full black while hovered/focused (same signal as the
49
49
  // border snapping to brand).
50
50
  /* @__PURE__ */ g("div", { className: "group/field relative w-full", children: [
51
- o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
51
+ o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
52
52
  n,
53
- s && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: s })
53
+ r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: r })
54
54
  ] })
55
55
  );
56
56
  }
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsxs as e, jsx as o } from "react/jsx-runtime";
2
+ import { jsxs as r, jsx as o } from "react/jsx-runtime";
3
3
  import * as u from "react";
4
4
  import { ArrowUpRight as t } from "../lib/icons.js";
5
5
  import { cn as d } from "../lib/cn.js";
@@ -8,17 +8,17 @@ const c = {
8
8
  muted: "text-muted-foreground",
9
9
  primary: "text-brand"
10
10
  }, f = u.forwardRef(
11
- ({ className: n, color: a = "default", isExternal: r = !1, children: i, ...s }, l) => /* @__PURE__ */ e(
11
+ ({ className: n, color: a = "default", isExternal: e = !1, children: i, ...s }, l) => /* @__PURE__ */ r(
12
12
  "a",
13
13
  {
14
14
  ref: l,
15
- target: r ? "_blank" : void 0,
16
- rel: r ? "noopener noreferrer" : void 0,
15
+ target: e ? "_blank" : void 0,
16
+ rel: e ? "noopener noreferrer" : void 0,
17
17
  className: d(
18
18
  // Links read as links by WEIGHT at rest (bold against body copy);
19
19
  // the underline is a hover/focus affordance. Underline spec: dotted,
20
20
  // 12% thickness, 24% offset, skip-ink, auto (current) color.
21
- "group/link inline-flex items-center gap-1 rounded-xs font-semibold",
21
+ "group/link inline-flex items-center gap-1 rounded-xs font-medium",
22
22
  "hover:underline focus-visible:underline decoration-dotted decoration-[0.12em] underline-offset-[0.24em]",
23
23
  "outline-none focus-visible:ring-3 focus-visible:ring-ring",
24
24
  c[a],
@@ -27,7 +27,7 @@ const c = {
27
27
  ...s,
28
28
  children: [
29
29
  i,
30
- r && // Two arrows stacked in a clipped box, driven by a single group-hover
30
+ e && // Two arrows stacked in a clipped box, driven by a single group-hover
31
31
  // CSS var (`--arrow-out`). At rest, arrow A sits centered and arrow B
32
32
  // is parked bottom-left off the viewport (--arrow-out = 0). On hover,
33
33
  // --arrow-out = 1: A slides up-right out of the frame, B slides in to
@@ -35,7 +35,7 @@ const c = {
35
35
  // destination. Space is reserved so the label never shifts.
36
36
  // (Inline style — Tailwind's arbitrary translate utilities weren't
37
37
  // being generated by the JIT for these specific values.)
38
- /* @__PURE__ */ e(
38
+ /* @__PURE__ */ r(
39
39
  "span",
40
40
  {
41
41
  "aria-hidden": !0,
@@ -44,7 +44,7 @@ const c = {
44
44
  /* @__PURE__ */ o(
45
45
  t,
46
46
  {
47
- className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
47
+ className: "absolute inset-0 size-full transition-transform duration-150 ease-out motion-reduce:transition-none",
48
48
  style: {
49
49
  transform: "translate(calc(var(--arrow-out) * 100%), calc(var(--arrow-out) * -100%))"
50
50
  }
@@ -53,7 +53,7 @@ const c = {
53
53
  /* @__PURE__ */ o(
54
54
  t,
55
55
  {
56
- className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
56
+ className: "absolute inset-0 size-full transition-transform duration-150 ease-out motion-reduce:transition-none",
57
57
  style: {
58
58
  transform: "translate(calc((var(--arrow-out) - 1) * 100%), calc((1 - var(--arrow-out)) * 100%))"
59
59
  }
@@ -8,8 +8,12 @@ export interface ModalProps extends VariantProps<typeof panelVariants> {
8
8
  onOpenChange: (open: boolean) => void;
9
9
  className?: string;
10
10
  children: React.ReactNode;
11
+ showCloseButton?: boolean;
12
+ "aria-label"?: string;
13
+ "aria-labelledby"?: string;
14
+ "aria-describedby"?: string;
11
15
  }
12
- export declare function Modal({ open, onOpenChange, size, className, children }: ModalProps): React.ReactPortal;
16
+ export declare function Modal({ open, onOpenChange, size, className, children, showCloseButton, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.ReactPortal;
13
17
  export declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
14
18
  export declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
15
19
  export declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
@@ -1,16 +1,19 @@
1
1
  "use client";
2
- import { jsx as r, jsxs as m } from "react/jsx-runtime";
3
- import * as i from "react";
4
- import { createPortal as y } from "react-dom";
5
- import { MotionConfig as g, AnimatePresence as b, motion as f } from "motion/react";
6
- import { Close as w } from "../lib/icons.js";
7
- import { cva as h } from "class-variance-authority";
8
- import { cn as n } from "../lib/cn.js";
9
- import { backdropVariants as N, modalPanelVariants as M } from "../lib/motion.js";
10
- import { Ripple as R } from "./ripple.js";
11
- const k = h(
2
+ import { jsx as a, jsxs as y } from "react/jsx-runtime";
3
+ import * as n from "react";
4
+ import { createPortal as F } from "react-dom";
5
+ import { MotionConfig as j, AnimatePresence as z, motion as h } from "motion/react";
6
+ import { Close as P } from "../lib/icons.js";
7
+ import { cva as T } from "class-variance-authority";
8
+ import { cn as i } from "../lib/cn.js";
9
+ import { backdropVariants as V, modalPanelVariants as H } from "../lib/motion.js";
10
+ import { Ripple as L } from "./ripple.js";
11
+ const q = T(
12
12
  [
13
13
  "relative flex w-full flex-col",
14
+ // Cap height to the viewport and clip, so a tall modal scrolls its body
15
+ // (below) instead of pushing the footer's action off-screen.
16
+ "max-h-[calc(100dvh-2rem)] overflow-hidden",
14
17
  "bg-elevated text-foreground",
15
18
  "rounded-xl shadow-elevation"
16
19
  ],
@@ -26,72 +29,111 @@ const k = h(
26
29
  defaultVariants: { size: "md" }
27
30
  }
28
31
  );
29
- function _({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
30
- const s = i.useRef(null), l = i.useRef(null);
31
- return i.useEffect(() => {
32
+ function Z({
33
+ open: o,
34
+ onOpenChange: t,
35
+ size: r,
36
+ className: g,
37
+ children: w,
38
+ showCloseButton: M = !0,
39
+ "aria-label": N,
40
+ "aria-labelledby": k,
41
+ "aria-describedby": R
42
+ }) {
43
+ const d = n.useRef(null), f = n.useRef(null), u = n.useRef(null);
44
+ return n.useEffect(() => {
32
45
  if (!o) return;
33
- l.current = document.activeElement;
34
- const x = document.body.style.overflow;
46
+ u.current = document.activeElement;
47
+ const E = document.body.style.overflow;
35
48
  document.body.style.overflow = "hidden";
36
- const d = (a) => {
37
- a.key === "Escape" && (a.stopPropagation(), e(!1));
49
+ const m = f.current, p = [];
50
+ if (m)
51
+ for (const e of Array.from(document.body.children))
52
+ e !== m && e instanceof HTMLElement && !e.inert && (e.inert = !0, p.push(e));
53
+ const A = () => {
54
+ var e;
55
+ return Array.from(
56
+ ((e = d.current) == null ? void 0 : e.querySelectorAll(
57
+ 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])'
58
+ )) ?? []
59
+ );
60
+ }, b = (e) => {
61
+ if (e.key === "Escape") {
62
+ e.stopPropagation(), t(!1);
63
+ return;
64
+ }
65
+ if (e.key !== "Tab") return;
66
+ const l = d.current;
67
+ if (!l) return;
68
+ const s = A();
69
+ if (s.length === 0) {
70
+ e.preventDefault(), l.focus();
71
+ return;
72
+ }
73
+ const x = s[0], v = s[s.length - 1], c = document.activeElement;
74
+ e.shiftKey ? (c === x || c === l) && (e.preventDefault(), v.focus()) : c === v && (e.preventDefault(), x.focus());
38
75
  };
39
- document.addEventListener("keydown", d);
40
- const v = requestAnimationFrame(() => {
41
- var a;
42
- (a = s.current) == null || a.focus();
76
+ document.addEventListener("keydown", b);
77
+ const D = requestAnimationFrame(() => {
78
+ var e;
79
+ (e = d.current) == null || e.focus();
43
80
  });
44
81
  return () => {
45
- var a, c;
46
- document.removeEventListener("keydown", d), document.body.style.overflow = x, cancelAnimationFrame(v), (c = (a = l.current) == null ? void 0 : a.focus) == null || c.call(a);
82
+ var e, l;
83
+ document.removeEventListener("keydown", b), document.body.style.overflow = E;
84
+ for (const s of p) s.inert = !1;
85
+ cancelAnimationFrame(D), (l = (e = u.current) == null ? void 0 : e.focus) == null || l.call(e);
47
86
  };
48
- }, [o, e]), y(
49
- /* @__PURE__ */ r(g, { reducedMotion: "user", children: /* @__PURE__ */ r(b, { children: o && /* @__PURE__ */ m("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
50
- /* @__PURE__ */ r(
51
- f.div,
87
+ }, [o, t]), F(
88
+ /* @__PURE__ */ a(j, { reducedMotion: "user", children: /* @__PURE__ */ a(z, { children: o && /* @__PURE__ */ y("div", { ref: f, className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
89
+ /* @__PURE__ */ a(
90
+ h.div,
52
91
  {
53
- variants: N,
92
+ variants: V,
54
93
  initial: "hidden",
55
94
  animate: "visible",
56
95
  exit: "hidden",
57
96
  className: "absolute inset-0 bg-overlay",
58
- onClick: () => e(!1),
97
+ onClick: () => t(!1),
59
98
  "aria-hidden": !0
60
99
  },
61
100
  "backdrop"
62
101
  ),
63
- /* @__PURE__ */ m(
64
- f.div,
102
+ /* @__PURE__ */ y(
103
+ h.div,
65
104
  {
66
- ref: s,
67
- variants: M,
105
+ ref: d,
106
+ variants: H,
68
107
  initial: "hidden",
69
108
  animate: "visible",
70
109
  exit: "hidden",
71
110
  role: "dialog",
72
111
  "aria-modal": "true",
112
+ "aria-label": N,
113
+ "aria-labelledby": k,
114
+ "aria-describedby": R,
73
115
  tabIndex: -1,
74
- className: n(k({ size: t }), "relative outline-none", u),
116
+ className: i(q({ size: r }), "relative outline-none", g),
75
117
  children: [
76
- /* @__PURE__ */ r(R, { origin: "center" }),
77
- /* @__PURE__ */ r(
118
+ /* @__PURE__ */ a(L, { origin: "center" }),
119
+ M ? /* @__PURE__ */ a(
78
120
  "button",
79
121
  {
80
122
  type: "button",
81
- onClick: () => e(!1),
123
+ onClick: () => t(!1),
82
124
  "aria-label": "Close",
83
- className: n(
125
+ className: i(
84
126
  "absolute right-4 top-4 inline-flex size-8 items-center justify-center",
85
- "rounded-md text-muted-foreground",
86
- "transition-[background,color,transform] duration-(--duration-fast) ease-out hover:bg-muted hover:text-foreground",
87
- "active:scale-(--scale-press)",
127
+ "rounded-sm text-muted-foreground",
128
+ "transition-[background,color,transform] duration-150 ease-out motion-reduce:transition-none hover:bg-muted hover:text-foreground",
129
+ "active:scale-[0.97] motion-reduce:active:scale-100",
88
130
  "outline-none focus-visible:ring-3 focus-visible:ring-ring",
89
131
  "[&_svg]:size-4 [&_svg]:shrink-0"
90
132
  ),
91
- children: /* @__PURE__ */ r(w, { "aria-hidden": !0 })
133
+ children: /* @__PURE__ */ a(P, { "aria-hidden": !0 })
92
134
  }
93
- ),
94
- p
135
+ ) : null,
136
+ w
95
137
  ]
96
138
  },
97
139
  "panel"
@@ -100,59 +142,62 @@ function _({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
100
142
  document.body
101
143
  );
102
144
  }
103
- const j = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
145
+ const B = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
104
146
  "div",
105
147
  {
106
- ref: t,
107
- className: n("flex flex-col gap-1 px-6 pt-6 pr-14", o),
108
- ...e
148
+ ref: r,
149
+ className: i("flex shrink-0 flex-col gap-1 px-6 pt-6 pr-14", o),
150
+ ...t
109
151
  }
110
152
  ));
111
- j.displayName = "ModalHeader";
112
- const z = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
153
+ B.displayName = "ModalHeader";
154
+ const C = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
113
155
  "h2",
114
156
  {
115
- ref: t,
116
- className: n("text-lg font-semibold text-foreground", o),
117
- ...e
157
+ ref: r,
158
+ className: i("text-lg font-medium text-foreground", o),
159
+ ...t
118
160
  }
119
161
  ));
120
- z.displayName = "ModalTitle";
121
- const E = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
162
+ C.displayName = "ModalTitle";
163
+ const K = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
122
164
  "p",
123
165
  {
124
- ref: t,
125
- className: n("text-xs text-muted-foreground", o),
126
- ...e
166
+ ref: r,
167
+ className: i("text-xs text-muted-foreground", o),
168
+ ...t
127
169
  }
128
170
  ));
129
- E.displayName = "ModalDescription";
130
- const F = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
171
+ K.displayName = "ModalDescription";
172
+ const _ = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
131
173
  "div",
132
174
  {
133
- ref: t,
134
- className: n("px-6 py-4 text-xs text-foreground", o),
135
- ...e
175
+ ref: r,
176
+ className: i(
177
+ "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 text-xs text-foreground",
178
+ o
179
+ ),
180
+ ...t
136
181
  }
137
182
  ));
138
- F.displayName = "ModalBody";
139
- const P = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
183
+ _.displayName = "ModalBody";
184
+ const I = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
140
185
  "div",
141
186
  {
142
- ref: t,
143
- className: n(
144
- "flex items-center justify-end gap-2 px-6 pb-6 pt-2",
187
+ ref: r,
188
+ className: i(
189
+ "flex shrink-0 items-center justify-end gap-2 px-6 pb-6 pt-2",
145
190
  o
146
191
  ),
147
- ...e
192
+ ...t
148
193
  }
149
194
  ));
150
- P.displayName = "ModalFooter";
195
+ I.displayName = "ModalFooter";
151
196
  export {
152
- _ as Modal,
153
- F as ModalBody,
154
- E as ModalDescription,
155
- P as ModalFooter,
156
- j as ModalHeader,
157
- z as ModalTitle
197
+ Z as Modal,
198
+ _ as ModalBody,
199
+ K as ModalDescription,
200
+ I as ModalFooter,
201
+ B as ModalHeader,
202
+ C as ModalTitle
158
203
  };
@@ -3,7 +3,7 @@ import * as React from "react";
3
3
  export declare const Navbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
4
4
  export declare const NavbarBrand: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
5
5
  declare const navbarContentVariants: (props?: ({
6
- justify?: "center" | "end" | "start" | null | undefined;
6
+ justify?: "end" | "center" | "start" | null | undefined;
7
7
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
8
  export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof navbarContentVariants> {
9
9
  }
@@ -21,7 +21,7 @@ const d = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
21
21
  {
22
22
  ref: e,
23
23
  className: n(
24
- "flex items-center gap-2 font-semibold text-foreground",
24
+ "flex items-center gap-2 font-medium text-foreground",
25
25
  r
26
26
  ),
27
27
  ...a