@castui/cast-ui 4.1.1 → 4.2.0
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 +129 -19
- package/dist/components/Alert/Alert.d.ts +41 -0
- package/dist/components/Alert/Alert.d.ts.map +1 -0
- package/dist/components/Alert/Alert.js +69 -0
- package/dist/components/Alert/Alert.js.map +1 -0
- package/dist/components/Alert/index.d.ts +2 -0
- package/dist/components/Alert/index.d.ts.map +1 -0
- package/dist/components/Alert/index.js +2 -0
- package/dist/components/Alert/index.js.map +1 -0
- package/dist/components/Avatar/Avatar.d.ts +32 -0
- package/dist/components/Avatar/Avatar.d.ts.map +1 -0
- package/dist/components/Avatar/Avatar.js +53 -0
- package/dist/components/Avatar/Avatar.js.map +1 -0
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Avatar/index.d.ts.map +1 -0
- package/dist/components/Avatar/index.js +2 -0
- package/dist/components/Avatar/index.js.map +1 -0
- package/dist/components/Badge/Badge.d.ts +42 -0
- package/dist/components/Badge/Badge.d.ts.map +1 -0
- package/dist/components/Badge/Badge.js +69 -0
- package/dist/components/Badge/Badge.js.map +1 -0
- package/dist/components/Badge/index.d.ts +2 -0
- package/dist/components/Badge/index.d.ts.map +1 -0
- package/dist/components/Badge/index.js +2 -0
- package/dist/components/Badge/index.js.map +1 -0
- package/dist/components/Card/Card.d.ts +42 -0
- package/dist/components/Card/Card.d.ts.map +1 -0
- package/dist/components/Card/Card.js +89 -0
- package/dist/components/Card/Card.js.map +1 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/Card/index.d.ts.map +1 -0
- package/dist/components/Card/index.js +2 -0
- package/dist/components/Card/index.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +33 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.js +105 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Checkbox/index.js +2 -0
- package/dist/components/Checkbox/index.js.map +1 -0
- package/dist/components/Chip/Chip.d.ts +47 -0
- package/dist/components/Chip/Chip.d.ts.map +1 -0
- package/dist/components/Chip/Chip.js +80 -0
- package/dist/components/Chip/Chip.js.map +1 -0
- package/dist/components/Chip/index.d.ts +2 -0
- package/dist/components/Chip/index.d.ts.map +1 -0
- package/dist/components/Chip/index.js +2 -0
- package/dist/components/Chip/index.js.map +1 -0
- package/dist/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.js +6 -2
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Divider/Divider.d.ts +23 -0
- package/dist/components/Divider/Divider.d.ts.map +1 -0
- package/dist/components/Divider/Divider.js +17 -0
- package/dist/components/Divider/Divider.js.map +1 -0
- package/dist/components/Divider/index.d.ts +2 -0
- package/dist/components/Divider/index.d.ts.map +1 -0
- package/dist/components/Divider/index.js +2 -0
- package/dist/components/Divider/index.js.map +1 -0
- package/dist/components/Icon/Icon.d.ts +26 -8
- package/dist/components/Icon/Icon.d.ts.map +1 -1
- package/dist/components/Icon/Icon.js +9 -1
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/Input/Input.d.ts +63 -0
- package/dist/components/Input/Input.d.ts.map +1 -0
- package/dist/components/Input/Input.js +139 -0
- package/dist/components/Input/Input.js.map +1 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Input/index.d.ts.map +1 -0
- package/dist/components/Input/index.js +2 -0
- package/dist/components/Input/index.js.map +1 -0
- package/dist/components/List/List.d.ts +59 -0
- package/dist/components/List/List.d.ts.map +1 -0
- package/dist/components/List/List.js +111 -0
- package/dist/components/List/List.js.map +1 -0
- package/dist/components/List/index.d.ts +2 -0
- package/dist/components/List/index.d.ts.map +1 -0
- package/dist/components/List/index.js +2 -0
- package/dist/components/List/index.js.map +1 -0
- package/dist/components/Popover/Popover.d.ts +35 -0
- package/dist/components/Popover/Popover.d.ts.map +1 -0
- package/dist/components/Popover/Popover.js +60 -0
- package/dist/components/Popover/Popover.js.map +1 -0
- package/dist/components/Popover/index.d.ts +2 -0
- package/dist/components/Popover/index.d.ts.map +1 -0
- package/dist/components/Popover/index.js +2 -0
- package/dist/components/Popover/index.js.map +1 -0
- package/dist/components/Radio/Radio.d.ts +53 -0
- package/dist/components/Radio/Radio.d.ts.map +1 -0
- package/dist/components/Radio/Radio.js +124 -0
- package/dist/components/Radio/Radio.js.map +1 -0
- package/dist/components/Radio/index.d.ts +2 -0
- package/dist/components/Radio/index.d.ts.map +1 -0
- package/dist/components/Radio/index.js +2 -0
- package/dist/components/Radio/index.js.map +1 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +20 -9
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +34 -0
- package/dist/components/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton/Skeleton.js +64 -0
- package/dist/components/Skeleton/Skeleton.js.map +1 -0
- package/dist/components/Skeleton/index.d.ts +2 -0
- package/dist/components/Skeleton/index.d.ts.map +1 -0
- package/dist/components/Skeleton/index.js +2 -0
- package/dist/components/Skeleton/index.js.map +1 -0
- package/dist/components/Toast/Toast.d.ts +36 -0
- package/dist/components/Toast/Toast.d.ts.map +1 -0
- package/dist/components/Toast/Toast.js +77 -0
- package/dist/components/Toast/Toast.js.map +1 -0
- package/dist/components/Toast/index.d.ts +2 -0
- package/dist/components/Toast/index.d.ts.map +1 -0
- package/dist/components/Toast/index.js +2 -0
- package/dist/components/Toast/index.js.map +1 -0
- package/dist/components/Toggle/Toggle.d.ts +32 -0
- package/dist/components/Toggle/Toggle.d.ts.map +1 -0
- package/dist/components/Toggle/Toggle.js +89 -0
- package/dist/components/Toggle/Toggle.js.map +1 -0
- package/dist/components/Toggle/index.d.ts +2 -0
- package/dist/components/Toggle/index.d.ts.map +1 -0
- package/dist/components/Toggle/index.js +2 -0
- package/dist/components/Toggle/index.js.map +1 -0
- package/dist/components/Tooltip/Tooltip.d.ts +35 -0
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.js +65 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -0
- package/dist/components/Tooltip/index.d.ts +2 -0
- package/dist/components/Tooltip/index.d.ts.map +1 -0
- package/dist/components/Tooltip/index.js +2 -0
- package/dist/components/Tooltip/index.js.map +1 -0
- package/dist/index.d.ts +17 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -1
- package/dist/index.js.map +1 -1
- package/dist/theme/ThemeContext.d.ts +24 -7
- package/dist/theme/ThemeContext.d.ts.map +1 -1
- package/dist/theme/ThemeContext.js +27 -11
- package/dist/theme/ThemeContext.js.map +1 -1
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/themes.d.ts.map +1 -1
- package/dist/theme/themes.js +210 -0
- package/dist/theme/themes.js.map +1 -1
- package/dist/theme/types.d.ts +183 -0
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/tokens/colors.d.ts +294 -25
- package/dist/tokens/colors.d.ts.map +1 -1
- package/dist/tokens/colors.js +319 -96
- package/dist/tokens/colors.js.map +1 -1
- package/dist/tokens/index.d.ts +1 -1
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { View, Text, Platform, } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../theme';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { fontFamily, fontWeight, title, body, } from '../../tokens';
|
|
6
|
+
/** Maps card size → title typography scale */
|
|
7
|
+
const TITLE_SCALE = {
|
|
8
|
+
small: 'sm',
|
|
9
|
+
default: 'md',
|
|
10
|
+
large: 'lg',
|
|
11
|
+
};
|
|
12
|
+
/** Maps card size → body/subtitle typography scale */
|
|
13
|
+
const BODY_SCALE = {
|
|
14
|
+
small: 'sm',
|
|
15
|
+
default: 'md',
|
|
16
|
+
large: 'lg',
|
|
17
|
+
};
|
|
18
|
+
/** shadow/lg — elevated card drop shadow */
|
|
19
|
+
const SHADOW_WEB = {
|
|
20
|
+
boxShadow: '0px 10px 15px -3px rgba(0,0,0,0.08), 0px 4px 6px -4px rgba(0,0,0,0.04)',
|
|
21
|
+
};
|
|
22
|
+
const SHADOW_NATIVE = {
|
|
23
|
+
shadowColor: '#000000',
|
|
24
|
+
shadowOffset: { width: 0, height: 10 },
|
|
25
|
+
shadowOpacity: 0.08,
|
|
26
|
+
shadowRadius: 15,
|
|
27
|
+
elevation: 8,
|
|
28
|
+
};
|
|
29
|
+
export function Card({ size = 'default', variant = 'outline', image, icon, title: titleText, subtitle, body: bodyText, actions, children, style, accessibilityLabel, }) {
|
|
30
|
+
const { components, scheme } = useTheme();
|
|
31
|
+
const surfaceTokens = scheme.surface;
|
|
32
|
+
const textTokens = scheme.text;
|
|
33
|
+
const TITLE_FG = scheme.intents.neutral.default.default.fg;
|
|
34
|
+
const tokens = components.card;
|
|
35
|
+
const sizeTokens = tokens[size];
|
|
36
|
+
const titleTokens = title[TITLE_SCALE[size]];
|
|
37
|
+
const bodyTokens = body[BODY_SCALE[size]];
|
|
38
|
+
const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: TITLE_FG })) : (icon);
|
|
39
|
+
const hasHeader = !!(resolvedIcon || titleText || subtitle);
|
|
40
|
+
return (_jsxs(View, { accessibilityLabel: accessibilityLabel, style: [
|
|
41
|
+
{
|
|
42
|
+
backgroundColor: surfaceTokens.overlay.bg,
|
|
43
|
+
borderRadius: tokens.borderRadius,
|
|
44
|
+
borderWidth: 1,
|
|
45
|
+
borderColor: surfaceTokens.overlay.border,
|
|
46
|
+
overflow: 'hidden',
|
|
47
|
+
...(variant === 'elevated'
|
|
48
|
+
? Platform.OS === 'web'
|
|
49
|
+
? SHADOW_WEB
|
|
50
|
+
: SHADOW_NATIVE
|
|
51
|
+
: {}),
|
|
52
|
+
},
|
|
53
|
+
style,
|
|
54
|
+
], children: [image ? (_jsx(View, { style: { height: sizeTokens.imageHeight, width: '100%' }, children: image })) : null, _jsxs(View, { style: { padding: sizeTokens.padding, gap: sizeTokens.gap }, children: [hasHeader ? (_jsxs(View, { style: {
|
|
55
|
+
flexDirection: 'row',
|
|
56
|
+
alignItems: 'flex-start',
|
|
57
|
+
gap: sizeTokens.gap,
|
|
58
|
+
}, children: [resolvedIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
|
|
59
|
+
width: sizeTokens.iconSize,
|
|
60
|
+
height: sizeTokens.iconSize,
|
|
61
|
+
}, children: resolvedIcon })) : null, titleText || subtitle ? (_jsxs(View, { style: { flex: 1 }, children: [titleText ? (_jsx(Text, { style: {
|
|
62
|
+
fontFamily: fontFamily.sans,
|
|
63
|
+
fontWeight: fontWeight.medium,
|
|
64
|
+
fontSize: titleTokens.fontSize,
|
|
65
|
+
lineHeight: titleTokens.lineHeight,
|
|
66
|
+
letterSpacing: titleTokens.letterSpacing,
|
|
67
|
+
color: TITLE_FG,
|
|
68
|
+
}, selectable: false, children: titleText })) : null, subtitle ? (_jsx(Text, { style: {
|
|
69
|
+
fontFamily: fontFamily.sans,
|
|
70
|
+
fontWeight: fontWeight.regular,
|
|
71
|
+
fontSize: bodyTokens.fontSize,
|
|
72
|
+
lineHeight: bodyTokens.lineHeight,
|
|
73
|
+
letterSpacing: bodyTokens.letterSpacing,
|
|
74
|
+
color: textTokens.description,
|
|
75
|
+
}, selectable: false, children: subtitle })) : null] })) : null] })) : null, bodyText ? (_jsx(Text, { style: {
|
|
76
|
+
fontFamily: fontFamily.sans,
|
|
77
|
+
fontWeight: fontWeight.regular,
|
|
78
|
+
fontSize: bodyTokens.fontSize,
|
|
79
|
+
lineHeight: bodyTokens.lineHeight,
|
|
80
|
+
letterSpacing: bodyTokens.letterSpacing,
|
|
81
|
+
color: textTokens.description,
|
|
82
|
+
}, selectable: false, children: bodyText })) : null, children, actions ? (_jsx(View, { style: {
|
|
83
|
+
flexDirection: 'row',
|
|
84
|
+
justifyContent: 'flex-end',
|
|
85
|
+
alignItems: 'center',
|
|
86
|
+
gap: sizeTokens.gap,
|
|
87
|
+
}, children: actions })) : null] })] }));
|
|
88
|
+
}
|
|
89
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmD,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Checkbox — binary (or tri-state) choice control.
|
|
3
|
+
*
|
|
4
|
+
* Maps to the Figma <Checkbox> component (node 275:5919):
|
|
5
|
+
* checked → false | true | indeterminate
|
|
6
|
+
* size → small | default | large
|
|
7
|
+
* state → default | hover | focus | disabled (interaction-driven)
|
|
8
|
+
*
|
|
9
|
+
* Indicator and icon sizes come from the density theme's `checkbox` tokens
|
|
10
|
+
* (sizes track the `size` prop; gap tracks density). Colours come from the
|
|
11
|
+
* active theme scheme's `checkbox` set + the focus-ring colour.
|
|
12
|
+
*/
|
|
13
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
14
|
+
export type CheckboxSize = 'small' | 'default' | 'large';
|
|
15
|
+
export type CheckboxChecked = boolean | 'indeterminate';
|
|
16
|
+
export type CheckboxProps = {
|
|
17
|
+
/** Checked state — true, false, or 'indeterminate'. */
|
|
18
|
+
checked?: CheckboxChecked;
|
|
19
|
+
/** Change handler — receives the next boolean checked value. */
|
|
20
|
+
onChange?: (checked: boolean) => void;
|
|
21
|
+
/** Optional label rendered beside the indicator. */
|
|
22
|
+
children?: string;
|
|
23
|
+
/** Size variant — controls indicator + icon size. */
|
|
24
|
+
size?: CheckboxSize;
|
|
25
|
+
/** Disables interaction and applies muted styling. */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Style override for the outer row. */
|
|
28
|
+
style?: StyleProp<ViewStyle>;
|
|
29
|
+
/** Accessibility label — falls back to the label text. */
|
|
30
|
+
accessibilityLabel?: string;
|
|
31
|
+
};
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,eAAe,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG;IAC1B,uDAAuD;IACvD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AASF,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,IAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,2CAiHf"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Checkbox — binary (or tri-state) choice control.
|
|
4
|
+
*
|
|
5
|
+
* Maps to the Figma <Checkbox> component (node 275:5919):
|
|
6
|
+
* checked → false | true | indeterminate
|
|
7
|
+
* size → small | default | large
|
|
8
|
+
* state → default | hover | focus | disabled (interaction-driven)
|
|
9
|
+
*
|
|
10
|
+
* Indicator and icon sizes come from the density theme's `checkbox` tokens
|
|
11
|
+
* (sizes track the `size` prop; gap tracks density). Colours come from the
|
|
12
|
+
* active theme scheme's `checkbox` set + the focus-ring colour.
|
|
13
|
+
*/
|
|
14
|
+
import { useState, useCallback } from 'react';
|
|
15
|
+
import { Pressable, View, Text, } from 'react-native';
|
|
16
|
+
import { useTheme } from '../../theme';
|
|
17
|
+
import { Icon } from '../Icon';
|
|
18
|
+
import { fontFamily, fontWeight, label, controlTokens, } from '../../tokens';
|
|
19
|
+
/** Maps checkbox size → label typography scale */
|
|
20
|
+
const LABEL_SCALE = {
|
|
21
|
+
small: 'sm',
|
|
22
|
+
default: 'md',
|
|
23
|
+
large: 'lg',
|
|
24
|
+
};
|
|
25
|
+
export function Checkbox({ checked = false, onChange, children, size = 'default', disabled = false, style, accessibilityLabel, }) {
|
|
26
|
+
const { components, scheme } = useTheme();
|
|
27
|
+
const checkboxColors = scheme.checkbox;
|
|
28
|
+
const tokens = components.checkbox;
|
|
29
|
+
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 isIndeterminate = checked === 'indeterminate';
|
|
34
|
+
const isChecked = checked === true;
|
|
35
|
+
const isOn = isChecked || isIndeterminate;
|
|
36
|
+
const handlePress = useCallback(() => {
|
|
37
|
+
if (!disabled)
|
|
38
|
+
onChange?.(!isChecked);
|
|
39
|
+
}, [disabled, onChange, isChecked]);
|
|
40
|
+
// Resolve indicator fill + border based on state.
|
|
41
|
+
// Priority: disabled > focus > (checked) > hover > default
|
|
42
|
+
let boxBg;
|
|
43
|
+
let boxBorderColor;
|
|
44
|
+
let boxBorderWidth;
|
|
45
|
+
if (disabled) {
|
|
46
|
+
boxBg = checkboxColors.box.disabled.bg;
|
|
47
|
+
boxBorderColor = checkboxColors.box.disabled.border;
|
|
48
|
+
boxBorderWidth = controlTokens.borderWidth;
|
|
49
|
+
}
|
|
50
|
+
else if (isOn) {
|
|
51
|
+
boxBg = checkboxColors.box.checked.bg;
|
|
52
|
+
boxBorderColor = isFocused
|
|
53
|
+
? scheme.focusRing.color
|
|
54
|
+
: checkboxColors.box.checked.border;
|
|
55
|
+
boxBorderWidth = isFocused ? tokens.focusRingWidth : 0;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
boxBg = checkboxColors.box.uncheckedDefault.bg;
|
|
59
|
+
if (isFocused) {
|
|
60
|
+
boxBorderColor = scheme.focusRing.color;
|
|
61
|
+
boxBorderWidth = tokens.focusRingWidth;
|
|
62
|
+
}
|
|
63
|
+
else if (isHovered) {
|
|
64
|
+
boxBorderColor = checkboxColors.box.uncheckedHover.border;
|
|
65
|
+
boxBorderWidth = controlTokens.borderWidth;
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
boxBorderColor = checkboxColors.box.uncheckedDefault.border;
|
|
69
|
+
boxBorderWidth = controlTokens.borderWidth;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const glyphColor = disabled
|
|
73
|
+
? checkboxColors.icon.disabled
|
|
74
|
+
: checkboxColors.icon.default;
|
|
75
|
+
return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityRole: "checkbox", accessibilityLabel: accessibilityLabel || children, accessibilityState: {
|
|
76
|
+
checked: isIndeterminate ? 'mixed' : isChecked,
|
|
77
|
+
disabled,
|
|
78
|
+
}, style: [
|
|
79
|
+
{
|
|
80
|
+
flexDirection: 'row',
|
|
81
|
+
alignItems: 'flex-start',
|
|
82
|
+
gap: tokens.gap,
|
|
83
|
+
},
|
|
84
|
+
style,
|
|
85
|
+
], children: [_jsx(View, { style: {
|
|
86
|
+
width: sizeTokens.indicatorSize,
|
|
87
|
+
height: sizeTokens.indicatorSize,
|
|
88
|
+
borderRadius: tokens.borderRadius,
|
|
89
|
+
backgroundColor: boxBg,
|
|
90
|
+
borderWidth: boxBorderWidth,
|
|
91
|
+
borderColor: boxBorderColor,
|
|
92
|
+
alignItems: 'center',
|
|
93
|
+
justifyContent: 'center',
|
|
94
|
+
}, children: isChecked ? (_jsx(Icon, { name: "check", size: sizeTokens.iconSize, color: glyphColor })) : isIndeterminate ? (_jsx(Icon, { name: "remove", size: sizeTokens.iconSize, color: glyphColor })) : null }), children ? (_jsx(Text, { style: {
|
|
95
|
+
fontFamily: fontFamily.sans,
|
|
96
|
+
fontWeight: fontWeight.medium,
|
|
97
|
+
fontSize: labelTokens.fontSize,
|
|
98
|
+
lineHeight: labelTokens.lineHeight,
|
|
99
|
+
letterSpacing: labelTokens.letterSpacing,
|
|
100
|
+
color: disabled
|
|
101
|
+
? checkboxColors.label.disabled
|
|
102
|
+
: checkboxColors.label.default,
|
|
103
|
+
}, selectable: false, children: children })) : null] }));
|
|
104
|
+
}
|
|
105
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAIT,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Chip — compact, interactive pill for filters, selections, and tokens.
|
|
3
|
+
*
|
|
4
|
+
* Maps to the Figma <Chip> component (node 307:3479):
|
|
5
|
+
* intent → neutral | brand | danger
|
|
6
|
+
* variant → outline (bordered) | subtle (tinted)
|
|
7
|
+
* size → small | default | large
|
|
8
|
+
* state → default | hover | active | disabled (interaction-driven)
|
|
9
|
+
*
|
|
10
|
+
* Spacing/icon sizes come from the density theme's `chip` tokens (padding/gap
|
|
11
|
+
* vary by size AND density; icon size tracks the `size` prop). Colours map
|
|
12
|
+
* directly onto the semantic intent system:
|
|
13
|
+
* outline → intent default (white/tinted bg + border)
|
|
14
|
+
* subtle → intent subtle (transparent bg/border)
|
|
15
|
+
* The `selected` state renders the intent's active colours.
|
|
16
|
+
*/
|
|
17
|
+
import React from 'react';
|
|
18
|
+
import { type ViewStyle, type StyleProp, type GestureResponderEvent } from 'react-native';
|
|
19
|
+
import type { IntentName } from '../../tokens';
|
|
20
|
+
export type ChipSize = 'small' | 'default' | 'large';
|
|
21
|
+
export type ChipVariant = 'outline' | 'subtle';
|
|
22
|
+
export type ChipProps = {
|
|
23
|
+
/** The chip label text. */
|
|
24
|
+
children: string;
|
|
25
|
+
/** Semantic intent — drives the colour scheme. */
|
|
26
|
+
intent?: IntentName;
|
|
27
|
+
/** Surface treatment — outline (bordered) or subtle (tinted). */
|
|
28
|
+
variant?: ChipVariant;
|
|
29
|
+
/** Size variant — controls padding, gap, and typography scale. */
|
|
30
|
+
size?: ChipSize;
|
|
31
|
+
/** Selected state — renders the intent's active colours. */
|
|
32
|
+
selected?: boolean;
|
|
33
|
+
/** Disables interaction and applies muted styling. */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** Leading icon — Material Symbols name string or a ReactNode. */
|
|
36
|
+
leadingIcon?: string | React.ReactNode;
|
|
37
|
+
/** Press handler — makes the chip selectable. */
|
|
38
|
+
onPress?: (e: GestureResponderEvent) => void;
|
|
39
|
+
/** Remove handler — renders a trailing close button when provided. */
|
|
40
|
+
onRemove?: () => void;
|
|
41
|
+
/** Outer style — use for positioning (margin, flex, alignSelf). */
|
|
42
|
+
style?: StyleProp<ViewStyle>;
|
|
43
|
+
/** Accessibility label — falls back to the label text. */
|
|
44
|
+
accessibilityLabel?: string;
|
|
45
|
+
};
|
|
46
|
+
export declare function Chip({ children, intent, variant, size, selected, disabled, leadingIcon, onPress, onRemove, style, accessibilityLabel, }: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
//# sourceMappingURL=Chip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG;IACtB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7C,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAiBF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAkB,EAClB,OAAmB,EACnB,IAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,WAAW,EACX,OAAO,EACP,QAAQ,EACR,KAAK,EACL,kBAAkB,GACnB,EAAE,SAAS,2CAsGX"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Chip — compact, interactive pill for filters, selections, and tokens.
|
|
4
|
+
*
|
|
5
|
+
* Maps to the Figma <Chip> component (node 307:3479):
|
|
6
|
+
* intent → neutral | brand | danger
|
|
7
|
+
* variant → outline (bordered) | subtle (tinted)
|
|
8
|
+
* size → small | default | large
|
|
9
|
+
* state → default | hover | active | disabled (interaction-driven)
|
|
10
|
+
*
|
|
11
|
+
* Spacing/icon sizes come from the density theme's `chip` tokens (padding/gap
|
|
12
|
+
* vary by size AND density; icon size tracks the `size` prop). Colours map
|
|
13
|
+
* directly onto the semantic intent system:
|
|
14
|
+
* outline → intent default (white/tinted bg + border)
|
|
15
|
+
* subtle → intent subtle (transparent bg/border)
|
|
16
|
+
* The `selected` state renders the intent's active colours.
|
|
17
|
+
*/
|
|
18
|
+
import { useState, useCallback } from 'react';
|
|
19
|
+
import { Pressable, View, Text, } from 'react-native';
|
|
20
|
+
import { useTheme } from '../../theme';
|
|
21
|
+
import { fontFamily, fontWeight, label, controlTokens, } from '../../tokens';
|
|
22
|
+
import { Icon } from '../Icon';
|
|
23
|
+
// ---------------------------------------------------------------------------
|
|
24
|
+
// Constants
|
|
25
|
+
// ---------------------------------------------------------------------------
|
|
26
|
+
/** Maps chip size → label typography scale */
|
|
27
|
+
const LABEL_SCALE = {
|
|
28
|
+
small: 'sm',
|
|
29
|
+
default: 'md',
|
|
30
|
+
large: 'lg',
|
|
31
|
+
};
|
|
32
|
+
// ---------------------------------------------------------------------------
|
|
33
|
+
// Component
|
|
34
|
+
// ---------------------------------------------------------------------------
|
|
35
|
+
export function Chip({ children, intent = 'neutral', variant = 'outline', size = 'default', selected = false, disabled = false, leadingIcon, onPress, onRemove, style, accessibilityLabel, }) {
|
|
36
|
+
const { components, scheme } = useTheme();
|
|
37
|
+
const intentColors = scheme.intents;
|
|
38
|
+
const disabledColors = scheme.disabled;
|
|
39
|
+
const sizeTokens = components.chip[size];
|
|
40
|
+
const labelTokens = label[LABEL_SCALE[size]];
|
|
41
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
42
|
+
const prominence = variant === 'outline' ? 'default' : 'subtle';
|
|
43
|
+
// Resolve colours. Priority: disabled > selected/pressed > hover > default
|
|
44
|
+
const resolveColors = useCallback((pressed) => {
|
|
45
|
+
if (disabled)
|
|
46
|
+
return disabledColors;
|
|
47
|
+
const states = intentColors[intent][prominence];
|
|
48
|
+
if (selected || pressed)
|
|
49
|
+
return states.active;
|
|
50
|
+
if (isHovered)
|
|
51
|
+
return states.hover;
|
|
52
|
+
return states.default;
|
|
53
|
+
}, [disabled, intent, prominence, selected, isHovered, intentColors, disabledColors]);
|
|
54
|
+
const isInteractive = !disabled && (onPress != null || onRemove != null);
|
|
55
|
+
return (_jsx(Pressable, { onPress: onPress, disabled: disabled || onPress == null, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: onPress ? 'button' : 'text', accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled, selected }, style: style, children: ({ pressed }) => {
|
|
56
|
+
const colors = resolveColors(pressed && isInteractive);
|
|
57
|
+
const resolvedLeading = typeof leadingIcon === 'string' ? (_jsx(Icon, { name: leadingIcon, size: sizeTokens.iconSize, color: colors.fg })) : (leadingIcon);
|
|
58
|
+
return (_jsxs(View, { style: {
|
|
59
|
+
flexDirection: 'row',
|
|
60
|
+
alignItems: 'center',
|
|
61
|
+
justifyContent: 'center',
|
|
62
|
+
alignSelf: 'flex-start',
|
|
63
|
+
gap: sizeTokens.gap,
|
|
64
|
+
paddingHorizontal: sizeTokens.paddingX,
|
|
65
|
+
paddingVertical: sizeTokens.paddingY,
|
|
66
|
+
borderRadius: components.chip.borderRadius,
|
|
67
|
+
borderWidth: controlTokens.borderWidth,
|
|
68
|
+
borderColor: colors.border,
|
|
69
|
+
backgroundColor: colors.bg,
|
|
70
|
+
}, children: [resolvedLeading ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: resolvedLeading })) : null, _jsx(Text, { style: {
|
|
71
|
+
fontFamily: fontFamily.sans,
|
|
72
|
+
fontWeight: fontWeight.medium,
|
|
73
|
+
fontSize: labelTokens.fontSize,
|
|
74
|
+
lineHeight: labelTokens.lineHeight,
|
|
75
|
+
letterSpacing: labelTokens.letterSpacing,
|
|
76
|
+
color: colors.fg,
|
|
77
|
+
}, selectable: false, children: children }), onRemove ? (_jsx(Pressable, { onPress: disabled ? undefined : onRemove, disabled: disabled, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Remove ${children}`, style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: _jsx(Icon, { name: "close", size: sizeTokens.iconSize, color: colors.fg }) })) : null] }));
|
|
78
|
+
} }));
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=Chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmD,MAAM,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,uEAAuE;IACvE,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG;IAC7C,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAiDF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,IAAI,EACJ,IAAgB,EAChB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,kBAAkB,2CA6GpB;AAMD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,GAAG,YAAY,EAChB,EAAE,WAAW,2CAgCb"}
|
|
@@ -3,7 +3,7 @@ import { Modal, Pressable, View, Text, Platform, } from 'react-native';
|
|
|
3
3
|
import { useTheme } from '../../theme';
|
|
4
4
|
import { Button } from '../Button';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
|
-
import { fontFamily, fontWeight, title, body,
|
|
6
|
+
import { fontFamily, fontWeight, title, body, controlTokens, } from '../../tokens';
|
|
7
7
|
// ---------------------------------------------------------------------------
|
|
8
8
|
// Constants
|
|
9
9
|
// ---------------------------------------------------------------------------
|
|
@@ -49,7 +49,9 @@ const SHADOW_NATIVE = {
|
|
|
49
49
|
* or when building custom overlay implementations.
|
|
50
50
|
*/
|
|
51
51
|
export function DialogContent({ title: titleText, description, icon, size = 'default', children, primaryAction, secondaryAction, style, accessibilityLabel, }) {
|
|
52
|
-
const { components, colors } = useTheme();
|
|
52
|
+
const { components, colors, scheme } = useTheme();
|
|
53
|
+
const surfaceTokens = scheme.surface;
|
|
54
|
+
const textTokens = scheme.text;
|
|
53
55
|
const sizeTokens = components.dialog[size];
|
|
54
56
|
const titleTokens = title[TYPO_SCALE[size]];
|
|
55
57
|
const bodyTokens = body[TYPO_SCALE[size]];
|
|
@@ -94,6 +96,8 @@ export function DialogContent({ title: titleText, description, icon, size = 'def
|
|
|
94
96
|
// Dialog — full modal with backdrop
|
|
95
97
|
// ---------------------------------------------------------------------------
|
|
96
98
|
export function Dialog({ open, onClose, ...contentProps }) {
|
|
99
|
+
const { scheme } = useTheme();
|
|
100
|
+
const overlayTokens = scheme.overlay;
|
|
97
101
|
return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(Pressable, { onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close dialog", style: {
|
|
98
102
|
flex: 1,
|
|
99
103
|
backgroundColor: `rgba(0, 0, 0, ${overlayTokens.scrimOpacity})`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,KAAK,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,GAGT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EACL,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,aAAa,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Divider — a thin rule separating content, horizontally or vertically.
|
|
3
|
+
*
|
|
4
|
+
* Maps to the Figma <Divider> component (node 307:3571):
|
|
5
|
+
* orientation → horizontal | vertical
|
|
6
|
+
*
|
|
7
|
+
* The line uses the overlay border colour (surface/overlay/border) at the
|
|
8
|
+
* control border width (1px) — both constant across densities. A horizontal
|
|
9
|
+
* divider stretches to its container's width; a vertical divider stretches to
|
|
10
|
+
* its container's height (give the parent a defined cross-axis size).
|
|
11
|
+
*/
|
|
12
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
13
|
+
export type DividerOrientation = 'horizontal' | 'vertical';
|
|
14
|
+
export type DividerProps = {
|
|
15
|
+
/** Line direction. */
|
|
16
|
+
orientation?: DividerOrientation;
|
|
17
|
+
/** Line colour — defaults to the overlay border token. */
|
|
18
|
+
color?: string;
|
|
19
|
+
/** Style override — e.g. margins or an explicit length. */
|
|
20
|
+
style?: StyleProp<ViewStyle>;
|
|
21
|
+
};
|
|
22
|
+
export declare function Divider({ orientation, color, style, }: DividerProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=Divider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,KAAK,EACL,KAAK,GACN,EAAE,YAAY,2CAkBd"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../theme';
|
|
4
|
+
import { controlTokens } from '../../tokens';
|
|
5
|
+
export function Divider({ orientation = 'horizontal', color, style, }) {
|
|
6
|
+
const { scheme } = useTheme();
|
|
7
|
+
const resolvedColor = color ?? scheme.surface.overlay.border;
|
|
8
|
+
const isVertical = orientation === 'vertical';
|
|
9
|
+
return (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [
|
|
10
|
+
isVertical
|
|
11
|
+
? { alignSelf: 'stretch', width: controlTokens.borderWidth }
|
|
12
|
+
: { alignSelf: 'stretch', height: controlTokens.borderWidth },
|
|
13
|
+
{ backgroundColor: resolvedColor },
|
|
14
|
+
style,
|
|
15
|
+
] }));
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=Divider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,IAAI,EAAkC,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAa7C,MAAM,UAAU,OAAO,CAAC,EACtB,WAAW,GAAG,YAAY,EAC1B,KAAK,EACL,KAAK,GACQ;IACb,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC9B,MAAM,aAAa,GAAG,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC;IAC7D,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAE9C,OAAO,CACL,KAAC,IAAI,IACH,2BAA2B,QAC3B,yBAAyB,EAAC,qBAAqB,EAC/C,KAAK,EAAE;YACL,UAAU;gBACR,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,CAAC,WAAW,EAAE;gBAC5D,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC,WAAW,EAAE;YAC/D,EAAE,eAAe,EAAE,aAAa,EAAE;YAClC,KAAK;SACN,GACD,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA8C,MAAM,WAAW,CAAC"}
|