@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.
- package/dist/{chunk-A4VD4MHK.cjs → chunk-4NE3SLTM.cjs} +63 -125
- package/dist/chunk-5LC6KVL3.cjs +68 -0
- package/dist/{chunk-6ARON3XT.cjs → chunk-APCBIHLR.cjs} +23 -50
- package/dist/chunk-BPBY7ON7.cjs +451 -0
- package/dist/{chunk-WXAME7KB.js → chunk-IBRVMLUF.js} +97 -157
- package/dist/{chunk-4EPS7UBO.js → chunk-ISVUXVFL.js} +18 -43
- package/dist/chunk-JL27KVRT.js +68 -0
- package/dist/chunk-RRRGLRRP.cjs +28 -0
- package/dist/chunk-SGHP76GU.js +28 -0
- package/dist/{chunk-MWXE7D4L.js → chunk-TUJBDS5M.js} +1 -1
- package/dist/{chunk-BHTFIZTQ.cjs → chunk-UL263KGM.cjs} +1 -1
- package/dist/chunk-YRCUALUQ.js +451 -0
- package/dist/components/button/index.cjs +5 -3
- package/dist/components/button/index.d.cts +3 -2
- package/dist/components/button/index.d.ts +3 -2
- package/dist/components/button/index.js +4 -2
- package/dist/components/card/index.cjs +20 -0
- package/dist/components/card/index.d.cts +620 -0
- package/dist/components/card/index.d.ts +620 -0
- package/dist/components/card/index.js +20 -0
- package/dist/components/typography/index.d.cts +1 -1
- package/dist/components/typography/index.d.ts +1 -1
- package/dist/{create-recipe-CPXFo2rk.d.ts → create-recipe-CC3NNCqF.d.ts} +6 -1
- package/dist/{create-recipe-C0XXjuow.d.cts → create-recipe-CPBFg7ym.d.cts} +6 -1
- package/dist/icon.type-BkcEPJbK.d.ts +73 -0
- package/dist/icon.type-Cs1tMX0W.d.cts +73 -0
- package/dist/index.cjs +21 -5
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +24 -8
- package/dist/{pressable-feedback.type-BwkKLQlX.d.ts → pressable-feedback.type-DsvWZXWC.d.ts} +4 -72
- package/dist/{pressable-feedback.type-1K8YEOb8.d.cts → pressable-feedback.type-wfeiJz5m.d.cts} +4 -72
- package/dist/system/index.cjs +4 -2
- package/dist/system/index.d.cts +5 -3
- package/dist/system/index.d.ts +5 -3
- package/dist/system/index.js +7 -5
- package/dist/theme/index.cjs +2 -2
- package/dist/theme/index.d.cts +1 -1
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.js +1 -1
- 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: "#
|
|
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: "#
|
|
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
|
|
6
|
-
require('../../chunk-
|
|
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 =
|
|
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
|
|
8
|
-
import { R as Recipe, g as SlotStyles } from '../../create-recipe-
|
|
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
|
|
8
|
-
import { R as Recipe, g as SlotStyles } from '../../create-recipe-
|
|
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-
|
|
6
|
-
import "../../chunk-
|
|
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;
|