@castui/cast-ui 4.2.0 → 4.2.1
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/components/Alert/Alert.d.ts +0 -1
- package/dist/components/Alert/Alert.js +22 -20
- package/dist/components/Alert/index.d.ts +0 -1
- package/dist/components/Alert/index.js +5 -2
- package/dist/components/Avatar/Avatar.d.ts +0 -1
- package/dist/components/Avatar/Avatar.js +15 -13
- package/dist/components/Avatar/index.d.ts +0 -1
- package/dist/components/Avatar/index.js +5 -2
- package/dist/components/Badge/Badge.d.ts +0 -1
- package/dist/components/Badge/Badge.js +20 -18
- package/dist/components/Badge/index.d.ts +0 -1
- package/dist/components/Badge/index.js +5 -2
- package/dist/components/Button/Button.d.ts +0 -1
- package/dist/components/Button/Button.js +21 -19
- package/dist/components/Button/index.d.ts +0 -1
- package/dist/components/Button/index.js +5 -2
- package/dist/components/Card/Card.d.ts +0 -1
- package/dist/components/Card/Card.js +27 -25
- package/dist/components/Card/index.d.ts +0 -1
- package/dist/components/Card/index.js +5 -2
- package/dist/components/Checkbox/Checkbox.d.ts +0 -1
- package/dist/components/Checkbox/Checkbox.js +23 -21
- package/dist/components/Checkbox/index.d.ts +0 -1
- package/dist/components/Checkbox/index.js +5 -2
- package/dist/components/Chip/Chip.d.ts +0 -1
- package/dist/components/Chip/Chip.js +22 -20
- package/dist/components/Chip/index.d.ts +0 -1
- package/dist/components/Chip/index.js +5 -2
- package/dist/components/Dialog/Dialog.d.ts +0 -1
- package/dist/components/Dialog/Dialog.js +30 -27
- package/dist/components/Dialog/index.d.ts +0 -1
- package/dist/components/Dialog/index.js +6 -2
- package/dist/components/Divider/Divider.d.ts +0 -1
- package/dist/components/Divider/Divider.js +12 -10
- package/dist/components/Divider/index.d.ts +0 -1
- package/dist/components/Divider/index.js +5 -2
- package/dist/components/Icon/Icon.d.ts +0 -1
- package/dist/components/Icon/Icon.js +9 -7
- package/dist/components/Icon/index.d.ts +0 -1
- package/dist/components/Icon/index.js +5 -2
- package/dist/components/Input/Input.d.ts +0 -1
- package/dist/components/Input/Input.js +37 -35
- package/dist/components/Input/index.d.ts +0 -1
- package/dist/components/Input/index.js +5 -2
- package/dist/components/List/List.d.ts +0 -1
- package/dist/components/List/List.js +46 -41
- package/dist/components/List/index.d.ts +0 -1
- package/dist/components/List/index.js +8 -2
- package/dist/components/Popover/Popover.d.ts +0 -1
- package/dist/components/Popover/Popover.js +11 -9
- package/dist/components/Popover/index.d.ts +0 -1
- package/dist/components/Popover/index.js +5 -2
- package/dist/components/Radio/Radio.d.ts +0 -1
- package/dist/components/Radio/Radio.js +29 -26
- package/dist/components/Radio/index.d.ts +0 -1
- package/dist/components/Radio/index.js +6 -2
- package/dist/components/Select/Select.d.ts +0 -1
- package/dist/components/Select/Select.js +102 -95
- package/dist/components/Select/index.d.ts +0 -1
- package/dist/components/Select/index.js +10 -2
- package/dist/components/Skeleton/Skeleton.d.ts +0 -1
- package/dist/components/Skeleton/Skeleton.js +15 -13
- package/dist/components/Skeleton/index.d.ts +0 -1
- package/dist/components/Skeleton/index.js +5 -2
- package/dist/components/Toast/Toast.d.ts +0 -1
- package/dist/components/Toast/Toast.js +23 -21
- package/dist/components/Toast/index.d.ts +0 -1
- package/dist/components/Toast/index.js +5 -2
- package/dist/components/Toggle/Toggle.d.ts +0 -1
- package/dist/components/Toggle/Toggle.js +20 -18
- package/dist/components/Toggle/index.d.ts +0 -1
- package/dist/components/Toggle/index.js +5 -2
- package/dist/components/Tooltip/Tooltip.d.ts +0 -1
- package/dist/components/Tooltip/Tooltip.js +14 -12
- package/dist/components/Tooltip/index.d.ts +0 -1
- package/dist/components/Tooltip/index.js +5 -2
- package/dist/index.d.ts +0 -1
- package/dist/index.js +81 -22
- package/dist/theme/ThemeContext.d.ts +0 -1
- package/dist/theme/ThemeContext.js +20 -17
- package/dist/theme/index.d.ts +0 -1
- package/dist/theme/index.js +8 -3
- package/dist/theme/themes.d.ts +0 -1
- package/dist/theme/themes.js +4 -2
- package/dist/theme/types.d.ts +0 -1
- package/dist/theme/types.js +2 -2
- package/dist/tokens/colors.d.ts +0 -1
- package/dist/tokens/colors.js +25 -23
- package/dist/tokens/index.d.ts +0 -1
- package/dist/tokens/index.js +29 -3
- package/dist/tokens/typography.d.ts +0 -1
- package/dist/tokens/typography.js +13 -11
- package/package.json +13 -2
- package/dist/components/Alert/Alert.d.ts.map +0 -1
- package/dist/components/Alert/Alert.js.map +0 -1
- package/dist/components/Alert/index.d.ts.map +0 -1
- package/dist/components/Alert/index.js.map +0 -1
- package/dist/components/Avatar/Avatar.d.ts.map +0 -1
- package/dist/components/Avatar/Avatar.js.map +0 -1
- package/dist/components/Avatar/index.d.ts.map +0 -1
- package/dist/components/Avatar/index.js.map +0 -1
- package/dist/components/Badge/Badge.d.ts.map +0 -1
- package/dist/components/Badge/Badge.js.map +0 -1
- package/dist/components/Badge/index.d.ts.map +0 -1
- package/dist/components/Badge/index.js.map +0 -1
- package/dist/components/Button/Button.d.ts.map +0 -1
- package/dist/components/Button/Button.js.map +0 -1
- package/dist/components/Button/index.d.ts.map +0 -1
- package/dist/components/Button/index.js.map +0 -1
- package/dist/components/Card/Card.d.ts.map +0 -1
- package/dist/components/Card/Card.js.map +0 -1
- package/dist/components/Card/index.d.ts.map +0 -1
- package/dist/components/Card/index.js.map +0 -1
- package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
- package/dist/components/Checkbox/Checkbox.js.map +0 -1
- package/dist/components/Checkbox/index.d.ts.map +0 -1
- package/dist/components/Checkbox/index.js.map +0 -1
- package/dist/components/Chip/Chip.d.ts.map +0 -1
- package/dist/components/Chip/Chip.js.map +0 -1
- package/dist/components/Chip/index.d.ts.map +0 -1
- package/dist/components/Chip/index.js.map +0 -1
- package/dist/components/Dialog/Dialog.d.ts.map +0 -1
- package/dist/components/Dialog/Dialog.js.map +0 -1
- package/dist/components/Dialog/index.d.ts.map +0 -1
- package/dist/components/Dialog/index.js.map +0 -1
- package/dist/components/Divider/Divider.d.ts.map +0 -1
- package/dist/components/Divider/Divider.js.map +0 -1
- package/dist/components/Divider/index.d.ts.map +0 -1
- package/dist/components/Divider/index.js.map +0 -1
- package/dist/components/Icon/Icon.d.ts.map +0 -1
- package/dist/components/Icon/Icon.js.map +0 -1
- package/dist/components/Icon/index.d.ts.map +0 -1
- package/dist/components/Icon/index.js.map +0 -1
- package/dist/components/Input/Input.d.ts.map +0 -1
- package/dist/components/Input/Input.js.map +0 -1
- package/dist/components/Input/index.d.ts.map +0 -1
- package/dist/components/Input/index.js.map +0 -1
- package/dist/components/List/List.d.ts.map +0 -1
- package/dist/components/List/List.js.map +0 -1
- package/dist/components/List/index.d.ts.map +0 -1
- package/dist/components/List/index.js.map +0 -1
- package/dist/components/Popover/Popover.d.ts.map +0 -1
- package/dist/components/Popover/Popover.js.map +0 -1
- package/dist/components/Popover/index.d.ts.map +0 -1
- package/dist/components/Popover/index.js.map +0 -1
- package/dist/components/Radio/Radio.d.ts.map +0 -1
- package/dist/components/Radio/Radio.js.map +0 -1
- package/dist/components/Radio/index.d.ts.map +0 -1
- package/dist/components/Radio/index.js.map +0 -1
- package/dist/components/Select/Select.d.ts.map +0 -1
- package/dist/components/Select/Select.js.map +0 -1
- package/dist/components/Select/index.d.ts.map +0 -1
- package/dist/components/Select/index.js.map +0 -1
- package/dist/components/Skeleton/Skeleton.d.ts.map +0 -1
- package/dist/components/Skeleton/Skeleton.js.map +0 -1
- package/dist/components/Skeleton/index.d.ts.map +0 -1
- package/dist/components/Skeleton/index.js.map +0 -1
- package/dist/components/Toast/Toast.d.ts.map +0 -1
- package/dist/components/Toast/Toast.js.map +0 -1
- package/dist/components/Toast/index.d.ts.map +0 -1
- package/dist/components/Toast/index.js.map +0 -1
- package/dist/components/Toggle/Toggle.d.ts.map +0 -1
- package/dist/components/Toggle/Toggle.js.map +0 -1
- package/dist/components/Toggle/index.d.ts.map +0 -1
- package/dist/components/Toggle/index.js.map +0 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +0 -1
- package/dist/components/Tooltip/Tooltip.js.map +0 -1
- package/dist/components/Tooltip/index.d.ts.map +0 -1
- package/dist/components/Tooltip/index.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/theme/ThemeContext.d.ts.map +0 -1
- package/dist/theme/ThemeContext.js.map +0 -1
- package/dist/theme/index.d.ts.map +0 -1
- package/dist/theme/index.js.map +0 -1
- package/dist/theme/themes.d.ts.map +0 -1
- package/dist/theme/themes.js.map +0 -1
- package/dist/theme/types.d.ts.map +0 -1
- package/dist/theme/types.js.map +0 -1
- package/dist/tokens/colors.d.ts.map +0 -1
- package/dist/tokens/colors.js.map +0 -1
- package/dist/tokens/index.d.ts.map +0 -1
- package/dist/tokens/index.js.map +0 -1
- package/dist/tokens/typography.d.ts.map +0 -1
- package/dist/tokens/typography.js.map +0 -1
|
@@ -38,4 +38,3 @@ export type AlertProps = {
|
|
|
38
38
|
accessibilityLabel?: string;
|
|
39
39
|
};
|
|
40
40
|
export declare function Alert({ intent, size, variant, title: titleText, description, icon, onClose, style, accessibilityLabel, }: AlertProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
-
//# sourceMappingURL=Alert.d.ts.map
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Alert = Alert;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const theme_1 = require("../../theme");
|
|
7
|
+
const Icon_1 = require("../Icon");
|
|
8
|
+
const tokens_1 = require("../../tokens");
|
|
6
9
|
/** Maps alert size → title typography scale */
|
|
7
10
|
const TITLE_SCALE = {
|
|
8
11
|
small: 'sm',
|
|
@@ -21,13 +24,13 @@ const DEFAULT_ICON = {
|
|
|
21
24
|
brand: 'info',
|
|
22
25
|
danger: 'error',
|
|
23
26
|
};
|
|
24
|
-
|
|
25
|
-
const { components, scheme } = useTheme();
|
|
27
|
+
function Alert({ intent = 'neutral', size = 'default', variant = 'subtle', title: titleText, description, icon, onClose, style, accessibilityLabel, }) {
|
|
28
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
26
29
|
const intentColors = scheme.intents;
|
|
27
30
|
const tokens = components.alert;
|
|
28
31
|
const sizeTokens = tokens[size];
|
|
29
|
-
const titleTokens = title[TITLE_SCALE[size]];
|
|
30
|
-
const bodyTokens = body[BODY_SCALE[size]];
|
|
32
|
+
const titleTokens = tokens_1.title[TITLE_SCALE[size]];
|
|
33
|
+
const bodyTokens = tokens_1.body[BODY_SCALE[size]];
|
|
31
34
|
// Colours derive from the intent system. Outline uses the white fill +
|
|
32
35
|
// intent border; subtle is transparent. Foreground is the intent fg.
|
|
33
36
|
const intentClr = intentColors[intent].default.default;
|
|
@@ -37,33 +40,32 @@ export function Alert({ intent = 'neutral', size = 'default', variant = 'subtle'
|
|
|
37
40
|
// Resolve leading icon — undefined uses the intent default, null hides it.
|
|
38
41
|
const iconNode = icon === null
|
|
39
42
|
? null
|
|
40
|
-
: icon === undefined ? (
|
|
41
|
-
return (
|
|
43
|
+
: icon === undefined ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: DEFAULT_ICON[intent], size: sizeTokens.iconSize, color: fg })) : typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: sizeTokens.iconSize, color: fg })) : (icon);
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || titleText, style: [
|
|
42
45
|
{
|
|
43
46
|
flexDirection: 'row',
|
|
44
47
|
alignItems: 'flex-start',
|
|
45
48
|
gap: sizeTokens.gap,
|
|
46
49
|
padding: sizeTokens.padding,
|
|
47
50
|
borderRadius: tokens.borderRadius,
|
|
48
|
-
borderWidth: controlTokens.borderWidth,
|
|
51
|
+
borderWidth: tokens_1.controlTokens.borderWidth,
|
|
49
52
|
borderColor,
|
|
50
53
|
backgroundColor: bg,
|
|
51
54
|
},
|
|
52
55
|
style,
|
|
53
|
-
], children: [iconNode ? (
|
|
54
|
-
fontFamily: fontFamily.sans,
|
|
55
|
-
fontWeight: fontWeight.medium,
|
|
56
|
+
], children: [iconNode ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: iconNode })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [titleText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
57
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
58
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
56
59
|
fontSize: titleTokens.fontSize,
|
|
57
60
|
lineHeight: titleTokens.lineHeight,
|
|
58
61
|
letterSpacing: titleTokens.letterSpacing,
|
|
59
62
|
color: fg,
|
|
60
|
-
}, selectable: false, children: titleText })) : null, description ? (
|
|
61
|
-
fontFamily: fontFamily.sans,
|
|
62
|
-
fontWeight: fontWeight.regular,
|
|
63
|
+
}, selectable: false, children: titleText })) : null, description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
64
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
65
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
63
66
|
fontSize: bodyTokens.fontSize,
|
|
64
67
|
lineHeight: bodyTokens.lineHeight,
|
|
65
68
|
letterSpacing: bodyTokens.letterSpacing,
|
|
66
69
|
color: fg,
|
|
67
|
-
}, selectable: false, children: description })) : null] }), onClose ? (
|
|
70
|
+
}, selectable: false, children: description })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
|
|
68
71
|
}
|
|
69
|
-
//# sourceMappingURL=Alert.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Alert = void 0;
|
|
4
|
+
var Alert_1 = require("./Alert");
|
|
5
|
+
Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Avatar = Avatar;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const theme_1 = require("../../theme");
|
|
7
|
+
const tokens_1 = require("../../tokens");
|
|
8
|
+
const Icon_1 = require("../Icon");
|
|
6
9
|
// ---------------------------------------------------------------------------
|
|
7
10
|
// Constants
|
|
8
11
|
// ---------------------------------------------------------------------------
|
|
@@ -24,12 +27,12 @@ function resolveType(props) {
|
|
|
24
27
|
return 'initials';
|
|
25
28
|
return 'icon';
|
|
26
29
|
}
|
|
27
|
-
|
|
28
|
-
const { components, scheme } = useTheme();
|
|
30
|
+
function Avatar({ size = 'default', source, initials, icon, style, accessibilityLabel, }) {
|
|
31
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
29
32
|
const avatarColors = scheme.avatar;
|
|
30
33
|
const tokens = components.avatar;
|
|
31
34
|
const sizeTokens = tokens[size];
|
|
32
|
-
const labelTokens = label[LABEL_SCALE[size]];
|
|
35
|
+
const labelTokens = tokens_1.label[LABEL_SCALE[size]];
|
|
33
36
|
const type = resolveType({ source, initials, icon });
|
|
34
37
|
const frameStyle = {
|
|
35
38
|
width: sizeTokens.size,
|
|
@@ -40,14 +43,13 @@ export function Avatar({ size = 'default', source, initials, icon, style, access
|
|
|
40
43
|
overflow: 'hidden',
|
|
41
44
|
backgroundColor: type === 'image' ? undefined : avatarColors.bg,
|
|
42
45
|
};
|
|
43
|
-
return (
|
|
44
|
-
fontFamily: fontFamily.sans,
|
|
45
|
-
fontWeight: fontWeight.medium,
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel || initials || 'Avatar', style: [frameStyle, style], children: type === 'image' ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: source, resizeMode: "cover", style: { width: '100%', height: '100%' } })) : type === 'initials' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
|
|
47
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
48
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
46
49
|
fontSize: labelTokens.fontSize,
|
|
47
50
|
lineHeight: labelTokens.lineHeight,
|
|
48
51
|
letterSpacing: labelTokens.letterSpacing,
|
|
49
52
|
color: avatarColors.fg,
|
|
50
53
|
textAlign: 'center',
|
|
51
|
-
}, children: initials })) : (
|
|
54
|
+
}, children: initials })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", children: typeof icon === 'string' || icon == null ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: typeof icon === 'string' ? icon : FALLBACK_ICON, size: sizeTokens.iconSize, color: avatarColors.fg })) : (icon) })) }));
|
|
52
55
|
}
|
|
53
|
-
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Avatar = void 0;
|
|
4
|
+
var Avatar_1 = require("./Avatar");
|
|
5
|
+
Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
|
|
@@ -39,4 +39,3 @@ export type BadgeProps = {
|
|
|
39
39
|
accessibilityLabel?: string;
|
|
40
40
|
};
|
|
41
41
|
export declare function Badge({ children, intent, variant, size, dot, leadingIcon, trailingIcon, style, accessibilityLabel, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
-
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Badge = Badge;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const theme_1 = require("../../theme");
|
|
7
|
+
const tokens_1 = require("../../tokens");
|
|
8
|
+
const Icon_1 = require("../Icon");
|
|
6
9
|
// ---------------------------------------------------------------------------
|
|
7
10
|
// Constants
|
|
8
11
|
// ---------------------------------------------------------------------------
|
|
@@ -30,14 +33,14 @@ function resolveColors(intent, variant, intentColors) {
|
|
|
30
33
|
return clrs.bold.default;
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
|
-
|
|
34
|
-
const { components, scheme } = useTheme();
|
|
36
|
+
function Badge({ children, intent = 'neutral', variant = 'solid', size = 'default', dot = false, leadingIcon, trailingIcon, style, accessibilityLabel, }) {
|
|
37
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
35
38
|
const sizeTokens = components.badge[size];
|
|
36
|
-
const labelTokens = label[LABEL_SCALE[size]];
|
|
39
|
+
const labelTokens = tokens_1.label[LABEL_SCALE[size]];
|
|
37
40
|
const colors = resolveColors(intent, variant, scheme.intents);
|
|
38
|
-
const resolvedLeading = typeof leadingIcon === 'string' ? (
|
|
39
|
-
const resolvedTrailing = typeof trailingIcon === 'string' ? (
|
|
40
|
-
return (
|
|
41
|
+
const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: colors.fg })) : (leadingIcon);
|
|
42
|
+
const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: colors.fg })) : (trailingIcon);
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "text", accessibilityLabel: accessibilityLabel || children, style: [
|
|
41
44
|
{
|
|
42
45
|
flexDirection: 'row',
|
|
43
46
|
alignItems: 'center',
|
|
@@ -47,23 +50,22 @@ export function Badge({ children, intent = 'neutral', variant = 'solid', size =
|
|
|
47
50
|
paddingHorizontal: sizeTokens.paddingX,
|
|
48
51
|
paddingVertical: sizeTokens.paddingY,
|
|
49
52
|
borderRadius: components.badge.borderRadius,
|
|
50
|
-
borderWidth: controlTokens.borderWidth,
|
|
53
|
+
borderWidth: tokens_1.controlTokens.borderWidth,
|
|
51
54
|
borderColor: colors.border,
|
|
52
55
|
backgroundColor: colors.bg,
|
|
53
56
|
},
|
|
54
57
|
style,
|
|
55
|
-
], children: [dot ? (
|
|
58
|
+
], children: [dot ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
|
|
56
59
|
width: sizeTokens.dotSize,
|
|
57
60
|
height: sizeTokens.dotSize,
|
|
58
61
|
borderRadius: sizeTokens.dotSize / 2,
|
|
59
62
|
backgroundColor: colors.fg,
|
|
60
|
-
} })) : null, resolvedLeading ? (
|
|
61
|
-
fontFamily: fontFamily.sans,
|
|
62
|
-
fontWeight: fontWeight.medium,
|
|
63
|
+
} })) : null, resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
64
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
65
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
63
66
|
fontSize: labelTokens.fontSize,
|
|
64
67
|
lineHeight: labelTokens.lineHeight,
|
|
65
68
|
letterSpacing: labelTokens.letterSpacing,
|
|
66
69
|
color: colors.fg,
|
|
67
|
-
}, selectable: false, children: children }), resolvedTrailing ? (
|
|
70
|
+
}, selectable: false, children: children }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }));
|
|
68
71
|
}
|
|
69
|
-
//# sourceMappingURL=Badge.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Badge = void 0;
|
|
4
|
+
var Badge_1 = require("./Badge");
|
|
5
|
+
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
|
|
@@ -37,4 +37,3 @@ export type ButtonProps = {
|
|
|
37
37
|
accessibilityLabel?: string;
|
|
38
38
|
};
|
|
39
39
|
export declare function Button({ children, intent, prominence, size, disabled, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
-
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Button = Button;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
2
5
|
/**
|
|
3
6
|
* Button — the foundational interactive component of Cast UI.
|
|
4
7
|
*
|
|
@@ -11,11 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
14
|
* Colours come from the semantic intent system (constant across densities).
|
|
12
15
|
* Typography uses the label scale (sm/md/lg) matched to the button size.
|
|
13
16
|
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
const react_1 = require("react");
|
|
18
|
+
const react_native_1 = require("react-native");
|
|
19
|
+
const theme_1 = require("../../theme");
|
|
20
|
+
const tokens_1 = require("../../tokens");
|
|
21
|
+
const Icon_1 = require("../Icon");
|
|
19
22
|
// ---------------------------------------------------------------------------
|
|
20
23
|
// Constants
|
|
21
24
|
// ---------------------------------------------------------------------------
|
|
@@ -30,15 +33,15 @@ const ICON_SIZE = 16;
|
|
|
30
33
|
// ---------------------------------------------------------------------------
|
|
31
34
|
// Component
|
|
32
35
|
// ---------------------------------------------------------------------------
|
|
33
|
-
|
|
34
|
-
const { components, colors } = useTheme();
|
|
35
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
36
|
+
function Button({ children, intent = 'neutral', prominence = 'default', size = 'default', disabled = false, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }) {
|
|
37
|
+
const { components, colors } = (0, theme_1.useTheme)();
|
|
38
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
36
39
|
// Resolve tokens for current size + density
|
|
37
40
|
const sizeTokens = components.button[size];
|
|
38
|
-
const labelTokens = label[LABEL_SCALE[size]];
|
|
41
|
+
const labelTokens = tokens_1.label[LABEL_SCALE[size]];
|
|
39
42
|
const intentClrs = colors[intent];
|
|
40
43
|
// Resolve colours based on interaction state
|
|
41
|
-
const getStateColors = useCallback((pressed, hovered) => {
|
|
44
|
+
const getStateColors = (0, react_1.useCallback)((pressed, hovered) => {
|
|
42
45
|
if (disabled) {
|
|
43
46
|
return {
|
|
44
47
|
bg: '#F3F4F6',
|
|
@@ -52,7 +55,7 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
|
|
|
52
55
|
return intentClrs[prominence].hover;
|
|
53
56
|
return intentClrs[prominence].default;
|
|
54
57
|
}, [disabled, intentClrs, prominence]);
|
|
55
|
-
return (
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled }, style: style, children: ({ pressed }) => {
|
|
56
59
|
const stateColors = getStateColors(pressed, isHovered);
|
|
57
60
|
const containerStyle = {
|
|
58
61
|
flexDirection: 'row',
|
|
@@ -63,16 +66,16 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
|
|
|
63
66
|
paddingHorizontal: sizeTokens.paddingX,
|
|
64
67
|
paddingVertical: sizeTokens.paddingY,
|
|
65
68
|
borderRadius: sizeTokens.borderRadius,
|
|
66
|
-
borderWidth: controlTokens.borderWidth,
|
|
69
|
+
borderWidth: tokens_1.controlTokens.borderWidth,
|
|
67
70
|
borderColor: stateColors.border,
|
|
68
71
|
backgroundColor: stateColors.bg,
|
|
69
72
|
};
|
|
70
73
|
// Resolve icon props — strings become <Icon> with auto-matched colour
|
|
71
|
-
const resolvedLeading = typeof leadingIcon === 'string' ? (
|
|
72
|
-
const resolvedTrailing = typeof trailingIcon === 'string' ? (
|
|
73
|
-
return (
|
|
74
|
-
fontFamily: fontFamily.sans,
|
|
75
|
-
fontWeight: fontWeight.medium,
|
|
74
|
+
const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: stateColors.fg })) : (leadingIcon);
|
|
75
|
+
const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: stateColors.fg })) : (trailingIcon);
|
|
76
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: containerStyle, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
77
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
78
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
76
79
|
fontSize: labelTokens.fontSize,
|
|
77
80
|
lineHeight: labelTokens.lineHeight,
|
|
78
81
|
letterSpacing: labelTokens.letterSpacing,
|
|
@@ -80,4 +83,3 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
|
|
|
80
83
|
}, selectable: false, children: children }), resolvedTrailing] }));
|
|
81
84
|
} }));
|
|
82
85
|
}
|
|
83
|
-
//# sourceMappingURL=Button.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Button = void 0;
|
|
4
|
+
var Button_1 = require("./Button");
|
|
5
|
+
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
@@ -39,4 +39,3 @@ export type CardProps = {
|
|
|
39
39
|
accessibilityLabel?: string;
|
|
40
40
|
};
|
|
41
41
|
export declare function Card({ size, variant, image, icon, title: titleText, subtitle, body: bodyText, actions, children, style, accessibilityLabel, }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
-
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Card = Card;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const theme_1 = require("../../theme");
|
|
7
|
+
const Icon_1 = require("../Icon");
|
|
8
|
+
const tokens_1 = require("../../tokens");
|
|
6
9
|
/** Maps card size → title typography scale */
|
|
7
10
|
const TITLE_SCALE = {
|
|
8
11
|
small: 'sm',
|
|
@@ -26,18 +29,18 @@ const SHADOW_NATIVE = {
|
|
|
26
29
|
shadowRadius: 15,
|
|
27
30
|
elevation: 8,
|
|
28
31
|
};
|
|
29
|
-
|
|
30
|
-
const { components, scheme } = useTheme();
|
|
32
|
+
function Card({ size = 'default', variant = 'outline', image, icon, title: titleText, subtitle, body: bodyText, actions, children, style, accessibilityLabel, }) {
|
|
33
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
31
34
|
const surfaceTokens = scheme.surface;
|
|
32
35
|
const textTokens = scheme.text;
|
|
33
36
|
const TITLE_FG = scheme.intents.neutral.default.default.fg;
|
|
34
37
|
const tokens = components.card;
|
|
35
38
|
const sizeTokens = tokens[size];
|
|
36
|
-
const titleTokens = title[TITLE_SCALE[size]];
|
|
37
|
-
const bodyTokens = body[BODY_SCALE[size]];
|
|
38
|
-
const resolvedIcon = typeof icon === 'string' ? (
|
|
39
|
+
const titleTokens = tokens_1.title[TITLE_SCALE[size]];
|
|
40
|
+
const bodyTokens = tokens_1.body[BODY_SCALE[size]];
|
|
41
|
+
const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: sizeTokens.iconSize, color: TITLE_FG })) : (icon);
|
|
39
42
|
const hasHeader = !!(resolvedIcon || titleText || subtitle);
|
|
40
|
-
return (
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel, style: [
|
|
41
44
|
{
|
|
42
45
|
backgroundColor: surfaceTokens.overlay.bg,
|
|
43
46
|
borderRadius: tokens.borderRadius,
|
|
@@ -45,45 +48,44 @@ export function Card({ size = 'default', variant = 'outline', image, icon, title
|
|
|
45
48
|
borderColor: surfaceTokens.overlay.border,
|
|
46
49
|
overflow: 'hidden',
|
|
47
50
|
...(variant === 'elevated'
|
|
48
|
-
? Platform.OS === 'web'
|
|
51
|
+
? react_native_1.Platform.OS === 'web'
|
|
49
52
|
? SHADOW_WEB
|
|
50
53
|
: SHADOW_NATIVE
|
|
51
54
|
: {}),
|
|
52
55
|
},
|
|
53
56
|
style,
|
|
54
|
-
], children: [image ? (
|
|
57
|
+
], children: [image ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: sizeTokens.imageHeight, width: '100%' }, children: image })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { padding: sizeTokens.padding, gap: sizeTokens.gap }, children: [hasHeader ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
|
|
55
58
|
flexDirection: 'row',
|
|
56
59
|
alignItems: 'flex-start',
|
|
57
60
|
gap: sizeTokens.gap,
|
|
58
|
-
}, children: [resolvedIcon ? (
|
|
61
|
+
}, children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
|
|
59
62
|
width: sizeTokens.iconSize,
|
|
60
63
|
height: sizeTokens.iconSize,
|
|
61
|
-
}, children: resolvedIcon })) : null, titleText || subtitle ? (
|
|
62
|
-
fontFamily: fontFamily.sans,
|
|
63
|
-
fontWeight: fontWeight.medium,
|
|
64
|
+
}, children: resolvedIcon })) : null, titleText || subtitle ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [titleText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
65
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
66
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
64
67
|
fontSize: titleTokens.fontSize,
|
|
65
68
|
lineHeight: titleTokens.lineHeight,
|
|
66
69
|
letterSpacing: titleTokens.letterSpacing,
|
|
67
70
|
color: TITLE_FG,
|
|
68
|
-
}, selectable: false, children: titleText })) : null, subtitle ? (
|
|
69
|
-
fontFamily: fontFamily.sans,
|
|
70
|
-
fontWeight: fontWeight.regular,
|
|
71
|
+
}, selectable: false, children: titleText })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
72
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
73
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
71
74
|
fontSize: bodyTokens.fontSize,
|
|
72
75
|
lineHeight: bodyTokens.lineHeight,
|
|
73
76
|
letterSpacing: bodyTokens.letterSpacing,
|
|
74
77
|
color: textTokens.description,
|
|
75
|
-
}, selectable: false, children: subtitle })) : null] })) : null] })) : null, bodyText ? (
|
|
76
|
-
fontFamily: fontFamily.sans,
|
|
77
|
-
fontWeight: fontWeight.regular,
|
|
78
|
+
}, selectable: false, children: subtitle })) : null] })) : null] })) : null, bodyText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
79
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
80
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
78
81
|
fontSize: bodyTokens.fontSize,
|
|
79
82
|
lineHeight: bodyTokens.lineHeight,
|
|
80
83
|
letterSpacing: bodyTokens.letterSpacing,
|
|
81
84
|
color: textTokens.description,
|
|
82
|
-
}, selectable: false, children: bodyText })) : null, children, actions ? (
|
|
85
|
+
}, selectable: false, children: bodyText })) : null, children, actions ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
83
86
|
flexDirection: 'row',
|
|
84
87
|
justifyContent: 'flex-end',
|
|
85
88
|
alignItems: 'center',
|
|
86
89
|
gap: sizeTokens.gap,
|
|
87
90
|
}, children: actions })) : null] })] }));
|
|
88
91
|
}
|
|
89
|
-
//# sourceMappingURL=Card.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Card = void 0;
|
|
4
|
+
var Card_1 = require("./Card");
|
|
5
|
+
Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
|
|
@@ -30,4 +30,3 @@ export type CheckboxProps = {
|
|
|
30
30
|
accessibilityLabel?: string;
|
|
31
31
|
};
|
|
32
32
|
export declare function Checkbox({ checked, onChange, children, size, disabled, style, accessibilityLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Checkbox = Checkbox;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
2
5
|
/**
|
|
3
6
|
* Checkbox — binary (or tri-state) choice control.
|
|
4
7
|
*
|
|
@@ -11,29 +14,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
14
|
* (sizes track the `size` prop; gap tracks density). Colours come from the
|
|
12
15
|
* active theme scheme's `checkbox` set + the focus-ring colour.
|
|
13
16
|
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
const react_1 = require("react");
|
|
18
|
+
const react_native_1 = require("react-native");
|
|
19
|
+
const theme_1 = require("../../theme");
|
|
20
|
+
const Icon_1 = require("../Icon");
|
|
21
|
+
const tokens_1 = require("../../tokens");
|
|
19
22
|
/** Maps checkbox size → label typography scale */
|
|
20
23
|
const LABEL_SCALE = {
|
|
21
24
|
small: 'sm',
|
|
22
25
|
default: 'md',
|
|
23
26
|
large: 'lg',
|
|
24
27
|
};
|
|
25
|
-
|
|
26
|
-
const { components, scheme } = useTheme();
|
|
28
|
+
function Checkbox({ checked = false, onChange, children, size = 'default', disabled = false, style, accessibilityLabel, }) {
|
|
29
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
27
30
|
const checkboxColors = scheme.checkbox;
|
|
28
31
|
const tokens = components.checkbox;
|
|
29
32
|
const sizeTokens = tokens[size];
|
|
30
|
-
const labelTokens = label[LABEL_SCALE[size]];
|
|
31
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
32
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
33
|
+
const labelTokens = tokens_1.label[LABEL_SCALE[size]];
|
|
34
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
35
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
33
36
|
const isIndeterminate = checked === 'indeterminate';
|
|
34
37
|
const isChecked = checked === true;
|
|
35
38
|
const isOn = isChecked || isIndeterminate;
|
|
36
|
-
const handlePress = useCallback(() => {
|
|
39
|
+
const handlePress = (0, react_1.useCallback)(() => {
|
|
37
40
|
if (!disabled)
|
|
38
41
|
onChange?.(!isChecked);
|
|
39
42
|
}, [disabled, onChange, isChecked]);
|
|
@@ -45,7 +48,7 @@ export function Checkbox({ checked = false, onChange, children, size = 'default'
|
|
|
45
48
|
if (disabled) {
|
|
46
49
|
boxBg = checkboxColors.box.disabled.bg;
|
|
47
50
|
boxBorderColor = checkboxColors.box.disabled.border;
|
|
48
|
-
boxBorderWidth = controlTokens.borderWidth;
|
|
51
|
+
boxBorderWidth = tokens_1.controlTokens.borderWidth;
|
|
49
52
|
}
|
|
50
53
|
else if (isOn) {
|
|
51
54
|
boxBg = checkboxColors.box.checked.bg;
|
|
@@ -62,17 +65,17 @@ export function Checkbox({ checked = false, onChange, children, size = 'default'
|
|
|
62
65
|
}
|
|
63
66
|
else if (isHovered) {
|
|
64
67
|
boxBorderColor = checkboxColors.box.uncheckedHover.border;
|
|
65
|
-
boxBorderWidth = controlTokens.borderWidth;
|
|
68
|
+
boxBorderWidth = tokens_1.controlTokens.borderWidth;
|
|
66
69
|
}
|
|
67
70
|
else {
|
|
68
71
|
boxBorderColor = checkboxColors.box.uncheckedDefault.border;
|
|
69
|
-
boxBorderWidth = controlTokens.borderWidth;
|
|
72
|
+
boxBorderWidth = tokens_1.controlTokens.borderWidth;
|
|
70
73
|
}
|
|
71
74
|
}
|
|
72
75
|
const glyphColor = disabled
|
|
73
76
|
? checkboxColors.icon.disabled
|
|
74
77
|
: checkboxColors.icon.default;
|
|
75
|
-
return (
|
|
78
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: handlePress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityRole: "checkbox", accessibilityLabel: accessibilityLabel || children, accessibilityState: {
|
|
76
79
|
checked: isIndeterminate ? 'mixed' : isChecked,
|
|
77
80
|
disabled,
|
|
78
81
|
}, style: [
|
|
@@ -82,7 +85,7 @@ export function Checkbox({ checked = false, onChange, children, size = 'default'
|
|
|
82
85
|
gap: tokens.gap,
|
|
83
86
|
},
|
|
84
87
|
style,
|
|
85
|
-
], children: [
|
|
88
|
+
], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
86
89
|
width: sizeTokens.indicatorSize,
|
|
87
90
|
height: sizeTokens.indicatorSize,
|
|
88
91
|
borderRadius: tokens.borderRadius,
|
|
@@ -91,9 +94,9 @@ export function Checkbox({ checked = false, onChange, children, size = 'default'
|
|
|
91
94
|
borderColor: boxBorderColor,
|
|
92
95
|
alignItems: 'center',
|
|
93
96
|
justifyContent: 'center',
|
|
94
|
-
}, children: isChecked ? (
|
|
95
|
-
fontFamily: fontFamily.sans,
|
|
96
|
-
fontWeight: fontWeight.medium,
|
|
97
|
+
}, children: isChecked ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: sizeTokens.iconSize, color: glyphColor })) : isIndeterminate ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "remove", size: sizeTokens.iconSize, color: glyphColor })) : null }), children ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
98
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
99
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
97
100
|
fontSize: labelTokens.fontSize,
|
|
98
101
|
lineHeight: labelTokens.lineHeight,
|
|
99
102
|
letterSpacing: labelTokens.letterSpacing,
|
|
@@ -102,4 +105,3 @@ export function Checkbox({ checked = false, onChange, children, size = 'default'
|
|
|
102
105
|
: checkboxColors.label.default,
|
|
103
106
|
}, selectable: false, children: children })) : null] }));
|
|
104
107
|
}
|
|
105
|
-
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Checkbox = void 0;
|
|
4
|
+
var Checkbox_1 = require("./Checkbox");
|
|
5
|
+
Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
|