@astryxdesign/core 0.2.0-canary.e4013c9 → 0.2.0-canary.ea693ac

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 (128) hide show
  1. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
  2. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
  3. package/dist/AvatarGroup/AvatarGroupOverflow.js +6 -2
  4. package/dist/Button/Button.d.ts +1 -1
  5. package/dist/Button/Button.d.ts.map +1 -1
  6. package/dist/Button/Button.js +4 -2
  7. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  8. package/dist/CheckboxInput/CheckboxInput.js +2 -2
  9. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  10. package/dist/CheckboxList/CheckboxListItem.js +19 -4
  11. package/dist/CodeBlock/CodeBlock.js +2 -2
  12. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  13. package/dist/ContextMenu/ContextMenu.js +10 -1
  14. package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts +8 -11
  15. package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -1
  16. package/dist/DropdownMenu/DropdownMenuRadioGroup.js +3 -1
  17. package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +1 -1
  18. package/dist/DropdownMenu/DropdownMenuRadioItem.js +1 -1
  19. package/dist/Field/FieldLabel.d.ts +2 -1
  20. package/dist/Field/FieldLabel.d.ts.map +1 -1
  21. package/dist/Field/FieldLabel.js +7 -3
  22. package/dist/Item/Item.d.ts +16 -3
  23. package/dist/Item/Item.d.ts.map +1 -1
  24. package/dist/Item/Item.js +31 -6
  25. package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
  26. package/dist/Layer/layerAnimations.stylex.js +10 -2
  27. package/dist/List/ListItem.d.ts +11 -1
  28. package/dist/List/ListItem.d.ts.map +1 -1
  29. package/dist/List/ListItem.js +2 -0
  30. package/dist/MetadataList/MetadataList.d.ts +1 -1
  31. package/dist/MetadataList/MetadataList.d.ts.map +1 -1
  32. package/dist/MetadataList/MetadataList.js +4 -2
  33. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  34. package/dist/MultiSelector/MultiSelector.js +13 -2
  35. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  36. package/dist/ProgressBar/ProgressBar.js +6 -1
  37. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  38. package/dist/RadioList/RadioListItem.js +1 -1
  39. package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
  40. package/dist/SegmentedControl/SegmentedControlItem.js +3 -2
  41. package/dist/Selector/Selector.d.ts.map +1 -1
  42. package/dist/Selector/Selector.js +5 -0
  43. package/dist/Skeleton/Skeleton.d.ts.map +1 -1
  44. package/dist/Skeleton/Skeleton.js +2 -2
  45. package/dist/Switch/Switch.d.ts.map +1 -1
  46. package/dist/Switch/Switch.js +17 -6
  47. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
  48. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +1 -1
  49. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  50. package/dist/Toast/ToastViewport.js +61 -9
  51. package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
  52. package/dist/ToggleButton/ToggleButton.js +3 -1
  53. package/dist/Token/Token.d.ts +4 -1
  54. package/dist/Token/Token.d.ts.map +1 -1
  55. package/dist/Token/Token.js +68 -43
  56. package/dist/Token/TokenLink.d.ts +62 -0
  57. package/dist/Token/TokenLink.d.ts.map +1 -0
  58. package/dist/Token/TokenLink.js +76 -0
  59. package/dist/Typeahead/BaseTypeahead.d.ts +9 -0
  60. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  61. package/dist/Typeahead/BaseTypeahead.js +2 -0
  62. package/dist/Typeahead/Typeahead.d.ts.map +1 -1
  63. package/dist/Typeahead/Typeahead.js +8 -1
  64. package/dist/astryx.css +22 -3
  65. package/dist/astryx.umd.js +48 -48
  66. package/dist/astryx.umd.js.map +4 -4
  67. package/dist/hooks/useKeyboardHint.d.ts +1 -1
  68. package/dist/hooks/useKeyboardHint.d.ts.map +1 -1
  69. package/dist/hooks/useKeyboardHint.js +4 -2
  70. package/locales/en.json +32 -0
  71. package/locales/pseudo.json +24 -0
  72. package/package.json +1 -1
  73. package/src/AvatarGroup/AvatarGroup.test.tsx +21 -1
  74. package/src/AvatarGroup/AvatarGroupOverflow.tsx +4 -2
  75. package/src/Breadcrumbs/Breadcrumbs.test.tsx +1 -1
  76. package/src/Button/Button.test.tsx +16 -0
  77. package/src/Button/Button.tsx +4 -2
  78. package/src/CheckboxInput/CheckboxInput.test.tsx +23 -0
  79. package/src/CheckboxInput/CheckboxInput.tsx +17 -2
  80. package/src/CheckboxList/CheckboxList.test.tsx +94 -3
  81. package/src/CheckboxList/CheckboxListItem.tsx +17 -10
  82. package/src/CodeBlock/CodeBlock.test.tsx +17 -0
  83. package/src/CodeBlock/CodeBlock.tsx +2 -2
  84. package/src/ContextMenu/ContextMenu.test.tsx +17 -2
  85. package/src/ContextMenu/ContextMenu.tsx +10 -1
  86. package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +4 -12
  87. package/src/DropdownMenu/DropdownMenuRadioGroup.tsx +9 -10
  88. package/src/DropdownMenu/DropdownMenuRadioItem.tsx +1 -1
  89. package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +20 -2
  90. package/src/Field/FieldLabel.test.tsx +25 -0
  91. package/src/Field/FieldLabel.tsx +11 -2
  92. package/src/Item/Item.doc.mjs +5 -0
  93. package/src/Item/Item.test.tsx +88 -0
  94. package/src/Item/Item.tsx +57 -11
  95. package/src/Layer/layerAnimations.stylex.ts +23 -0
  96. package/src/List/ListItem.doc.mjs +12 -0
  97. package/src/List/ListItem.tsx +13 -0
  98. package/src/MetadataList/MetadataList.test.tsx +24 -0
  99. package/src/MetadataList/MetadataList.tsx +6 -2
  100. package/src/MultiSelector/MultiSelector.test.tsx +76 -0
  101. package/src/MultiSelector/MultiSelector.tsx +22 -2
  102. package/src/ProgressBar/ProgressBar.test.tsx +34 -0
  103. package/src/ProgressBar/ProgressBar.tsx +16 -1
  104. package/src/RadioList/RadioList.test.tsx +26 -4
  105. package/src/RadioList/RadioListItem.tsx +8 -1
  106. package/src/SegmentedControl/SegmentedControl.test.tsx +28 -0
  107. package/src/SegmentedControl/SegmentedControlItem.tsx +20 -2
  108. package/src/Selector/Selector.test.tsx +22 -0
  109. package/src/Selector/Selector.tsx +8 -1
  110. package/src/Skeleton/Skeleton.test.tsx +16 -0
  111. package/src/Skeleton/Skeleton.tsx +13 -1
  112. package/src/Switch/Switch.test.tsx +89 -0
  113. package/src/Switch/Switch.tsx +65 -5
  114. package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +19 -0
  115. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +3 -1
  116. package/src/Toast/ToastViewport.test.tsx +218 -8
  117. package/src/Toast/ToastViewport.tsx +71 -12
  118. package/src/ToggleButton/ToggleButton.test.tsx +24 -0
  119. package/src/ToggleButton/ToggleButton.tsx +19 -1
  120. package/src/Token/Token.test.tsx +145 -0
  121. package/src/Token/Token.tsx +73 -33
  122. package/src/Token/TokenLink.tsx +107 -0
  123. package/src/Typeahead/BaseTypeahead.tsx +12 -0
  124. package/src/Typeahead/Typeahead.test.tsx +62 -0
  125. package/src/Typeahead/Typeahead.tsx +6 -0
  126. package/src/__tests__/forcedColors.ts +60 -0
  127. package/src/hooks/useKeyboardHint.test.tsx +22 -0
  128. package/src/hooks/useKeyboardHint.tsx +6 -2
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file AvatarGroupOverflow.tsx
3
- * @input Uses React, StyleX, AvatarGroupContext
3
+ * @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
4
4
  * @output Exports AvatarGroupOverflow for overflow indicator
5
5
  * @position Slot component used inside AvatarGroup
6
6
  *
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAyDtC;yBAlEe,mBAAmB"}
1
+ {"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CA0DtC;yBAnEe,mBAAmB"}
@@ -3,7 +3,7 @@
3
3
 
4
4
  /**
5
5
  * @file AvatarGroupOverflow.tsx
6
- * @input Uses React, StyleX, AvatarGroupContext
6
+ * @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
7
7
  * @output Exports AvatarGroupOverflow for overflow indicator
8
8
  * @position Slot component used inside AvatarGroup
9
9
  *
@@ -19,6 +19,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars, spacingVars } fr
19
19
  import { mergeProps } from "../utils/index.js";
20
20
  import { useAvatarGroup } from "./AvatarGroupContext.js";
21
21
  import { themeProps } from "../utils/themeProps.js";
22
+ import { useTranslator } from "../i18n/index.js";
22
23
  import { jsx as _jsx } from "react/jsx-runtime";
23
24
  const BORDER_WIDTH = 2;
24
25
  const OVERFLOW_FONT_RATIO = 0.35;
@@ -105,10 +106,13 @@ export function AvatarGroupOverflow({
105
106
  style,
106
107
  ...rest
107
108
  }) {
109
+ const t = useTranslator();
108
110
  const group = useAvatarGroup();
109
111
  const numericSize = group?.numericSize ?? 36;
110
112
  const overlap = group?.overlap ?? 0;
111
- const label = `${count} more`;
113
+ const label = t('@astryx.avatarGroup.overflow', {
114
+ count
115
+ });
112
116
  const content = children ?? `+${count}`;
113
117
  if (onClick) {
114
118
  return /*#__PURE__*/_jsx("button", {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file Button.tsx
3
- * @input Uses React, ButtonHTMLAttributes, ReactNode
3
+ * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
4
4
  * @output Exports Button component, ButtonProps, ButtonVariant types
5
5
  * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
6
6
  *
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAsB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA+FrD,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAkHH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,IAAI,CAAC;IACd,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAqJD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,IAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,eAAuB,EACvB,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,KAAK,EACL,SAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,SAAS,CA0OzB;yBAnQe,MAAM"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file Button.tsx
7
- * @input Uses React, ButtonHTMLAttributes, ReactNode
7
+ * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
8
8
  * @output Exports Button component, ButtonProps, ButtonVariant types
9
9
  * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
10
10
  *
@@ -30,6 +30,7 @@ import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
30
30
  import { mergeProps, mergeRefs } from "../utils/index.js";
31
31
  import { useLinkComponent } from "../Link/useLinkComponent.js";
32
32
  import { themeProps } from "../utils/themeProps.js";
33
+ import { useTranslator } from "../i18n/index.js";
33
34
 
34
35
  /**
35
36
  * Base button styles
@@ -376,6 +377,7 @@ export function Button({
376
377
  ref,
377
378
  ...props
378
379
  }) {
380
+ const t = useTranslator();
379
381
  const size = useSize(sizeProp, 'md');
380
382
  const buttonGroup = useButtonGroup();
381
383
  const [isPending, startTransition] = useTransition();
@@ -498,7 +500,7 @@ export function Button({
498
500
  }), /*#__PURE__*/_jsx(VisuallyHidden, {
499
501
  role: "status",
500
502
  "aria-live": "polite",
501
- children: isLoadingState ? 'Loading' : ''
503
+ children: isLoadingState ? t('@astryx.button.loading') : ''
502
504
  })]
503
505
  });
504
506
 
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA8IhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BA0NpB;yBAnPe,aAAa"}
1
+ {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA6JhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BA0NpB;yBAnPe,aAAa"}
@@ -102,7 +102,7 @@ const styles = {
102
102
  },
103
103
  checkmark: {
104
104
  k1xSpc: "x1s85apg",
105
- kMwMTN: "x17wrial",
105
+ kMwMTN: "x17wrial xs5hli",
106
106
  $$css: true
107
107
  },
108
108
  checkmarkVisible: {
@@ -111,7 +111,7 @@ const styles = {
111
111
  },
112
112
  indeterminateMark: {
113
113
  k1xSpc: "x1s85apg",
114
- kWkggS: "x1azo05",
114
+ kWkggS: "x1azo05 xwvh9j7",
115
115
  kaIpWk: "xjspbzw",
116
116
  $$css: true
117
117
  },
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA6HvB;yBA7Ie,gBAAgB"}
1
+ {"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAqIvB;yBArJe,gBAAgB"}
@@ -15,11 +15,10 @@
15
15
  * - /apps/storybook/stories/CheckboxList.stories.tsx
16
16
  * - /packages/cli/templates/blocks/components/CheckboxList/ (showcase blocks)
17
17
  */
18
- import { use } from 'react';
18
+ import { use, useRef } from 'react';
19
19
  import * as stylex from '@stylexjs/stylex';
20
20
  import "../theme/tokens.stylex.js";
21
21
  import { colorVars } from "../theme/tokens.stylex.js";
22
- import { composeEventHandlers } from "../utils/index.js";
23
22
  import { useDevWarning } from "../hooks/useDevWarning.js";
24
23
  import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
25
24
  import { ListItem } from "../List/ListItem.js";
@@ -122,6 +121,14 @@ export function CheckboxListItem({
122
121
 
123
122
  // Whether this item is interactive (has a toggle handler)
124
123
  const isInteractive = !effectiveReadOnly && (ctx != null || onCheck != null);
124
+
125
+ // The checkbox is the row's single keyboard control and action. The row is
126
+ // an enlarged click/tap target that delegates surface clicks to it via
127
+ // ListItem's `interactiveRef` (useClickableContainer), so each option is
128
+ // exactly one tab stop. Delegate whenever the row should respond to clicks:
129
+ // a toggleable item, or one carrying a consumer `onClick`.
130
+ const checkboxRef = useRef(null);
131
+ const hasRowInteraction = isInteractive || onClickProp != null;
125
132
  const handleToggle = () => {
126
133
  if (effectiveDisabled || effectiveReadOnly || isBusy) {
127
134
  return;
@@ -147,17 +154,25 @@ export function CheckboxListItem({
147
154
  label: label,
148
155
  description: description,
149
156
  endContent: endContent,
150
- isDisabled: effectiveDisabled,
151
- onClick: isInteractive || onClickProp ? composeEventHandlers(onClickProp, isInteractive ? handleToggle : undefined) : undefined,
157
+ isDisabled: effectiveDisabled
158
+ // Delegate row clicks to the checkbox instead of wiring onClick (which
159
+ // would add an invisible row button = a second tab stop). The checkbox
160
+ // stays the option's sole focusable control (WCAG 4.1.2 / APG checkbox
161
+ // pattern). A consumer onClick rides on the checkbox itself (below), so
162
+ // it still fires for both direct and delegated (row-surface) clicks.
163
+ ,
164
+ interactiveRef: hasRowInteraction ? checkboxRef : undefined,
152
165
  "aria-busy": isBusy || undefined,
153
166
  xstyle: [resolvedChecked === true && !effectiveDisabled && !effectiveReadOnly && styles.selected, xstyle],
154
167
  className: className,
155
168
  style: style,
156
169
  startContent: /*#__PURE__*/_jsx(CheckboxInput, {
170
+ ref: checkboxRef,
157
171
  label: checkboxLabel,
158
172
  isLabelHidden: true,
159
173
  value: resolvedChecked,
160
174
  onChange: () => handleToggle(),
175
+ onClick: onClickProp,
161
176
  isDisabled: effectiveDisabled,
162
177
  isReadOnly: effectiveReadOnly,
163
178
  isLoading: isBusy,
@@ -437,7 +437,7 @@ export function CodeBlock({
437
437
  setCopied(true);
438
438
  // Swapping the button's aria-label alone isn't reliably announced by
439
439
  // screen readers, so confirm the copy via a polite live region.
440
- announce('Copied');
440
+ announce(t('@astryx.codeBlock.copied'));
441
441
  onCopy?.();
442
442
  // Restart the reset timer on every copy — otherwise a rapid re-copy
443
443
  // is reverted early by the previous click's timer.
@@ -451,7 +451,7 @@ export function CodeBlock({
451
451
  } catch {
452
452
  // Clipboard failures leave the copied state unchanged.
453
453
  }
454
- }, [code, onCopy, announce]);
454
+ }, [code, onCopy, announce, t]);
455
455
  const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
456
456
  // Digits in the largest line number — sizes the gutter column width.
457
457
  const maxLineDigits = String(lines.length).length;
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAmRlB;yBAjSe,WAAW"}
1
+ {"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA4RlB;yBA1Se,WAAW"}
@@ -253,12 +253,21 @@ export function ContextMenu({
253
253
  }
254
254
  return;
255
255
  }
256
+ // APG menu pattern: Tab closes the menu. Menu items are tabIndex={-1}
257
+ // so Tab would otherwise leak focus into the page while the menu stayed
258
+ // open (menus-5). Do NOT preventDefault — closing restores focus to the
259
+ // previously focused element, and the browser's default Tab then
260
+ // continues from there to the next element.
261
+ if (e.key === 'Tab') {
262
+ closeMenu();
263
+ return;
264
+ }
256
265
  if (typeahead.onKeyDown(e)) {
257
266
  e.preventDefault();
258
267
  return;
259
268
  }
260
269
  listNavKeyDown(e);
261
- }, [listNavKeyDown, typeahead, ownsEvent]);
270
+ }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
262
271
 
263
272
  // Place the zero-size cursor anchor at a point in the trigger's local
264
273
  // coordinate space and open the menu. Positioning the anchor inside the
@@ -22,16 +22,13 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
22
22
  */
23
23
  onChange: (value: string) => void;
24
24
  /**
25
- * Accessible label for the group. Required (together with `aria-labelledby`,
26
- * one of the two) so screen readers announce the radios as a named set,
27
- * e.g. "Sort by".
25
+ * Accessible name for the group, announced by screen readers so the radios
26
+ * read as a named set (e.g. "Sort by"). Applied as the group's `aria-label`.
27
+ * Required -- an unnamed radio group is an accessibility defect. Pass
28
+ * `aria-labelledby` (via base props) instead if the name already exists as a
29
+ * visible element on the page.
28
30
  */
29
- 'aria-label'?: string;
30
- /**
31
- * The id of an element that labels the group, as an alternative to
32
- * `aria-label`.
33
- */
34
- 'aria-labelledby'?: string;
31
+ label: string;
35
32
  /**
36
33
  * Whether selecting a value closes the menu. Radio items default to closing
37
34
  * on selection (a single-choice commit), unlike checkbox items which stay
@@ -54,14 +51,14 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
54
51
  * DropdownMenuRadioItem,
55
52
  * } from '@astryxdesign/core/DropdownMenu';
56
53
  * <DropdownMenu button={{label: 'Sort'}}>
57
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
54
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
58
55
  * <DropdownMenuRadioItem value="newest" label="Newest" />
59
56
  * <DropdownMenuRadioItem value="oldest" label="Oldest" />
60
57
  * </DropdownMenuRadioGroup>
61
58
  * </DropdownMenu>
62
59
  * ```
63
60
  */
64
- export declare function DropdownMenuRadioGroup({ value, onChange, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
61
+ export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
65
62
  export declare namespace DropdownMenuRadioGroup {
66
63
  var displayName: string;
67
64
  }
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAgB7B;yBAxBe,sBAAsB"}
1
+ {"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA1Be,sBAAsB"}
@@ -30,7 +30,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
30
30
  * DropdownMenuRadioItem,
31
31
  * } from '@astryxdesign/core/DropdownMenu';
32
32
  * <DropdownMenu button={{label: 'Sort'}}>
33
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
33
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
34
34
  * <DropdownMenuRadioItem value="newest" label="Newest" />
35
35
  * <DropdownMenuRadioItem value="oldest" label="Oldest" />
36
36
  * </DropdownMenuRadioGroup>
@@ -40,6 +40,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
40
40
  export function DropdownMenuRadioGroup({
41
41
  value,
42
42
  onChange,
43
+ label,
43
44
  hasCloseOnSelect = true,
44
45
  children,
45
46
  className,
@@ -54,6 +55,7 @@ export function DropdownMenuRadioGroup({
54
55
  return /*#__PURE__*/_jsx("div", {
55
56
  ...rest,
56
57
  role: "group",
58
+ "aria-label": label,
57
59
  ...mergeProps({
58
60
  className: "x78zum5 xdt5ytf x1lsbc85"
59
61
  }, {
@@ -56,7 +56,7 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
56
56
  *
57
57
  * @example
58
58
  * ```
59
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
59
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
60
60
  * <DropdownMenuRadioItem value="newest" label="Newest" />
61
61
  * <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
62
62
  * </DropdownMenuRadioGroup>
@@ -107,7 +107,7 @@ const dotSizeStyles = {
107
107
  *
108
108
  * @example
109
109
  * ```
110
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
110
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
111
111
  * <DropdownMenuRadioItem value="newest" label="Newest" />
112
112
  * <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
113
113
  * </DropdownMenuRadioGroup>
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file FieldLabel.tsx
3
- * @input Uses React, Icon, IconType
3
+ * @input Uses React, Icon, IconType, useTranslator
4
4
  * @output Exports FieldLabel component, FieldLabelProps
5
5
  * @position Core label implementation; used by Field, CheckboxInput, Switch
6
6
  *
@@ -8,6 +8,7 @@
8
8
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
9
9
  * - /packages/core/src/Field/index.ts (exports if types change)
10
10
  * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
11
+ * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
11
12
  */
12
13
  import type { ReactNode } from 'react';
13
14
  import type { BaseProps } from '../BaseProps';
@@ -1 +1 @@
1
- {"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA0DjB;yBA5Ee,UAAU"}
1
+ {"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAmD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA+DjB;yBAjFe,UAAU"}
@@ -1,8 +1,10 @@
1
1
  // Copyright (c) Meta Platforms, Inc. and affiliates.
2
2
 
3
+ 'use client';
4
+
3
5
  /**
4
6
  * @file FieldLabel.tsx
5
- * @input Uses React, Icon, IconType
7
+ * @input Uses React, Icon, IconType, useTranslator
6
8
  * @output Exports FieldLabel component, FieldLabelProps
7
9
  * @position Core label implementation; used by Field, CheckboxInput, Switch
8
10
  *
@@ -10,14 +12,15 @@
10
12
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
11
13
  * - /packages/core/src/Field/index.ts (exports if types change)
12
14
  * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
15
+ * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
13
16
  */
14
-
15
17
  import * as stylex from '@stylexjs/stylex';
16
18
  import { mergeProps } from "../utils/index.js";
17
19
  import "../theme/tokens.stylex.js";
18
20
  import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
19
21
  import { Icon, renderIconSlot } from "../Icon/index.js";
20
22
  import { Tooltip } from "../Tooltip/index.js";
23
+ import { useTranslator } from "../i18n/index.js";
21
24
  import { themeProps } from "../utils/themeProps.js";
22
25
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
23
26
  const styles = {
@@ -87,7 +90,8 @@ export function FieldLabel({
87
90
  ref,
88
91
  ...rest
89
92
  }) {
90
- const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
93
+ const t = useTranslator();
94
+ const statusText = isOptional ? t('@astryx.field.optional') : isRequired ? t('@astryx.field.required') : null;
91
95
 
92
96
  // A group label (e.g. for a radiogroup) must not be a literal `<label>`
93
97
  // element: a `<label>` semantically names a single form control and can't be
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file Item.tsx
3
- * @input Uses React, ReactNode, StyleXStyles, theme tokens
3
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
4
4
  * @output Exports Item component, ItemProps type
5
5
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
6
6
  *
@@ -11,7 +11,7 @@
11
11
  * - /apps/storybook/stories/Item.stories.tsx
12
12
  * - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
13
13
  */
14
- import type { ReactNode } from 'react';
14
+ import { type ReactNode } from 'react';
15
15
  import type { BaseProps } from '../BaseProps';
16
16
  export type ItemAlign = 'center' | 'start';
17
17
  export type ItemDensity = 'compact' | 'balanced' | 'spacious';
@@ -72,6 +72,19 @@ export interface ItemProps extends BaseProps<HTMLElement> {
72
72
  * Click handler. Makes the item clickable with button semantics.
73
73
  */
74
74
  onClick?: (event: React.MouseEvent) => void;
75
+ /**
76
+ * Ref to a nested control inside the item (e.g. a checkbox in
77
+ * `startContent`) that already provides the item's keyboard access and
78
+ * action. When set, the item becomes an enlarged click/tap target that
79
+ * delegates surface clicks to that control via the `useClickableContainer`
80
+ * pattern: it renders no invisible button/anchor, so the row adds no second
81
+ * tab stop (WCAG 4.1.2 — one focusable control per option). Clicks on the
82
+ * control itself, and on any other nested interactive element, are left to
83
+ * that element. Mutually exclusive with `onClick`/`href` — when
84
+ * `interactiveRef` is set those are ignored (the nested control is the sole
85
+ * action).
86
+ */
87
+ interactiveRef?: React.RefObject<HTMLElement | null>;
75
88
  /**
76
89
  * Link URL. Makes the item a link via an invisible anchor element.
77
90
  */
@@ -126,7 +139,7 @@ export interface ItemProps extends BaseProps<HTMLElement> {
126
139
  * />
127
140
  * ```
128
141
  */
129
- export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
142
+ export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
130
143
  export declare namespace Item {
131
144
  var displayName: string;
132
145
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA+KX;yBAvMe,IAAI"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA4MX;yBArOe,IAAI"}
package/dist/Item/Item.js CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file Item.tsx
7
- * @input Uses React, ReactNode, StyleXStyles, theme tokens
7
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
8
8
  * @output Exports Item component, ItemProps type
9
9
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
10
10
  *
@@ -15,12 +15,15 @@
15
15
  * - /apps/storybook/stories/Item.stories.tsx
16
16
  * - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
17
17
  */
18
+ import { useRef } from 'react';
18
19
  import * as stylex from '@stylexjs/stylex';
19
20
  import "../theme/tokens.stylex.js";
20
21
  import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
21
- import { mergeProps } from "../utils/index.js";
22
+ import { mergeProps, mergeRefs } from "../utils/index.js";
22
23
  import { computeTargetAndRel } from "../Link/computeTargetAndRel.js";
23
24
  import { useLinkComponent } from "../Link/useLinkComponent.js";
25
+ import { useClickableContainer } from "../hooks/useClickableContainer.js";
26
+ import { useDevWarning } from "../hooks/useDevWarning.js";
24
27
  import { themeProps } from "../utils/themeProps.js";
25
28
 
26
29
  // =============================================================================
@@ -176,6 +179,7 @@ export function Item({
176
179
  labelLines,
177
180
  descriptionLines,
178
181
  onClick,
182
+ interactiveRef,
179
183
  href,
180
184
  target: targetFromProps,
181
185
  rel: relFromProps,
@@ -190,7 +194,23 @@ export function Item({
190
194
  ...restProps
191
195
  }) {
192
196
  const LinkComponent = useLinkComponent();
193
- const isInteractive = onClick != null || href != null;
197
+
198
+ // Delegation mode: the row is an enlarged click/tap target for a nested
199
+ // control (e.g. a checkbox) that owns the keyboard access and action. The
200
+ // control is the row's only tab stop; the row proxies surface clicks to it.
201
+ const isDelegate = interactiveRef != null;
202
+ const containerRef = useRef(null);
203
+ // Only onClick is needed: onMouseUp handles middle-click href navigation,
204
+ // which delegation mode never has (href is ignored here).
205
+ const {
206
+ onClick: delegatedOnClick
207
+ } = useClickableContainer({
208
+ containerRef,
209
+ interactiveRef: interactiveRef ?? undefined,
210
+ disabled: isDisabled
211
+ });
212
+ useDevWarning('Item', '`interactiveRef` is mutually exclusive with `onClick`/`href`. In ' + 'delegation mode the row only forwards clicks to the referenced control, ' + 'so `onClick`/`href` are ignored. Drop one of them.', isDelegate && (onClick != null || href != null));
213
+ const isInteractive = onClick != null || href != null || isDelegate;
194
214
  const {
195
215
  target,
196
216
  rel
@@ -233,7 +253,12 @@ export function Item({
233
253
  className: "x3psx0u x78zum5"
234
254
  },
235
255
  children: startContent
236
- }), hasParentRole ? /*#__PURE__*/_jsx("span", {
256
+ }), hasParentRole || isDelegate ?
257
+ /*#__PURE__*/
258
+ // Delegation mode (and parent-role mode) put the label in a plain span:
259
+ // keyboard access lives on the nested control, so no invisible
260
+ // button/anchor is rendered and the row adds no second tab stop.
261
+ _jsx("span", {
237
262
  ...{
238
263
  0: {
239
264
  className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
@@ -294,7 +319,7 @@ export function Item({
294
319
  })]
295
320
  });
296
321
  return /*#__PURE__*/_jsx(Component, {
297
- ref: ref,
322
+ ref: isDelegate ? mergeRefs(ref, containerRef) : ref,
298
323
  ...restProps,
299
324
  "aria-selected": allowsAriaSelected && isSelected || undefined
300
325
  // aria-selected is invalid on roles that don't permit it (listitem, a
@@ -309,7 +334,7 @@ export function Item({
309
334
  align
310
335
  }), stylex.props(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && styles.focusVisibleOutline, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
311
336
  role: role,
312
- onClick: hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
337
+ onClick: isDelegate ? delegatedOnClick : hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
313
338
  children: innerContent
314
339
  });
315
340
  }
@@ -1 +1 @@
1
- {"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAyC3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EA6B1B,CAAC"}
1
+ {"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA8D3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EA+B1B,CAAC"}
@@ -33,6 +33,14 @@ const enterBelow = "xv1hr86-B";
33
33
  const enterAbove = "x1ahk7ht-B";
34
34
  const enterEnd = "xwmkjkf-B";
35
35
  const enterStart = "xu7jd1z-B";
36
+
37
+ // RTL: the horizontal entrance nudge is a physical translateX, so it must
38
+ // mirror under RTL — a layer on the inline-end/start side must slide in from
39
+ // the correct physical side following the reading flow. Only the horizontal
40
+ // (translateX) keyframes need mirroring; the vertical enterAbove/enterBelow
41
+ // (translateY) entrances are direction-neutral and are left as-is.
42
+ const enterEndRtl = "xu7jd1z-B";
43
+ const enterStartRtl = "xwmkjkf-B";
36
44
  const animationBase = {
37
45
  animationDuration: durationVars['--duration-fast-max'],
38
46
  animationTimingFunction: easeVars['--ease-standard'],
@@ -65,14 +73,14 @@ export const layerAnimations = {
65
73
  $$css: true
66
74
  },
67
75
  end: {
68
- kKVMdj: "x1i331go x1aquc0h",
76
+ kKVMdj: "x1i331go x1vxsm5i x1aquc0h",
69
77
  k44tkh: "x9uej1z",
70
78
  kyAemX: "x128ha8g",
71
79
  kWV6AL: "xskzprw",
72
80
  $$css: true
73
81
  },
74
82
  start: {
75
- kKVMdj: "xck01x9 x1aquc0h",
83
+ kKVMdj: "xck01x9 x18lne9g x1aquc0h",
76
84
  k44tkh: "x9uej1z",
77
85
  kyAemX: "x128ha8g",
78
86
  kWV6AL: "xskzprw",
@@ -49,6 +49,16 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
49
49
  * Automatically enables hover/press styles when provided.
50
50
  */
51
51
  onClick?: (e: React.MouseEvent) => void;
52
+ /**
53
+ * Ref to a nested control inside the item (e.g. a checkbox in
54
+ * `startContent`) that already provides the item's keyboard access and
55
+ * action. When set, the item becomes an enlarged click/tap target that
56
+ * delegates surface clicks to that control via the `useClickableContainer`
57
+ * pattern: it renders no invisible button/anchor, so the row adds no second
58
+ * tab stop (WCAG 4.1.2 — one focusable control per option). Mutually
59
+ * exclusive with `onClick`/`href` — when set those are ignored.
60
+ */
61
+ interactiveRef?: React.RefObject<HTMLElement | null>;
52
62
  /**
53
63
  * URL for link items. Renders an invisible anchor element.
54
64
  * Automatically enables hover/press styles when provided.
@@ -88,7 +98,7 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
88
98
  * <ListItem label="Docs" href="/docs" target="_blank" rel="noreferrer" />
89
99
  * ```
90
100
  */
91
- export declare function ListItem({ label, description, startContent, endContent, onClick, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
101
+ export declare function ListItem({ label, description, startContent, endContent, onClick, interactiveRef, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
92
102
  export declare namespace ListItem {
93
103
  var displayName: string;
94
104
  }