@astryxdesign/core 0.5.0-canary.f2eec71 → 0.5.0-canary.f4aab4c

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 (207) hide show
  1. package/dist/AlertDialog/AlertDialog.d.ts +1 -1
  2. package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
  3. package/dist/AlertDialog/AlertDialog.js +45 -20
  4. package/dist/AspectRatio/AspectRatio.d.ts +6 -6
  5. package/dist/Button/Button.d.ts.map +1 -1
  6. package/dist/Button/Button.js +6 -2
  7. package/dist/Card/Card.d.ts +12 -12
  8. package/dist/Card/Card.d.ts.map +1 -1
  9. package/dist/Card/Card.js +17 -9
  10. package/dist/Card/index.d.ts +35 -1
  11. package/dist/Card/index.d.ts.map +1 -1
  12. package/dist/Card/index.js +21 -1
  13. package/dist/DateInput/TouchDateField.d.ts.map +1 -1
  14. package/dist/DateInput/TouchDateField.js +44 -19
  15. package/dist/Dialog/Dialog.d.ts +16 -2
  16. package/dist/Dialog/Dialog.d.ts.map +1 -1
  17. package/dist/Dialog/Dialog.js +28 -7
  18. package/dist/HoverCard/HoverCard.d.ts.map +1 -1
  19. package/dist/HoverCard/HoverCard.js +55 -3
  20. package/dist/HoverCard/useHoverCard.d.ts +4 -1
  21. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  22. package/dist/List/List.d.ts +1 -1
  23. package/dist/List/List.d.ts.map +1 -1
  24. package/dist/List/List.js +15 -4
  25. package/dist/Markdown/Markdown.d.ts +1 -1
  26. package/dist/Markdown/Markdown.d.ts.map +1 -1
  27. package/dist/Markdown/Markdown.js +20 -7
  28. package/dist/Markdown/parser.d.ts.map +1 -1
  29. package/dist/Markdown/parser.js +5 -3
  30. package/dist/MetadataList/MetadataListItem.d.ts +1 -1
  31. package/dist/MetadataList/MetadataListItem.d.ts.map +1 -1
  32. package/dist/MetadataList/MetadataListItem.js +4 -1
  33. package/dist/MultiSelector/MultiSelector.d.ts +18 -1
  34. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  35. package/dist/MultiSelector/MultiSelector.js +46 -5
  36. package/dist/NavMenu/NavHeadingMenu.d.ts +1 -1
  37. package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
  38. package/dist/NavMenu/NavHeadingMenu.js +7 -4
  39. package/dist/NumberInput/NumberInput.d.ts +5 -1
  40. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  41. package/dist/NumberInput/NumberInput.js +39 -79
  42. package/dist/NumberInput/numberInputCommit.d.ts +34 -0
  43. package/dist/NumberInput/numberInputCommit.d.ts.map +1 -0
  44. package/dist/NumberInput/numberInputCommit.js +71 -0
  45. package/dist/NumberInput/numberParser.d.ts +16 -3
  46. package/dist/NumberInput/numberParser.d.ts.map +1 -1
  47. package/dist/NumberInput/numberParser.js +26 -9
  48. package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
  49. package/dist/PowerSearch/PowerSearchValueEditor.js +91 -18
  50. package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
  51. package/dist/SelectableCard/SelectableCard.js +9 -0
  52. package/dist/Selector/Selector.d.ts +17 -0
  53. package/dist/Selector/Selector.d.ts.map +1 -1
  54. package/dist/Selector/Selector.js +76 -14
  55. package/dist/Slider/Slider.d.ts.map +1 -1
  56. package/dist/Slider/Slider.js +34 -2
  57. package/dist/Table/plugins/filtering/useTableFiltering.d.ts.map +1 -1
  58. package/dist/Table/plugins/filtering/useTableFiltering.js +73 -4
  59. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts +26 -0
  60. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
  61. package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +34 -3
  62. package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
  63. package/dist/Table/plugins/selection/useTableSelection.js +25 -1
  64. package/dist/Timestamp/Timestamp.d.ts +1 -1
  65. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  66. package/dist/Timestamp/Timestamp.js +10 -18
  67. package/dist/Token/Token.d.ts +1 -1
  68. package/dist/Token/Token.d.ts.map +1 -1
  69. package/dist/Token/Token.js +20 -9
  70. package/dist/Token/TokenLink.d.ts +1 -1
  71. package/dist/Token/TokenLink.d.ts.map +1 -1
  72. package/dist/Token/TokenLink.js +5 -2
  73. package/dist/TopNav/TopNavMegaMenu.d.ts +1 -1
  74. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  75. package/dist/TopNav/TopNavMegaMenu.js +29 -9
  76. package/dist/TopNav/TopNavMenu.d.ts +1 -1
  77. package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
  78. package/dist/TopNav/TopNavMenu.js +19 -5
  79. package/dist/TreeList/TreeList.d.ts +1 -1
  80. package/dist/TreeList/TreeList.d.ts.map +1 -1
  81. package/dist/TreeList/TreeList.js +7 -2
  82. package/dist/Typeahead/TypeaheadItem.d.ts +1 -1
  83. package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
  84. package/dist/Typeahead/TypeaheadItem.js +7 -2
  85. package/dist/astryx.css +9 -4
  86. package/dist/theme/Theme.d.ts.map +1 -1
  87. package/dist/theme/Theme.js +46 -10
  88. package/dist/theme/generateThemeRules.d.ts +21 -0
  89. package/dist/theme/generateThemeRules.d.ts.map +1 -1
  90. package/dist/theme/generateThemeRules.js +26 -0
  91. package/locales/af-ZA.json +6 -6
  92. package/locales/ar-SA.json +6 -6
  93. package/locales/ca-ES.json +5 -5
  94. package/locales/cs-CZ.json +6 -6
  95. package/locales/da-DK.json +6 -6
  96. package/locales/de-DE.json +6 -6
  97. package/locales/el-GR.json +6 -6
  98. package/locales/en.json +127 -3
  99. package/locales/es-ES.json +5 -5
  100. package/locales/fi-FI.json +6 -6
  101. package/locales/fr-FR.json +6 -6
  102. package/locales/he-IL.json +6 -6
  103. package/locales/hu-HU.json +6 -6
  104. package/locales/it-IT.json +6 -6
  105. package/locales/ja-JP.json +6 -6
  106. package/locales/ko-KR.json +6 -6
  107. package/locales/nl-NL.json +6 -6
  108. package/locales/no-NO.json +6 -6
  109. package/locales/pl-PL.json +6 -6
  110. package/locales/pseudo.json +93 -0
  111. package/locales/pt-BR.json +6 -6
  112. package/locales/pt-PT.json +6 -6
  113. package/locales/ro-RO.json +6 -6
  114. package/locales/ru-RU.json +6 -6
  115. package/locales/sr-SP.json +6 -6
  116. package/locales/sv-SE.json +6 -6
  117. package/locales/tr-TR.json +6 -6
  118. package/locales/uk-UA.json +6 -6
  119. package/locales/vi-VN.json +6 -6
  120. package/locales/zh-CN.json +6 -6
  121. package/locales/zh-TW.json +6 -6
  122. package/package.json +2 -2
  123. package/src/AlertDialog/AlertDialog.doc.mjs +114 -30
  124. package/src/AlertDialog/AlertDialog.test.tsx +211 -2
  125. package/src/AlertDialog/AlertDialog.tsx +62 -20
  126. package/src/AspectRatio/AspectRatio.doc.mjs +3 -3
  127. package/src/AspectRatio/AspectRatio.tsx +6 -6
  128. package/src/Button/Button.doc.mjs +2 -1
  129. package/src/Button/Button.test.tsx +19 -4
  130. package/src/Button/Button.tsx +7 -1
  131. package/src/ButtonGroup/ButtonGroup.doc.mjs +2 -2
  132. package/src/ButtonGroup/ButtonGroup.test.tsx +13 -0
  133. package/src/Card/Card.doc.mjs +10 -7
  134. package/src/Card/Card.test.tsx +113 -19
  135. package/src/Card/Card.tsx +67 -89
  136. package/src/Card/index.ts +36 -1
  137. package/src/DateInput/DateInput.doc.mjs +2 -2
  138. package/src/DateInput/DateInputTouch.test.tsx +85 -30
  139. package/src/DateInput/TouchDateField.tsx +70 -20
  140. package/src/Dialog/Dialog.test.tsx +185 -18
  141. package/src/Dialog/Dialog.tsx +35 -11
  142. package/src/HoverCard/HoverCard.test.tsx +54 -1
  143. package/src/HoverCard/HoverCard.tsx +74 -2
  144. package/src/HoverCard/useHoverCard.tsx +4 -1
  145. package/src/Layer/useLayer.test.tsx +62 -14
  146. package/src/List/List.test.tsx +38 -0
  147. package/src/List/List.tsx +8 -1
  148. package/src/Markdown/Markdown.test.tsx +37 -0
  149. package/src/Markdown/Markdown.tsx +16 -5
  150. package/src/Markdown/parser.test.ts +33 -0
  151. package/src/Markdown/parser.ts +9 -3
  152. package/src/MetadataList/MetadataList.test.tsx +75 -2
  153. package/src/MetadataList/MetadataListItem.tsx +5 -2
  154. package/src/MultiSelector/MultiSelector.doc.mjs +22 -1
  155. package/src/MultiSelector/MultiSelector.test.tsx +171 -0
  156. package/src/MultiSelector/MultiSelector.tsx +92 -5
  157. package/src/NavMenu/NavHeadingMenu.test.tsx +30 -0
  158. package/src/NavMenu/NavHeadingMenu.tsx +7 -4
  159. package/src/NumberInput/NumberInput.doc.mjs +11 -7
  160. package/src/NumberInput/NumberInput.test.tsx +436 -8
  161. package/src/NumberInput/NumberInput.tsx +48 -99
  162. package/src/NumberInput/numberInputCommit.test.ts +72 -0
  163. package/src/NumberInput/numberInputCommit.ts +103 -0
  164. package/src/NumberInput/numberParser.docblock.test.ts +234 -0
  165. package/src/NumberInput/numberParser.test.ts +12 -0
  166. package/src/NumberInput/numberParser.ts +26 -9
  167. package/src/Pagination/Pagination.test.tsx +3 -2
  168. package/src/PowerSearch/PowerSearchEditPopover.test.tsx +87 -0
  169. package/src/PowerSearch/PowerSearchValueEditor.test.tsx +64 -0
  170. package/src/PowerSearch/PowerSearchValueEditor.tsx +109 -10
  171. package/src/SelectableCard/SelectableCard.doc.mjs +3 -0
  172. package/src/SelectableCard/SelectableCard.tsx +16 -0
  173. package/src/Selector/Selector.doc.mjs +14 -0
  174. package/src/Selector/Selector.test.tsx +266 -0
  175. package/src/Selector/Selector.tsx +128 -15
  176. package/src/Slider/Slider.test.tsx +106 -1
  177. package/src/Slider/Slider.tsx +52 -1
  178. package/src/Stepper/Step.doc.mjs +1 -1
  179. package/src/Table/TableBody.doc.mjs +2 -2
  180. package/src/Table/TableHeader.doc.mjs +1 -1
  181. package/src/Table/plugins/filtering/useTableFiltering.test.tsx +44 -6
  182. package/src/Table/plugins/filtering/useTableFiltering.tsx +100 -4
  183. package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +50 -4
  184. package/src/Table/plugins/selection/useTableSelection.test.tsx +62 -0
  185. package/src/Table/plugins/selection/useTableSelection.tsx +25 -2
  186. package/src/Table/useTableGroupedRows.doc.mjs +3 -3
  187. package/src/Table/useTablePagination.doc.mjs +1 -1
  188. package/src/Timestamp/Timestamp.test.tsx +58 -0
  189. package/src/Timestamp/Timestamp.tsx +8 -8
  190. package/src/Token/Token.test.tsx +95 -0
  191. package/src/Token/Token.tsx +15 -10
  192. package/src/Token/TokenLink.tsx +12 -3
  193. package/src/TopNav/TopNavMegaMenu.test.tsx +104 -0
  194. package/src/TopNav/TopNavMegaMenu.tsx +45 -4
  195. package/src/TopNav/TopNavMenu.test.tsx +133 -1
  196. package/src/TopNav/TopNavMenu.tsx +35 -5
  197. package/src/TreeList/TreeList.test.tsx +49 -0
  198. package/src/TreeList/TreeList.tsx +7 -2
  199. package/src/Typeahead/TypeaheadItem.test.tsx +43 -0
  200. package/src/Typeahead/TypeaheadItem.tsx +8 -1
  201. package/src/raw-import.d.ts +14 -0
  202. package/src/theme/Theme.test.tsx +104 -2
  203. package/src/theme/Theme.tsx +49 -14
  204. package/src/theme/defineTheme.test.ts +23 -0
  205. package/src/theme/derivedVarRegistry.test.ts +4 -0
  206. package/src/theme/generateThemeRules.test.ts +62 -1
  207. package/src/theme/generateThemeRules.ts +28 -0
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file AlertDialog.tsx
3
- * @input Uses React, Dialog, Layout, Heading, Text, Button
3
+ * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
4
4
  * @output Exports AlertDialog component, AlertDialogProps type
5
5
  * @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
6
6
  *
@@ -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;;;;;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"}
1
+ {"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,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,qBA8FlB;yBAhHe,WAAW"}
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file AlertDialog.tsx
7
- * @input Uses React, Dialog, Layout, Heading, Text, Button
7
+ * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
8
8
  * @output Exports AlertDialog component, AlertDialogProps type
9
9
  * @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
10
10
  *
@@ -16,18 +16,32 @@
16
16
  * - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
17
17
  */
18
18
  import React, { useId, useCallback } from 'react';
19
+ import * as stylex from '@stylexjs/stylex';
19
20
  import { Dialog } from "../Dialog/index.js";
20
21
  import { Layout } from "../Layout/Layout.js";
21
22
  import { LayoutContent } from "../Layout/LayoutContent.js";
22
23
  import { LayoutFooter } from "../Layout/LayoutFooter.js";
23
- import { HStack } from "../Stack/index.js";
24
+ import { Stack } from "../Stack/index.js";
24
25
  import { Heading } from "../Heading/Heading.js";
25
26
  import { Text } from "../Text/Text.js";
26
27
  import { Button } from "../Button/index.js";
27
28
  import { mergeProps } from "../utils/index.js";
28
29
  import { themeProps } from "../utils/themeProps.js";
29
30
  import { useTranslator } from "../i18n/index.js";
31
+ import { useMediaQuery } from "../hooks/index.js";
30
32
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
33
+ const SMALL_SCREEN_QUERY = '(max-width: 640px)';
34
+ const styles = {
35
+ action: {
36
+ ks0D6T: "x193iq5w",
37
+ k7Eaqz: "xeuugli",
38
+ $$css: true
39
+ },
40
+ stackedAction: {
41
+ kzqmXN: "xh8yej3",
42
+ $$css: true
43
+ }
44
+ };
31
45
  /**
32
46
  * A confirmation dialog for destructive or irreversible actions.
33
47
  *
@@ -77,9 +91,33 @@ export function AlertDialog({
77
91
  const cancelLabel = cancelLabelFromProps ?? t('@astryx.alertDialog.cancel');
78
92
  const titleId = useId();
79
93
  const descriptionId = useId();
94
+ // Width stays delegated to Dialog: this query exists only so AlertDialog can
95
+ // keep narrow visual, DOM, and tab order aligned for its destructive/cancel
96
+ // semantics without coupling action order to pointer or hover capability.
97
+ const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);
80
98
  const handleCancel = useCallback(() => {
81
99
  onOpenChange(false);
82
100
  }, [onOpenChange]);
101
+ const buttonActionStyle = [styles.action, isSmallScreen && styles.stackedAction];
102
+ const cancelButton = /*#__PURE__*/_jsx(Button, {
103
+ variant: "ghost",
104
+ label: cancelLabel,
105
+ onClick: handleCancel,
106
+ xstyle: buttonActionStyle
107
+ // Dialog focuses [data-autofocus] itself after showModal(), because
108
+ // React's autoFocus runs during commit while the dialog is invisible.
109
+ // Cancel is least destructive, so it remains the autofocus target even
110
+ // when small-screen visual order places the destructive action above it.
111
+ ,
112
+ "data-autofocus": true
113
+ }, "cancel");
114
+ const actionButton = /*#__PURE__*/_jsx(Button, {
115
+ variant: actionVariant,
116
+ label: actionLabel,
117
+ onClick: onAction,
118
+ isLoading: isActionLoading,
119
+ xstyle: buttonActionStyle
120
+ }, "action");
83
121
  return /*#__PURE__*/_jsx(Dialog, {
84
122
  ...rest,
85
123
  ref: ref,
@@ -117,25 +155,12 @@ export function AlertDialog({
117
155
  })]
118
156
  }),
119
157
  footer: /*#__PURE__*/_jsx(LayoutFooter, {
120
- children: /*#__PURE__*/_jsxs(HStack, {
158
+ children: /*#__PURE__*/_jsx(Stack, {
159
+ direction: isSmallScreen ? 'vertical' : 'horizontal',
121
160
  gap: 2,
122
- hAlign: "end",
123
- children: [/*#__PURE__*/_jsx(Button, {
124
- variant: "ghost",
125
- label: cancelLabel,
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
133
- }), /*#__PURE__*/_jsx(Button, {
134
- variant: actionVariant,
135
- label: actionLabel,
136
- onClick: onAction,
137
- isLoading: isActionLoading
138
- })]
161
+ hAlign: isSmallScreen ? 'stretch' : 'end',
162
+ wrap: isSmallScreen ? 'nowrap' : 'wrap',
163
+ children: isSmallScreen ? [actionButton, cancelButton] : [cancelButton, actionButton]
139
164
  })
140
165
  })
141
166
  })
@@ -44,14 +44,14 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
44
44
  * `astryx-base` cascade layer, and unlayered CSS wins over layered
45
45
  * rules regardless of specificity.
46
46
  *
47
+ * A responsive ratio is set in CSS, not on the component. For example, a 3:1
48
+ * hero can become 3:2 when its container narrows by targeting the element's
49
+ * class from a container query:
50
+ * `@container gallery (max-width: 720px) { .gallery-hero { aspect-ratio: 3 / 2; } }`.
51
+ *
47
52
  * @example
48
53
  * ```
49
- * // 3:1 hero that becomes 3:2 when its container stacks
50
- * <AspectRatio ratio={3 / 1} className="gallery-hero">…</AspectRatio>
51
- *
52
- * // CSS: @container gallery (max-width: 720px) {
53
- * // .gallery-hero { aspect-ratio: 3 / 2; }
54
- * // }
54
+ * <AspectRatio ratio={3 / 1} className="gallery-hero">...</AspectRatio>
55
55
  * ```
56
56
  */
57
57
  ratio: number;
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
@@ -445,9 +445,13 @@ export function Button({
445
445
  // for every variant, and `destructive` re-colors just the ring to match
446
446
  // its own surface. Ordering is the mechanism — StyleX is last-wins.
447
447
  variants[variant], xstyle);
448
- const sharedMergedProps = mergeProps(themeProps('button', {
448
+ const sharedMergedProps = mergeProps(
449
+ // Inside a group the group owns the surface's elevation, so the button
450
+ // reflects the tier it actually paints rather than the prop it was handed.
451
+ themeProps('button', {
449
452
  variant,
450
- size
453
+ size,
454
+ elevation: buttonGroup ? 'none' : elevation
451
455
  }), sharedStylexProps, className, style);
452
456
  const buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
453
457
  children: [isLoadingState && /*#__PURE__*/_jsx("span", {
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @file Card.tsx
3
3
  * @input Uses container utility, StyleX
4
- * @output Exports Card component and CardProps
4
+ * @output Exports Card component, CardProps, CardVariant types
5
5
  * @position Core card container component
6
6
  *
7
7
  * SYNC: When modified, update these files to stay in sync:
@@ -13,8 +13,11 @@
13
13
  import type { ReactNode } from 'react';
14
14
  import type { Elevation, SizeValue, SpacingStep } from '../utils/types';
15
15
  import type { BaseProps } from '../BaseProps';
16
+ import type { CardVariantMap } from './index';
16
17
  /**
17
- * Background color variant for Card.
18
+ * Background color variant for Card, derived from CardVariantMap.
19
+ * Extensible via module augmentation of CardVariantMap.
20
+ *
18
21
  * - `default`: standard card background with visible border
19
22
  * - `transparent`: no background, no visible border — for grouping content without visual weight
20
23
  * - `muted`: subtle muted background for de-emphasised cards
@@ -26,18 +29,10 @@ import type { BaseProps } from '../BaseProps';
26
29
  * keeping content geometry faithful to the spacing scale and identical to the
27
30
  * borderless variants. Themes can override borderWidth/borderColor.
28
31
  */
29
- export type CardVariant = 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow';
32
+ export type CardVariant = keyof CardVariantMap;
30
33
  export type { SizeValue } from '../utils/types';
31
34
  export interface CardProps extends BaseProps<HTMLDivElement> {
32
35
  ref?: React.Ref<HTMLDivElement>;
33
- /**
34
- * CSS class name(s) appended to the root element.
35
- */
36
- className?: string;
37
- /**
38
- * Inline styles to apply to the root element.
39
- */
40
- style?: React.CSSProperties;
41
36
  /**
42
37
  * Width of the card.
43
38
  * Numbers are treated as pixels, strings are used as-is.
@@ -66,7 +61,12 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
66
61
  /**
67
62
  * Internal padding of the card using the spacing scale.
68
63
  * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
69
- * @default 4 (16px)
64
+ *
65
+ * Omit it and the card takes the theme's card padding rather than a step, so
66
+ * passing a step is a decision to override the theme, not a way to restate
67
+ * the default.
68
+ *
69
+ * @default the theme's card padding (spacing step 4 with no theme)
70
70
  */
71
71
  padding?: SpacingStep;
72
72
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AA2Gb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2DX;yBAzEe,IAAI"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAM5C;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC;AAgH/C,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAkDX;yBAhEe,IAAI"}
package/dist/Card/Card.js CHANGED
@@ -3,7 +3,7 @@
3
3
  /**
4
4
  * @file Card.tsx
5
5
  * @input Uses container utility, StyleX
6
- * @output Exports Card component and CardProps
6
+ * @output Exports Card component, CardProps, CardVariant types
7
7
  * @position Core card container component
8
8
  *
9
9
  * SYNC: When modified, update these files to stay in sync:
@@ -17,7 +17,7 @@ import * as stylex from '@stylexjs/stylex';
17
17
  import "../theme/tokens.stylex.js";
18
18
  import { borderVars, colorVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
19
19
  import { container } from "../Layout/container.stylex.js";
20
- import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
20
+ import { spacingStepToToken } from "../Layout/padding.stylex.js";
21
21
  import { mergeProps } from "../utils/index.js";
22
22
  import { themeProps } from "../utils/themeProps.js";
23
23
 
@@ -26,7 +26,9 @@ import { themeProps } from "../utils/themeProps.js";
26
26
  // =============================================================================
27
27
 
28
28
  /**
29
- * Background color variant for Card.
29
+ * Background color variant for Card, derived from CardVariantMap.
30
+ * Extensible via module augmentation of CardVariantMap.
31
+ *
30
32
  * - `default`: standard card background with visible border
31
33
  * - `transparent`: no background, no visible border — for grouping content without visual weight
32
34
  * - `muted`: subtle muted background for de-emphasised cards
@@ -67,7 +69,10 @@ const styles = {
67
69
  }
68
70
  };
69
71
 
70
- // Background variant styles — each maps to a design token
72
+ // Background variant styles — each maps to a design token. Typed as PARTIAL
73
+ // over CardVariant: a theme can add a variant, and the record deliberately has
74
+ // no entry for it, so the lookup is undefined, StyleX drops it, and the card
75
+ // takes base styles for the theme rule to paint over.
71
76
  const variantStyles = {
72
77
  default: {
73
78
  kWkggS: "x1de1mus",
@@ -216,20 +221,23 @@ export function Card({
216
221
 
217
222
  // When no explicit padding prop, use theme default (set via container tokens)
218
223
  const useThemeDefault = padding == null;
219
- const effectivePadding = padding ?? 4;
220
- const paddingToken = spacingStepToToken[effectivePadding];
224
+ const paddingToken = useThemeDefault ? undefined : spacingStepToToken[padding];
221
225
  return /*#__PURE__*/_jsx("div", {
222
226
  ref: ref,
223
227
  ...mergeProps(themeProps('card', {
224
- variant
225
- }), stylex.props(styles.card, variantStyles[variant], elevationStyles[elevation], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
228
+ variant,
229
+ elevation
230
+ }), stylex.props(styles.card,
231
+ // A theme's own variant is not a key here: the lookup is undefined,
232
+ // StyleX drops it, and the theme rule paints over base styles.
233
+ variantStyles[variant], elevationStyles[elevation], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(paddingToken == null ? {
226
234
  useThemeDefault: 'card'
227
235
  } : {
228
236
  paddingInnerX: paddingToken,
229
237
  paddingInnerY: paddingToken,
230
238
  paddingOuterX: paddingToken,
231
239
  paddingOuterY: paddingToken
232
- }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding],
240
+ }),
233
241
  // Applied after the container padding so the border-inset calc wins;
234
242
  // it reads the --container-padding-* vars set above.
235
243
  variant === 'default' && styles.withBorder, xstyle), className, style),
@@ -1,11 +1,45 @@
1
1
  /**
2
2
  * @file index.ts
3
3
  * @input Imports Card component
4
- * @output Exports Card component and types
4
+ * @output Exports Card, CardProps, CardVariant, CardVariantMap
5
5
  * @position Entry point for @astryxdesign/core/Card module
6
6
  *
7
7
  * SYNC: When modified, update /packages/core/src/Card/Card.doc.mjs
8
8
  */
9
+ /**
10
+ * Extensible variant map for Card.
11
+ *
12
+ * Theme packages can add custom variants via TypeScript module augmentation:
13
+ * @example
14
+ * ```
15
+ * declare module '@astryxdesign/core/Card' {
16
+ * interface CardVariantMap {
17
+ * 'brand': true;
18
+ * }
19
+ * }
20
+ * ```
21
+ *
22
+ * Pair the theme rule's `backgroundColor` with `--selectable-card-ring-color`.
23
+ * SelectableCard rings an added variant in that var, defaulting to the accent —
24
+ * no token the component could pick is guaranteed to contrast with a fill it
25
+ * cannot know, so the theme that supplied the fill picks the ring, in the same
26
+ * rule.
27
+ */
28
+ export interface CardVariantMap {
29
+ default: true;
30
+ transparent: true;
31
+ muted: true;
32
+ blue: true;
33
+ cyan: true;
34
+ gray: true;
35
+ green: true;
36
+ orange: true;
37
+ pink: true;
38
+ purple: true;
39
+ red: true;
40
+ teal: true;
41
+ yellow: true;
42
+ }
9
43
  export { Card } from './Card';
10
44
  export type { CardProps, CardVariant, SizeValue } from './Card';
11
45
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,IAAI,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,CAAC;IACZ,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,IAAI,CAAC;IACb,GAAG,EAAE,IAAI,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,IAAI,CAAC;CACd;AAED,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC"}
@@ -3,10 +3,30 @@
3
3
  /**
4
4
  * @file index.ts
5
5
  * @input Imports Card component
6
- * @output Exports Card component and types
6
+ * @output Exports Card, CardProps, CardVariant, CardVariantMap
7
7
  * @position Entry point for @astryxdesign/core/Card module
8
8
  *
9
9
  * SYNC: When modified, update /packages/core/src/Card/Card.doc.mjs
10
10
  */
11
11
 
12
+ /**
13
+ * Extensible variant map for Card.
14
+ *
15
+ * Theme packages can add custom variants via TypeScript module augmentation:
16
+ * @example
17
+ * ```
18
+ * declare module '@astryxdesign/core/Card' {
19
+ * interface CardVariantMap {
20
+ * 'brand': true;
21
+ * }
22
+ * }
23
+ * ```
24
+ *
25
+ * Pair the theme rule's `backgroundColor` with `--selectable-card-ring-color`.
26
+ * SelectableCard rings an added variant in that var, defaulting to the accent —
27
+ * no token the component could pick is guaranteed to contrast with a fill it
28
+ * cannot know, so the theme that supplied the fill picks the ring, in the same
29
+ * rule.
30
+ */
31
+
12
32
  export { Card } from "./Card.js";
@@ -1 +1 @@
1
- {"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAgchD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqsBhB;yBAtuBe,cAAc"}
1
+ {"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAgehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmtBhB;yBApvBe,cAAc"}
@@ -38,6 +38,10 @@
38
38
  * 3. The title is the escape hatch. Tap it and the same box becomes a month
39
39
  * wheel and a year wheel — a flick each to reach 2019 instead of forty.
40
40
  *
41
+ * Reset is chrome, so it sits in the header beside the arrows rather than in
42
+ * the footer: the footer is where the task ends, and an undo of equal weight
43
+ * beside Save is a mis-tap that throws away the date just chosen.
44
+ *
41
45
  * SYNC: When modified, update these files to stay in sync:
42
46
  * - /packages/core/src/DateInput/DateInput.tsx
43
47
  * - /packages/core/src/DateInput/DateInput.doc.mjs
@@ -72,9 +76,8 @@ import "./tokens.stylex.js";
72
76
  import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
73
77
 
74
78
  /**
75
- * The comfortable minimum tap target on both iOS and Android. Applied as a
76
- * FLOOR under the size prop rather than replacing it: `size` still means what
77
- * it means, it just cannot produce a control a thumb misses.
79
+ * The comfortable minimum tap target on both iOS and Android, honoured by
80
+ * every target inside the sheet.
78
81
  */
79
82
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
80
83
  const TOUCH_TARGET = dateInputTouchSizes.daySize;
@@ -101,19 +104,16 @@ const sizeStyles = {
101
104
  sm: {
102
105
  kZKoxP: "x6k0iem",
103
106
  k7Eaqz: "xfb3i0g",
104
- kAzted: "xygd9yz",
105
107
  $$css: true
106
108
  },
107
109
  md: {
108
110
  kZKoxP: "x1ueg155",
109
111
  k7Eaqz: "xfb3i0g",
110
- kAzted: "xygd9yz",
111
112
  $$css: true
112
113
  },
113
114
  lg: {
114
115
  kZKoxP: "xssyfek",
115
116
  k7Eaqz: "xfb3i0g",
116
- kAzted: "xygd9yz",
117
117
  $$css: true
118
118
  }
119
119
  };
@@ -152,6 +152,10 @@ const styles = {
152
152
  k1xSpc: "x3nfvp2",
153
153
  $$css: true
154
154
  },
155
+ resetButton: {
156
+ kAzted: "xygd9yz",
157
+ $$css: true
158
+ },
155
159
  title: {
156
160
  k1xSpc: "x78zum5",
157
161
  kGNEyG: "x6s0dn4",
@@ -168,10 +172,13 @@ const styles = {
168
172
  k63SB2: "x2mo6ok",
169
173
  kkrTdU: "x1ypdohk x16khyan",
170
174
  khDVqt: "xuxw1ft",
175
+ k7Eaqz: "xeuugli",
176
+ kVQacm: "xb3r6kr",
171
177
  $$css: true
172
178
  },
173
179
  titleChevron: {
174
180
  k1xSpc: "x3nfvp2",
181
+ kmuXW: "x2lah0s",
175
182
  k1ekBW: "x11xpdln",
176
183
  kIyJzY: "xuedmi6",
177
184
  kAMwcw: "xlr8y92",
@@ -547,6 +554,9 @@ export function TouchDateField({
547
554
  "data-title": "month-year",
548
555
  ...stylex.props(styles.title, focusOutlineStyles.focusVisible),
549
556
  children: [/*#__PURE__*/_jsx("span", {
557
+ ...{
558
+ className: "xeuugli xb3r6kr xlyipyv"
559
+ },
550
560
  children: monthYearLabel
551
561
  }), /*#__PURE__*/_jsx(Icon, {
552
562
  icon: "chevronDown",
@@ -603,6 +613,27 @@ export function TouchDateField({
603
613
  })
604
614
  })
605
615
  })]
616
+ }), /*#__PURE__*/_jsx("span", {
617
+ "data-action": "reset",
618
+ inert: isWheelOpen ? true : undefined,
619
+ ...{
620
+ 0: {
621
+ className: "x78zum5 x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
622
+ },
623
+ 1: {
624
+ className: "x78zum5 x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
625
+ }
626
+ }[!!isWheelOpen << 0],
627
+ children: /*#__PURE__*/_jsx(Button
628
+ // ghost: a filled button up here would outrank the Save that
629
+ // finishes the task.
630
+ , {
631
+ variant: "ghost",
632
+ size: "sm",
633
+ xstyle: styles.resetButton,
634
+ label: t('@astryx.dateInput.resetPicking'),
635
+ onClick: handleResetInSheet
636
+ })
606
637
  })]
607
638
  }), /*#__PURE__*/_jsx("div", {
608
639
  "aria-hidden": "true",
@@ -677,23 +708,17 @@ export function TouchDateField({
677
708
  ...{
678
709
  className: "x1xye8es xrvj5dj x1y6fwsi"
679
710
  },
680
- children: [/*#__PURE__*/_jsxs("div", {
711
+ children: [/*#__PURE__*/_jsx("div", {
681
712
  inert: isWheelOpen ? true : undefined,
682
713
  ...{
683
714
  0: {
684
- className: "x15r89dc x78zum5 x1txdalj x74b7sa xuedmi6 xzg1mie"
715
+ className: "x15r89dc x78zum5 x74b7sa xuedmi6 xzg1mie"
685
716
  },
686
717
  1: {
687
- className: "x15r89dc x78zum5 x1txdalj x74b7sa xuedmi6 xzg1mie xlshs6z x47corl"
718
+ className: "x15r89dc x78zum5 x74b7sa xuedmi6 xzg1mie xlshs6z x47corl"
688
719
  }
689
720
  }[!!isWheelOpen << 0],
690
- children: [/*#__PURE__*/_jsx(Button, {
691
- variant: "secondary",
692
- size: "md",
693
- width: "100%",
694
- label: t('@astryx.dateInput.resetPicking'),
695
- onClick: handleResetInSheet
696
- }), /*#__PURE__*/_jsx(Button, {
721
+ children: /*#__PURE__*/_jsx(Button, {
697
722
  variant: "primary"
698
723
  // md, not sm: it is the action a thumb reaches for, so it gets
699
724
  // the comfortable size rather than the compact one the header's
@@ -703,15 +728,15 @@ export function TouchDateField({
703
728
  width: "100%",
704
729
  label: t('@astryx.dateInput.savePicking'),
705
730
  onClick: () => setIsSheetOpen(false)
706
- })]
731
+ })
707
732
  }), /*#__PURE__*/_jsx("div", {
708
733
  inert: isWheelOpen ? undefined : true,
709
734
  ...{
710
735
  0: {
711
- className: "x15r89dc x78zum5 x1txdalj x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
736
+ className: "x15r89dc x78zum5 x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
712
737
  },
713
738
  1: {
714
- className: "x15r89dc x78zum5 x1txdalj x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
739
+ className: "x15r89dc x78zum5 x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
715
740
  }
716
741
  }[!!!isWheelOpen << 0],
717
742
  children: /*#__PURE__*/_jsx(Button
@@ -7,8 +7,9 @@
7
7
  * The standard variant treats `width` as the preferred surface width, then
8
8
  * clamps it to the dynamic viewport with spacing-token gutters so narrow
9
9
  * viewports keep content and controls on screen without changing the public API.
10
- * Fullscreen dialogs preserve the same padding floor while honoring safe-area
11
- * insets, and fade in without the centered-dialog translate/scale motion.
10
+ * Fullscreen dialogs add safe-area protection to the default padding fallback
11
+ * while preserving explicit prop/theme padding overrides, and fade in without
12
+ * the centered-dialog translate/scale motion.
12
13
  *
13
14
  * SYNC: When modified, update these files to stay in sync:
14
15
  * - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
@@ -53,6 +54,19 @@ export interface DialogPosition extends DialogBlockPosition {
53
54
  /** Logical inline-end offset (`inset-inline-end`); mirrors under RTL. */
54
55
  end?: number | string;
55
56
  }
57
+ /** @internal Verified by Dialog.test.tsx; not re-exported from the package entry point. */
58
+ export declare const dialogFullscreenSafeAreaPaddingContract: {
59
+ readonly blockStart: string;
60
+ readonly blockEnd: string;
61
+ readonly inlineStart: {
62
+ readonly ltr: string;
63
+ readonly rtl: string;
64
+ };
65
+ readonly inlineEnd: {
66
+ readonly ltr: string;
67
+ readonly rtl: string;
68
+ };
69
+ };
56
70
  /**
57
71
  * Map a {@link DialogPosition} to resolved CSS offsets. Logical `start`/`end`
58
72
  * become `inset-inline-*` (mirror under RTL); each unset offset falls back to
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAuB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AA8JD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAiTb;yBAjUe,MAAM"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAuB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAkJX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAiTb;yBAjUe,MAAM"}