@castui/cast-ui 4.2.0 → 4.2.2
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/README.md +45 -1
- 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 +5 -3
- package/dist/components/Icon/Icon.js +14 -8
- 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 +22 -15
- 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
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Input = Input;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
2
5
|
/**
|
|
3
6
|
* Input — single-line text field with label and helper/error text.
|
|
4
7
|
*
|
|
@@ -15,11 +18,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
15
18
|
* Label uses the label scale, the value/placeholder the body scale (both
|
|
16
19
|
* matched to size); helper text uses the caption scale.
|
|
17
20
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
const react_1 = require("react");
|
|
22
|
+
const react_native_1 = require("react-native");
|
|
23
|
+
const theme_1 = require("../../theme");
|
|
24
|
+
const Icon_1 = require("../Icon");
|
|
25
|
+
const tokens_1 = require("../../tokens");
|
|
23
26
|
// ---------------------------------------------------------------------------
|
|
24
27
|
// Constants
|
|
25
28
|
// ---------------------------------------------------------------------------
|
|
@@ -39,13 +42,13 @@ const BODY_SCALE = {
|
|
|
39
42
|
// ---------------------------------------------------------------------------
|
|
40
43
|
// Component
|
|
41
44
|
// ---------------------------------------------------------------------------
|
|
42
|
-
|
|
43
|
-
const { components, scheme } = useTheme();
|
|
45
|
+
function Input({ label: formLabel, helperText, placeholder, value, defaultValue, onChangeText, size = 'default', error = false, disabled = false, leadingIcon, trailingIcon, secureTextEntry, keyboardType, autoCapitalize, returnKeyType, onSubmitEditing, onFocus, onBlur, style, accessibilityLabel, }) {
|
|
46
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
44
47
|
const sizeTokens = components.input[size];
|
|
45
|
-
const labelTypo = label[LABEL_SCALE[size]];
|
|
46
|
-
const bodyTypo = body[BODY_SCALE[size]];
|
|
47
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
48
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
48
|
+
const labelTypo = tokens_1.label[LABEL_SCALE[size]];
|
|
49
|
+
const bodyTypo = tokens_1.body[BODY_SCALE[size]];
|
|
50
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
51
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
49
52
|
const disabledColors = scheme.disabled;
|
|
50
53
|
const errorTokens = scheme.error;
|
|
51
54
|
const textTokens = scheme.text;
|
|
@@ -57,27 +60,27 @@ export function Input({ label: formLabel, helperText, placeholder, value, defaul
|
|
|
57
60
|
if (disabled) {
|
|
58
61
|
bg = disabledColors.bg;
|
|
59
62
|
borderColor = disabledColors.border;
|
|
60
|
-
borderWidth = controlTokens.borderWidth;
|
|
63
|
+
borderWidth = tokens_1.controlTokens.borderWidth;
|
|
61
64
|
}
|
|
62
65
|
else if (isFocused) {
|
|
63
66
|
bg = neutral.default.bg;
|
|
64
67
|
borderColor = scheme.focusRing.color;
|
|
65
|
-
borderWidth = controlTokens.focusRingWidth;
|
|
68
|
+
borderWidth = tokens_1.controlTokens.focusRingWidth;
|
|
66
69
|
}
|
|
67
70
|
else if (error) {
|
|
68
71
|
bg = neutral.default.bg;
|
|
69
72
|
borderColor = errorTokens.border;
|
|
70
|
-
borderWidth = controlTokens.borderWidth;
|
|
73
|
+
borderWidth = tokens_1.controlTokens.borderWidth;
|
|
71
74
|
}
|
|
72
75
|
else if (isHovered) {
|
|
73
76
|
bg = neutral.hover.bg;
|
|
74
77
|
borderColor = neutral.hover.border;
|
|
75
|
-
borderWidth = controlTokens.borderWidth;
|
|
78
|
+
borderWidth = tokens_1.controlTokens.borderWidth;
|
|
76
79
|
}
|
|
77
80
|
else {
|
|
78
81
|
bg = neutral.default.bg;
|
|
79
82
|
borderColor = neutral.default.border;
|
|
80
|
-
borderWidth = controlTokens.borderWidth;
|
|
83
|
+
borderWidth = tokens_1.controlTokens.borderWidth;
|
|
81
84
|
}
|
|
82
85
|
const textColor = disabled ? disabledColors.fg : neutral.default.fg;
|
|
83
86
|
const labelColor = disabled ? disabledColors.fg : neutral.default.fg;
|
|
@@ -87,19 +90,19 @@ export function Input({ label: formLabel, helperText, placeholder, value, defaul
|
|
|
87
90
|
? errorTokens.fg
|
|
88
91
|
: textTokens.description;
|
|
89
92
|
const iconColor = disabled ? disabledColors.fg : neutral.default.fg;
|
|
90
|
-
const resolvedLeading = typeof leadingIcon === 'string' ? (
|
|
91
|
-
const resolvedTrailing = typeof trailingIcon === 'string' ? (
|
|
92
|
-
return (
|
|
93
|
+
const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: iconColor })) : (leadingIcon);
|
|
94
|
+
const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: iconColor })) : (trailingIcon);
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
|
|
93
96
|
{ alignSelf: 'stretch', gap: components.input.fieldGap },
|
|
94
97
|
style,
|
|
95
|
-
], children: [formLabel ? (
|
|
96
|
-
fontFamily: fontFamily.sans,
|
|
97
|
-
fontWeight: fontWeight.medium,
|
|
98
|
+
], children: [formLabel ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
99
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
100
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
98
101
|
fontSize: labelTypo.fontSize,
|
|
99
102
|
lineHeight: labelTypo.lineHeight,
|
|
100
103
|
letterSpacing: labelTypo.letterSpacing,
|
|
101
104
|
color: labelColor,
|
|
102
|
-
}, selectable: false, children: formLabel })) : null,
|
|
105
|
+
}, selectable: false, children: formLabel })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { onPointerEnter: disabled ? undefined : () => setIsHovered(true), onPointerLeave: disabled ? undefined : () => setIsHovered(false), style: {
|
|
103
106
|
flexDirection: 'row',
|
|
104
107
|
alignItems: 'center',
|
|
105
108
|
gap: sizeTokens.gap,
|
|
@@ -109,7 +112,7 @@ export function Input({ label: formLabel, helperText, placeholder, value, defaul
|
|
|
109
112
|
borderWidth,
|
|
110
113
|
borderColor,
|
|
111
114
|
backgroundColor: bg,
|
|
112
|
-
}, children: [resolvedLeading ? (
|
|
115
|
+
}, children: [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.TextInput, { value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: textTokens.placeholder, editable: !disabled, secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoCapitalize: autoCapitalize, returnKeyType: returnKeyType, onSubmitEditing: onSubmitEditing, onFocus: () => {
|
|
113
116
|
setIsFocused(true);
|
|
114
117
|
onFocus?.();
|
|
115
118
|
}, onBlur: () => {
|
|
@@ -117,23 +120,22 @@ export function Input({ label: formLabel, helperText, placeholder, value, defaul
|
|
|
117
120
|
onBlur?.();
|
|
118
121
|
}, accessibilityLabel: accessibilityLabel || formLabel, style: {
|
|
119
122
|
flex: 1,
|
|
120
|
-
fontFamily: fontFamily.sans,
|
|
121
|
-
fontWeight: fontWeight.regular,
|
|
123
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
124
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
122
125
|
fontSize: bodyTypo.fontSize,
|
|
123
126
|
lineHeight: bodyTypo.lineHeight,
|
|
124
127
|
letterSpacing: bodyTypo.letterSpacing,
|
|
125
128
|
color: textColor,
|
|
126
129
|
padding: 0,
|
|
127
|
-
...(Platform.OS === 'web'
|
|
130
|
+
...(react_native_1.Platform.OS === 'web'
|
|
128
131
|
? { outlineWidth: 0 }
|
|
129
132
|
: {}),
|
|
130
|
-
} }), resolvedTrailing ? (
|
|
131
|
-
fontFamily: fontFamily.sans,
|
|
132
|
-
fontWeight: fontWeight.regular,
|
|
133
|
-
fontSize: caption.fontSize,
|
|
134
|
-
lineHeight: caption.lineHeight,
|
|
135
|
-
letterSpacing: caption.letterSpacing,
|
|
133
|
+
} }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }), helperText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
134
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
135
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
136
|
+
fontSize: tokens_1.caption.fontSize,
|
|
137
|
+
lineHeight: tokens_1.caption.lineHeight,
|
|
138
|
+
letterSpacing: tokens_1.caption.letterSpacing,
|
|
136
139
|
color: helperColor,
|
|
137
140
|
}, selectable: false, children: helperText })) : null] }));
|
|
138
141
|
}
|
|
139
|
-
//# sourceMappingURL=Input.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Input = void 0;
|
|
4
|
+
var Input_1 = require("./Input");
|
|
5
|
+
Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
|
|
@@ -56,4 +56,3 @@ export type ListItemProps = {
|
|
|
56
56
|
accessibilityLabel?: string;
|
|
57
57
|
};
|
|
58
58
|
export declare function ListItem({ children, description, icon, trailingIcon, selected, disabled, onPress, style, accessibilityLabel, }: ListItemProps): import("react/jsx-runtime").JSX.Element;
|
|
59
|
-
//# sourceMappingURL=List.d.ts.map
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.List = List;
|
|
4
|
+
exports.ListSubheader = ListSubheader;
|
|
5
|
+
exports.ListDivider = ListDivider;
|
|
6
|
+
exports.ListItem = ListItem;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
2
8
|
/**
|
|
3
9
|
* List — vertical collection of items with optional section subheaders.
|
|
4
10
|
*
|
|
@@ -13,16 +19,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
19
|
* icon size via the theme's `list` tokens. Colours come from the theme's
|
|
14
20
|
* colour scheme (`scheme.list`, constant across densities).
|
|
15
21
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const { components, scheme } = useTheme();
|
|
22
|
+
const react_1 = require("react");
|
|
23
|
+
const react_native_1 = require("react-native");
|
|
24
|
+
const theme_1 = require("../../theme");
|
|
25
|
+
const Icon_1 = require("../Icon");
|
|
26
|
+
const tokens_1 = require("../../tokens");
|
|
27
|
+
function List({ children, style, accessibilityLabel }) {
|
|
28
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
23
29
|
const listColors = scheme.list;
|
|
24
30
|
const tokens = components.list;
|
|
25
|
-
return (
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "list", accessibilityLabel: accessibilityLabel, style: [
|
|
26
32
|
{
|
|
27
33
|
backgroundColor: listColors.containerBg,
|
|
28
34
|
gap: tokens.sectionGap,
|
|
@@ -31,29 +37,29 @@ export function List({ children, style, accessibilityLabel }) {
|
|
|
31
37
|
style,
|
|
32
38
|
], children: children }));
|
|
33
39
|
}
|
|
34
|
-
|
|
35
|
-
const { components, scheme } = useTheme();
|
|
40
|
+
function ListSubheader({ children, style }) {
|
|
41
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
36
42
|
const listColors = scheme.list;
|
|
37
43
|
const tokens = components.list.subheader;
|
|
38
|
-
return (
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
|
|
39
45
|
{
|
|
40
46
|
paddingHorizontal: tokens.paddingX,
|
|
41
47
|
paddingVertical: tokens.paddingY,
|
|
42
48
|
},
|
|
43
49
|
style,
|
|
44
|
-
], children:
|
|
45
|
-
fontFamily: fontFamily.sans,
|
|
46
|
-
fontWeight: fontWeight.regular,
|
|
47
|
-
fontSize: caption.fontSize,
|
|
48
|
-
lineHeight: caption.lineHeight,
|
|
49
|
-
letterSpacing: caption.letterSpacing,
|
|
50
|
+
], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
51
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
52
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
53
|
+
fontSize: tokens_1.caption.fontSize,
|
|
54
|
+
lineHeight: tokens_1.caption.lineHeight,
|
|
55
|
+
letterSpacing: tokens_1.caption.letterSpacing,
|
|
50
56
|
color: listColors.subheaderFg,
|
|
51
57
|
}, selectable: false, children: children }) }));
|
|
52
58
|
}
|
|
53
|
-
|
|
54
|
-
const { scheme } = useTheme();
|
|
59
|
+
function ListDivider({ style }) {
|
|
60
|
+
const { scheme } = (0, theme_1.useTheme)();
|
|
55
61
|
const listColors = scheme.list;
|
|
56
|
-
return (
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "none", style: [
|
|
57
63
|
{
|
|
58
64
|
height: 1,
|
|
59
65
|
backgroundColor: listColors.separator,
|
|
@@ -61,11 +67,11 @@ export function ListDivider({ style }) {
|
|
|
61
67
|
style,
|
|
62
68
|
] }));
|
|
63
69
|
}
|
|
64
|
-
|
|
65
|
-
const { components, scheme } = useTheme();
|
|
70
|
+
function ListItem({ children, description, icon, trailingIcon, selected = false, disabled = false, onPress, style, accessibilityLabel, }) {
|
|
71
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
66
72
|
const listColors = scheme.list;
|
|
67
73
|
const tokens = components.list.item;
|
|
68
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
74
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
69
75
|
// State priority: disabled > selected+hover > selected > hover > default
|
|
70
76
|
const colors = disabled
|
|
71
77
|
? listColors.item.disabled
|
|
@@ -76,9 +82,9 @@ export function ListItem({ children, description, icon, trailingIcon, selected =
|
|
|
76
82
|
: isHovered
|
|
77
83
|
? listColors.item.hover
|
|
78
84
|
: listColors.item.default;
|
|
79
|
-
const resolvedIcon = typeof icon === 'string' ? (
|
|
80
|
-
const resolvedTrailing = typeof trailingIcon === 'string' ? (
|
|
81
|
-
return (
|
|
85
|
+
const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: tokens.iconSize, color: colors.fg })) : (icon);
|
|
86
|
+
const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: tokens.iconSize, color: colors.fg })) : (trailingIcon);
|
|
87
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: (e) => {
|
|
82
88
|
if (!disabled)
|
|
83
89
|
onPress?.(e);
|
|
84
90
|
}, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), disabled: disabled || !onPress, accessibilityRole: "menuitem", accessibilityLabel: accessibilityLabel || children, accessibilityState: { selected, disabled }, style: [
|
|
@@ -92,20 +98,19 @@ export function ListItem({ children, description, icon, trailingIcon, selected =
|
|
|
92
98
|
backgroundColor: colors.bg,
|
|
93
99
|
},
|
|
94
100
|
style,
|
|
95
|
-
], children: [resolvedIcon ? (
|
|
96
|
-
fontFamily: fontFamily.sans,
|
|
97
|
-
fontWeight: fontWeight.medium,
|
|
98
|
-
fontSize: label.md.fontSize,
|
|
99
|
-
lineHeight: label.md.lineHeight,
|
|
100
|
-
letterSpacing: label.md.letterSpacing,
|
|
101
|
+
], children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens.iconSize, height: tokens.iconSize }, children: resolvedIcon })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
102
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
103
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
104
|
+
fontSize: tokens_1.label.md.fontSize,
|
|
105
|
+
lineHeight: tokens_1.label.md.lineHeight,
|
|
106
|
+
letterSpacing: tokens_1.label.md.letterSpacing,
|
|
101
107
|
color: colors.fg,
|
|
102
|
-
}, selectable: false, children: children }), description ? (
|
|
103
|
-
fontFamily: fontFamily.sans,
|
|
104
|
-
fontWeight: fontWeight.regular,
|
|
105
|
-
fontSize: body.md.fontSize,
|
|
106
|
-
lineHeight: body.md.lineHeight,
|
|
107
|
-
letterSpacing: body.md.letterSpacing,
|
|
108
|
+
}, selectable: false, children: children }), description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
109
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
110
|
+
fontWeight: tokens_1.fontWeight.regular,
|
|
111
|
+
fontSize: tokens_1.body.md.fontSize,
|
|
112
|
+
lineHeight: tokens_1.body.md.lineHeight,
|
|
113
|
+
letterSpacing: tokens_1.body.md.letterSpacing,
|
|
108
114
|
color: disabled ? colors.fg : listColors.descriptionFg,
|
|
109
|
-
}, selectable: false, children: description })) : null] }), resolvedTrailing ? (
|
|
115
|
+
}, selectable: false, children: description })) : null] }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens.iconSize, height: tokens.iconSize }, children: resolvedTrailing })) : null] }));
|
|
110
116
|
}
|
|
111
|
-
//# sourceMappingURL=List.js.map
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = void 0;
|
|
4
|
+
var List_1 = require("./List");
|
|
5
|
+
Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
|
|
6
|
+
Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return List_1.ListItem; } });
|
|
7
|
+
Object.defineProperty(exports, "ListSubheader", { enumerable: true, get: function () { return List_1.ListSubheader; } });
|
|
8
|
+
Object.defineProperty(exports, "ListDivider", { enumerable: true, get: function () { return List_1.ListDivider; } });
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Popover = Popover;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const theme_1 = require("../../theme");
|
|
4
7
|
// ---------------------------------------------------------------------------
|
|
5
8
|
// Constants
|
|
6
9
|
// ---------------------------------------------------------------------------
|
|
@@ -15,7 +18,7 @@ const SHADOW_NATIVE = {
|
|
|
15
18
|
shadowRadius: 6,
|
|
16
19
|
elevation: 4,
|
|
17
20
|
};
|
|
18
|
-
const SHADOW = Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE;
|
|
21
|
+
const SHADOW = react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE;
|
|
19
22
|
// ---------------------------------------------------------------------------
|
|
20
23
|
// Component
|
|
21
24
|
// ---------------------------------------------------------------------------
|
|
@@ -41,12 +44,12 @@ function arrowStyle(direction, arrowSize, backgroundColor) {
|
|
|
41
44
|
return { ...base, bottom: -half, left: '50%', marginLeft: -half };
|
|
42
45
|
}
|
|
43
46
|
}
|
|
44
|
-
|
|
45
|
-
const { components, scheme } = useTheme();
|
|
47
|
+
function Popover({ children, direction = 'bottom', size = 'default', hideArrow = false, style, accessibilityLabel, }) {
|
|
48
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
46
49
|
const surfaceTokens = scheme.surface;
|
|
47
50
|
const tokens = components.popover;
|
|
48
51
|
const sizeTokens = tokens[size];
|
|
49
|
-
return (
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel, style: [
|
|
50
53
|
{
|
|
51
54
|
alignSelf: 'flex-start',
|
|
52
55
|
backgroundColor: surfaceTokens.overlay.bg,
|
|
@@ -55,6 +58,5 @@ export function Popover({ children, direction = 'bottom', size = 'default', hide
|
|
|
55
58
|
...SHADOW,
|
|
56
59
|
},
|
|
57
60
|
style,
|
|
58
|
-
], children: [!hideArrow ? (
|
|
61
|
+
], children: [!hideArrow ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: arrowStyle(direction, tokens.arrowSize, surfaceTokens.overlay.bg) })) : null, children] }));
|
|
59
62
|
}
|
|
60
|
-
//# sourceMappingURL=Popover.js.map
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Popover = void 0;
|
|
4
|
+
var Popover_1 = require("./Popover");
|
|
5
|
+
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
|
|
@@ -50,4 +50,3 @@ export type RadioGroupProps = {
|
|
|
50
50
|
};
|
|
51
51
|
export declare function RadioGroup({ value, onValueChange, size, disabled, children, style, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
52
52
|
export declare function Radio({ value, checked, onChange, children, size, disabled, style, accessibilityLabel, }: RadioProps): import("react/jsx-runtime").JSX.Element;
|
|
53
|
-
//# sourceMappingURL=Radio.d.ts.map
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RadioGroup = RadioGroup;
|
|
4
|
+
exports.Radio = Radio;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
2
6
|
/**
|
|
3
7
|
* Radio — single-choice control, used individually or within a RadioGroup.
|
|
4
8
|
*
|
|
@@ -14,11 +18,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
14
18
|
* RadioGroup provides single-selection semantics: each child Radio with a
|
|
15
19
|
* `value` reflects `group.value === value` and reports selection upward.
|
|
16
20
|
*/
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const RadioGroupCtx = createContext(null);
|
|
21
|
+
const react_1 = require("react");
|
|
22
|
+
const react_native_1 = require("react-native");
|
|
23
|
+
const theme_1 = require("../../theme");
|
|
24
|
+
const tokens_1 = require("../../tokens");
|
|
25
|
+
const RadioGroupCtx = (0, react_1.createContext)(null);
|
|
22
26
|
/** Maps radio size → label typography scale */
|
|
23
27
|
const LABEL_SCALE = {
|
|
24
28
|
small: 'sm',
|
|
@@ -28,26 +32,26 @@ const LABEL_SCALE = {
|
|
|
28
32
|
// ---------------------------------------------------------------------------
|
|
29
33
|
// RadioGroup
|
|
30
34
|
// ---------------------------------------------------------------------------
|
|
31
|
-
|
|
32
|
-
const { components } = useTheme();
|
|
33
|
-
return (
|
|
35
|
+
function RadioGroup({ value, onValueChange, size = 'default', disabled = false, children, style, }) {
|
|
36
|
+
const { components } = (0, theme_1.useTheme)();
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(RadioGroupCtx.Provider, { value: { value, onValueChange, size, disabled }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "radiogroup", style: [{ gap: components.radio.gap }, style], children: children }) }));
|
|
34
38
|
}
|
|
35
39
|
// ---------------------------------------------------------------------------
|
|
36
40
|
// Radio
|
|
37
41
|
// ---------------------------------------------------------------------------
|
|
38
|
-
|
|
39
|
-
const { components, scheme } = useTheme();
|
|
42
|
+
function Radio({ value, checked, onChange, children, size, disabled, style, accessibilityLabel, }) {
|
|
43
|
+
const { components, scheme } = (0, theme_1.useTheme)();
|
|
40
44
|
const radioColors = scheme.radio;
|
|
41
|
-
const group = useContext(RadioGroupCtx);
|
|
45
|
+
const group = (0, react_1.useContext)(RadioGroupCtx);
|
|
42
46
|
const resolvedSize = size ?? group?.size ?? 'default';
|
|
43
47
|
const resolvedDisabled = disabled ?? group?.disabled ?? false;
|
|
44
48
|
const isChecked = group != null && value != null ? group.value === value : checked === true;
|
|
45
49
|
const tokens = components.radio;
|
|
46
50
|
const sizeTokens = tokens[resolvedSize];
|
|
47
|
-
const labelTokens = label[LABEL_SCALE[resolvedSize]];
|
|
48
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
49
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
50
|
-
const handlePress = useCallback(() => {
|
|
51
|
+
const labelTokens = tokens_1.label[LABEL_SCALE[resolvedSize]];
|
|
52
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
53
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
54
|
+
const handlePress = (0, react_1.useCallback)(() => {
|
|
51
55
|
if (resolvedDisabled)
|
|
52
56
|
return;
|
|
53
57
|
if (group != null && value != null) {
|
|
@@ -64,7 +68,7 @@ export function Radio({ value, checked, onChange, children, size, disabled, styl
|
|
|
64
68
|
if (resolvedDisabled) {
|
|
65
69
|
ringBg = radioColors.indicator.disabled.bg;
|
|
66
70
|
ringBorderColor = radioColors.indicator.disabled.border;
|
|
67
|
-
ringBorderWidth = controlTokens.borderWidth;
|
|
71
|
+
ringBorderWidth = tokens_1.controlTokens.borderWidth;
|
|
68
72
|
}
|
|
69
73
|
else if (isChecked) {
|
|
70
74
|
ringBg = isHovered
|
|
@@ -83,20 +87,20 @@ export function Radio({ value, checked, onChange, children, size, disabled, styl
|
|
|
83
87
|
}
|
|
84
88
|
else if (isHovered) {
|
|
85
89
|
ringBorderColor = radioColors.indicator.uncheckedHover.border;
|
|
86
|
-
ringBorderWidth = controlTokens.borderWidth;
|
|
90
|
+
ringBorderWidth = tokens_1.controlTokens.borderWidth;
|
|
87
91
|
}
|
|
88
92
|
else {
|
|
89
93
|
ringBorderColor = radioColors.indicator.uncheckedDefault.border;
|
|
90
|
-
ringBorderWidth = controlTokens.borderWidth;
|
|
94
|
+
ringBorderWidth = tokens_1.controlTokens.borderWidth;
|
|
91
95
|
}
|
|
92
96
|
}
|
|
93
97
|
const dotColor = resolvedDisabled
|
|
94
98
|
? radioColors.dot.disabled
|
|
95
99
|
: radioColors.dot.default;
|
|
96
|
-
return (
|
|
100
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: handlePress, disabled: resolvedDisabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityRole: "radio", accessibilityLabel: accessibilityLabel || children, accessibilityState: { checked: isChecked, disabled: resolvedDisabled }, style: [
|
|
97
101
|
{ flexDirection: 'row', alignItems: 'flex-start', gap: tokens.gap },
|
|
98
102
|
style,
|
|
99
|
-
], children: [
|
|
103
|
+
], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
100
104
|
width: sizeTokens.indicatorSize,
|
|
101
105
|
height: sizeTokens.indicatorSize,
|
|
102
106
|
borderRadius: tokens.borderRadius,
|
|
@@ -105,14 +109,14 @@ export function Radio({ value, checked, onChange, children, size, disabled, styl
|
|
|
105
109
|
borderColor: ringBorderColor,
|
|
106
110
|
alignItems: 'center',
|
|
107
111
|
justifyContent: 'center',
|
|
108
|
-
}, children: isChecked ? (
|
|
112
|
+
}, children: isChecked ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
109
113
|
width: sizeTokens.dotSize,
|
|
110
114
|
height: sizeTokens.dotSize,
|
|
111
115
|
borderRadius: sizeTokens.dotSize / 2,
|
|
112
116
|
backgroundColor: dotColor,
|
|
113
|
-
} })) : null }), children ? (
|
|
114
|
-
fontFamily: fontFamily.sans,
|
|
115
|
-
fontWeight: fontWeight.medium,
|
|
117
|
+
} })) : null }), children ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
118
|
+
fontFamily: tokens_1.fontFamily.sans,
|
|
119
|
+
fontWeight: tokens_1.fontWeight.medium,
|
|
116
120
|
fontSize: labelTokens.fontSize,
|
|
117
121
|
lineHeight: labelTokens.lineHeight,
|
|
118
122
|
letterSpacing: labelTokens.letterSpacing,
|
|
@@ -121,4 +125,3 @@ export function Radio({ value, checked, onChange, children, size, disabled, styl
|
|
|
121
125
|
: radioColors.label.default,
|
|
122
126
|
}, selectable: false, children: children })) : null] }));
|
|
123
127
|
}
|
|
124
|
-
//# sourceMappingURL=Radio.js.map
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RadioGroup = exports.Radio = void 0;
|
|
4
|
+
var Radio_1 = require("./Radio");
|
|
5
|
+
Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
|
|
6
|
+
Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return Radio_1.RadioGroup; } });
|
|
@@ -93,4 +93,3 @@ export type SelectContentProps = {
|
|
|
93
93
|
};
|
|
94
94
|
export declare function SelectContent({ children, style }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
|
|
95
95
|
export declare function Select({ type, size, label: formLabel, helperText, placeholder, leadingIcon, disabled, error, value, onValueChange, values, onValuesChange, searchValue, onSearchChange, children, style, accessibilityLabel, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
96
|
-
//# sourceMappingURL=Select.d.ts.map
|