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

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 (41) hide show
  1. package/dist/{chunk-A4VD4MHK.cjs → chunk-4NE3SLTM.cjs} +63 -125
  2. package/dist/chunk-5LC6KVL3.cjs +68 -0
  3. package/dist/{chunk-6ARON3XT.cjs → chunk-APCBIHLR.cjs} +23 -50
  4. package/dist/chunk-BPBY7ON7.cjs +451 -0
  5. package/dist/{chunk-WXAME7KB.js → chunk-IBRVMLUF.js} +97 -157
  6. package/dist/{chunk-4EPS7UBO.js → chunk-ISVUXVFL.js} +18 -43
  7. package/dist/chunk-JL27KVRT.js +68 -0
  8. package/dist/chunk-RRRGLRRP.cjs +28 -0
  9. package/dist/chunk-SGHP76GU.js +28 -0
  10. package/dist/{chunk-MWXE7D4L.js → chunk-TUJBDS5M.js} +1 -1
  11. package/dist/{chunk-BHTFIZTQ.cjs → chunk-UL263KGM.cjs} +1 -1
  12. package/dist/chunk-YRCUALUQ.js +451 -0
  13. package/dist/components/button/index.cjs +5 -3
  14. package/dist/components/button/index.d.cts +3 -2
  15. package/dist/components/button/index.d.ts +3 -2
  16. package/dist/components/button/index.js +4 -2
  17. package/dist/components/card/index.cjs +20 -0
  18. package/dist/components/card/index.d.cts +620 -0
  19. package/dist/components/card/index.d.ts +620 -0
  20. package/dist/components/card/index.js +20 -0
  21. package/dist/components/typography/index.d.cts +1 -1
  22. package/dist/components/typography/index.d.ts +1 -1
  23. package/dist/{create-recipe-CPXFo2rk.d.ts → create-recipe-CC3NNCqF.d.ts} +6 -1
  24. package/dist/{create-recipe-C0XXjuow.d.cts → create-recipe-CPBFg7ym.d.cts} +6 -1
  25. package/dist/icon.type-BkcEPJbK.d.ts +73 -0
  26. package/dist/icon.type-Cs1tMX0W.d.cts +73 -0
  27. package/dist/index.cjs +21 -5
  28. package/dist/index.d.cts +4 -2
  29. package/dist/index.d.ts +4 -2
  30. package/dist/index.js +24 -8
  31. package/dist/{pressable-feedback.type-BwkKLQlX.d.ts → pressable-feedback.type-DsvWZXWC.d.ts} +4 -72
  32. package/dist/{pressable-feedback.type-1K8YEOb8.d.cts → pressable-feedback.type-wfeiJz5m.d.cts} +4 -72
  33. package/dist/system/index.cjs +4 -2
  34. package/dist/system/index.d.cts +5 -3
  35. package/dist/system/index.d.ts +5 -3
  36. package/dist/system/index.js +7 -5
  37. package/dist/theme/index.cjs +2 -2
  38. package/dist/theme/index.d.cts +1 -1
  39. package/dist/theme/index.d.ts +1 -1
  40. package/dist/theme/index.js +1 -1
  41. package/package.json +11 -1
@@ -0,0 +1,68 @@
1
+ import {
2
+ useStyleProps
3
+ } from "./chunk-EXX6ATAS.js";
4
+ import {
5
+ useXAUITheme
6
+ } from "./chunk-A3EGFI6T.js";
7
+
8
+ // src/system/icon/icon-context.ts
9
+ import { createContext, useContext } from "react";
10
+ var IconContext = createContext({});
11
+ IconContext.displayName = "XAUI.Icon.Context";
12
+ function useIconContext() {
13
+ return useContext(IconContext);
14
+ }
15
+
16
+ // src/system/icon/icon.tsx
17
+ import { cloneElement, isValidElement } from "react";
18
+ import { Image } from "react-native";
19
+ import { jsx } from "react/jsx-runtime";
20
+ function Icon(props) {
21
+ const inherited = useIconContext();
22
+ const theme = useXAUITheme();
23
+ const size = props.size ?? inherited.size ?? theme.fontSizes.md;
24
+ const color = props.color ?? inherited.color ?? theme.colors.foreground;
25
+ if (props.as) {
26
+ const Component = props.as;
27
+ return /* @__PURE__ */ jsx(Component, { size, color });
28
+ }
29
+ if (isValidElement(props.children)) {
30
+ return cloneElement(props.children, {
31
+ width: size,
32
+ height: size,
33
+ color
34
+ });
35
+ }
36
+ if (props.source) return /* @__PURE__ */ jsx(IconImage, { ...props, resolved: { size, color } });
37
+ throw new Error(
38
+ "XAUI: Icon needs one of `as` (an icon component), a raw SVG element as its child, or `source` (an image). It renders nothing on its own."
39
+ );
40
+ }
41
+ Icon.displayName = "XAUI.Icon";
42
+ function IconImage({
43
+ source,
44
+ style,
45
+ resolved,
46
+ size: _size,
47
+ color: _color,
48
+ ...props
49
+ }) {
50
+ const [styleProps] = useStyleProps(props);
51
+ return /* @__PURE__ */ jsx(
52
+ Image,
53
+ {
54
+ source,
55
+ style: [
56
+ { width: resolved.size, height: resolved.size, tintColor: resolved.color },
57
+ styleProps,
58
+ style
59
+ ]
60
+ }
61
+ );
62
+ }
63
+
64
+ export {
65
+ IconContext,
66
+ useIconContext,
67
+ Icon
68
+ };
@@ -0,0 +1,28 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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; }// src/hooks/use-press-state.ts
2
+ var _react = require('react');
3
+ function usePressState(handlers = {}) {
4
+ const [isPressed, setIsPressed] = _react.useState.call(void 0, false);
5
+ const latest = _react.useRef.call(void 0, handlers);
6
+ latest.current = handlers;
7
+ const onPressIn = _react.useCallback.call(void 0, (event) => {
8
+ setIsPressed(true);
9
+ _optionalChain([latest, 'access', _ => _.current, 'access', _2 => _2.onPressIn, 'optionalCall', _3 => _3(event)]);
10
+ }, []);
11
+ const onPressOut = _react.useCallback.call(void 0, (event) => {
12
+ setIsPressed(false);
13
+ _optionalChain([latest, 'access', _4 => _4.current, 'access', _5 => _5.onPressOut, 'optionalCall', _6 => _6(event)]);
14
+ }, []);
15
+ const press = _react.useRef.call(void 0, { onPressIn, onPressOut }).current;
16
+ return [isPressed, press];
17
+ }
18
+
19
+ // src/utils/warn-dev.ts
20
+ function warnDev(message) {
21
+ if (typeof __DEV__ !== "undefined" && !__DEV__) return;
22
+ console.warn(`XAUI: ${message}`);
23
+ }
24
+
25
+
26
+
27
+
28
+ exports.usePressState = usePressState; exports.warnDev = warnDev;
@@ -0,0 +1,28 @@
1
+ // src/hooks/use-press-state.ts
2
+ import { useCallback, useRef, useState } from "react";
3
+ function usePressState(handlers = {}) {
4
+ const [isPressed, setIsPressed] = useState(false);
5
+ const latest = useRef(handlers);
6
+ latest.current = handlers;
7
+ const onPressIn = useCallback((event) => {
8
+ setIsPressed(true);
9
+ latest.current.onPressIn?.(event);
10
+ }, []);
11
+ const onPressOut = useCallback((event) => {
12
+ setIsPressed(false);
13
+ latest.current.onPressOut?.(event);
14
+ }, []);
15
+ const press = useRef({ onPressIn, onPressOut }).current;
16
+ return [isPressed, press];
17
+ }
18
+
19
+ // src/utils/warn-dev.ts
20
+ function warnDev(message) {
21
+ if (typeof __DEV__ !== "undefined" && !__DEV__) return;
22
+ console.warn(`XAUI: ${message}`);
23
+ }
24
+
25
+ export {
26
+ usePressState,
27
+ warnDev
28
+ };
@@ -161,7 +161,7 @@ var tokens = {
161
161
  foreground: "#18181b",
162
162
  surface: "#ffffff",
163
163
  surfaceForeground: "#18181b",
164
- surfaceSecondary: "#f4f4f5",
164
+ surfaceSecondary: "#ececee",
165
165
  surfaceSecondaryForeground: "#18181b",
166
166
  surfaceTertiary: "#e4e4e7",
167
167
  surfaceTertiaryForeground: "#18181b",
@@ -161,7 +161,7 @@ var tokens = {
161
161
  foreground: "#18181b",
162
162
  surface: "#ffffff",
163
163
  surfaceForeground: "#18181b",
164
- surfaceSecondary: "#f4f4f5",
164
+ surfaceSecondary: "#ececee",
165
165
  surfaceSecondaryForeground: "#18181b",
166
166
  surfaceTertiary: "#e4e4e7",
167
167
  surfaceTertiaryForeground: "#18181b",
@@ -0,0 +1,451 @@
1
+ import {
2
+ usePressState,
3
+ warnDev
4
+ } from "./chunk-SGHP76GU.js";
5
+ import {
6
+ PressableFeedback
7
+ } from "./chunk-IBRVMLUF.js";
8
+ import {
9
+ createRecipe
10
+ } from "./chunk-N7C4UNUL.js";
11
+ import {
12
+ Slot,
13
+ childrenToString,
14
+ createSlotContext,
15
+ useStyleProps
16
+ } from "./chunk-EXX6ATAS.js";
17
+ import {
18
+ useXAUITheme
19
+ } from "./chunk-A3EGFI6T.js";
20
+
21
+ // src/components/card/card-background.tsx
22
+ import { forwardRef } from "react";
23
+ import { Image, View } from "react-native";
24
+
25
+ // src/components/card/card.utils.ts
26
+ import { Children, isValidElement } from "react";
27
+ var CARD_BACKGROUND = /* @__PURE__ */ Symbol.for("xaui.Card.background");
28
+ function markBackground(component) {
29
+ return Object.assign(component, { [CARD_BACKGROUND]: true });
30
+ }
31
+ function isBackground(node) {
32
+ if (!isValidElement(node)) return false;
33
+ const type = node.type;
34
+ if (typeof type !== "function" && typeof type !== "object") return false;
35
+ if (type === null) return false;
36
+ return type[CARD_BACKGROUND] === true;
37
+ }
38
+ function partitionBackground(children) {
39
+ const all = Children.toArray(children);
40
+ const index = all.findIndex(isBackground);
41
+ if (index === -1) return { background: null, content: children };
42
+ return {
43
+ background: all[index],
44
+ content: all.filter((_, at) => at !== index)
45
+ };
46
+ }
47
+
48
+ // src/components/card/card.context.ts
49
+ var [CardProvider, useCard] = createSlotContext("Card");
50
+
51
+ // src/components/card/card.style.ts
52
+ import { StyleSheet } from "react-native";
53
+ var cardSheet = StyleSheet.create({
54
+ backgroundImage: { width: "100%", height: "100%" }
55
+ });
56
+
57
+ // src/components/card/card-background.tsx
58
+ import { jsx } from "react/jsx-runtime";
59
+ var CardBackground = markBackground(
60
+ forwardRef(function CardBackground2({ children, source, style, ...props }, ref) {
61
+ const { backgroundStyle } = useCard();
62
+ const [styleProps, rest] = useStyleProps(props);
63
+ return /* @__PURE__ */ jsx(
64
+ View,
65
+ {
66
+ ref,
67
+ accessibilityElementsHidden: true,
68
+ importantForAccessibility: "no-hide-descendants",
69
+ ...rest,
70
+ style: [backgroundStyle, styleProps, style],
71
+ children: source ? /* @__PURE__ */ jsx(Image, { source, style: cardSheet.backgroundImage }) : children
72
+ }
73
+ );
74
+ })
75
+ );
76
+ CardBackground.displayName = "XAUI.Card.Background";
77
+
78
+ // src/components/card/card-body.tsx
79
+ import { forwardRef as forwardRef2 } from "react";
80
+ import { View as View2 } from "react-native";
81
+ import { jsx as jsx2 } from "react/jsx-runtime";
82
+ var CardBody = forwardRef2(function CardBody2({ children, style, ...props }, ref) {
83
+ const { bodyStyle } = useCard();
84
+ const [styleProps, rest] = useStyleProps(props);
85
+ return /* @__PURE__ */ jsx2(View2, { ref, style: [bodyStyle, styleProps, style], ...rest, children });
86
+ });
87
+ CardBody.displayName = "XAUI.Card.Body";
88
+
89
+ // src/components/card/card-description.tsx
90
+ import { forwardRef as forwardRef3 } from "react";
91
+ import { Text } from "react-native";
92
+ import { jsx as jsx3 } from "react/jsx-runtime";
93
+ var CardDescription = forwardRef3(
94
+ function CardDescription2({ children, style, ...props }, ref) {
95
+ const { descriptionStyle } = useCard();
96
+ const [styleProps, rest] = useStyleProps(props);
97
+ return /* @__PURE__ */ jsx3(Text, { ref, style: [descriptionStyle, styleProps, style], ...rest, children });
98
+ }
99
+ );
100
+ CardDescription.displayName = "XAUI.Card.Description";
101
+
102
+ // src/components/card/card-footer.tsx
103
+ import { forwardRef as forwardRef4 } from "react";
104
+ import { View as View3 } from "react-native";
105
+ import { jsx as jsx4 } from "react/jsx-runtime";
106
+ var CardFooter = forwardRef4(function CardFooter2({ children, style, ...props }, ref) {
107
+ const { footerStyle } = useCard();
108
+ const [styleProps, rest] = useStyleProps(props);
109
+ return /* @__PURE__ */ jsx4(View3, { ref, style: [footerStyle, styleProps, style], ...rest, children });
110
+ });
111
+ CardFooter.displayName = "XAUI.Card.Footer";
112
+
113
+ // src/components/card/card-header.tsx
114
+ import { forwardRef as forwardRef5 } from "react";
115
+ import { View as View4 } from "react-native";
116
+ import { jsx as jsx5 } from "react/jsx-runtime";
117
+ var CardHeader = forwardRef5(function CardHeader2({ children, style, ...props }, ref) {
118
+ const { headerStyle } = useCard();
119
+ const [styleProps, rest] = useStyleProps(props);
120
+ return /* @__PURE__ */ jsx5(View4, { ref, style: [headerStyle, styleProps, style], ...rest, children });
121
+ });
122
+ CardHeader.displayName = "XAUI.Card.Header";
123
+
124
+ // src/components/card/card-title.tsx
125
+ import { forwardRef as forwardRef6 } from "react";
126
+ import { Text as Text2 } from "react-native";
127
+ import { jsx as jsx6 } from "react/jsx-runtime";
128
+ var CardTitle = forwardRef6(function CardTitle2({ children, style, ...props }, ref) {
129
+ const { titleStyle } = useCard();
130
+ const [styleProps, rest] = useStyleProps(props);
131
+ return /* @__PURE__ */ jsx6(Text2, { ref, style: [titleStyle, styleProps, style], ...rest, children });
132
+ });
133
+ CardTitle.displayName = "XAUI.Card.Title";
134
+
135
+ // src/components/card/card.tsx
136
+ import { forwardRef as forwardRef7, useMemo } from "react";
137
+ import { View as View5 } from "react-native";
138
+
139
+ // src/components/card/card.recipe.ts
140
+ var SLOTS = [
141
+ "root",
142
+ "background",
143
+ "header",
144
+ "body",
145
+ "footer",
146
+ "title",
147
+ "description"
148
+ ];
149
+ var VARIANT_TOKENS = {
150
+ default: { bg: "surface", fg: "surfaceForeground" },
151
+ secondary: { bg: "surfaceSecondary", fg: "surfaceSecondaryForeground" },
152
+ tertiary: { border: "border", fg: "foreground" },
153
+ ghost: { fg: "foreground" }
154
+ };
155
+ var DESCRIPTION_OPACITY = 0.6;
156
+ function sizeAxis(step) {
157
+ const { padding, gap, contentGap, radius, title, description } = step;
158
+ return (theme) => ({
159
+ root: {
160
+ padding: theme.spacing(padding),
161
+ gap: theme.spacing(gap),
162
+ borderRadius: theme.radius[radius]
163
+ },
164
+ // The same corner as the root, because this layer is what clips the image — the root
165
+ // deliberately does not (see `base`), so the radius has to be repeated where the
166
+ // `overflow` is.
167
+ background: { borderRadius: theme.radius[radius] },
168
+ header: { gap: theme.spacing(contentGap) },
169
+ body: { gap: theme.spacing(contentGap) },
170
+ footer: { gap: theme.spacing(contentGap) },
171
+ title: {
172
+ fontSize: theme.fontSizes[title],
173
+ lineHeight: theme.lineHeights[title]
174
+ },
175
+ description: {
176
+ fontSize: theme.fontSizes[description],
177
+ lineHeight: theme.lineHeights[description]
178
+ }
179
+ });
180
+ }
181
+ var SIZES = {
182
+ xs: {
183
+ padding: 3,
184
+ gap: 2,
185
+ contentGap: 1,
186
+ radius: "lg",
187
+ title: "sm",
188
+ description: "xs"
189
+ },
190
+ sm: {
191
+ padding: 3.5,
192
+ gap: 3,
193
+ contentGap: 1,
194
+ radius: "xl",
195
+ title: "md",
196
+ description: "sm"
197
+ },
198
+ md: {
199
+ padding: 4,
200
+ gap: 4,
201
+ contentGap: 1,
202
+ radius: "2xl",
203
+ title: "lg",
204
+ description: "md"
205
+ },
206
+ lg: {
207
+ padding: 5,
208
+ gap: 5,
209
+ contentGap: 1.5,
210
+ radius: "3xl",
211
+ title: "xl",
212
+ description: "lg"
213
+ }
214
+ };
215
+ function corner(key) {
216
+ return (theme) => ({
217
+ root: { borderRadius: theme.radius[key] },
218
+ background: { borderRadius: theme.radius[key] }
219
+ });
220
+ }
221
+ var cardRecipe = createRecipe({
222
+ slots: SLOTS,
223
+ base: (theme) => ({
224
+ root: {
225
+ flexDirection: "column",
226
+ borderWidth: 0,
227
+ // iOS's squircle. Free on Android, and it is what makes a card's radius read as a
228
+ // shape rather than as four arcs meeting straight edges.
229
+ borderCurve: "continuous"
230
+ // Deliberately no `overflow: 'hidden'`: on iOS it clips the node's own shadow, so
231
+ // a `default` card would lose the elevation the variant just gave it. The press
232
+ // wash rounds itself off the root's corners and needs no clip; a caller bleeding an
233
+ // image to the edges writes `overflow="hidden"` and takes the trade knowingly.
234
+ },
235
+ // R13 — `start` and `end`, never `left` and `right`, even at zero. `overflow` lives
236
+ // here rather than on the root: on iOS it clips the node's own shadow, and a `default`
237
+ // card would lose the elevation its variant just gave it.
238
+ background: {
239
+ position: "absolute",
240
+ top: 0,
241
+ bottom: 0,
242
+ start: 0,
243
+ end: 0,
244
+ overflow: "hidden"
245
+ },
246
+ // Top-aligned content — a badge, an icon, a title block. A column pinned to the
247
+ // leading edge, which RTL mirrors on its own; `flexDirection="row"` is one prop away
248
+ // for a header that puts an action at the far end.
249
+ header: { alignItems: "flex-start" },
250
+ // `flexGrow` and not `flex: 1`. `flex: 1` also sets `flexBasis: 0`, and in a card
251
+ // whose height comes from its content that measures the body as empty before there
252
+ // is any free space to give back to it — the collapse is silent and total.
253
+ body: { flexGrow: 1 },
254
+ // A footer is an action row: the one section whose common case is horizontal, so it
255
+ // is the one section that is a row by default.
256
+ footer: { flexDirection: "row", alignItems: "center" },
257
+ // `medium`, not `semibold`. A card's title sits in prose rather than on a control:
258
+ // one weight above the description is enough to rank them, and the heavier step reads
259
+ // as a section heading the card did not ask for.
260
+ title: {
261
+ fontFamily: theme.fontFamilies.heading,
262
+ fontWeight: theme.fontWeights.medium
263
+ },
264
+ description: {
265
+ fontFamily: theme.fontFamilies.body,
266
+ fontWeight: theme.fontWeights.regular,
267
+ opacity: DESCRIPTION_OPACITY
268
+ }
269
+ }),
270
+ variantTokens: VARIANT_TOKENS,
271
+ /**
272
+ * Where the variant's colours land, for every variant at once. The border width follows
273
+ * the *presence* of the border role, so `ghost` needs no rule of its own to say it has
274
+ * no edge.
275
+ */
276
+ paint: (theme, colors) => ({
277
+ root: {
278
+ backgroundColor: colors.bg,
279
+ borderColor: colors.border,
280
+ borderWidth: colors.border ? theme.borderWidth.default : 0
281
+ },
282
+ title: { color: colors.fg },
283
+ description: { color: colors.fg }
284
+ }),
285
+ /** Declaration order is application order: `radius` overrides the radius `size` set. */
286
+ variants: {
287
+ size: {
288
+ xs: sizeAxis(SIZES.xs),
289
+ sm: sizeAxis(SIZES.sm),
290
+ md: sizeAxis(SIZES.md),
291
+ lg: sizeAxis(SIZES.lg)
292
+ },
293
+ /**
294
+ * Both slots move together, always: the background layer is what clips the image, so
295
+ * a `radius` that moved only the root would round the card and leave its photo square
296
+ * in the corners.
297
+ */
298
+ radius: {
299
+ xs: corner("xs"),
300
+ sm: corner("sm"),
301
+ md: corner("md"),
302
+ lg: corner("lg"),
303
+ xl: corner("xl"),
304
+ "2xl": corner("2xl"),
305
+ "3xl": corner("3xl"),
306
+ "4xl": corner("4xl"),
307
+ field: corner("field"),
308
+ full: corner("full")
309
+ }
310
+ },
311
+ /**
312
+ * The elevation belongs to the one variant that is a surface standing on the
313
+ * background. `secondary` is the level for a card *inside* a card and `tertiary` and
314
+ * `ghost` have no fill to lift, so a shadow under any of them would read as dirt rather
315
+ * than as height. In dark mode the theme's `surface` shadow is already nothing (§4),
316
+ * which is why this names the role instead of a set of numbers.
317
+ */
318
+ compoundVariants: [
319
+ {
320
+ when: { variant: "default" },
321
+ style: (theme) => ({ root: theme.shadows.surface })
322
+ }
323
+ ],
324
+ states: {
325
+ disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
326
+ },
327
+ defaultVariants: { variant: "default", size: "md" }
328
+ });
329
+
330
+ // src/components/card/card.tsx
331
+ import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
332
+ var CardRoot = forwardRef7(function Card({
333
+ children,
334
+ variant,
335
+ size,
336
+ radius,
337
+ color,
338
+ isDisabled = false,
339
+ isPressable = false,
340
+ asChild = false,
341
+ accessibilityRole,
342
+ accessibilityState,
343
+ animation,
344
+ style,
345
+ onPressIn,
346
+ onPressOut,
347
+ ...props
348
+ }, ref) {
349
+ const theme = useXAUITheme();
350
+ const [styleProps, rest] = useStyleProps(props);
351
+ const [isPressed, press] = usePressState({ onPressIn, onPressOut });
352
+ const selection = { variant, size, radius };
353
+ const states = { disabled: isDisabled };
354
+ const styles = cardRecipe.resolve({ theme, selection, states });
355
+ const tint = color ? cardRecipe.tint({ theme, color, selection, states }) : void 0;
356
+ const context = useMemo(
357
+ () => ({
358
+ backgroundStyle: styles.background,
359
+ headerStyle: styles.header,
360
+ bodyStyle: styles.body,
361
+ footerStyle: styles.footer,
362
+ titleStyle: tint ? [styles.title, tint.title] : styles.title,
363
+ descriptionStyle: tint ? [styles.description, tint.description] : styles.description,
364
+ isDisabled
365
+ }),
366
+ [styles, tint, isDisabled]
367
+ );
368
+ const rootStyle = [
369
+ styles.root,
370
+ tint?.root,
371
+ styleProps,
372
+ typeof style === "function" ? style({ pressed: isPressed }) : style
373
+ ];
374
+ const text = childrenToString(children);
375
+ const content = text !== null ? /* @__PURE__ */ jsx7(CardDescription, { children: text }) : children;
376
+ if (!isPressable && !asChild && (onPressIn || onPressOut || rest.onPress || rest.onLongPress)) {
377
+ warnDev(
378
+ "Card: a press handler needs `isPressable`. Without it the card renders a View, which never receives the touch \u2014 add `isPressable` to make it a control."
379
+ );
380
+ }
381
+ const { background, content: body } = partitionBackground(content);
382
+ const layered = background === null ? body : /* @__PURE__ */ jsxs(Fragment, { children: [
383
+ background,
384
+ body
385
+ ] });
386
+ const surface = isPressable ? /* @__PURE__ */ jsx7(
387
+ PressableFeedback,
388
+ {
389
+ ref,
390
+ isPressed,
391
+ isDisabled,
392
+ asChild,
393
+ animation,
394
+ accessibilityRole: accessibilityRole ?? "button",
395
+ accessibilityState: { disabled: isDisabled, ...accessibilityState },
396
+ ...rest,
397
+ style: rootStyle,
398
+ onPressIn: press.onPressIn,
399
+ onPressOut: press.onPressOut,
400
+ children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
401
+ background,
402
+ /* @__PURE__ */ jsx7(PressableFeedback.Highlight, {}),
403
+ body
404
+ ] })
405
+ }
406
+ ) : asChild ? (
407
+ // R12 — the caller's element is the card, so it takes the children it was written
408
+ // with and the auto-wrap does not apply.
409
+ /* @__PURE__ */ jsx7(
410
+ Slot,
411
+ {
412
+ ref,
413
+ accessibilityRole,
414
+ accessibilityState,
415
+ ...rest,
416
+ style: rootStyle,
417
+ children
418
+ }
419
+ )
420
+ ) : /* @__PURE__ */ jsx7(
421
+ View5,
422
+ {
423
+ ref,
424
+ accessibilityRole,
425
+ accessibilityState,
426
+ ...rest,
427
+ style: rootStyle,
428
+ children: layered
429
+ }
430
+ );
431
+ return /* @__PURE__ */ jsx7(CardProvider, { value: context, children: surface });
432
+ });
433
+ CardRoot.displayName = "XAUI.Card.Root";
434
+
435
+ // src/components/card/index.ts
436
+ var Card2 = Object.assign(CardRoot, {
437
+ Background: CardBackground,
438
+ Header: CardHeader,
439
+ Body: CardBody,
440
+ Footer: CardFooter,
441
+ Title: CardTitle,
442
+ Description: CardDescription
443
+ });
444
+
445
+ export {
446
+ CARD_BACKGROUND,
447
+ markBackground,
448
+ useCard,
449
+ cardRecipe,
450
+ Card2 as Card
451
+ };
@@ -2,8 +2,10 @@
2
2
 
3
3
 
4
4
 
5
- var _chunk6ARON3XTcjs = require('../../chunk-6ARON3XT.cjs');
6
- require('../../chunk-A4VD4MHK.cjs');
5
+ var _chunkAPCBIHLRcjs = require('../../chunk-APCBIHLR.cjs');
6
+ require('../../chunk-RRRGLRRP.cjs');
7
+ require('../../chunk-5LC6KVL3.cjs');
8
+ require('../../chunk-4NE3SLTM.cjs');
7
9
  require('../../chunk-UVO4GFSW.cjs');
8
10
  require('../../chunk-EVXZGNPA.cjs');
9
11
  require('../../chunk-57SJ4LJF.cjs');
@@ -12,4 +14,4 @@ require('../../chunk-MC7SY2QH.cjs');
12
14
 
13
15
 
14
16
 
15
- exports.Button = _chunk6ARON3XTcjs.Button; exports.buttonRecipe = _chunk6ARON3XTcjs.buttonRecipe; exports.useButton = _chunk6ARON3XTcjs.useButton;
17
+ exports.Button = _chunkAPCBIHLRcjs.Button; exports.buttonRecipe = _chunkAPCBIHLRcjs.buttonRecipe; exports.useButton = _chunkAPCBIHLRcjs.useButton;
@@ -2,10 +2,11 @@ import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
3
  import * as react_native from 'react-native';
4
4
  import { StyleProp, TextStyle, ViewStyle, TextProps, PressableStateCallbackType } from 'react-native';
5
+ import { P as PressableFeedbackProps, a as AnimationProp } from '../../pressable-feedback.type-wfeiJz5m.cjs';
5
6
  import { T as TextStyleProps, V as ViewStyleProps } from '../../style-props.type-B1BG5TCm.cjs';
6
7
  import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
7
- import { a as IconContextValue, b as IconProps, P as PressableFeedbackProps, c as AnimationProp } from '../../pressable-feedback.type-1K8YEOb8.cjs';
8
- import { R as Recipe, g as SlotStyles } from '../../create-recipe-C0XXjuow.cjs';
8
+ import { a as IconContextValue, b as IconProps } from '../../icon.type-Cs1tMX0W.cjs';
9
+ import { R as Recipe, g as SlotStyles } from '../../create-recipe-CPBFg7ym.cjs';
9
10
  import 'react-native-reanimated';
10
11
 
11
12
  type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
@@ -2,10 +2,11 @@ import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
3
  import * as react_native from 'react-native';
4
4
  import { StyleProp, TextStyle, ViewStyle, TextProps, PressableStateCallbackType } from 'react-native';
5
+ import { P as PressableFeedbackProps, a as AnimationProp } from '../../pressable-feedback.type-DsvWZXWC.js';
5
6
  import { T as TextStyleProps, V as ViewStyleProps } from '../../style-props.type-B1BG5TCm.js';
6
7
  import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
7
- import { a as IconContextValue, b as IconProps, P as PressableFeedbackProps, c as AnimationProp } from '../../pressable-feedback.type-BwkKLQlX.js';
8
- import { R as Recipe, g as SlotStyles } from '../../create-recipe-CPXFo2rk.js';
8
+ import { a as IconContextValue, b as IconProps } from '../../icon.type-BkcEPJbK.js';
9
+ import { R as Recipe, g as SlotStyles } from '../../create-recipe-CC3NNCqF.js';
9
10
  import 'react-native-reanimated';
10
11
 
11
12
  type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
@@ -2,8 +2,10 @@ import {
2
2
  Button,
3
3
  buttonRecipe,
4
4
  useButton
5
- } from "../../chunk-4EPS7UBO.js";
6
- import "../../chunk-WXAME7KB.js";
5
+ } from "../../chunk-ISVUXVFL.js";
6
+ import "../../chunk-SGHP76GU.js";
7
+ import "../../chunk-JL27KVRT.js";
8
+ import "../../chunk-IBRVMLUF.js";
7
9
  import "../../chunk-N7C4UNUL.js";
8
10
  import "../../chunk-EXX6ATAS.js";
9
11
  import "../../chunk-A3EGFI6T.js";
@@ -0,0 +1,20 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+
4
+
5
+
6
+
7
+ var _chunkBPBY7ON7cjs = require('../../chunk-BPBY7ON7.cjs');
8
+ require('../../chunk-RRRGLRRP.cjs');
9
+ require('../../chunk-4NE3SLTM.cjs');
10
+ require('../../chunk-UVO4GFSW.cjs');
11
+ require('../../chunk-EVXZGNPA.cjs');
12
+ require('../../chunk-57SJ4LJF.cjs');
13
+ require('../../chunk-MC7SY2QH.cjs');
14
+
15
+
16
+
17
+
18
+
19
+
20
+ exports.CARD_BACKGROUND = _chunkBPBY7ON7cjs.CARD_BACKGROUND; exports.Card = _chunkBPBY7ON7cjs.Card; exports.cardRecipe = _chunkBPBY7ON7cjs.cardRecipe; exports.markBackground = _chunkBPBY7ON7cjs.markBackground; exports.useCard = _chunkBPBY7ON7cjs.useCard;