@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.31
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-3FV4COTM.js +68 -0
- package/dist/chunk-423RQBOX.js +21 -0
- package/dist/chunk-42FMGB5M.js +661 -0
- package/dist/chunk-4GTAZM2C.js +174 -0
- package/dist/chunk-4XPLPQLM.cjs +147 -0
- package/dist/{chunk-3QBT3Q65.cjs → chunk-57SJ4LJF.cjs} +7 -2
- package/dist/chunk-5GO7MAVY.cjs +74 -0
- package/dist/chunk-5PTBRJM7.cjs +346 -0
- package/dist/chunk-5RQ7AZPN.cjs +455 -0
- package/dist/chunk-5Z4P6WHR.cjs +525 -0
- package/dist/chunk-7DPL3ZDS.cjs +21 -0
- package/dist/chunk-7EIHHOHP.cjs +42 -0
- package/dist/chunk-7SEZGVTY.js +62 -0
- package/dist/chunk-7XKQJQF2.cjs +70 -0
- package/dist/{chunk-X2K2FX3W.js → chunk-A3EGFI6T.js} +6 -1
- package/dist/chunk-A5OCK3C2.js +525 -0
- package/dist/chunk-AETWQQWU.cjs +92 -0
- package/dist/chunk-ANNUYP55.cjs +431 -0
- package/dist/chunk-BA2DBSAN.js +102 -0
- package/dist/chunk-BFMTUMTU.js +669 -0
- package/dist/chunk-BVJQ3UPZ.js +62 -0
- package/dist/chunk-DFME724B.js +147 -0
- package/dist/chunk-E2CWBQTV.js +119 -0
- package/dist/chunk-EGLLDKN6.js +9 -0
- package/dist/chunk-EJQCQPET.cjs +9 -0
- package/dist/chunk-F6CQ6CBI.cjs +112 -0
- package/dist/chunk-F6W3JQ7K.js +42 -0
- package/dist/chunk-FNEUOBCV.cjs +174 -0
- package/dist/chunk-G7K652GC.js +145 -0
- package/dist/chunk-GGW42MY4.js +20 -0
- package/dist/chunk-GLGU2WFL.cjs +190 -0
- package/dist/chunk-GPVNCJ3Z.cjs +696 -0
- package/dist/chunk-GVQOD3VW.js +74 -0
- package/dist/chunk-IHOCANCQ.js +293 -0
- package/dist/chunk-JDFV4W6N.cjs +700 -0
- package/dist/chunk-KOC3KQIT.js +124 -0
- package/dist/chunk-KPWZLUES.cjs +124 -0
- package/dist/chunk-L7JN6OBQ.cjs +314 -0
- package/dist/chunk-MC7SY2QH.cjs +20 -0
- package/dist/chunk-MDVSCWJI.js +314 -0
- package/dist/chunk-N527BTY4.cjs +366 -0
- package/dist/chunk-NYRXUGVL.js +104 -0
- package/dist/{chunk-AW63PTQ4.cjs → chunk-OHEHPQLC.cjs} +72 -72
- package/dist/chunk-Q3WFY5N3.js +366 -0
- package/dist/chunk-QGN2BBJO.cjs +104 -0
- package/dist/chunk-RDTKAAHX.js +346 -0
- package/dist/chunk-TGZZ3RZU.cjs +86 -0
- package/dist/{chunk-2KXQATVL.js → chunk-TZG3DERP.js} +46 -46
- package/dist/chunk-URSKA2VR.js +190 -0
- package/dist/chunk-V4WDMM6Z.js +86 -0
- package/dist/chunk-VJEER76X.js +455 -0
- package/dist/chunk-VZBWYWEI.cjs +736 -0
- package/dist/chunk-WR7YLDVV.cjs +68 -0
- package/dist/chunk-X4HQ4H2V.js +701 -0
- package/dist/chunk-XFSW3ZNI.cjs +145 -0
- package/dist/chunk-XQFAUDR2.cjs +62 -0
- package/dist/chunk-ZH5XVNHG.js +92 -0
- package/dist/chunk-ZH6BHLQR.js +431 -0
- package/dist/chunk-ZP2E2H2G.cjs +119 -0
- package/dist/chunk-ZVWXM3UK.cjs +293 -0
- package/dist/close-button.type-BUYuoSt2.d.ts +36 -0
- package/dist/close-button.type-CHsgZ3wO.d.cts +36 -0
- package/dist/components/alert/index.cjs +20 -0
- package/dist/components/alert/index.d.cts +169 -0
- package/dist/components/alert/index.d.ts +169 -0
- package/dist/components/alert/index.js +20 -0
- package/dist/components/button/index.cjs +21 -0
- package/dist/components/button/index.d.cts +613 -0
- package/dist/components/button/index.d.ts +613 -0
- package/dist/components/button/index.js +21 -0
- package/dist/components/card/index.cjs +22 -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 +22 -0
- package/dist/components/checkbox/index.cjs +26 -0
- package/dist/components/checkbox/index.d.cts +1136 -0
- package/dist/components/checkbox/index.d.ts +1136 -0
- package/dist/components/checkbox/index.js +26 -0
- package/dist/components/chip/index.cjs +20 -0
- package/dist/components/chip/index.d.cts +608 -0
- package/dist/components/chip/index.d.ts +608 -0
- package/dist/components/chip/index.js +20 -0
- package/dist/components/divider/index.cjs +13 -0
- package/dist/components/divider/index.d.cts +117 -0
- package/dist/components/divider/index.d.ts +117 -0
- package/dist/components/divider/index.js +13 -0
- package/dist/components/input/index.cjs +25 -0
- package/dist/components/input/index.d.cts +205 -0
- package/dist/components/input/index.d.ts +205 -0
- package/dist/components/input/index.js +25 -0
- package/dist/components/input-group/index.cjs +27 -0
- package/dist/components/input-group/index.d.cts +270 -0
- package/dist/components/input-group/index.d.ts +270 -0
- package/dist/components/input-group/index.js +27 -0
- package/dist/components/input-otp/index.cjs +29 -0
- package/dist/components/input-otp/index.d.cts +325 -0
- package/dist/components/input-otp/index.d.ts +325 -0
- package/dist/components/input-otp/index.js +29 -0
- package/dist/components/radio/index.cjs +26 -0
- package/dist/components/radio/index.d.cts +1102 -0
- package/dist/components/radio/index.d.ts +1102 -0
- package/dist/components/radio/index.js +26 -0
- package/dist/components/spinner/index.cjs +16 -0
- package/dist/components/spinner/index.d.cts +104 -0
- package/dist/components/spinner/index.d.ts +104 -0
- package/dist/components/spinner/index.js +16 -0
- package/dist/components/switch/index.cjs +27 -0
- package/dist/components/switch/index.d.cts +1154 -0
- package/dist/components/switch/index.d.ts +1154 -0
- package/dist/components/switch/index.js +27 -0
- package/dist/components/text-area/index.cjs +14 -0
- package/dist/components/text-area/index.d.cts +73 -0
- package/dist/components/text-area/index.d.ts +73 -0
- package/dist/components/text-area/index.js +14 -0
- package/dist/components/typography/index.cjs +15 -0
- package/dist/components/typography/index.d.cts +116 -0
- package/dist/components/typography/index.d.ts +116 -0
- package/dist/components/typography/index.js +15 -0
- package/dist/components/view/index.cjs +17 -0
- package/dist/components/view/index.d.cts +152 -0
- package/dist/components/view/index.d.ts +152 -0
- package/dist/components/view/index.js +17 -0
- package/dist/create-recipe-BdVd2ffi.d.ts +114 -0
- package/dist/create-recipe-dC7wMfnj.d.cts +114 -0
- package/dist/icon.type-Kml72iSz.d.ts +73 -0
- package/dist/icon.type-d_i9ma-i.d.cts +73 -0
- package/dist/index.cjs +252 -4
- package/dist/index.d.cts +110 -4
- package/dist/index.d.ts +110 -4
- package/dist/index.js +271 -23
- package/dist/input.type-BUMDlzL9.d.cts +167 -0
- package/dist/input.type-D2qgi03E.d.ts +167 -0
- package/dist/pressable-feedback.type-BA2C9sSz.d.cts +127 -0
- package/dist/pressable-feedback.type-Bs4dQlGj.d.ts +127 -0
- package/dist/style-props.type-CfnoGEP7.d.cts +31 -0
- package/dist/style-props.type-CfnoGEP7.d.ts +31 -0
- package/dist/system/index.cjs +60 -3
- package/dist/system/index.d.cts +347 -181
- package/dist/system/index.d.ts +347 -181
- package/dist/system/index.js +71 -14
- package/dist/theme/index.cjs +4 -3
- package/dist/theme/index.d.cts +34 -23
- package/dist/theme/index.d.ts +34 -23
- package/dist/theme/index.js +3 -2
- package/dist/{theme.type-C9bFJKFm.d.cts → theme.type-C2gNHpEx.d.cts} +1 -1
- package/dist/{theme.type-C9bFJKFm.d.ts → theme.type-C2gNHpEx.d.ts} +1 -1
- package/package.json +184 -18
- package/dist/chunk-QAMNNTGM.js +0 -637
- package/dist/chunk-V63JO65F.cjs +0 -637
|
@@ -0,0 +1,92 @@
|
|
|
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; }
|
|
2
|
+
|
|
3
|
+
var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _chunkZP2E2H2Gcjs = require('./chunk-ZP2E2H2G.cjs');
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
|
|
13
|
+
|
|
14
|
+
// src/components/divider/divider.tsx
|
|
15
|
+
var _react = require('react');
|
|
16
|
+
var _reactnative = require('react-native');
|
|
17
|
+
|
|
18
|
+
// src/components/divider/divider.recipe.ts
|
|
19
|
+
|
|
20
|
+
var SLOTS = ["root"];
|
|
21
|
+
var VARIANT_TOKENS = { default: { bg: "separator" } };
|
|
22
|
+
var HAIRLINE = _reactnative.StyleSheet.hairlineWidth;
|
|
23
|
+
function thickness(of) {
|
|
24
|
+
return (theme) => {
|
|
25
|
+
const value = of(theme);
|
|
26
|
+
return { root: { height: value, width: value } };
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
var dividerRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
30
|
+
slots: SLOTS,
|
|
31
|
+
base: () => ({
|
|
32
|
+
// One line for both orientations. In a column the cross axis is horizontal, so a
|
|
33
|
+
// stretched child is full width; in a row it is vertical, so the same word makes a
|
|
34
|
+
// vertical rule full height. `stretch` is ignored on the axis the thickness fixes,
|
|
35
|
+
// which is what lets one declaration serve both.
|
|
36
|
+
root: { alignSelf: "stretch" }
|
|
37
|
+
}),
|
|
38
|
+
variantTokens: VARIANT_TOKENS,
|
|
39
|
+
paint: (_theme, colors) => ({ root: { backgroundColor: colors.bg } }),
|
|
40
|
+
variants: {
|
|
41
|
+
// Multiples of `borderWidth.default`, so a theme that thickens its edges thickens
|
|
42
|
+
// these with it. Only the hairline stands outside the scale, being a device pixel.
|
|
43
|
+
size: {
|
|
44
|
+
xs: thickness(() => HAIRLINE),
|
|
45
|
+
sm: thickness((theme) => theme.borderWidth.default),
|
|
46
|
+
md: thickness((theme) => theme.borderWidth.default * 2),
|
|
47
|
+
lg: thickness((theme) => theme.borderWidth.default * 6)
|
|
48
|
+
},
|
|
49
|
+
/** Second, so it releases the axis `size` had to write blind. */
|
|
50
|
+
orientation: {
|
|
51
|
+
horizontal: () => ({ root: { width: "auto" } }),
|
|
52
|
+
vertical: () => ({ root: { height: "auto" } })
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
/**
|
|
56
|
+
* `xs` where every other component defaults to `md`, and it is the one place in the
|
|
57
|
+
* library that departs from that: a rule you notice is a rule that is too thick, and
|
|
58
|
+
* the hairline is what a separator is at rest.
|
|
59
|
+
*
|
|
60
|
+
* `variant` is named here and nowhere else — there is one, the caller cannot choose it,
|
|
61
|
+
* and the recipe still needs it selected for `paint` and the tint to resolve.
|
|
62
|
+
*/
|
|
63
|
+
defaultVariants: { variant: "default", size: "xs", orientation: "horizontal" }
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
// src/components/divider/divider.tsx
|
|
67
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
68
|
+
var Divider = _react.forwardRef.call(void 0, function Divider2({ children, orientation, size, color, asChild = false, style, ...props }, ref) {
|
|
69
|
+
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
|
|
70
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
71
|
+
const selection = { orientation, size };
|
|
72
|
+
const styles = dividerRecipe.resolve({ theme, selection });
|
|
73
|
+
const tint = color ? dividerRecipe.tint({ theme, color, selection }) : void 0;
|
|
74
|
+
const Root = asChild ? _chunkZP2E2H2Gcjs.Slot : _reactnative.View;
|
|
75
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
76
|
+
Root,
|
|
77
|
+
{
|
|
78
|
+
ref,
|
|
79
|
+
accessibilityElementsHidden: true,
|
|
80
|
+
importantForAccessibility: "no",
|
|
81
|
+
...rest,
|
|
82
|
+
style: [styles.root, _optionalChain([tint, 'optionalAccess', _ => _.root]), styleProps, style],
|
|
83
|
+
children: asChild ? children : null
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
});
|
|
87
|
+
Divider.displayName = "XAUI.Divider";
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
exports.dividerRecipe = dividerRecipe; exports.Divider = Divider;
|
|
@@ -0,0 +1,431 @@
|
|
|
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 _chunkTGZZ3RZUcjs = require('./chunk-TGZZ3RZU.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
var _chunkGPVNCJ3Zcjs = require('./chunk-GPVNCJ3Z.cjs');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
var _chunkWR7YLDVVcjs = require('./chunk-WR7YLDVV.cjs');
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
var _chunkZP2E2H2Gcjs = require('./chunk-ZP2E2H2G.cjs');
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
|
|
32
|
+
|
|
33
|
+
// src/components/chip/chip-avatar.tsx
|
|
34
|
+
var _react = require('react');
|
|
35
|
+
var _reactnative = require('react-native');
|
|
36
|
+
|
|
37
|
+
// src/components/chip/chip.context.ts
|
|
38
|
+
var [ChipProvider, useChip] = _chunkZP2E2H2Gcjs.createSlotContext.call(void 0, "Chip");
|
|
39
|
+
|
|
40
|
+
// src/components/chip/chip.style.ts
|
|
41
|
+
|
|
42
|
+
var chipSheet = _reactnative.StyleSheet.create({
|
|
43
|
+
avatarImage: { width: "100%", height: "100%" }
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// src/components/chip/chip-avatar.tsx
|
|
47
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
48
|
+
var ChipAvatar = _react.forwardRef.call(void 0, function ChipAvatar2({ children, source, style, ...props }, ref) {
|
|
49
|
+
const { avatarStyle } = useChip();
|
|
50
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
51
|
+
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 });
|
|
52
|
+
});
|
|
53
|
+
ChipAvatar.displayName = "XAUI.Chip.Avatar";
|
|
54
|
+
|
|
55
|
+
// src/components/chip/chip-close.tsx
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
var ChipClose = _react.forwardRef.call(void 0, function ChipClose2({ isDisabled, ...props }, ref) {
|
|
59
|
+
const { closeStyle, closeGlyphStyle, isDisabled: isChipDisabled } = useChip();
|
|
60
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
61
|
+
_chunkTGZZ3RZUcjs.CloseButton,
|
|
62
|
+
{
|
|
63
|
+
ref,
|
|
64
|
+
name: "Chip.Close",
|
|
65
|
+
baseStyle: closeStyle,
|
|
66
|
+
glyphStyle: closeGlyphStyle,
|
|
67
|
+
isDisabled: _nullishCoalesce(isDisabled, () => ( isChipDisabled)),
|
|
68
|
+
...props
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
});
|
|
72
|
+
ChipClose.displayName = "XAUI.Chip.Close";
|
|
73
|
+
|
|
74
|
+
// src/components/chip/chip-dot.tsx
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
var ChipDot = _react.forwardRef.call(void 0, function ChipDot2({ style, ...props }, ref) {
|
|
79
|
+
const { dotStyle } = useChip();
|
|
80
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
81
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, style: [dotStyle, styleProps, style], ...rest });
|
|
82
|
+
});
|
|
83
|
+
ChipDot.displayName = "XAUI.Chip.Dot";
|
|
84
|
+
|
|
85
|
+
// src/components/chip/chip-icon.tsx
|
|
86
|
+
|
|
87
|
+
function ChipIcon({ size, color, ...rest }) {
|
|
88
|
+
const { icon } = useChip();
|
|
89
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWR7YLDVVcjs.Icon, { size: _nullishCoalesce(size, () => ( icon.size)), color: _nullishCoalesce(color, () => ( icon.color)), ...rest });
|
|
90
|
+
}
|
|
91
|
+
ChipIcon.displayName = "XAUI.Chip.Icon";
|
|
92
|
+
|
|
93
|
+
// src/components/chip/chip-label.tsx
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
var ChipLabel = _react.forwardRef.call(void 0, function ChipLabel2({ children, style, numberOfLines = 1, ...props }, ref) {
|
|
98
|
+
const { labelStyle } = useChip();
|
|
99
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
100
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
101
|
+
_reactnative.Text,
|
|
102
|
+
{
|
|
103
|
+
ref,
|
|
104
|
+
numberOfLines,
|
|
105
|
+
style: [labelStyle, styleProps, style],
|
|
106
|
+
...rest,
|
|
107
|
+
children
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
});
|
|
111
|
+
ChipLabel.displayName = "XAUI.Chip.Label";
|
|
112
|
+
|
|
113
|
+
// src/components/chip/chip.tsx
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
// src/components/chip/chip.recipe.ts
|
|
118
|
+
var SLOTS = [
|
|
119
|
+
"root",
|
|
120
|
+
"label",
|
|
121
|
+
"icon",
|
|
122
|
+
"dot",
|
|
123
|
+
"avatar",
|
|
124
|
+
"close",
|
|
125
|
+
"closeGlyph"
|
|
126
|
+
];
|
|
127
|
+
var VARIANT_TOKENS = {
|
|
128
|
+
primary: { bg: "accent", bgPressed: "accentPressed", fg: "accentForeground" },
|
|
129
|
+
secondary: {
|
|
130
|
+
bg: "accentSoft",
|
|
131
|
+
bgPressed: "accentSoftPressed",
|
|
132
|
+
fg: "accentSoftForeground"
|
|
133
|
+
},
|
|
134
|
+
default: { bg: "default", bgPressed: "defaultPressed", fg: "defaultForeground" },
|
|
135
|
+
tertiary: { border: "border", bgPressed: "defaultSoftPressed", fg: "foreground" },
|
|
136
|
+
ghost: { bgPressed: "defaultSoftPressed", fg: "foreground" },
|
|
137
|
+
success: { bg: "success", bgPressed: "successPressed", fg: "successForeground" },
|
|
138
|
+
"success-soft": {
|
|
139
|
+
bg: "successSoft",
|
|
140
|
+
bgPressed: "successSoftPressed",
|
|
141
|
+
fg: "successSoftForeground"
|
|
142
|
+
},
|
|
143
|
+
warning: { bg: "warning", bgPressed: "warningPressed", fg: "warningForeground" },
|
|
144
|
+
"warning-soft": {
|
|
145
|
+
bg: "warningSoft",
|
|
146
|
+
bgPressed: "warningSoftPressed",
|
|
147
|
+
fg: "warningSoftForeground"
|
|
148
|
+
},
|
|
149
|
+
danger: { bg: "danger", bgPressed: "dangerPressed", fg: "dangerForeground" },
|
|
150
|
+
"danger-soft": {
|
|
151
|
+
bg: "dangerSoft",
|
|
152
|
+
bgPressed: "dangerSoftPressed",
|
|
153
|
+
fg: "dangerSoftForeground"
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
function sizeAxis(step) {
|
|
157
|
+
const { height, padding, gap, label, glyph, dot, avatar, cross } = step;
|
|
158
|
+
return (theme) => {
|
|
159
|
+
const diameter = theme.spacing(avatar);
|
|
160
|
+
const box = theme.fontSizes[glyph];
|
|
161
|
+
const inset = theme.spacing(padding);
|
|
162
|
+
const cap = (theme.spacing(height) - diameter) / 2;
|
|
163
|
+
return {
|
|
164
|
+
root: {
|
|
165
|
+
height: theme.spacing(height),
|
|
166
|
+
paddingHorizontal: inset,
|
|
167
|
+
gap: theme.spacing(gap)
|
|
168
|
+
},
|
|
169
|
+
label: {
|
|
170
|
+
fontSize: theme.fontSizes[label],
|
|
171
|
+
lineHeight: theme.lineHeights[label]
|
|
172
|
+
},
|
|
173
|
+
icon: { fontSize: box },
|
|
174
|
+
dot: circle(theme.spacing(dot)),
|
|
175
|
+
avatar: {
|
|
176
|
+
...circle(diameter),
|
|
177
|
+
// **The one margin on a slot in this component**, and R4 is about spacing between
|
|
178
|
+
// slots — this is not that. The root's horizontal padding is set for text, several
|
|
179
|
+
// times the gap the height leaves above the avatar, so a face sits visibly pushed
|
|
180
|
+
// into the chip while a label beside it looks right. Cancelling the difference
|
|
181
|
+
// seats it in the capsule's rounded end instead. Clamped at zero, because a theme
|
|
182
|
+
// with tighter padding than that gap needs no pull at all.
|
|
183
|
+
//
|
|
184
|
+
// R13 — `marginStart`, so it is the leading edge in RTL too. `Chip.Avatar` is a
|
|
185
|
+
// leading slot by contract, which is what makes a leading-only correction sound.
|
|
186
|
+
marginStart: -Math.max(0, inset - cap)
|
|
187
|
+
},
|
|
188
|
+
// The touch target is the glyph's box; `hitSlop` on the slot is what makes it
|
|
189
|
+
// reachable, because a cross big enough to hit is a cross too big to look right.
|
|
190
|
+
close: { width: box, height: box },
|
|
191
|
+
closeGlyph: { width: theme.spacing(cross) }
|
|
192
|
+
};
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
function circle(diameter) {
|
|
196
|
+
return { width: diameter, height: diameter, borderRadius: diameter / 2 };
|
|
197
|
+
}
|
|
198
|
+
var SIZES = {
|
|
199
|
+
xs: {
|
|
200
|
+
height: 5,
|
|
201
|
+
padding: 2,
|
|
202
|
+
gap: 1,
|
|
203
|
+
label: "xs",
|
|
204
|
+
glyph: "sm",
|
|
205
|
+
dot: 1,
|
|
206
|
+
avatar: 3.5,
|
|
207
|
+
cross: 2
|
|
208
|
+
},
|
|
209
|
+
sm: {
|
|
210
|
+
height: 6,
|
|
211
|
+
padding: 2.5,
|
|
212
|
+
gap: 1,
|
|
213
|
+
label: "xs",
|
|
214
|
+
glyph: "sm",
|
|
215
|
+
dot: 1.25,
|
|
216
|
+
avatar: 4.5,
|
|
217
|
+
cross: 2
|
|
218
|
+
},
|
|
219
|
+
md: {
|
|
220
|
+
height: 7,
|
|
221
|
+
padding: 3,
|
|
222
|
+
gap: 1,
|
|
223
|
+
label: "sm",
|
|
224
|
+
glyph: "md",
|
|
225
|
+
dot: 1.5,
|
|
226
|
+
avatar: 5.5,
|
|
227
|
+
cross: 2.5
|
|
228
|
+
},
|
|
229
|
+
lg: {
|
|
230
|
+
height: 9,
|
|
231
|
+
padding: 4,
|
|
232
|
+
gap: 1.5,
|
|
233
|
+
label: "md",
|
|
234
|
+
glyph: "lg",
|
|
235
|
+
dot: 2,
|
|
236
|
+
avatar: 7,
|
|
237
|
+
cross: 3
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
var chipRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
241
|
+
slots: SLOTS,
|
|
242
|
+
// The cross's own geometry — thickness and centring — belongs to the shared
|
|
243
|
+
// `CloseButton`; what stays below is the box and bar size this component's scale sets.
|
|
244
|
+
base: (theme) => ({
|
|
245
|
+
..._chunkTGZZ3RZUcjs.closeButtonBase.call(void 0, theme),
|
|
246
|
+
root: {
|
|
247
|
+
// A chip hugs its content where a `Button` fills its column. The difference is what
|
|
248
|
+
// the two are: a button is a control the layout sizes, a chip is a token *about*
|
|
249
|
+
// something, and a tag stretched across a screen has stopped being one. It is also
|
|
250
|
+
// the one line of HeroUI's chip that is not a measurement.
|
|
251
|
+
alignSelf: "flex-start",
|
|
252
|
+
flexDirection: "row",
|
|
253
|
+
alignItems: "center",
|
|
254
|
+
justifyContent: "center",
|
|
255
|
+
borderWidth: 0,
|
|
256
|
+
// The capsule the name means, at every size. HeroUI reaches it through a radius
|
|
257
|
+
// ladder that React Native would clamp to the same pill anyway; saying `full` says
|
|
258
|
+
// it once, and `radius` is still there for the tag that wants square corners.
|
|
259
|
+
borderRadius: theme.radius.full,
|
|
260
|
+
// Squircle corners for when `radius` overrides the pill. Free on Android.
|
|
261
|
+
borderCurve: "continuous"
|
|
262
|
+
// Deliberately no `overflow: 'hidden'`, where HeroUI clips: the press overlays
|
|
263
|
+
// carry their own corners (`system/pressable-feedback/`), so nothing needs the clip
|
|
264
|
+
// — and clipping here would cut a badge or a shadow a caller hangs off the chip.
|
|
265
|
+
},
|
|
266
|
+
label: {
|
|
267
|
+
fontFamily: theme.fontFamilies.body,
|
|
268
|
+
fontWeight: theme.fontWeights.medium
|
|
269
|
+
},
|
|
270
|
+
avatar: { overflow: "hidden", alignItems: "center", justifyContent: "center" }
|
|
271
|
+
}),
|
|
272
|
+
variantTokens: VARIANT_TOKENS,
|
|
273
|
+
/**
|
|
274
|
+
* Where the variant's colours land, for every variant at once. The border width follows
|
|
275
|
+
* the *presence* of the border role rather than a per-variant flag — `tertiary` is the
|
|
276
|
+
* only variant that names one, and that fact is already in the table above.
|
|
277
|
+
*
|
|
278
|
+
* The dot and the cross take the foreground rather than a status token of their own: on
|
|
279
|
+
* a filled `success` chip the readable colour is the one the label already uses, and on
|
|
280
|
+
* a `success-soft` one it is the green that token resolves to. One rule, eleven
|
|
281
|
+
* variants, and a tinted chip gets it for free.
|
|
282
|
+
*/
|
|
283
|
+
paint: (theme, colors) => ({
|
|
284
|
+
root: {
|
|
285
|
+
backgroundColor: colors.bg,
|
|
286
|
+
borderColor: colors.border,
|
|
287
|
+
borderWidth: colors.border ? theme.borderWidth.default : 0
|
|
288
|
+
},
|
|
289
|
+
label: { color: colors.fg },
|
|
290
|
+
icon: { color: colors.fg },
|
|
291
|
+
dot: { backgroundColor: colors.fg },
|
|
292
|
+
closeGlyph: { backgroundColor: colors.fg }
|
|
293
|
+
}),
|
|
294
|
+
/** Declaration order is application order: `radius` overrides the capsule `base` set. */
|
|
295
|
+
variants: {
|
|
296
|
+
size: {
|
|
297
|
+
xs: sizeAxis(SIZES.xs),
|
|
298
|
+
sm: sizeAxis(SIZES.sm),
|
|
299
|
+
md: sizeAxis(SIZES.md),
|
|
300
|
+
lg: sizeAxis(SIZES.lg)
|
|
301
|
+
},
|
|
302
|
+
radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "root")
|
|
303
|
+
},
|
|
304
|
+
/**
|
|
305
|
+
* The pressed colour is the variant's own `…Pressed` token, as on the `Button` and not
|
|
306
|
+
* as on the `Card`: a chip is small enough that a wash over it reads as a smudge, while
|
|
307
|
+
* the fill going one step down reads as the thing itself being pushed. A tinted chip
|
|
308
|
+
* presses through the same OKLab formula as a token one.
|
|
309
|
+
*/
|
|
310
|
+
states: {
|
|
311
|
+
pressed: (_theme, colors) => ({ root: { backgroundColor: colors.bgPressed } }),
|
|
312
|
+
disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
|
|
313
|
+
},
|
|
314
|
+
defaultVariants: { variant: "primary", size: "md" }
|
|
315
|
+
});
|
|
316
|
+
|
|
317
|
+
// src/components/chip/chip.tsx
|
|
318
|
+
|
|
319
|
+
var ChipRoot = _react.forwardRef.call(void 0, function Chip({
|
|
320
|
+
children,
|
|
321
|
+
variant,
|
|
322
|
+
size,
|
|
323
|
+
radius,
|
|
324
|
+
color,
|
|
325
|
+
isDisabled = false,
|
|
326
|
+
isPressable = false,
|
|
327
|
+
asChild = false,
|
|
328
|
+
accessibilityRole,
|
|
329
|
+
accessibilityState,
|
|
330
|
+
animation,
|
|
331
|
+
style,
|
|
332
|
+
onPressIn,
|
|
333
|
+
onPressOut,
|
|
334
|
+
...props
|
|
335
|
+
}, ref) {
|
|
336
|
+
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
|
|
337
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
338
|
+
const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
|
|
339
|
+
const selection = { variant, size, radius };
|
|
340
|
+
const states = { pressed: isPressed, disabled: isDisabled };
|
|
341
|
+
const styles = chipRecipe.resolve({ theme, selection, states });
|
|
342
|
+
const tint = color ? chipRecipe.tint({ theme, color, selection, states }) : void 0;
|
|
343
|
+
const context = _react.useMemo.call(void 0, () => {
|
|
344
|
+
const icon = _reactnative.StyleSheet.flatten([styles.icon, _optionalChain([tint, 'optionalAccess', _ => _.icon])]);
|
|
345
|
+
return {
|
|
346
|
+
labelStyle: tint ? [styles.label, tint.label] : styles.label,
|
|
347
|
+
dotStyle: tint ? [styles.dot, tint.dot] : styles.dot,
|
|
348
|
+
avatarStyle: styles.avatar,
|
|
349
|
+
closeStyle: styles.close,
|
|
350
|
+
closeGlyphStyle: tint ? [styles.closeGlyph, tint.closeGlyph] : styles.closeGlyph,
|
|
351
|
+
icon: {
|
|
352
|
+
size: icon.fontSize,
|
|
353
|
+
// `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
|
|
354
|
+
// hand to a third-party component expecting a string.
|
|
355
|
+
color: typeof icon.color === "string" ? icon.color : void 0
|
|
356
|
+
},
|
|
357
|
+
isDisabled
|
|
358
|
+
};
|
|
359
|
+
}, [styles, tint, isDisabled]);
|
|
360
|
+
const rootStyle = [
|
|
361
|
+
styles.root,
|
|
362
|
+
_optionalChain([tint, 'optionalAccess', _2 => _2.root]),
|
|
363
|
+
styleProps,
|
|
364
|
+
typeof style === "function" ? style({ pressed: isPressed }) : style
|
|
365
|
+
];
|
|
366
|
+
const text = _chunkZP2E2H2Gcjs.childrenToString.call(void 0, children);
|
|
367
|
+
const content = text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChipLabel, { children: text }) : children;
|
|
368
|
+
if (!isPressable && !asChild && (onPressIn || onPressOut || rest.onPress || rest.onLongPress)) {
|
|
369
|
+
_chunkEJQCQPETcjs.warnDev.call(void 0,
|
|
370
|
+
"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."
|
|
371
|
+
);
|
|
372
|
+
}
|
|
373
|
+
const surface = isPressable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
374
|
+
_chunkGPVNCJ3Zcjs.PressableFeedback,
|
|
375
|
+
{
|
|
376
|
+
ref,
|
|
377
|
+
isPressed,
|
|
378
|
+
isDisabled,
|
|
379
|
+
asChild,
|
|
380
|
+
animation,
|
|
381
|
+
accessibilityRole: _nullishCoalesce(accessibilityRole, () => ( "button")),
|
|
382
|
+
accessibilityState: { disabled: isDisabled, ...accessibilityState },
|
|
383
|
+
...rest,
|
|
384
|
+
style: rootStyle,
|
|
385
|
+
onPressIn: press.onPressIn,
|
|
386
|
+
onPressOut: press.onPressOut,
|
|
387
|
+
children: asChild ? children : content
|
|
388
|
+
}
|
|
389
|
+
) : asChild ? (
|
|
390
|
+
// R12 — the caller's element is the chip, so it takes the children it was written
|
|
391
|
+
// with and the auto-wrap does not apply.
|
|
392
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
393
|
+
_chunkZP2E2H2Gcjs.Slot,
|
|
394
|
+
{
|
|
395
|
+
ref,
|
|
396
|
+
accessibilityRole,
|
|
397
|
+
accessibilityState,
|
|
398
|
+
...rest,
|
|
399
|
+
style: rootStyle,
|
|
400
|
+
children
|
|
401
|
+
}
|
|
402
|
+
)
|
|
403
|
+
) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
404
|
+
_reactnative.View,
|
|
405
|
+
{
|
|
406
|
+
ref,
|
|
407
|
+
accessibilityRole,
|
|
408
|
+
accessibilityState,
|
|
409
|
+
...rest,
|
|
410
|
+
style: rootStyle,
|
|
411
|
+
children: content
|
|
412
|
+
}
|
|
413
|
+
);
|
|
414
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChipProvider, { value: context, children: surface });
|
|
415
|
+
});
|
|
416
|
+
ChipRoot.displayName = "XAUI.Chip.Root";
|
|
417
|
+
|
|
418
|
+
// src/components/chip/index.ts
|
|
419
|
+
var Chip2 = Object.assign(ChipRoot, {
|
|
420
|
+
Label: ChipLabel,
|
|
421
|
+
Icon: ChipIcon,
|
|
422
|
+
Dot: ChipDot,
|
|
423
|
+
Avatar: ChipAvatar,
|
|
424
|
+
Close: ChipClose
|
|
425
|
+
});
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
|
|
429
|
+
|
|
430
|
+
|
|
431
|
+
exports.useChip = useChip; exports.chipRecipe = chipRecipe; exports.Chip = Chip2;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// src/system/selection-fill/selection-fill.tsx
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var DURATION = 120;
|
|
6
|
+
var FROM_SCALE = 0.8;
|
|
7
|
+
function SelectionFill({
|
|
8
|
+
isVisible,
|
|
9
|
+
style,
|
|
10
|
+
animation = true,
|
|
11
|
+
children
|
|
12
|
+
}) {
|
|
13
|
+
if (!animation) {
|
|
14
|
+
return isVisible ? /* @__PURE__ */jsx(View, {
|
|
15
|
+
style,
|
|
16
|
+
children
|
|
17
|
+
}) : null;
|
|
18
|
+
}
|
|
19
|
+
return /* @__PURE__ */jsx(AnimatedFill, {
|
|
20
|
+
isVisible,
|
|
21
|
+
style,
|
|
22
|
+
children
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
SelectionFill.displayName = "XAUI.SelectionFill";
|
|
26
|
+
const _worklet_13281565252924_init_data = {
|
|
27
|
+
code: "function chunkBA2DBSANJs1(){const{withTiming,isVisible,DURATION}=this.__closure;return withTiming(isVisible?1:0,{duration:DURATION});}",
|
|
28
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-BA2DBSAN.js",
|
|
29
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkBA2DBSANJs1\",\"withTiming\",\"isVisible\",\"DURATION\",\"__closure\",\"duration\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-BA2DBSAN.js\"],\"mappings\":\"AA2BmC,SAAAA,gBAAMA,CAAA,QAAAC,UAAA,CAAAC,SAAA,CAAAC,QAAA,OAAAC,SAAA,CAErC,MAAO,CAAAH,UAAU,CAACC,SAAS,CAAG,CAAC,CAAG,CAAC,CAAE,CAAEG,QAAQ,CAAEF,QAAS,CAAC,CAAC,CAC9D\",\"ignoreList\":[]}"
|
|
30
|
+
};
|
|
31
|
+
const _worklet_2224484425301_init_data = {
|
|
32
|
+
code: "function chunkBA2DBSANJs2(){const{progress,FROM_SCALE}=this.__closure;return{opacity:progress.value,transform:[{scale:FROM_SCALE+(1-FROM_SCALE)*progress.value}]};}",
|
|
33
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-BA2DBSAN.js",
|
|
34
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkBA2DBSANJs2\",\"progress\",\"FROM_SCALE\",\"__closure\",\"opacity\",\"value\",\"transform\",\"scale\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-BA2DBSAN.js\"],\"mappings\":\"AA+ByC,SAAAA,gBAAMA,CAAA,QAAAC,QAAA,CAAAC,UAAA,OAAAC,SAAA,CAE3C,MAAO,CACLC,OAAO,CAAEH,QAAQ,CAACI,KAAK,CACvBC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAEL,UAAU,CAAG,CAAC,CAAC,CAAGA,UAAU,EAAID,QAAQ,CAACI,KAAM,CAAC,CACvE,CAAC,CACH\",\"ignoreList\":[]}"
|
|
35
|
+
};
|
|
36
|
+
function AnimatedFill({
|
|
37
|
+
isVisible,
|
|
38
|
+
style,
|
|
39
|
+
children
|
|
40
|
+
}) {
|
|
41
|
+
const progress = useDerivedValue(function chunkBA2DBSANJs1Factory({
|
|
42
|
+
_worklet_13281565252924_init_data,
|
|
43
|
+
withTiming,
|
|
44
|
+
isVisible,
|
|
45
|
+
DURATION
|
|
46
|
+
}) {
|
|
47
|
+
const _e = [new global.Error(), -4, -27];
|
|
48
|
+
const chunkBA2DBSANJs1 = function () {
|
|
49
|
+
return withTiming(isVisible ? 1 : 0, {
|
|
50
|
+
duration: DURATION
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
chunkBA2DBSANJs1.__closure = {
|
|
54
|
+
withTiming,
|
|
55
|
+
isVisible,
|
|
56
|
+
DURATION
|
|
57
|
+
};
|
|
58
|
+
chunkBA2DBSANJs1.__workletHash = 13281565252924;
|
|
59
|
+
chunkBA2DBSANJs1.__pluginVersion = "0.7.4";
|
|
60
|
+
chunkBA2DBSANJs1.__initData = _worklet_13281565252924_init_data;
|
|
61
|
+
chunkBA2DBSANJs1.__stackDetails = _e;
|
|
62
|
+
return chunkBA2DBSANJs1;
|
|
63
|
+
}({
|
|
64
|
+
_worklet_13281565252924_init_data,
|
|
65
|
+
withTiming,
|
|
66
|
+
isVisible,
|
|
67
|
+
DURATION
|
|
68
|
+
}), [isVisible]);
|
|
69
|
+
const animatedStyle = useAnimatedStyle(function chunkBA2DBSANJs2Factory({
|
|
70
|
+
_worklet_2224484425301_init_data,
|
|
71
|
+
progress,
|
|
72
|
+
FROM_SCALE
|
|
73
|
+
}) {
|
|
74
|
+
const _e = [new global.Error(), -3, -27];
|
|
75
|
+
const chunkBA2DBSANJs2 = function () {
|
|
76
|
+
return {
|
|
77
|
+
opacity: progress.value,
|
|
78
|
+
transform: [{
|
|
79
|
+
scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value
|
|
80
|
+
}]
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
chunkBA2DBSANJs2.__closure = {
|
|
84
|
+
progress,
|
|
85
|
+
FROM_SCALE
|
|
86
|
+
};
|
|
87
|
+
chunkBA2DBSANJs2.__workletHash = 2224484425301;
|
|
88
|
+
chunkBA2DBSANJs2.__pluginVersion = "0.7.4";
|
|
89
|
+
chunkBA2DBSANJs2.__initData = _worklet_2224484425301_init_data;
|
|
90
|
+
chunkBA2DBSANJs2.__stackDetails = _e;
|
|
91
|
+
return chunkBA2DBSANJs2;
|
|
92
|
+
}({
|
|
93
|
+
_worklet_2224484425301_init_data,
|
|
94
|
+
progress,
|
|
95
|
+
FROM_SCALE
|
|
96
|
+
}), [progress]);
|
|
97
|
+
return /* @__PURE__ */jsx(Animated.View, {
|
|
98
|
+
style: [style, animatedStyle],
|
|
99
|
+
children
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
export { SelectionFill };
|