@xaui/native 0.9.1-alpha.20 → 0.9.1-alpha.22

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 (73) hide show
  1. package/dist/{chunk-RMLFMRWL.js → chunk-2U6JR7BF.js} +5 -5
  2. package/dist/{chunk-N7C4UNUL.js → chunk-3JATAB7S.js} +23 -1
  3. package/dist/chunk-4MHJOWM4.cjs +364 -0
  4. package/dist/{chunk-2WMVDMFV.cjs → chunk-6HXWQ5AU.cjs} +2 -2
  5. package/dist/chunk-6WW4CSPY.cjs +82 -0
  6. package/dist/chunk-AHL33YAO.js +425 -0
  7. package/dist/{chunk-XHZBXYVU.js → chunk-AKXG43S4.js} +1 -1
  8. package/dist/{chunk-A4VD4MHK.cjs → chunk-BH5DSJVX.cjs} +100 -133
  9. package/dist/chunk-BNWS26PX.cjs +449 -0
  10. package/dist/chunk-DXGQ43IV.cjs +68 -0
  11. package/dist/{chunk-4EPS7UBO.js → chunk-FNQF4KQV.js} +20 -97
  12. package/dist/chunk-FTCTTBLG.js +449 -0
  13. package/dist/chunk-FVP5FUVS.js +68 -0
  14. package/dist/{chunk-BHTFIZTQ.cjs → chunk-GBPWTFTU.cjs} +11 -11
  15. package/dist/{chunk-MWXE7D4L.js → chunk-GG2WWCBK.js} +11 -11
  16. package/dist/{chunk-EVXZGNPA.cjs → chunk-HUZ4AUM2.cjs} +98 -98
  17. package/dist/chunk-I6PE5UUH.cjs +425 -0
  18. package/dist/{chunk-33QILJJH.cjs → chunk-IBEX4XGV.cjs} +11 -11
  19. package/dist/{chunk-WXAME7KB.js → chunk-KM2TI5IC.js} +126 -159
  20. package/dist/chunk-OGC4RKE3.js +364 -0
  21. package/dist/{chunk-JXLRHKCQ.js → chunk-OYZYWWJ6.js} +1 -1
  22. package/dist/{chunk-EXX6ATAS.js → chunk-PMO62QK4.js} +101 -101
  23. package/dist/{chunk-UBA6AEY6.cjs → chunk-RAWOJ3N3.cjs} +8 -8
  24. package/dist/{chunk-6ARON3XT.cjs → chunk-VDRRD6GM.cjs} +31 -110
  25. package/dist/{chunk-UVO4GFSW.cjs → chunk-YXVKQMCK.cjs} +23 -1
  26. package/dist/chunk-ZQ3JSWRO.js +82 -0
  27. package/dist/close-button.type-BUYuoSt2.d.ts +36 -0
  28. package/dist/close-button.type-CHsgZ3wO.d.cts +36 -0
  29. package/dist/components/alert/index.cjs +17 -0
  30. package/dist/components/alert/index.d.cts +169 -0
  31. package/dist/components/alert/index.d.ts +169 -0
  32. package/dist/components/alert/index.js +17 -0
  33. package/dist/components/button/index.cjs +6 -5
  34. package/dist/components/button/index.d.cts +193 -243
  35. package/dist/components/button/index.d.ts +193 -243
  36. package/dist/components/button/index.js +5 -4
  37. package/dist/components/card/index.cjs +19 -0
  38. package/dist/components/card/index.d.cts +620 -0
  39. package/dist/components/card/index.d.ts +620 -0
  40. package/dist/components/card/index.js +19 -0
  41. package/dist/components/chip/index.cjs +17 -0
  42. package/dist/components/chip/index.d.cts +608 -0
  43. package/dist/components/chip/index.d.ts +608 -0
  44. package/dist/components/chip/index.js +17 -0
  45. package/dist/components/typography/index.cjs +4 -4
  46. package/dist/components/typography/index.d.cts +4 -4
  47. package/dist/components/typography/index.d.ts +4 -4
  48. package/dist/components/typography/index.js +3 -3
  49. package/dist/components/view/index.cjs +3 -3
  50. package/dist/components/view/index.d.cts +7 -7
  51. package/dist/components/view/index.d.ts +7 -7
  52. package/dist/components/view/index.js +2 -2
  53. package/dist/{create-recipe-CPXFo2rk.d.ts → create-recipe-CbXika57.d.ts} +7 -1
  54. package/dist/{create-recipe-C0XXjuow.d.cts → create-recipe-jHlk434p.d.cts} +7 -1
  55. package/dist/icon.type-CF4KiMKl.d.cts +73 -0
  56. package/dist/icon.type-Dq4_qePa.d.ts +73 -0
  57. package/dist/index.cjs +49 -11
  58. package/dist/index.d.cts +9 -4
  59. package/dist/index.d.ts +9 -4
  60. package/dist/index.js +71 -33
  61. package/dist/{pressable-feedback.type-BwkKLQlX.d.ts → pressable-feedback.type-BA2C9sSz.d.cts} +4 -72
  62. package/dist/{pressable-feedback.type-1K8YEOb8.d.cts → pressable-feedback.type-Bs4dQlGj.d.ts} +4 -72
  63. package/dist/{style-props.type-B1BG5TCm.d.cts → style-props.type-CfnoGEP7.d.cts} +1 -1
  64. package/dist/{style-props.type-B1BG5TCm.d.ts → style-props.type-CfnoGEP7.d.ts} +1 -1
  65. package/dist/system/index.cjs +16 -6
  66. package/dist/system/index.d.cts +174 -98
  67. package/dist/system/index.d.ts +174 -98
  68. package/dist/system/index.js +20 -10
  69. package/dist/theme/index.cjs +2 -2
  70. package/dist/theme/index.d.cts +11 -11
  71. package/dist/theme/index.d.ts +11 -11
  72. package/dist/theme/index.js +1 -1
  73. package/package.json +31 -1
@@ -2,8 +2,104 @@
2
2
 
3
3
  var _chunkMC7SY2QHcjs = require('./chunk-MC7SY2QH.cjs');
4
4
 
5
- // src/system/style-props/use-style-props.ts
5
+ // src/system/slot/create-slot-context.ts
6
6
  var _react = require('react');
7
+ function createSlotContext(name) {
8
+ const Context = _react.createContext.call(void 0, null);
9
+ Context.displayName = `XAUI.${name}.Context`;
10
+ function useSlotContext() {
11
+ const value = _react.useContext.call(void 0, Context);
12
+ if (value === null) {
13
+ const error = new Error(
14
+ `XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
15
+ );
16
+ _optionalChain([Error, 'access', _ => _.captureStackTrace, 'optionalCall', _2 => _2(
17
+ error,
18
+ useSlotContext
19
+ )]);
20
+ throw error;
21
+ }
22
+ return value;
23
+ }
24
+ return [Context.Provider, useSlotContext];
25
+ }
26
+
27
+ // src/system/slot/merge-refs.ts
28
+ function mergeRefs(...refs) {
29
+ return (value) => {
30
+ for (const ref of refs) {
31
+ if (typeof ref === "function") ref(value);
32
+ else if (ref) ref.current = value;
33
+ }
34
+ };
35
+ }
36
+
37
+ // src/system/slot/merge-props.ts
38
+ var EVENT_HANDLER = /^on[A-Z]/;
39
+ function mergeProps(ours, theirs) {
40
+ const merged = { ...ours };
41
+ for (const key of Object.keys(theirs)) {
42
+ const ourValue = ours[key];
43
+ const theirValue = theirs[key];
44
+ if (EVENT_HANDLER.test(key)) {
45
+ merged[key] = composeHandlers(ourValue, theirValue);
46
+ } else if (key === "style") {
47
+ merged[key] = mergeStyles(ourValue, theirValue);
48
+ } else if (key === "ref") {
49
+ merged[key] = mergeRefs(
50
+ ourValue,
51
+ theirValue
52
+ );
53
+ } else {
54
+ merged[key] = theirValue;
55
+ }
56
+ }
57
+ return merged;
58
+ }
59
+ function composeHandlers(ours, theirs) {
60
+ if (typeof ours !== "function") return theirs;
61
+ if (typeof theirs !== "function") return ours;
62
+ return (...args) => {
63
+ ;
64
+ ours(...args);
65
+ return theirs(...args);
66
+ };
67
+ }
68
+ function mergeStyles(ours, theirs) {
69
+ if (typeof ours === "function" || typeof theirs === "function") {
70
+ return (state) => [
71
+ resolveStyle(ours, state),
72
+ resolveStyle(theirs, state)
73
+ ];
74
+ }
75
+ return [ours, theirs];
76
+ }
77
+ function resolveStyle(style, state) {
78
+ return typeof style === "function" ? style(state) : style;
79
+ }
80
+
81
+ // src/system/slot/slot.tsx
82
+
83
+ var Slot = _react.forwardRef.call(void 0, function Slot2({ children, ...ours }, ref) {
84
+ if (!_react.isValidElement.call(void 0, children)) {
85
+ throw new Error(
86
+ "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
87
+ );
88
+ }
89
+ const child = children;
90
+ const merged = mergeProps(ours, child.props);
91
+ merged.ref = mergeRefs(ref, refOf(child));
92
+ return _react.cloneElement.call(void 0, child, merged);
93
+ });
94
+ Slot.displayName = "XAUI.Slot";
95
+ function refOf(element) {
96
+ const fromProps = element.props.ref;
97
+ const fromElement = element.ref;
98
+ return _nullishCoalesce(fromProps, () => ( fromElement));
99
+ }
100
+
101
+ // src/system/style-props/use-style-props.ts
102
+
7
103
 
8
104
  // src/utils/style-props.ts
9
105
  var STYLE_PROP_KEYS = [
@@ -197,102 +293,6 @@ function stringify(node) {
197
293
  return null;
198
294
  }
199
295
 
200
- // src/system/slot/create-slot-context.ts
201
-
202
- function createSlotContext(name) {
203
- const Context = _react.createContext.call(void 0, null);
204
- Context.displayName = `XAUI.${name}.Context`;
205
- function useSlotContext() {
206
- const value = _react.useContext.call(void 0, Context);
207
- if (value === null) {
208
- const error = new Error(
209
- `XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
210
- );
211
- _optionalChain([Error, 'access', _ => _.captureStackTrace, 'optionalCall', _2 => _2(
212
- error,
213
- useSlotContext
214
- )]);
215
- throw error;
216
- }
217
- return value;
218
- }
219
- return [Context.Provider, useSlotContext];
220
- }
221
-
222
- // src/system/slot/merge-refs.ts
223
- function mergeRefs(...refs) {
224
- return (value) => {
225
- for (const ref of refs) {
226
- if (typeof ref === "function") ref(value);
227
- else if (ref) ref.current = value;
228
- }
229
- };
230
- }
231
-
232
- // src/system/slot/merge-props.ts
233
- var EVENT_HANDLER = /^on[A-Z]/;
234
- function mergeProps(ours, theirs) {
235
- const merged = { ...ours };
236
- for (const key of Object.keys(theirs)) {
237
- const ourValue = ours[key];
238
- const theirValue = theirs[key];
239
- if (EVENT_HANDLER.test(key)) {
240
- merged[key] = composeHandlers(ourValue, theirValue);
241
- } else if (key === "style") {
242
- merged[key] = mergeStyles(ourValue, theirValue);
243
- } else if (key === "ref") {
244
- merged[key] = mergeRefs(
245
- ourValue,
246
- theirValue
247
- );
248
- } else {
249
- merged[key] = theirValue;
250
- }
251
- }
252
- return merged;
253
- }
254
- function composeHandlers(ours, theirs) {
255
- if (typeof ours !== "function") return theirs;
256
- if (typeof theirs !== "function") return ours;
257
- return (...args) => {
258
- ;
259
- ours(...args);
260
- return theirs(...args);
261
- };
262
- }
263
- function mergeStyles(ours, theirs) {
264
- if (typeof ours === "function" || typeof theirs === "function") {
265
- return (state) => [
266
- resolveStyle(ours, state),
267
- resolveStyle(theirs, state)
268
- ];
269
- }
270
- return [ours, theirs];
271
- }
272
- function resolveStyle(style, state) {
273
- return typeof style === "function" ? style(state) : style;
274
- }
275
-
276
- // src/system/slot/slot.tsx
277
-
278
- var Slot = _react.forwardRef.call(void 0, function Slot2({ children, ...ours }, ref) {
279
- if (!_react.isValidElement.call(void 0, children)) {
280
- throw new Error(
281
- "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
282
- );
283
- }
284
- const child = children;
285
- const merged = mergeProps(ours, child.props);
286
- merged.ref = mergeRefs(ref, refOf(child));
287
- return _react.cloneElement.call(void 0, child, merged);
288
- });
289
- Slot.displayName = "XAUI.Slot";
290
- function refOf(element) {
291
- const fromProps = element.props.ref;
292
- const fromElement = element.ref;
293
- return _nullishCoalesce(fromProps, () => ( fromElement));
294
- }
295
-
296
296
 
297
297
 
298
298
 
@@ -300,4 +300,4 @@ function refOf(element) {
300
300
 
301
301
 
302
302
 
303
- exports.useStyleProps = useStyleProps; exports.childrenToString = childrenToString; exports.createSlotContext = createSlotContext; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot;
303
+ exports.createSlotContext = createSlotContext; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot; exports.useStyleProps = useStyleProps; exports.childrenToString = childrenToString;
@@ -0,0 +1,425 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
2
+
3
+
4
+ var _chunk6WW4CSPYcjs = require('./chunk-6WW4CSPY.cjs');
5
+
6
+
7
+ var _chunkDXGQ43IVcjs = require('./chunk-DXGQ43IV.cjs');
8
+
9
+
10
+
11
+
12
+ var _chunkBH5DSJVXcjs = require('./chunk-BH5DSJVX.cjs');
13
+
14
+
15
+
16
+ var _chunkYXVKQMCKcjs = require('./chunk-YXVKQMCK.cjs');
17
+
18
+
19
+ var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
20
+
21
+
22
+
23
+
24
+
25
+ var _chunkHUZ4AUM2cjs = require('./chunk-HUZ4AUM2.cjs');
26
+
27
+ // src/components/chip/chip-avatar.tsx
28
+ var _react = require('react');
29
+ var _reactnative = require('react-native');
30
+
31
+ // src/components/chip/chip.context.ts
32
+ var [ChipProvider, useChip] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "Chip");
33
+
34
+ // src/components/chip/chip.style.ts
35
+
36
+ var chipSheet = _reactnative.StyleSheet.create({
37
+ avatarImage: { width: "100%", height: "100%" }
38
+ });
39
+
40
+ // src/components/chip/chip-avatar.tsx
41
+ var _jsxruntime = require('react/jsx-runtime');
42
+ var ChipAvatar = _react.forwardRef.call(void 0, function ChipAvatar2({ children, source, style, ...props }, ref) {
43
+ const { avatarStyle } = useChip();
44
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
45
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, style: [avatarStyle, styleProps, style], ...rest, children: source ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Image, { source, style: chipSheet.avatarImage }) : children });
46
+ });
47
+ ChipAvatar.displayName = "XAUI.Chip.Avatar";
48
+
49
+ // src/components/chip/chip-close.tsx
50
+
51
+
52
+ var ChipClose = _react.forwardRef.call(void 0, function ChipClose2({ isDisabled, ...props }, ref) {
53
+ const { closeStyle, closeGlyphStyle, isDisabled: isChipDisabled } = useChip();
54
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
55
+ _chunk6WW4CSPYcjs.CloseButton,
56
+ {
57
+ ref,
58
+ name: "Chip.Close",
59
+ baseStyle: closeStyle,
60
+ glyphStyle: closeGlyphStyle,
61
+ isDisabled: _nullishCoalesce(isDisabled, () => ( isChipDisabled)),
62
+ ...props
63
+ }
64
+ );
65
+ });
66
+ ChipClose.displayName = "XAUI.Chip.Close";
67
+
68
+ // src/components/chip/chip-dot.tsx
69
+
70
+
71
+
72
+ var ChipDot = _react.forwardRef.call(void 0, function ChipDot2({ style, ...props }, ref) {
73
+ const { dotStyle } = useChip();
74
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
75
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, style: [dotStyle, styleProps, style], ...rest });
76
+ });
77
+ ChipDot.displayName = "XAUI.Chip.Dot";
78
+
79
+ // src/components/chip/chip-icon.tsx
80
+
81
+ function ChipIcon({ size, color, ...rest }) {
82
+ const { icon } = useChip();
83
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDXGQ43IVcjs.Icon, { size: _nullishCoalesce(size, () => ( icon.size)), color: _nullishCoalesce(color, () => ( icon.color)), ...rest });
84
+ }
85
+ ChipIcon.displayName = "XAUI.Chip.Icon";
86
+
87
+ // src/components/chip/chip-label.tsx
88
+
89
+
90
+
91
+ var ChipLabel = _react.forwardRef.call(void 0, function ChipLabel2({ children, style, numberOfLines = 1, ...props }, ref) {
92
+ const { labelStyle } = useChip();
93
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
94
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
95
+ _reactnative.Text,
96
+ {
97
+ ref,
98
+ numberOfLines,
99
+ style: [labelStyle, styleProps, style],
100
+ ...rest,
101
+ children
102
+ }
103
+ );
104
+ });
105
+ ChipLabel.displayName = "XAUI.Chip.Label";
106
+
107
+ // src/components/chip/chip.tsx
108
+
109
+
110
+
111
+ // src/components/chip/chip.recipe.ts
112
+ var SLOTS = [
113
+ "root",
114
+ "label",
115
+ "icon",
116
+ "dot",
117
+ "avatar",
118
+ "close",
119
+ "closeGlyph"
120
+ ];
121
+ var VARIANT_TOKENS = {
122
+ primary: { bg: "accent", bgPressed: "accentPressed", fg: "accentForeground" },
123
+ secondary: {
124
+ bg: "accentSoft",
125
+ bgPressed: "accentSoftPressed",
126
+ fg: "accentSoftForeground"
127
+ },
128
+ default: { bg: "default", bgPressed: "defaultPressed", fg: "defaultForeground" },
129
+ tertiary: { border: "border", bgPressed: "defaultSoftPressed", fg: "foreground" },
130
+ ghost: { bgPressed: "defaultSoftPressed", fg: "foreground" },
131
+ success: { bg: "success", bgPressed: "successPressed", fg: "successForeground" },
132
+ "success-soft": {
133
+ bg: "successSoft",
134
+ bgPressed: "successSoftPressed",
135
+ fg: "successSoftForeground"
136
+ },
137
+ warning: { bg: "warning", bgPressed: "warningPressed", fg: "warningForeground" },
138
+ "warning-soft": {
139
+ bg: "warningSoft",
140
+ bgPressed: "warningSoftPressed",
141
+ fg: "warningSoftForeground"
142
+ },
143
+ danger: { bg: "danger", bgPressed: "dangerPressed", fg: "dangerForeground" },
144
+ "danger-soft": {
145
+ bg: "dangerSoft",
146
+ bgPressed: "dangerSoftPressed",
147
+ fg: "dangerSoftForeground"
148
+ }
149
+ };
150
+ function sizeAxis(step) {
151
+ const { height, padding, gap, label, glyph, dot, avatar, cross } = step;
152
+ return (theme) => {
153
+ const diameter = theme.spacing(avatar);
154
+ const box = theme.fontSizes[glyph];
155
+ const inset = theme.spacing(padding);
156
+ const cap = (theme.spacing(height) - diameter) / 2;
157
+ return {
158
+ root: {
159
+ height: theme.spacing(height),
160
+ paddingHorizontal: inset,
161
+ gap: theme.spacing(gap)
162
+ },
163
+ label: {
164
+ fontSize: theme.fontSizes[label],
165
+ lineHeight: theme.lineHeights[label]
166
+ },
167
+ icon: { fontSize: box },
168
+ dot: circle(theme.spacing(dot)),
169
+ avatar: {
170
+ ...circle(diameter),
171
+ // **The one margin on a slot in this component**, and R4 is about spacing between
172
+ // slots — this is not that. The root's horizontal padding is set for text, several
173
+ // times the gap the height leaves above the avatar, so a face sits visibly pushed
174
+ // into the chip while a label beside it looks right. Cancelling the difference
175
+ // seats it in the capsule's rounded end instead. Clamped at zero, because a theme
176
+ // with tighter padding than that gap needs no pull at all.
177
+ //
178
+ // R13 — `marginStart`, so it is the leading edge in RTL too. `Chip.Avatar` is a
179
+ // leading slot by contract, which is what makes a leading-only correction sound.
180
+ marginStart: -Math.max(0, inset - cap)
181
+ },
182
+ // The touch target is the glyph's box; `hitSlop` on the slot is what makes it
183
+ // reachable, because a cross big enough to hit is a cross too big to look right.
184
+ close: { width: box, height: box },
185
+ closeGlyph: { width: theme.spacing(cross) }
186
+ };
187
+ };
188
+ }
189
+ function circle(diameter) {
190
+ return { width: diameter, height: diameter, borderRadius: diameter / 2 };
191
+ }
192
+ var SIZES = {
193
+ xs: {
194
+ height: 5,
195
+ padding: 2,
196
+ gap: 1,
197
+ label: "xs",
198
+ glyph: "sm",
199
+ dot: 1,
200
+ avatar: 3.5,
201
+ cross: 2
202
+ },
203
+ sm: {
204
+ height: 6,
205
+ padding: 2.5,
206
+ gap: 1,
207
+ label: "xs",
208
+ glyph: "sm",
209
+ dot: 1.25,
210
+ avatar: 4.5,
211
+ cross: 2
212
+ },
213
+ md: {
214
+ height: 7,
215
+ padding: 3,
216
+ gap: 1,
217
+ label: "sm",
218
+ glyph: "md",
219
+ dot: 1.5,
220
+ avatar: 5.5,
221
+ cross: 2.5
222
+ },
223
+ lg: {
224
+ height: 9,
225
+ padding: 4,
226
+ gap: 1.5,
227
+ label: "md",
228
+ glyph: "lg",
229
+ dot: 2,
230
+ avatar: 7,
231
+ cross: 3
232
+ }
233
+ };
234
+ var chipRecipe = _chunkYXVKQMCKcjs.createRecipe.call(void 0, {
235
+ slots: SLOTS,
236
+ // The cross's own geometry — thickness and centring — belongs to the shared
237
+ // `CloseButton`; what stays below is the box and bar size this component's scale sets.
238
+ base: (theme) => ({
239
+ ..._chunk6WW4CSPYcjs.closeButtonBase.call(void 0, theme),
240
+ root: {
241
+ // A chip hugs its content where a `Button` fills its column. The difference is what
242
+ // the two are: a button is a control the layout sizes, a chip is a token *about*
243
+ // something, and a tag stretched across a screen has stopped being one. It is also
244
+ // the one line of HeroUI's chip that is not a measurement.
245
+ alignSelf: "flex-start",
246
+ flexDirection: "row",
247
+ alignItems: "center",
248
+ justifyContent: "center",
249
+ borderWidth: 0,
250
+ // The capsule the name means, at every size. HeroUI reaches it through a radius
251
+ // ladder that React Native would clamp to the same pill anyway; saying `full` says
252
+ // it once, and `radius` is still there for the tag that wants square corners.
253
+ borderRadius: theme.radius.full,
254
+ // Squircle corners for when `radius` overrides the pill. Free on Android.
255
+ borderCurve: "continuous"
256
+ // Deliberately no `overflow: 'hidden'`, where HeroUI clips: the press overlays
257
+ // carry their own corners (`system/pressable-feedback/`), so nothing needs the clip
258
+ // — and clipping here would cut a badge or a shadow a caller hangs off the chip.
259
+ },
260
+ label: {
261
+ fontFamily: theme.fontFamilies.body,
262
+ fontWeight: theme.fontWeights.medium
263
+ },
264
+ avatar: { overflow: "hidden", alignItems: "center", justifyContent: "center" }
265
+ }),
266
+ variantTokens: VARIANT_TOKENS,
267
+ /**
268
+ * Where the variant's colours land, for every variant at once. The border width follows
269
+ * the *presence* of the border role rather than a per-variant flag — `tertiary` is the
270
+ * only variant that names one, and that fact is already in the table above.
271
+ *
272
+ * The dot and the cross take the foreground rather than a status token of their own: on
273
+ * a filled `success` chip the readable colour is the one the label already uses, and on
274
+ * a `success-soft` one it is the green that token resolves to. One rule, eleven
275
+ * variants, and a tinted chip gets it for free.
276
+ */
277
+ paint: (theme, colors) => ({
278
+ root: {
279
+ backgroundColor: colors.bg,
280
+ borderColor: colors.border,
281
+ borderWidth: colors.border ? theme.borderWidth.default : 0
282
+ },
283
+ label: { color: colors.fg },
284
+ icon: { color: colors.fg },
285
+ dot: { backgroundColor: colors.fg },
286
+ closeGlyph: { backgroundColor: colors.fg }
287
+ }),
288
+ /** Declaration order is application order: `radius` overrides the capsule `base` set. */
289
+ variants: {
290
+ size: {
291
+ xs: sizeAxis(SIZES.xs),
292
+ sm: sizeAxis(SIZES.sm),
293
+ md: sizeAxis(SIZES.md),
294
+ lg: sizeAxis(SIZES.lg)
295
+ },
296
+ radius: _chunkYXVKQMCKcjs.radiusAxis.call(void 0, "root")
297
+ },
298
+ /**
299
+ * The pressed colour is the variant's own `…Pressed` token, as on the `Button` and not
300
+ * as on the `Card`: a chip is small enough that a wash over it reads as a smudge, while
301
+ * the fill going one step down reads as the thing itself being pushed. A tinted chip
302
+ * presses through the same OKLab formula as a token one.
303
+ */
304
+ states: {
305
+ pressed: (_theme, colors) => ({ root: { backgroundColor: colors.bgPressed } }),
306
+ disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
307
+ },
308
+ defaultVariants: { variant: "primary", size: "md" }
309
+ });
310
+
311
+ // src/components/chip/chip.tsx
312
+
313
+ var ChipRoot = _react.forwardRef.call(void 0, function Chip({
314
+ children,
315
+ variant,
316
+ size,
317
+ radius,
318
+ color,
319
+ isDisabled = false,
320
+ isPressable = false,
321
+ asChild = false,
322
+ accessibilityRole,
323
+ accessibilityState,
324
+ animation,
325
+ style,
326
+ onPressIn,
327
+ onPressOut,
328
+ ...props
329
+ }, ref) {
330
+ const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
331
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
332
+ const [isPressed, press] = _chunkBH5DSJVXcjs.usePressState.call(void 0, { onPressIn, onPressOut });
333
+ const selection = { variant, size, radius };
334
+ const states = { pressed: isPressed, disabled: isDisabled };
335
+ const styles = chipRecipe.resolve({ theme, selection, states });
336
+ const tint = color ? chipRecipe.tint({ theme, color, selection, states }) : void 0;
337
+ const context = _react.useMemo.call(void 0, () => {
338
+ const icon = _reactnative.StyleSheet.flatten([styles.icon, _optionalChain([tint, 'optionalAccess', _ => _.icon])]);
339
+ return {
340
+ labelStyle: tint ? [styles.label, tint.label] : styles.label,
341
+ dotStyle: tint ? [styles.dot, tint.dot] : styles.dot,
342
+ avatarStyle: styles.avatar,
343
+ closeStyle: styles.close,
344
+ closeGlyphStyle: tint ? [styles.closeGlyph, tint.closeGlyph] : styles.closeGlyph,
345
+ icon: {
346
+ size: icon.fontSize,
347
+ // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
348
+ // hand to a third-party component expecting a string.
349
+ color: typeof icon.color === "string" ? icon.color : void 0
350
+ },
351
+ isDisabled
352
+ };
353
+ }, [styles, tint, isDisabled]);
354
+ const rootStyle = [
355
+ styles.root,
356
+ _optionalChain([tint, 'optionalAccess', _2 => _2.root]),
357
+ styleProps,
358
+ typeof style === "function" ? style({ pressed: isPressed }) : style
359
+ ];
360
+ const text = _chunkHUZ4AUM2cjs.childrenToString.call(void 0, children);
361
+ const content = text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChipLabel, { children: text }) : children;
362
+ if (!isPressable && !asChild && (onPressIn || onPressOut || rest.onPress || rest.onLongPress)) {
363
+ _chunkBH5DSJVXcjs.warnDev.call(void 0,
364
+ "Chip: a press handler needs `isPressable`. Without it the chip renders a View, which never receives the touch \u2014 add `isPressable` to make it a control. A `Chip.Close` is its own control and needs neither."
365
+ );
366
+ }
367
+ const surface = isPressable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
368
+ _chunkBH5DSJVXcjs.PressableFeedback,
369
+ {
370
+ ref,
371
+ isPressed,
372
+ isDisabled,
373
+ asChild,
374
+ animation,
375
+ accessibilityRole: _nullishCoalesce(accessibilityRole, () => ( "button")),
376
+ accessibilityState: { disabled: isDisabled, ...accessibilityState },
377
+ ...rest,
378
+ style: rootStyle,
379
+ onPressIn: press.onPressIn,
380
+ onPressOut: press.onPressOut,
381
+ children: asChild ? children : content
382
+ }
383
+ ) : asChild ? (
384
+ // R12 — the caller's element is the chip, so it takes the children it was written
385
+ // with and the auto-wrap does not apply.
386
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
387
+ _chunkHUZ4AUM2cjs.Slot,
388
+ {
389
+ ref,
390
+ accessibilityRole,
391
+ accessibilityState,
392
+ ...rest,
393
+ style: rootStyle,
394
+ children
395
+ }
396
+ )
397
+ ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
398
+ _reactnative.View,
399
+ {
400
+ ref,
401
+ accessibilityRole,
402
+ accessibilityState,
403
+ ...rest,
404
+ style: rootStyle,
405
+ children: content
406
+ }
407
+ );
408
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChipProvider, { value: context, children: surface });
409
+ });
410
+ ChipRoot.displayName = "XAUI.Chip.Root";
411
+
412
+ // src/components/chip/index.ts
413
+ var Chip2 = Object.assign(ChipRoot, {
414
+ Label: ChipLabel,
415
+ Icon: ChipIcon,
416
+ Dot: ChipDot,
417
+ Avatar: ChipAvatar,
418
+ Close: ChipClose
419
+ });
420
+
421
+
422
+
423
+
424
+
425
+ exports.useChip = useChip; exports.chipRecipe = chipRecipe; exports.Chip = Chip2;