@xaui/native 0.9.1-alpha.33 → 0.9.1-alpha.35
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-DUQUCOUY.cjs +198 -0
- package/dist/{chunk-KQKD3KB3.js → chunk-HNW4HIMO.js} +18 -19
- package/dist/chunk-LZK77LFX.js +198 -0
- package/dist/{chunk-LT6XHFXJ.cjs → chunk-YUG22AXX.cjs} +18 -19
- package/dist/components/badge/index.cjs +16 -0
- package/dist/components/badge/index.d.cts +157 -0
- package/dist/components/badge/index.d.ts +157 -0
- package/dist/components/badge/index.js +16 -0
- package/dist/components/skeleton/index.cjs +2 -2
- package/dist/components/skeleton/index.d.cts +44 -53
- package/dist/components/skeleton/index.d.ts +44 -53
- package/dist/components/skeleton/index.js +1 -1
- package/dist/index.cjs +21 -13
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +27 -19
- package/package.json +11 -1
|
@@ -0,0 +1,198 @@
|
|
|
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 _chunk54FJOKANcjs = require('./chunk-54FJOKAN.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
var _chunkI6ZB3FZIcjs = require('./chunk-I6ZB3FZI.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
15
|
+
|
|
16
|
+
// src/components/badge/badge.tsx
|
|
17
|
+
var _react = require('react');
|
|
18
|
+
var _reactnative = require('react-native');
|
|
19
|
+
|
|
20
|
+
// src/components/badge/badge.recipe.ts
|
|
21
|
+
var SLOTS = ["root", "label"];
|
|
22
|
+
var VARIANT_TOKENS = {
|
|
23
|
+
primary: { bg: "accent", fg: "accentForeground" },
|
|
24
|
+
secondary: { bg: "accentSoft", fg: "accentSoftForeground" },
|
|
25
|
+
default: { bg: "default", fg: "defaultForeground" },
|
|
26
|
+
tertiary: { border: "border", fg: "foreground" },
|
|
27
|
+
ghost: { fg: "foreground" },
|
|
28
|
+
success: { bg: "success", fg: "successForeground" },
|
|
29
|
+
"success-soft": { bg: "successSoft", fg: "successSoftForeground" },
|
|
30
|
+
warning: { bg: "warning", fg: "warningForeground" },
|
|
31
|
+
"warning-soft": { bg: "warningSoft", fg: "warningSoftForeground" },
|
|
32
|
+
danger: { bg: "danger", fg: "dangerForeground" },
|
|
33
|
+
"danger-soft": { bg: "dangerSoft", fg: "dangerSoftForeground" }
|
|
34
|
+
};
|
|
35
|
+
function sizeAxis(step) {
|
|
36
|
+
return (theme) => {
|
|
37
|
+
const height = theme.spacing(step.height);
|
|
38
|
+
return {
|
|
39
|
+
root: {
|
|
40
|
+
height,
|
|
41
|
+
minWidth: height,
|
|
42
|
+
paddingHorizontal: theme.spacing(step.padding)
|
|
43
|
+
},
|
|
44
|
+
label: { fontSize: theme.fontSizes[step.label] }
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function dotAxis(diameter) {
|
|
49
|
+
return (theme) => {
|
|
50
|
+
const size = theme.spacing(diameter);
|
|
51
|
+
return {
|
|
52
|
+
root: { height: size, width: size, minWidth: size, paddingHorizontal: 0 }
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
var BADGE_DEFAULT_SIZE = "md";
|
|
57
|
+
var SIZES = {
|
|
58
|
+
xs: { height: 4, padding: 1.25, label: "xs", dot: 1.5 },
|
|
59
|
+
sm: { height: 4.5, padding: 1.5, label: "xs", dot: 2 },
|
|
60
|
+
md: { height: 5, padding: 1.5, label: "xs", dot: 2.5 },
|
|
61
|
+
lg: { height: 6, padding: 2, label: "sm", dot: 3 }
|
|
62
|
+
};
|
|
63
|
+
function badgeOffset(theme, size, isDot) {
|
|
64
|
+
const step = SIZES[size];
|
|
65
|
+
return theme.spacing(isDot ? step.dot : step.height) / 2;
|
|
66
|
+
}
|
|
67
|
+
var badgeRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
68
|
+
slots: SLOTS,
|
|
69
|
+
base: (theme) => ({
|
|
70
|
+
root: {
|
|
71
|
+
flexDirection: "row",
|
|
72
|
+
alignItems: "center",
|
|
73
|
+
justifyContent: "center",
|
|
74
|
+
borderWidth: 0,
|
|
75
|
+
// The capsule at every size, which is what makes a two-digit count read as one
|
|
76
|
+
// object. `radius` is still there for the square marker.
|
|
77
|
+
borderRadius: theme.radius.full,
|
|
78
|
+
// Squircle corners for when `radius` overrides the pill. Free on Android.
|
|
79
|
+
borderCurve: "continuous"
|
|
80
|
+
},
|
|
81
|
+
label: {
|
|
82
|
+
fontFamily: theme.fontFamilies.body,
|
|
83
|
+
fontWeight: theme.fontWeights.semibold,
|
|
84
|
+
// Android reserves leading above and below the glyphs, which in a 16pt box is the
|
|
85
|
+
// difference between a centred digit and one sitting low.
|
|
86
|
+
includeFontPadding: false,
|
|
87
|
+
// No `lineHeight`: the scale's leading is taller than the box at every size here,
|
|
88
|
+
// and the root centres the label anyway.
|
|
89
|
+
textAlign: "center"
|
|
90
|
+
}
|
|
91
|
+
}),
|
|
92
|
+
variantTokens: VARIANT_TOKENS,
|
|
93
|
+
/**
|
|
94
|
+
* Where the variant's colours land, for every variant at once. The border width follows
|
|
95
|
+
* the *presence* of the border role, so `ghost` needs no rule of its own.
|
|
96
|
+
*/
|
|
97
|
+
paint: (theme, colors) => ({
|
|
98
|
+
root: {
|
|
99
|
+
backgroundColor: colors.bg,
|
|
100
|
+
borderColor: colors.border,
|
|
101
|
+
borderWidth: colors.border ? theme.borderWidth.default : 0
|
|
102
|
+
},
|
|
103
|
+
label: { color: colors.fg }
|
|
104
|
+
}),
|
|
105
|
+
/** Declaration order is application order: `dot` overrides the box `size` set, and
|
|
106
|
+
* `radius` overrides the capsule from `base`. */
|
|
107
|
+
variants: {
|
|
108
|
+
size: {
|
|
109
|
+
xs: sizeAxis(SIZES.xs),
|
|
110
|
+
sm: sizeAxis(SIZES.sm),
|
|
111
|
+
md: sizeAxis(SIZES.md),
|
|
112
|
+
lg: sizeAxis(SIZES.lg)
|
|
113
|
+
},
|
|
114
|
+
/**
|
|
115
|
+
* The same four keys as `size`, and the root selects it with the resolved size when
|
|
116
|
+
* `isDot` is set and with nothing when it is not — an axis left unselected contributes
|
|
117
|
+
* nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
|
|
118
|
+
* have needed a `false` branch with nothing to say, and a `size × isDot` compound
|
|
119
|
+
* would have been sixteen entries for four measurements.
|
|
120
|
+
*/
|
|
121
|
+
dot: {
|
|
122
|
+
xs: dotAxis(SIZES.xs.dot),
|
|
123
|
+
sm: dotAxis(SIZES.sm.dot),
|
|
124
|
+
md: dotAxis(SIZES.md.dot),
|
|
125
|
+
lg: dotAxis(SIZES.lg.dot)
|
|
126
|
+
},
|
|
127
|
+
radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "root")
|
|
128
|
+
},
|
|
129
|
+
/**
|
|
130
|
+
* `danger`, where every other component in the library defaults to the first name in its
|
|
131
|
+
* ladder. A badge is overwhelmingly the count of something that wants attention — unread,
|
|
132
|
+
* failed, overdue — and a red one is what `<Badge>3</Badge>` means. The accent count is a
|
|
133
|
+
* `variant` away.
|
|
134
|
+
*/
|
|
135
|
+
defaultVariants: { variant: "danger", size: BADGE_DEFAULT_SIZE }
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
// src/components/badge/badge.utils.ts
|
|
139
|
+
function placementInsets(placement, offset) {
|
|
140
|
+
if (!placement) return void 0;
|
|
141
|
+
const vertical = placement.startsWith("top") ? { top: -offset } : { bottom: -offset };
|
|
142
|
+
const horizontal = placement.endsWith("start") ? { start: -offset } : { end: -offset };
|
|
143
|
+
return { position: "absolute", ...vertical, ...horizontal };
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// src/components/badge/badge.tsx
|
|
147
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
148
|
+
var Badge = _react.forwardRef.call(void 0, function Badge2({
|
|
149
|
+
children,
|
|
150
|
+
variant,
|
|
151
|
+
size,
|
|
152
|
+
radius,
|
|
153
|
+
color,
|
|
154
|
+
isDot = false,
|
|
155
|
+
placement,
|
|
156
|
+
asChild = false,
|
|
157
|
+
style,
|
|
158
|
+
...props
|
|
159
|
+
}, ref) {
|
|
160
|
+
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
|
|
161
|
+
const [styleProps, rest] = _chunkI6ZB3FZIcjs.useStyleProps.call(void 0, props);
|
|
162
|
+
const resolvedSize = _nullishCoalesce(size, () => ( BADGE_DEFAULT_SIZE));
|
|
163
|
+
const selection = {
|
|
164
|
+
variant,
|
|
165
|
+
size,
|
|
166
|
+
radius,
|
|
167
|
+
// An axis left unselected contributes nothing, which is exactly "this badge has a
|
|
168
|
+
// label" — no `false` branch with nothing to say.
|
|
169
|
+
dot: isDot ? resolvedSize : void 0
|
|
170
|
+
};
|
|
171
|
+
const styles = badgeRecipe.resolve({ theme, selection });
|
|
172
|
+
const tint = color ? badgeRecipe.tint({ theme, color, selection }) : void 0;
|
|
173
|
+
const insets = _react.useMemo.call(void 0,
|
|
174
|
+
() => placementInsets(placement, badgeOffset(theme, resolvedSize, isDot)),
|
|
175
|
+
[placement, theme, resolvedSize, isDot]
|
|
176
|
+
);
|
|
177
|
+
const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _ => _.root]), insets, styleProps, style];
|
|
178
|
+
const text = _chunk54FJOKANcjs.childrenToString.call(void 0, children);
|
|
179
|
+
const label = text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: [styles.label, _optionalChain([tint, 'optionalAccess', _2 => _2.label])], numberOfLines: 1, children: text }) : children;
|
|
180
|
+
const content = isDot ? null : label;
|
|
181
|
+
const Root = asChild ? _chunk54FJOKANcjs.Slot : _reactnative.View;
|
|
182
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
183
|
+
Root,
|
|
184
|
+
{
|
|
185
|
+
ref,
|
|
186
|
+
...rest,
|
|
187
|
+
style: rootStyle,
|
|
188
|
+
children: asChild ? children : content
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
});
|
|
192
|
+
Badge.displayName = "XAUI.Badge";
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
exports.badgeRecipe = badgeRecipe; exports.placementInsets = placementInsets; exports.Badge = Badge;
|
|
@@ -12,9 +12,6 @@ var SLOTS = ["root"];
|
|
|
12
12
|
var VARIANT_TOKENS = {
|
|
13
13
|
default: {
|
|
14
14
|
bg: "default"
|
|
15
|
-
},
|
|
16
|
-
secondary: {
|
|
17
|
-
bg: "defaultSoft"
|
|
18
15
|
}
|
|
19
16
|
};
|
|
20
17
|
var skeletonRecipe = createRecipe({
|
|
@@ -42,6 +39,10 @@ var skeletonRecipe = createRecipe({
|
|
|
42
39
|
* R14's `width` and `height`, because only they know the shape of the thing that is
|
|
43
40
|
* missing.
|
|
44
41
|
*/
|
|
42
|
+
/**
|
|
43
|
+
* `variant` is named here and nowhere else: there is one, the caller cannot choose it,
|
|
44
|
+
* and the recipe still needs it selected for `paint` and the tint to resolve.
|
|
45
|
+
*/
|
|
45
46
|
defaultVariants: {
|
|
46
47
|
variant: "default",
|
|
47
48
|
radius: "md"
|
|
@@ -53,7 +54,6 @@ import { Fragment, jsx } from "react/jsx-runtime";
|
|
|
53
54
|
var PULSE_DURATION = 1e3;
|
|
54
55
|
var PULSE_MIN_OPACITY = 0.5;
|
|
55
56
|
var Skeleton = forwardRef(function Skeleton2({
|
|
56
|
-
variant,
|
|
57
57
|
radius,
|
|
58
58
|
color,
|
|
59
59
|
isLoading = true,
|
|
@@ -65,7 +65,6 @@ var Skeleton = forwardRef(function Skeleton2({
|
|
|
65
65
|
const theme = useXAUITheme();
|
|
66
66
|
const [styleProps, rest] = useStyleProps(props);
|
|
67
67
|
const selection = {
|
|
68
|
-
variant,
|
|
69
68
|
radius
|
|
70
69
|
};
|
|
71
70
|
const styles = skeletonRecipe.resolve({
|
|
@@ -101,10 +100,10 @@ var Skeleton = forwardRef(function Skeleton2({
|
|
|
101
100
|
});
|
|
102
101
|
});
|
|
103
102
|
Skeleton.displayName = "XAUI.Skeleton";
|
|
104
|
-
const
|
|
105
|
-
code: "function
|
|
106
|
-
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-
|
|
107
|
-
sourceMap: "{\"version\":3,\"names\":[\"
|
|
103
|
+
const _worklet_11158666407002_init_data = {
|
|
104
|
+
code: "function chunkHNW4HIMOJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
|
|
105
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-HNW4HIMO.js",
|
|
106
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkHNW4HIMOJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-HNW4HIMO.js\"],\"mappings\":\"AAyF2C,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE3C,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
|
|
108
107
|
};
|
|
109
108
|
var PulsingBlock = forwardRef(function PulsingBlock2({
|
|
110
109
|
style,
|
|
@@ -120,26 +119,26 @@ var PulsingBlock = forwardRef(function PulsingBlock2({
|
|
|
120
119
|
true);
|
|
121
120
|
return () => cancelAnimation(opacity);
|
|
122
121
|
}, [opacity]);
|
|
123
|
-
const animatedStyle = useAnimatedStyle(function
|
|
124
|
-
|
|
122
|
+
const animatedStyle = useAnimatedStyle(function chunkHNW4HIMOJs1Factory({
|
|
123
|
+
_worklet_11158666407002_init_data,
|
|
125
124
|
opacity
|
|
126
125
|
}) {
|
|
127
126
|
const _e = [new global.Error(), -2, -27];
|
|
128
|
-
const
|
|
127
|
+
const chunkHNW4HIMOJs1 = function () {
|
|
129
128
|
return {
|
|
130
129
|
opacity: opacity.value
|
|
131
130
|
};
|
|
132
131
|
};
|
|
133
|
-
|
|
132
|
+
chunkHNW4HIMOJs1.__closure = {
|
|
134
133
|
opacity
|
|
135
134
|
};
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
return
|
|
135
|
+
chunkHNW4HIMOJs1.__workletHash = 11158666407002;
|
|
136
|
+
chunkHNW4HIMOJs1.__pluginVersion = "0.7.4";
|
|
137
|
+
chunkHNW4HIMOJs1.__initData = _worklet_11158666407002_init_data;
|
|
138
|
+
chunkHNW4HIMOJs1.__stackDetails = _e;
|
|
139
|
+
return chunkHNW4HIMOJs1;
|
|
141
140
|
}({
|
|
142
|
-
|
|
141
|
+
_worklet_11158666407002_init_data,
|
|
143
142
|
opacity
|
|
144
143
|
}), [opacity]);
|
|
145
144
|
return /* @__PURE__ */jsx(Animated.View, {
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Slot,
|
|
3
|
+
childrenToString
|
|
4
|
+
} from "./chunk-YXPYOOHU.js";
|
|
5
|
+
import {
|
|
6
|
+
createRecipe,
|
|
7
|
+
radiusAxis
|
|
8
|
+
} from "./chunk-4GTAZM2C.js";
|
|
9
|
+
import {
|
|
10
|
+
useStyleProps
|
|
11
|
+
} from "./chunk-MEYCZS32.js";
|
|
12
|
+
import {
|
|
13
|
+
useXAUITheme
|
|
14
|
+
} from "./chunk-A3EGFI6T.js";
|
|
15
|
+
|
|
16
|
+
// src/components/badge/badge.tsx
|
|
17
|
+
import { forwardRef, useMemo } from "react";
|
|
18
|
+
import { Text, View } from "react-native";
|
|
19
|
+
|
|
20
|
+
// src/components/badge/badge.recipe.ts
|
|
21
|
+
var SLOTS = ["root", "label"];
|
|
22
|
+
var VARIANT_TOKENS = {
|
|
23
|
+
primary: { bg: "accent", fg: "accentForeground" },
|
|
24
|
+
secondary: { bg: "accentSoft", fg: "accentSoftForeground" },
|
|
25
|
+
default: { bg: "default", fg: "defaultForeground" },
|
|
26
|
+
tertiary: { border: "border", fg: "foreground" },
|
|
27
|
+
ghost: { fg: "foreground" },
|
|
28
|
+
success: { bg: "success", fg: "successForeground" },
|
|
29
|
+
"success-soft": { bg: "successSoft", fg: "successSoftForeground" },
|
|
30
|
+
warning: { bg: "warning", fg: "warningForeground" },
|
|
31
|
+
"warning-soft": { bg: "warningSoft", fg: "warningSoftForeground" },
|
|
32
|
+
danger: { bg: "danger", fg: "dangerForeground" },
|
|
33
|
+
"danger-soft": { bg: "dangerSoft", fg: "dangerSoftForeground" }
|
|
34
|
+
};
|
|
35
|
+
function sizeAxis(step) {
|
|
36
|
+
return (theme) => {
|
|
37
|
+
const height = theme.spacing(step.height);
|
|
38
|
+
return {
|
|
39
|
+
root: {
|
|
40
|
+
height,
|
|
41
|
+
minWidth: height,
|
|
42
|
+
paddingHorizontal: theme.spacing(step.padding)
|
|
43
|
+
},
|
|
44
|
+
label: { fontSize: theme.fontSizes[step.label] }
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function dotAxis(diameter) {
|
|
49
|
+
return (theme) => {
|
|
50
|
+
const size = theme.spacing(diameter);
|
|
51
|
+
return {
|
|
52
|
+
root: { height: size, width: size, minWidth: size, paddingHorizontal: 0 }
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
var BADGE_DEFAULT_SIZE = "md";
|
|
57
|
+
var SIZES = {
|
|
58
|
+
xs: { height: 4, padding: 1.25, label: "xs", dot: 1.5 },
|
|
59
|
+
sm: { height: 4.5, padding: 1.5, label: "xs", dot: 2 },
|
|
60
|
+
md: { height: 5, padding: 1.5, label: "xs", dot: 2.5 },
|
|
61
|
+
lg: { height: 6, padding: 2, label: "sm", dot: 3 }
|
|
62
|
+
};
|
|
63
|
+
function badgeOffset(theme, size, isDot) {
|
|
64
|
+
const step = SIZES[size];
|
|
65
|
+
return theme.spacing(isDot ? step.dot : step.height) / 2;
|
|
66
|
+
}
|
|
67
|
+
var badgeRecipe = createRecipe({
|
|
68
|
+
slots: SLOTS,
|
|
69
|
+
base: (theme) => ({
|
|
70
|
+
root: {
|
|
71
|
+
flexDirection: "row",
|
|
72
|
+
alignItems: "center",
|
|
73
|
+
justifyContent: "center",
|
|
74
|
+
borderWidth: 0,
|
|
75
|
+
// The capsule at every size, which is what makes a two-digit count read as one
|
|
76
|
+
// object. `radius` is still there for the square marker.
|
|
77
|
+
borderRadius: theme.radius.full,
|
|
78
|
+
// Squircle corners for when `radius` overrides the pill. Free on Android.
|
|
79
|
+
borderCurve: "continuous"
|
|
80
|
+
},
|
|
81
|
+
label: {
|
|
82
|
+
fontFamily: theme.fontFamilies.body,
|
|
83
|
+
fontWeight: theme.fontWeights.semibold,
|
|
84
|
+
// Android reserves leading above and below the glyphs, which in a 16pt box is the
|
|
85
|
+
// difference between a centred digit and one sitting low.
|
|
86
|
+
includeFontPadding: false,
|
|
87
|
+
// No `lineHeight`: the scale's leading is taller than the box at every size here,
|
|
88
|
+
// and the root centres the label anyway.
|
|
89
|
+
textAlign: "center"
|
|
90
|
+
}
|
|
91
|
+
}),
|
|
92
|
+
variantTokens: VARIANT_TOKENS,
|
|
93
|
+
/**
|
|
94
|
+
* Where the variant's colours land, for every variant at once. The border width follows
|
|
95
|
+
* the *presence* of the border role, so `ghost` needs no rule of its own.
|
|
96
|
+
*/
|
|
97
|
+
paint: (theme, colors) => ({
|
|
98
|
+
root: {
|
|
99
|
+
backgroundColor: colors.bg,
|
|
100
|
+
borderColor: colors.border,
|
|
101
|
+
borderWidth: colors.border ? theme.borderWidth.default : 0
|
|
102
|
+
},
|
|
103
|
+
label: { color: colors.fg }
|
|
104
|
+
}),
|
|
105
|
+
/** Declaration order is application order: `dot` overrides the box `size` set, and
|
|
106
|
+
* `radius` overrides the capsule from `base`. */
|
|
107
|
+
variants: {
|
|
108
|
+
size: {
|
|
109
|
+
xs: sizeAxis(SIZES.xs),
|
|
110
|
+
sm: sizeAxis(SIZES.sm),
|
|
111
|
+
md: sizeAxis(SIZES.md),
|
|
112
|
+
lg: sizeAxis(SIZES.lg)
|
|
113
|
+
},
|
|
114
|
+
/**
|
|
115
|
+
* The same four keys as `size`, and the root selects it with the resolved size when
|
|
116
|
+
* `isDot` is set and with nothing when it is not — an axis left unselected contributes
|
|
117
|
+
* nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
|
|
118
|
+
* have needed a `false` branch with nothing to say, and a `size × isDot` compound
|
|
119
|
+
* would have been sixteen entries for four measurements.
|
|
120
|
+
*/
|
|
121
|
+
dot: {
|
|
122
|
+
xs: dotAxis(SIZES.xs.dot),
|
|
123
|
+
sm: dotAxis(SIZES.sm.dot),
|
|
124
|
+
md: dotAxis(SIZES.md.dot),
|
|
125
|
+
lg: dotAxis(SIZES.lg.dot)
|
|
126
|
+
},
|
|
127
|
+
radius: radiusAxis("root")
|
|
128
|
+
},
|
|
129
|
+
/**
|
|
130
|
+
* `danger`, where every other component in the library defaults to the first name in its
|
|
131
|
+
* ladder. A badge is overwhelmingly the count of something that wants attention — unread,
|
|
132
|
+
* failed, overdue — and a red one is what `<Badge>3</Badge>` means. The accent count is a
|
|
133
|
+
* `variant` away.
|
|
134
|
+
*/
|
|
135
|
+
defaultVariants: { variant: "danger", size: BADGE_DEFAULT_SIZE }
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
// src/components/badge/badge.utils.ts
|
|
139
|
+
function placementInsets(placement, offset) {
|
|
140
|
+
if (!placement) return void 0;
|
|
141
|
+
const vertical = placement.startsWith("top") ? { top: -offset } : { bottom: -offset };
|
|
142
|
+
const horizontal = placement.endsWith("start") ? { start: -offset } : { end: -offset };
|
|
143
|
+
return { position: "absolute", ...vertical, ...horizontal };
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// src/components/badge/badge.tsx
|
|
147
|
+
import { jsx } from "react/jsx-runtime";
|
|
148
|
+
var Badge = forwardRef(function Badge2({
|
|
149
|
+
children,
|
|
150
|
+
variant,
|
|
151
|
+
size,
|
|
152
|
+
radius,
|
|
153
|
+
color,
|
|
154
|
+
isDot = false,
|
|
155
|
+
placement,
|
|
156
|
+
asChild = false,
|
|
157
|
+
style,
|
|
158
|
+
...props
|
|
159
|
+
}, ref) {
|
|
160
|
+
const theme = useXAUITheme();
|
|
161
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
162
|
+
const resolvedSize = size ?? BADGE_DEFAULT_SIZE;
|
|
163
|
+
const selection = {
|
|
164
|
+
variant,
|
|
165
|
+
size,
|
|
166
|
+
radius,
|
|
167
|
+
// An axis left unselected contributes nothing, which is exactly "this badge has a
|
|
168
|
+
// label" — no `false` branch with nothing to say.
|
|
169
|
+
dot: isDot ? resolvedSize : void 0
|
|
170
|
+
};
|
|
171
|
+
const styles = badgeRecipe.resolve({ theme, selection });
|
|
172
|
+
const tint = color ? badgeRecipe.tint({ theme, color, selection }) : void 0;
|
|
173
|
+
const insets = useMemo(
|
|
174
|
+
() => placementInsets(placement, badgeOffset(theme, resolvedSize, isDot)),
|
|
175
|
+
[placement, theme, resolvedSize, isDot]
|
|
176
|
+
);
|
|
177
|
+
const rootStyle = [styles.root, tint?.root, insets, styleProps, style];
|
|
178
|
+
const text = childrenToString(children);
|
|
179
|
+
const label = text !== null ? /* @__PURE__ */ jsx(Text, { style: [styles.label, tint?.label], numberOfLines: 1, children: text }) : children;
|
|
180
|
+
const content = isDot ? null : label;
|
|
181
|
+
const Root = asChild ? Slot : View;
|
|
182
|
+
return /* @__PURE__ */ jsx(
|
|
183
|
+
Root,
|
|
184
|
+
{
|
|
185
|
+
ref,
|
|
186
|
+
...rest,
|
|
187
|
+
style: rootStyle,
|
|
188
|
+
children: asChild ? children : content
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
});
|
|
192
|
+
Badge.displayName = "XAUI.Badge";
|
|
193
|
+
|
|
194
|
+
export {
|
|
195
|
+
badgeRecipe,
|
|
196
|
+
placementInsets,
|
|
197
|
+
Badge
|
|
198
|
+
};
|
|
@@ -44,9 +44,6 @@ var SLOTS = ["root"];
|
|
|
44
44
|
var VARIANT_TOKENS = {
|
|
45
45
|
default: {
|
|
46
46
|
bg: "default"
|
|
47
|
-
},
|
|
48
|
-
secondary: {
|
|
49
|
-
bg: "defaultSoft"
|
|
50
47
|
}
|
|
51
48
|
};
|
|
52
49
|
var skeletonRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
@@ -74,6 +71,10 @@ var skeletonRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
|
74
71
|
* R14's `width` and `height`, because only they know the shape of the thing that is
|
|
75
72
|
* missing.
|
|
76
73
|
*/
|
|
74
|
+
/**
|
|
75
|
+
* `variant` is named here and nowhere else: there is one, the caller cannot choose it,
|
|
76
|
+
* and the recipe still needs it selected for `paint` and the tint to resolve.
|
|
77
|
+
*/
|
|
77
78
|
defaultVariants: {
|
|
78
79
|
variant: "default",
|
|
79
80
|
radius: "md"
|
|
@@ -85,7 +86,6 @@ var _jsxruntime = require('react/jsx-runtime');
|
|
|
85
86
|
var PULSE_DURATION = 1e3;
|
|
86
87
|
var PULSE_MIN_OPACITY = 0.5;
|
|
87
88
|
var Skeleton = _react.forwardRef.call(void 0, function Skeleton2({
|
|
88
|
-
variant,
|
|
89
89
|
radius,
|
|
90
90
|
color,
|
|
91
91
|
isLoading = true,
|
|
@@ -97,7 +97,6 @@ var Skeleton = _react.forwardRef.call(void 0, function Skeleton2({
|
|
|
97
97
|
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0);
|
|
98
98
|
const [styleProps, rest] = _chunkI6ZB3FZIcjs.useStyleProps.call(void 0, props);
|
|
99
99
|
const selection = {
|
|
100
|
-
variant,
|
|
101
100
|
radius
|
|
102
101
|
};
|
|
103
102
|
const styles = skeletonRecipe.resolve({
|
|
@@ -133,10 +132,10 @@ var Skeleton = _react.forwardRef.call(void 0, function Skeleton2({
|
|
|
133
132
|
});
|
|
134
133
|
});
|
|
135
134
|
Skeleton.displayName = "XAUI.Skeleton";
|
|
136
|
-
const
|
|
137
|
-
code: "function
|
|
138
|
-
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-
|
|
139
|
-
sourceMap: "{\"version\":3,\"names\":[\"
|
|
135
|
+
const _worklet_15371887532149_init_data = {
|
|
136
|
+
code: "function chunkYUG22AXXCjs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
|
|
137
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-YUG22AXX.cjs",
|
|
138
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkYUG22AXXCjs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-YUG22AXX.cjs\"],\"mappings\":\"AAyF+E,SAAAA,iBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE/E,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
|
|
140
139
|
};
|
|
141
140
|
var PulsingBlock = _react.forwardRef.call(void 0, function PulsingBlock2({
|
|
142
141
|
style,
|
|
@@ -152,26 +151,26 @@ var PulsingBlock = _react.forwardRef.call(void 0, function PulsingBlock2({
|
|
|
152
151
|
true);
|
|
153
152
|
return () => _reactnativereanimated.cancelAnimation.call(void 0, opacity);
|
|
154
153
|
}, [opacity]);
|
|
155
|
-
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function
|
|
156
|
-
|
|
154
|
+
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkYUG22AXXCjs1Factory({
|
|
155
|
+
_worklet_15371887532149_init_data,
|
|
157
156
|
opacity
|
|
158
157
|
}) {
|
|
159
158
|
const _e = [new global.Error(), -2, -27];
|
|
160
|
-
const
|
|
159
|
+
const chunkYUG22AXXCjs1 = function () {
|
|
161
160
|
return {
|
|
162
161
|
opacity: opacity.value
|
|
163
162
|
};
|
|
164
163
|
};
|
|
165
|
-
|
|
164
|
+
chunkYUG22AXXCjs1.__closure = {
|
|
166
165
|
opacity
|
|
167
166
|
};
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
return
|
|
167
|
+
chunkYUG22AXXCjs1.__workletHash = 15371887532149;
|
|
168
|
+
chunkYUG22AXXCjs1.__pluginVersion = "0.7.4";
|
|
169
|
+
chunkYUG22AXXCjs1.__initData = _worklet_15371887532149_init_data;
|
|
170
|
+
chunkYUG22AXXCjs1.__stackDetails = _e;
|
|
171
|
+
return chunkYUG22AXXCjs1;
|
|
173
172
|
}({
|
|
174
|
-
|
|
173
|
+
_worklet_15371887532149_init_data,
|
|
175
174
|
opacity
|
|
176
175
|
}), [opacity]);
|
|
177
176
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
var _chunkDUQUCOUYcjs = require('../../chunk-DUQUCOUY.cjs');
|
|
6
|
+
require('../../chunk-54FJOKAN.cjs');
|
|
7
|
+
require('../../chunk-H4E4HDEP.cjs');
|
|
8
|
+
require('../../chunk-FNEUOBCV.cjs');
|
|
9
|
+
require('../../chunk-I6ZB3FZI.cjs');
|
|
10
|
+
require('../../chunk-57SJ4LJF.cjs');
|
|
11
|
+
require('../../chunk-MC7SY2QH.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
exports.Badge = _chunkDUQUCOUYcjs.Badge; exports.badgeRecipe = _chunkDUQUCOUYcjs.badgeRecipe; exports.placementInsets = _chunkDUQUCOUYcjs.placementInsets;
|