@astryxdesign/core 0.3.0-canary.505ccaa → 0.3.0-canary.52992ae

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 (100) hide show
  1. package/dist/AlertDialog/AlertDialog.d.ts +10 -2
  2. package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
  3. package/dist/AlertDialog/AlertDialog.js +22 -3
  4. package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
  5. package/dist/Chat/ChatDictationButton.js +2 -1
  6. package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
  7. package/dist/Chat/ChatLayoutScrollButton.js +2 -1
  8. package/dist/Chat/ChatSendButton.d.ts.map +1 -1
  9. package/dist/Chat/ChatSendButton.js +4 -3
  10. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  11. package/dist/CodeBlock/CodeBlock.js +40 -47
  12. package/dist/CommandPalette/CommandPaletteItem.d.ts +1 -1
  13. package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
  14. package/dist/CommandPalette/CommandPaletteItem.js +6 -3
  15. package/dist/CommandPalette/CommandPaletteList.js +1 -1
  16. package/dist/ComplexSelector/ComplexSelector.d.ts +1 -1
  17. package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
  18. package/dist/ComplexSelector/ComplexSelector.js +4 -2
  19. package/dist/ContextMenu/ContextMenu.js +1 -1
  20. package/dist/EmptyState/EmptyState.js +1 -1
  21. package/dist/Indicator/CheckIndicator.d.ts +2 -2
  22. package/dist/Indicator/CheckIndicator.d.ts.map +1 -1
  23. package/dist/Indicator/CheckIndicator.js +46 -13
  24. package/dist/Indicator/CheckboxIndicator.d.ts +1 -1
  25. package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -1
  26. package/dist/Indicator/CheckboxIndicator.js +3 -3
  27. package/dist/Indicator/RadioIndicator.d.ts +1 -1
  28. package/dist/Indicator/RadioIndicator.d.ts.map +1 -1
  29. package/dist/Indicator/RadioIndicator.js +7 -7
  30. package/dist/Indicator/index.d.ts +1 -1
  31. package/dist/Indicator/index.d.ts.map +1 -1
  32. package/dist/Indicator/indicatorRegistry.d.ts +38 -3
  33. package/dist/Indicator/indicatorRegistry.d.ts.map +1 -1
  34. package/dist/Indicator/indicatorRegistry.js +42 -2
  35. package/dist/Indicator/types.d.ts +6 -1
  36. package/dist/Indicator/types.d.ts.map +1 -1
  37. package/dist/Indicator/useIndicator.d.ts +8 -2
  38. package/dist/Indicator/useIndicator.d.ts.map +1 -1
  39. package/dist/Indicator/useIndicator.js +7 -1
  40. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  41. package/dist/MultiSelector/MultiSelector.js +18 -8
  42. package/dist/Timestamp/TimestampHoverCard.d.ts.map +1 -1
  43. package/dist/Timestamp/TimestampHoverCard.js +16 -34
  44. package/dist/TopNav/TopNavMegaMenu.d.ts +7 -0
  45. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  46. package/dist/TopNav/TopNavMegaMenu.js +67 -20
  47. package/dist/astryx.css +1 -0
  48. package/dist/astryx.umd.js +51 -51
  49. package/dist/astryx.umd.js.map +4 -4
  50. package/dist/hooks/index.d.ts +2 -0
  51. package/dist/hooks/index.d.ts.map +1 -1
  52. package/dist/hooks/index.js +1 -0
  53. package/dist/hooks/useClipboard.d.ts +59 -0
  54. package/dist/hooks/useClipboard.d.ts.map +1 -0
  55. package/dist/hooks/useClipboard.js +106 -0
  56. package/dist/hooks/useTreeFocus.d.ts.map +1 -1
  57. package/dist/hooks/useTreeFocus.js +9 -3
  58. package/package.json +2 -2
  59. package/src/AlertDialog/AlertDialog.doc.mjs +16 -3
  60. package/src/AlertDialog/AlertDialog.test.tsx +208 -1
  61. package/src/AlertDialog/AlertDialog.tsx +21 -3
  62. package/src/Chat/Chat.doc.mjs +2 -0
  63. package/src/Chat/ChatDictationButton.tsx +7 -1
  64. package/src/Chat/ChatLayoutScrollButton.tsx +7 -1
  65. package/src/Chat/ChatSendButton.tsx +2 -3
  66. package/src/CodeBlock/CodeBlock.doc.mjs +1 -0
  67. package/src/CodeBlock/CodeBlock.test.tsx +24 -0
  68. package/src/CodeBlock/CodeBlock.tsx +30 -61
  69. package/src/CommandPalette/CommandPaletteItem.tsx +7 -4
  70. package/src/CommandPalette/CommandPaletteList.tsx +2 -2
  71. package/src/ComplexSelector/ComplexSelector.tsx +4 -2
  72. package/src/ContextMenu/ContextMenu.tsx +1 -1
  73. package/src/DateInput/DateInput.doc.mjs +1 -1
  74. package/src/DateRangeInput/DateRangeInput.doc.mjs +1 -1
  75. package/src/DateTimeInput/DateTimeInput.doc.mjs +1 -1
  76. package/src/EmptyState/EmptyState.tsx +2 -2
  77. package/src/Indicator/CheckIndicator.tsx +61 -12
  78. package/src/Indicator/CheckboxIndicator.tsx +5 -3
  79. package/src/Indicator/Indicator.doc.mjs +5 -4
  80. package/src/Indicator/Indicator.test.tsx +139 -0
  81. package/src/Indicator/RadioIndicator.tsx +23 -17
  82. package/src/Indicator/index.ts +4 -1
  83. package/src/Indicator/indicatorRegistry.test.tsx +106 -0
  84. package/src/Indicator/indicatorRegistry.ts +52 -4
  85. package/src/Indicator/types.ts +6 -1
  86. package/src/Indicator/useIndicator.ts +13 -3
  87. package/src/MultiSelector/MultiSelector.doc.mjs +5 -0
  88. package/src/MultiSelector/MultiSelector.test.tsx +117 -0
  89. package/src/MultiSelector/MultiSelector.tsx +66 -54
  90. package/src/ProgressBar/ProgressBar.doc.mjs +1 -1
  91. package/src/Timestamp/TimestampHoverCard.tsx +13 -35
  92. package/src/TopNav/TopNavMegaMenu.test.tsx +433 -33
  93. package/src/TopNav/TopNavMegaMenu.tsx +83 -24
  94. package/src/hooks/index.ts +3 -0
  95. package/src/hooks/useClipboard.doc.mjs +86 -0
  96. package/src/hooks/useClipboard.test.tsx +151 -0
  97. package/src/hooks/useClipboard.ts +135 -0
  98. package/src/hooks/useTreeFocus.test.tsx +50 -0
  99. package/src/hooks/useTreeFocus.ts +14 -3
  100. package/src/i18n/InternationalizationProvider.doc.mjs +7 -2
@@ -22,7 +22,8 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
22
22
  isOpen: boolean;
23
23
  /**
24
24
  * Renders alert dialog content inline without modal behavior.
25
- * For documentation previews and showcases only.
25
+ * For documentation previews and showcases only. The inline path is not a
26
+ * modal, so it renders `role="group"` rather than `role="alertdialog"`.
26
27
  * @default false
27
28
  */
28
29
  isInline?: boolean;
@@ -73,9 +74,16 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
73
74
  /**
74
75
  * A confirmation dialog for destructive or irreversible actions.
75
76
  *
77
+ * Implements the WAI-ARIA APG Alert Dialog pattern:
78
+ * https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
79
+ *
76
80
  * Uses `role="alertdialog"` and requires explicit user action to dismiss.
77
81
  * Cannot be dismissed by clicking outside. Escape key triggers cancel.
78
- * Initial focus goes to the cancel button (least destructive action).
82
+ * Initial focus goes to the cancel button (least destructive action), pinned
83
+ * with `data-autofocus` so it survives any change to the footer's order.
84
+ *
85
+ * The `isInline` preview path is not modal, so it renders `role="group"`
86
+ * instead — the alertdialog role would promise modality it does not have.
79
87
  *
80
88
  * @example
81
89
  * ```
@@ -1 +1 @@
1
- {"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAwDlB;yBA1Ee,WAAW"}
1
+ {"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkElB;yBApFe,WAAW"}
@@ -31,9 +31,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
31
31
  /**
32
32
  * A confirmation dialog for destructive or irreversible actions.
33
33
  *
34
+ * Implements the WAI-ARIA APG Alert Dialog pattern:
35
+ * https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
36
+ *
34
37
  * Uses `role="alertdialog"` and requires explicit user action to dismiss.
35
38
  * Cannot be dismissed by clicking outside. Escape key triggers cancel.
36
- * Initial focus goes to the cancel button (least destructive action).
39
+ * Initial focus goes to the cancel button (least destructive action), pinned
40
+ * with `data-autofocus` so it survives any change to the footer's order.
41
+ *
42
+ * The `isInline` preview path is not modal, so it renders `role="group"`
43
+ * instead — the alertdialog role would promise modality it does not have.
37
44
  *
38
45
  * @example
39
46
  * ```
@@ -80,8 +87,14 @@ export function AlertDialog({
80
87
  isInline: isInline,
81
88
  onOpenChange: onOpenChange,
82
89
  width: width,
83
- purpose: "form",
84
- role: "alertdialog",
90
+ purpose: "form"
91
+ // `alertdialog` is a modal role: it promises an interruption the user
92
+ // has to deal with, a focus trap, and an inert page behind it. The
93
+ // inline path renders a plain always-present div with none of that, so
94
+ // the role would misdescribe it. `group` keeps the title and
95
+ // description associated with a container without claiming a dialog.
96
+ ,
97
+ role: isInline ? 'group' : 'alertdialog',
85
98
  "aria-labelledby": titleId,
86
99
  "aria-describedby": descriptionId,
87
100
  ...mergeProps(themeProps('alert-dialog'), {
@@ -111,6 +124,12 @@ export function AlertDialog({
111
124
  variant: "ghost",
112
125
  label: cancelLabel,
113
126
  onClick: handleCancel
127
+ // Dialog focuses [data-autofocus] itself after showModal(),
128
+ // because React's autoFocus runs during commit while the
129
+ // dialog is still invisible. Cancel is the least destructive
130
+ // choice, so it is the one that should be preselected.
131
+ ,
132
+ "data-autofocus": true
114
133
  }), /*#__PURE__*/_jsx(Button, {
115
134
  variant: actionVariant,
116
135
  label: actionLabel,
@@ -1 +1 @@
1
- {"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiDD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BAoE1B;yBA9Ee,mBAAmB"}
1
+ {"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiDD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BAyE1B;yBAnFe,mBAAmB"}
@@ -24,6 +24,7 @@ import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
24
24
  import { Button } from "../Button/index.js";
25
25
  import { Icon } from "../Icon/index.js";
26
26
  import { mergeProps } from "../utils/index.js";
27
+ import { themeProps } from "../utils/themeProps.js";
27
28
  import { useTranslator } from "../i18n/index.js";
28
29
 
29
30
  // =============================================================================
@@ -112,7 +113,7 @@ export function ChatDictationButton({
112
113
  } = SIZE_CONFIG[size];
113
114
  return /*#__PURE__*/_jsxs("span", {
114
115
  ref: ref,
115
- ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
116
+ ...mergeProps(themeProps('chat-dictation-button'), stylex.props(styles.wrapper, xstyle), className, style),
116
117
  ...rest,
117
118
  children: [isListening && /*#__PURE__*/_jsx("span", {
118
119
  "aria-hidden": true,
@@ -1 +1 @@
1
- {"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBA6B7B;yBAtCe,sBAAsB"}
1
+ {"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAkC7B;yBA3Ce,sBAAsB"}
@@ -22,6 +22,7 @@ import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars
22
22
  import { Icon } from "../Icon/index.js";
23
23
  import { Button } from "../Button/index.js";
24
24
  import { mergeProps } from "../utils/index.js";
25
+ import { themeProps } from "../utils/themeProps.js";
25
26
  import { useTranslator } from "../i18n/index.js";
26
27
 
27
28
  // =============================================================================
@@ -76,7 +77,7 @@ export function ChatLayoutScrollButton({
76
77
  const t = useTranslator();
77
78
  return /*#__PURE__*/_jsx("div", {
78
79
  ref: ref,
79
- ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
80
+ ...mergeProps(themeProps('chat-layout-scroll-button'), stylex.props(styles.wrapper, xstyle), className, style),
80
81
  ...rest,
81
82
  children: /*#__PURE__*/_jsx("div", {
82
83
  ...{
@@ -1 +1 @@
1
- {"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAgDpE;yBAhDe,cAAc"}
1
+ {"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA8CpE;yBA9Ce,cAAc"}
@@ -21,6 +21,7 @@ import * as stylex from '@stylexjs/stylex';
21
21
  import { Button } from "../Button/index.js";
22
22
  import { useIcon } from "../Icon/index.js";
23
23
  import { useChatComposerContext } from "./ChatContext.js";
24
+ import { mergeProps } from "../utils/index.js";
24
25
  import { themeProps } from "../utils/themeProps.js";
25
26
  import { useTranslator } from "../i18n/index.js";
26
27
 
@@ -85,9 +86,9 @@ export function ChatSendButton(props) {
85
86
  isDisabled: !isStopShown && isDisabled,
86
87
  onClick: isStopShown ? onStop : handleSend,
87
88
  ...rest,
88
- ...themeProps('chat-send-button'),
89
- className: className,
90
- style: style,
89
+ ...mergeProps(themeProps('chat-send-button'), {
90
+ className
91
+ }, style),
91
92
  xstyle: [styles.root, xstyle]
92
93
  });
93
94
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAmXxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBA2OhB;yBAnQe,SAAS"}
1
+ {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAwWxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAsNhB;yBA9Oe,SAAS"}
@@ -14,8 +14,9 @@ import * as stylex from '@stylexjs/stylex';
14
14
  import "../theme/tokens.stylex.js";
15
15
  import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
16
16
  import { mergeProps } from "../utils/index.js";
17
- import { useAnnounce } from "../hooks/useAnnounce.js";
17
+ import { useClipboard } from "../hooks/useClipboard.js";
18
18
  import { Icon } from "../Icon/index.js";
19
+ import { IconButton } from "../IconButton/index.js";
19
20
  import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
20
21
  import { ensureHighlightStyles } from "./highlightStyles.js";
21
22
  import { applyHighlightRangesChunked } from "./highlightRanges.js";
@@ -148,6 +149,16 @@ const styles = {
148
149
  sizeMd: {
149
150
  kGuDYH: "xp03k98",
150
151
  $$css: true
152
+ },
153
+ copyButton: {
154
+ kMwMTN: "x1mjzq1q",
155
+ $$css: true
156
+ },
157
+ copyButtonAbsolute: {
158
+ kVAEAm: "x10l6tqk",
159
+ k87sOh: "xctzyg",
160
+ kt4wiu: "x72tfeb",
161
+ $$css: true
151
162
  }
152
163
  };
153
164
 
@@ -437,18 +448,15 @@ export function CodeBlock({
437
448
  ...props
438
449
  }) {
439
450
  const t = useTranslator();
440
- const [copied, setCopied] = useState(false);
441
- const copyResetTimerRef = useRef(null);
442
- const announce = useAnnounce();
443
-
444
- // Clear a pending "copied" reset when the block unmounts.
445
- useEffect(() => {
446
- return () => {
447
- if (copyResetTimerRef.current != null) {
448
- clearTimeout(copyResetTimerRef.current);
449
- }
450
- };
451
- }, []);
451
+ // Owns the clipboard write, the transient copied flag, its reset timer, and
452
+ // the polite copy announcement (a swapped aria-label alone is not reliably
453
+ // announced) — shared with Timestamp via the same hook.
454
+ const {
455
+ copy,
456
+ isCopied: copied
457
+ } = useClipboard({
458
+ announce: t('@astryx.codeBlock.copied')
459
+ });
452
460
  const useSpans = highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
453
461
  const lines = useMemo(() => {
454
462
  const l = code.split('\n');
@@ -460,26 +468,11 @@ export function CodeBlock({
460
468
  const tokenLines = useTokenLines(code, language, customTokenizer);
461
469
  const highlightSet = useMemo(() => highlightLines ? new Set(highlightLines) : null, [highlightLines]);
462
470
  const handleCopy = useCallback(async () => {
463
- try {
464
- await navigator.clipboard.writeText(code);
465
- setCopied(true);
466
- // Swapping the button's aria-label alone isn't reliably announced by
467
- // screen readers, so confirm the copy via a polite live region.
468
- announce(t('@astryx.codeBlock.copied'));
471
+ const didCopy = await copy(code);
472
+ if (didCopy) {
469
473
  onCopy?.();
470
- // Restart the reset timer on every copy — otherwise a rapid re-copy
471
- // is reverted early by the previous click's timer.
472
- if (copyResetTimerRef.current != null) {
473
- clearTimeout(copyResetTimerRef.current);
474
- }
475
- copyResetTimerRef.current = setTimeout(() => {
476
- copyResetTimerRef.current = null;
477
- setCopied(false);
478
- }, 2000);
479
- } catch {
480
- // Clipboard failures leave the copied state unchanged.
481
474
  }
482
- }, [code, onCopy, announce, t]);
475
+ }, [code, copy, onCopy]);
483
476
  const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
484
477
  // Digits in the largest line number — sizes the gutter column width.
485
478
  const maxLineDigits = String(lines.length).length;
@@ -496,28 +489,28 @@ export function CodeBlock({
496
489
  const scrollStyle = maxHeight ? {
497
490
  maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
498
491
  } : undefined;
499
- const copyIcon = /*#__PURE__*/_jsx(Icon, {
500
- icon: copied ? 'check' : 'copy',
492
+ const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx(IconButton, {
493
+ variant: "ghost",
501
494
  size: "sm",
502
- color: "inherit"
503
- });
504
- const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx("button", {
505
- type: "button",
495
+ icon: /*#__PURE__*/_jsx(Icon, {
496
+ icon: copied ? 'check' : 'copy',
497
+ size: "sm",
498
+ color: "inherit"
499
+ })
500
+ // A visible "Copy" hover/focus hint via Button's built-in tooltip. It
501
+ // stays "Copy" after copying — the copy → check icon flip is the
502
+ // confirmation, not a tooltip change. The aria-label still swaps to the
503
+ // localized "Copied" for assistive tech, backed by the announcement.
504
+ ,
505
+ tooltip: t('@astryx.codeBlock.copyCode'),
506
+ label: copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode'),
506
507
  onClick: e => {
507
508
  // Stop propagation so copying does not toggle the collapsible header.
508
509
  e.stopPropagation();
509
510
  void handleCopy();
510
511
  },
511
- "aria-label": copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode'),
512
- ...{
513
- 0: {
514
- className: "x3nfvp2 x6s0dn4 xl56j7k x9epnlk x3kzqx6 xx3sua9 xjbqb8w xe9uy6x x1mjzq1q x1ypdohk x14ju556"
515
- },
516
- 1: {
517
- className: "x3nfvp2 x6s0dn4 xl56j7k x9epnlk x3kzqx6 xx3sua9 xjbqb8w xe9uy6x x1mjzq1q x1ypdohk x14ju556 x10l6tqk xctzyg x72tfeb"
518
- }
519
- }[!!!showHeader << 0],
520
- children: copyIcon
512
+ xstyle: [styles.copyButton, !showHeader && styles.copyButtonAbsolute],
513
+ ...themeProps('codeblock-copy-button')
521
514
  }) : null;
522
515
  const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
523
516
  ...{
@@ -52,7 +52,7 @@ export interface CommandPaletteItemProps extends Omit<BaseProps<HTMLDivElement>,
52
52
  * </CommandPaletteItem>
53
53
  * ```
54
54
  */
55
- export declare function CommandPaletteItem({ value, onSelect, isHighlighted: controlledHighlighted, isSelected: controlledSelected, isDisabled, children, ref, xstyle, className, style, ...props }: CommandPaletteItemProps): import("react").JSX.Element;
55
+ export declare function CommandPaletteItem({ value, onSelect, isHighlighted: controlledHighlighted, isSelected: controlledSelected, isDisabled, children, ref, xstyle, className, style, onClick: onClickProp, onMouseEnter: onMouseEnterProp, ...props }: CommandPaletteItemProps): import("react").JSX.Element;
56
56
  export declare namespace CommandPaletteItem {
57
57
  var displayName: string;
58
58
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwD5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,kBAAkB,EAC9B,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAkFzB;yBA9Fe,kBAAkB"}
1
+ {"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyD5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,kBAAkB,EAC9B,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAkFzB;yBAhGe,kBAAkB"}
@@ -14,6 +14,7 @@
14
14
  import { useCallback, useEffect, useMemo, useRef } from 'react';
15
15
  import * as stylex from '@stylexjs/stylex';
16
16
  import { mergeProps, mergeRefs } from "../utils/index.js";
17
+ import { composeEventHandlers } from "../utils/composeEventHandlers.js";
17
18
  import "../theme/tokens.stylex.js";
18
19
  import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
19
20
  import { useCommandPaletteContext } from "./CommandPaletteContext.js";
@@ -87,6 +88,8 @@ export function CommandPaletteItem({
87
88
  xstyle,
88
89
  className,
89
90
  style,
91
+ onClick: onClickProp,
92
+ onMouseEnter: onMouseEnterProp,
90
93
  ...props
91
94
  }) {
92
95
  const ctx = useCommandPaletteContext();
@@ -135,15 +138,15 @@ export function CommandPaletteItem({
135
138
  }, [isDisabled, itemIndex, ctx]);
136
139
  return /*#__PURE__*/_jsx("div", {
137
140
  ref: mergeRefs(ref, itemRef),
141
+ ...props,
138
142
  id: ctx && itemIndex >= 0 ? ctx.getItemId(itemIndex) : undefined,
139
143
  role: "option",
140
144
  "aria-selected": isSelected,
141
145
  "aria-disabled": isDisabled || undefined,
142
146
  "data-value": value,
143
- onClick: handleClick,
144
- onMouseEnter: handleMouseEnter,
147
+ onClick: composeEventHandlers(onClickProp, handleClick),
148
+ onMouseEnter: composeEventHandlers(onMouseEnterProp, handleMouseEnter),
145
149
  ...mergeProps(themeProps('command-palette-item'), stylex.props(styles.item, !isDisabled && styles.itemHover, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
146
- ...props,
147
150
  children: children
148
151
  });
149
152
  }
@@ -66,11 +66,11 @@ export function CommandPaletteList({
66
66
  const ctx = useCommandPaletteContext();
67
67
  return /*#__PURE__*/_jsx("div", {
68
68
  ref: ref,
69
+ ...props,
69
70
  id: ctx?.listId,
70
71
  role: "listbox",
71
72
  "aria-label": label,
72
73
  ...mergeProps(themeProps('command-palette-list'), stylex.props(styles.list, xstyle), className, style),
73
- ...props,
74
74
  children: children
75
75
  });
76
76
  }
@@ -101,7 +101,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
101
101
  * </ComplexSelector>
102
102
  * ```
103
103
  */
104
- export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, width, placement, contentXstyle, xstyle, className, style, 'data-testid': testId, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
104
+ export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, width, placement, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
105
105
  export declare namespace ComplexSelector {
106
106
  var displayName: string;
107
107
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
@@ -25,6 +25,7 @@ import { usePopover } from "../Popover/usePopover.js";
25
25
  import "../theme/tokens.stylex.js";
26
26
  import { colorVars, durationVars, easeVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
27
27
  import { mergeProps } from "../utils/index.js";
28
+ import { composeEventHandlers } from "../utils/composeEventHandlers.js";
28
29
  import { themeProps } from "../utils/themeProps.js";
29
30
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
30
31
  const styles = {
@@ -182,6 +183,7 @@ export function ComplexSelector({
182
183
  className,
183
184
  style,
184
185
  'data-testid': testId,
186
+ onClick: onClickProp,
185
187
  ...props
186
188
  }) {
187
189
  const t = useTranslator();
@@ -228,11 +230,11 @@ export function ComplexSelector({
228
230
  ref: popover.triggerRef,
229
231
  "data-testid": testId,
230
232
  ...props,
231
- onClick: () => {
233
+ onClick: composeEventHandlers(onClickProp, () => {
232
234
  if (!isDisabled) {
233
235
  popover.toggle();
234
236
  }
235
- },
237
+ }),
236
238
  ...mergeProps(themeProps('complex-selector', {
237
239
  size,
238
240
  status: status?.type ?? null
@@ -337,9 +337,9 @@ export function ContextMenu({
337
337
  return /*#__PURE__*/_jsxs(_Fragment, {
338
338
  children: [/*#__PURE__*/_jsxs("div", {
339
339
  ref: mergeRefs(ref, triggerRef),
340
+ ...triggerProps,
340
341
  onContextMenu: handleContextMenu,
341
342
  ...longPressHandlers,
342
- ...triggerProps,
343
343
  "data-testid": testId,
344
344
  ...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
345
345
  children: [children, /*#__PURE__*/_jsx("span", {
@@ -77,11 +77,11 @@ export function EmptyState({
77
77
  const HeadingTag = `h${headingLevel}`;
78
78
  return /*#__PURE__*/_jsxs("div", {
79
79
  ref: ref,
80
+ ...props,
80
81
  role: "status",
81
82
  ...mergeProps(themeProps('empty-state', {
82
83
  variant: isCompact ? 'compact' : null
83
84
  }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
84
- ...props,
85
85
  children: [icon != null && /*#__PURE__*/_jsx("div", {
86
86
  "aria-hidden": "true",
87
87
  children: icon
@@ -6,14 +6,14 @@ import type { IndicatorProps } from './types';
6
6
  * state, or focus behavior; the option or row that hosts it keeps all of that.
7
7
  *
8
8
  * @example
9
- * ```tsx
9
+ * ```
10
10
  * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
11
11
  * ```
12
12
  *
13
13
  * Swap every single-selection mark for a radio:
14
14
  *
15
15
  * @example
16
- * ```tsx
16
+ * ```
17
17
  * import {RadioIndicator} from '@astryxdesign/core/Indicator';
18
18
  *
19
19
  * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
@@ -1 +1 @@
1
- {"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAQ5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,sCA6CnC;yBAvDe,cAAc"}
1
+ {"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AA6B5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,sCAsEnC;yBAhFe,cAAc"}
@@ -29,13 +29,36 @@
29
29
  * is an icon, and `astryx-icon` plus the host's target already reach it.
30
30
  */
31
31
 
32
+ import * as stylex from '@stylexjs/stylex';
32
33
  import { Icon } from "../Icon/Icon.js";
34
+ import "../theme/tokens.stylex.js";
35
+ import { colorVars } from "../theme/tokens.stylex.js";
36
+ import { isRenderable, mergeProps } from "../utils/index.js";
33
37
  import { jsx as _jsx } from "react/jsx-runtime";
34
38
  /** The check glyph matches the control sizes the indicator families share. */
35
39
  const iconSizeForIndicator = {
36
40
  sm: 'sm',
37
41
  md: 'sm'
38
42
  };
43
+ const styles = {
44
+ slot: {
45
+ k1xSpc: "x3nfvp2",
46
+ kGNEyG: "x6s0dn4",
47
+ kjj79g: "xl56j7k",
48
+ kmuXW: "x2lah0s",
49
+ kzqmXN: "xcdlrvm",
50
+ kZKoxP: "x1l36t39",
51
+ $$css: true
52
+ },
53
+ enabled: {
54
+ kMwMTN: "xqwr325",
55
+ $$css: true
56
+ },
57
+ disabled: {
58
+ kMwMTN: "xqa6c3m",
59
+ $$css: true
60
+ }
61
+ };
39
62
 
40
63
  /**
41
64
  * The default single-selection mark: a checkmark when chosen, nothing when not.
@@ -44,14 +67,14 @@ const iconSizeForIndicator = {
44
67
  * state, or focus behavior; the option or row that hosts it keeps all of that.
45
68
  *
46
69
  * @example
47
- * ```tsx
70
+ * ```
48
71
  * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
49
72
  * ```
50
73
  *
51
74
  * Swap every single-selection mark for a radio:
52
75
  *
53
76
  * @example
54
- * ```tsx
77
+ * ```
55
78
  * import {RadioIndicator} from '@astryxdesign/core/Indicator';
56
79
  *
57
80
  * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
@@ -70,24 +93,34 @@ export function CheckIndicator({
70
93
  }) {
71
94
  const isChecked = state === 'checked';
72
95
 
73
- // Nothing to draw, and no box to reserve: an unmarked row keeps the layout
74
- // it would have without this indicator.
75
- if (!isChecked) {
76
- return null;
77
- }
78
-
79
96
  // `children` (a pending Spinner, say) replaces the mark but keeps the
80
- // indicator's place, matching the other indicators' contract. There is no
81
- // glyph to put the host's props on in that case, so they go on a span.
82
- if (children != null) {
97
+ // indicator's place, matching the other indicators' contract. It is checked
98
+ // BEFORE `state`: a host passes a busy visual through in whatever state the
99
+ // row happens to be in, and an unchecked listbox row is the common one.
100
+ //
101
+ // `isRenderable`, not `children != null`: the idiom a host actually writes is
102
+ // `children={isBusy && <Spinner/>}`, which passes `false` when it is not
103
+ // busy. `false` is non-null, so a null check takes this branch, renders
104
+ // nothing inside it, and DELETES the mark on a chosen row (#4893).
105
+ //
106
+ // There is no glyph to hang the caller's props on in this branch, so they go
107
+ // on a span — every one of them, so a `data-testid`, an `id`, a handler or
108
+ // an `xstyle` behaves the same whether or not children are present.
109
+ if (isRenderable(children)) {
83
110
  return /*#__PURE__*/_jsx("span", {
111
+ ...rest,
84
112
  ref: ref,
85
113
  "aria-hidden": "true",
86
- className: className,
87
- style: style,
114
+ ...mergeProps(stylex.props(styles.slot, isDisabled ? styles.disabled : styles.enabled, xstyle), className, style),
88
115
  children: children
89
116
  });
90
117
  }
118
+
119
+ // Nothing to draw, and no box to reserve: an unmarked row keeps the layout
120
+ // it would have without this indicator.
121
+ if (!isChecked) {
122
+ return null;
123
+ }
91
124
  return /*#__PURE__*/_jsx(Icon
92
125
  // Spread first so the indicator's own contract (below) wins over any
93
126
  // same-named DOM attribute a caller passed through.
@@ -11,7 +11,7 @@ import type { IndicatorProps } from './types';
11
11
  * the `checkbox` theme target like any other component.
12
12
  *
13
13
  * @example
14
- * ```tsx
14
+ * ```
15
15
  * <CheckboxIndicator state="indeterminate" size="sm" />
16
16
  * ```
17
17
  */
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAkElC;yBA5Ee,iBAAiB"}
1
+ {"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAoElC;yBA9Ee,iBAAiB"}
@@ -11,7 +11,7 @@
11
11
  import * as stylex from '@stylexjs/stylex';
12
12
  import "../theme/tokens.stylex.js";
13
13
  import { borderVars, colorVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
14
- import { mergeProps, themeProps } from "../utils/index.js";
14
+ import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
15
15
  import "./indicator.markers.stylex.js";
16
16
  import { indicatorScope } from "./indicator.markers.stylex.js";
17
17
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -120,7 +120,7 @@ const indeterminateSizeStyles = {
120
120
  * the `checkbox` theme target like any other component.
121
121
  *
122
122
  * @example
123
- * ```tsx
123
+ * ```
124
124
  * <CheckboxIndicator state="indeterminate" size="sm" />
125
125
  * ```
126
126
  */
@@ -152,7 +152,7 @@ export function CheckboxIndicator({
152
152
  legacyNames: ['checkbox']
153
153
  }), stylex.props(styles.box, boxSizeStyles[size], isCheckedOrIndeterminate ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isCheckedOrIndeterminate && styles.disabledUnchecked, xstyle), className, style),
154
154
  ...rest,
155
- children: children ?? /*#__PURE__*/_jsxs(_Fragment, {
155
+ children: isRenderable(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
156
156
  children: [/*#__PURE__*/_jsx("svg", {
157
157
  viewBox: "0 0 10 10",
158
158
  ...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
@@ -12,7 +12,7 @@ import type { IndicatorProps } from './types';
12
12
  * components whose default is "a checkmark when selected, nothing otherwise".
13
13
  *
14
14
  * @example
15
- * ```tsx
15
+ * ```
16
16
  * <RadioIndicator state="checked" size="md" />
17
17
  * ```
18
18
  */