@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,77 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { View, Text, Pressable, Platform, } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../theme';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { fontFamily, fontWeight, title as titleScale, body, controlTokens, } from '../../tokens';
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
// Constants
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
/** Maps toast size → title typography scale */
|
|
10
|
+
const TITLE_SCALE = {
|
|
11
|
+
small: 'sm',
|
|
12
|
+
default: 'md',
|
|
13
|
+
large: 'lg',
|
|
14
|
+
};
|
|
15
|
+
/** Maps toast size → body typography scale (description) */
|
|
16
|
+
const BODY_SCALE = {
|
|
17
|
+
small: 'sm',
|
|
18
|
+
default: 'md',
|
|
19
|
+
large: 'lg',
|
|
20
|
+
};
|
|
21
|
+
/** Shadow for web — matches Figma shadow/md */
|
|
22
|
+
const SHADOW_WEB = {
|
|
23
|
+
boxShadow: '0px 2px 4px -2px rgba(0,0,0,0.05), 0px 4px 6px -1px rgba(0,0,0,0.07)',
|
|
24
|
+
};
|
|
25
|
+
/** Shadow for native */
|
|
26
|
+
const SHADOW_NATIVE = {
|
|
27
|
+
shadowColor: '#000000',
|
|
28
|
+
shadowOffset: { width: 0, height: 4 },
|
|
29
|
+
shadowOpacity: 0.07,
|
|
30
|
+
shadowRadius: 6,
|
|
31
|
+
elevation: 4,
|
|
32
|
+
};
|
|
33
|
+
// ---------------------------------------------------------------------------
|
|
34
|
+
// Component
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
export function Toast({ title, children, intent = 'neutral', size = 'default', icon, onClose, style, accessibilityLabel, }) {
|
|
37
|
+
const { components, scheme } = useTheme();
|
|
38
|
+
const intentColors = scheme.intents;
|
|
39
|
+
const surfaceTokens = scheme.surface;
|
|
40
|
+
const tokens = components.toast;
|
|
41
|
+
const sizeTokens = tokens[size];
|
|
42
|
+
const titleTokens = titleScale[TITLE_SCALE[size]];
|
|
43
|
+
const bodyTokens = body[BODY_SCALE[size]];
|
|
44
|
+
const fg = intentColors[intent].default.default.fg;
|
|
45
|
+
const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: fg })) : (icon);
|
|
46
|
+
return (_jsxs(View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || title, style: [
|
|
47
|
+
{
|
|
48
|
+
flexDirection: 'row',
|
|
49
|
+
alignItems: 'flex-start',
|
|
50
|
+
gap: sizeTokens.gap,
|
|
51
|
+
padding: sizeTokens.padding,
|
|
52
|
+
minWidth: tokens.minWidth,
|
|
53
|
+
maxWidth: tokens.maxWidth,
|
|
54
|
+
borderRadius: tokens.borderRadius,
|
|
55
|
+
borderWidth: controlTokens.borderWidth,
|
|
56
|
+
borderColor: surfaceTokens.overlay.border,
|
|
57
|
+
backgroundColor: surfaceTokens.overlay.bg,
|
|
58
|
+
...(Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
|
|
59
|
+
},
|
|
60
|
+
style,
|
|
61
|
+
], children: [resolvedIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: resolvedIcon })) : null, _jsxs(View, { style: { flex: 1 }, children: [_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: fg,
|
|
68
|
+
}, selectable: false, children: title }), children ? (_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: fg,
|
|
75
|
+
}, selectable: false, children: children })) : null] }), onClose ? (_jsx(Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: _jsx(Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
|
|
76
|
+
}
|
|
77
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Toggle — on/off switch control.
|
|
3
|
+
*
|
|
4
|
+
* Maps to the Figma <Toggle> component (node 275:9974):
|
|
5
|
+
* checked → boolean
|
|
6
|
+
* size → small | default | large
|
|
7
|
+
* state → default | hover | focus | disabled (interaction-driven)
|
|
8
|
+
*
|
|
9
|
+
* Track/thumb sizes come from the density theme's `toggle` tokens (sizes track
|
|
10
|
+
* the `size` prop; gap tracks density). Colours come from the theme's colour
|
|
11
|
+
* scheme (`scheme.toggle` + `scheme.focusRing`).
|
|
12
|
+
*/
|
|
13
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
14
|
+
export type ToggleSize = 'small' | 'default' | 'large';
|
|
15
|
+
export type ToggleProps = {
|
|
16
|
+
/** On/off state. */
|
|
17
|
+
checked?: boolean;
|
|
18
|
+
/** Change handler — receives the next checked value. */
|
|
19
|
+
onChange?: (checked: boolean) => void;
|
|
20
|
+
/** Optional label rendered beside the switch. */
|
|
21
|
+
children?: string;
|
|
22
|
+
/** Size variant — controls track + thumb size. */
|
|
23
|
+
size?: ToggleSize;
|
|
24
|
+
/** Disables interaction and applies muted styling. */
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
/** Style override for the outer row. */
|
|
27
|
+
style?: StyleProp<ViewStyle>;
|
|
28
|
+
/** Accessibility label — falls back to the label text. */
|
|
29
|
+
accessibilityLabel?: string;
|
|
30
|
+
};
|
|
31
|
+
export declare function Toggle({ checked, onChange, children, size, disabled, style, accessibilityLabel, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
//# sourceMappingURL=Toggle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,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,MAAM,CAAC,EACrB,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,IAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,2CAgGb"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Toggle — on/off switch control.
|
|
4
|
+
*
|
|
5
|
+
* Maps to the Figma <Toggle> component (node 275:9974):
|
|
6
|
+
* checked → boolean
|
|
7
|
+
* size → small | default | large
|
|
8
|
+
* state → default | hover | focus | disabled (interaction-driven)
|
|
9
|
+
*
|
|
10
|
+
* Track/thumb sizes come from the density theme's `toggle` tokens (sizes track
|
|
11
|
+
* the `size` prop; gap tracks density). Colours come from the theme's colour
|
|
12
|
+
* scheme (`scheme.toggle` + `scheme.focusRing`).
|
|
13
|
+
*/
|
|
14
|
+
import { useState, useCallback } from 'react';
|
|
15
|
+
import { Pressable, View, Text, } from 'react-native';
|
|
16
|
+
import { useTheme } from '../../theme';
|
|
17
|
+
import { fontFamily, fontWeight, label } from '../../tokens';
|
|
18
|
+
/** Maps toggle size → label typography scale */
|
|
19
|
+
const LABEL_SCALE = {
|
|
20
|
+
small: 'sm',
|
|
21
|
+
default: 'md',
|
|
22
|
+
large: 'lg',
|
|
23
|
+
};
|
|
24
|
+
export function Toggle({ checked = false, onChange, children, size = 'default', disabled = false, style, accessibilityLabel, }) {
|
|
25
|
+
const { components, scheme } = useTheme();
|
|
26
|
+
const toggleColors = scheme.toggle;
|
|
27
|
+
const tokens = components.toggle;
|
|
28
|
+
const sizeTokens = tokens[size];
|
|
29
|
+
const labelTokens = label[LABEL_SCALE[size]];
|
|
30
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
31
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
32
|
+
const handlePress = useCallback(() => {
|
|
33
|
+
if (!disabled)
|
|
34
|
+
onChange?.(!checked);
|
|
35
|
+
}, [disabled, onChange, checked]);
|
|
36
|
+
// Resolve track fill.
|
|
37
|
+
let trackBg;
|
|
38
|
+
if (disabled) {
|
|
39
|
+
trackBg = checked
|
|
40
|
+
? toggleColors.track.disabledOn
|
|
41
|
+
: toggleColors.track.disabledOff;
|
|
42
|
+
}
|
|
43
|
+
else if (checked) {
|
|
44
|
+
trackBg = isHovered ? toggleColors.track.onHover : toggleColors.track.on;
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
trackBg =
|
|
48
|
+
isHovered || isFocused
|
|
49
|
+
? toggleColors.track.offHover
|
|
50
|
+
: toggleColors.track.off;
|
|
51
|
+
}
|
|
52
|
+
const showFocusRing = isFocused && !disabled;
|
|
53
|
+
return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityRole: "switch", accessibilityLabel: accessibilityLabel || children, accessibilityState: { checked, disabled }, style: [
|
|
54
|
+
{
|
|
55
|
+
flexDirection: 'row',
|
|
56
|
+
alignItems: 'flex-start',
|
|
57
|
+
gap: tokens.gap,
|
|
58
|
+
},
|
|
59
|
+
style,
|
|
60
|
+
], children: [_jsx(View, { style: {
|
|
61
|
+
width: sizeTokens.trackWidth,
|
|
62
|
+
height: sizeTokens.trackHeight,
|
|
63
|
+
borderRadius: sizeTokens.trackHeight / 2,
|
|
64
|
+
backgroundColor: trackBg,
|
|
65
|
+
padding: tokens.thumbOffset,
|
|
66
|
+
flexDirection: 'row',
|
|
67
|
+
justifyContent: checked ? 'flex-end' : 'flex-start',
|
|
68
|
+
alignItems: 'center',
|
|
69
|
+
borderWidth: showFocusRing ? tokens.focusRingWidth : 0,
|
|
70
|
+
borderColor: showFocusRing
|
|
71
|
+
? scheme.focusRing.color
|
|
72
|
+
: 'transparent',
|
|
73
|
+
}, children: _jsx(View, { style: {
|
|
74
|
+
width: sizeTokens.thumbSize,
|
|
75
|
+
height: sizeTokens.thumbSize,
|
|
76
|
+
borderRadius: sizeTokens.thumbSize / 2,
|
|
77
|
+
backgroundColor: toggleColors.thumb,
|
|
78
|
+
} }) }), children ? (_jsx(Text, { style: {
|
|
79
|
+
fontFamily: fontFamily.sans,
|
|
80
|
+
fontWeight: fontWeight.medium,
|
|
81
|
+
fontSize: labelTokens.fontSize,
|
|
82
|
+
lineHeight: labelTokens.lineHeight,
|
|
83
|
+
letterSpacing: labelTokens.letterSpacing,
|
|
84
|
+
color: disabled
|
|
85
|
+
? toggleColors.label.disabled
|
|
86
|
+
: toggleColors.label.default,
|
|
87
|
+
}, selectable: false, children: children })) : null] }));
|
|
88
|
+
}
|
|
89
|
+
//# sourceMappingURL=Toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AAEH,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,GAGL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAqB7D,gDAAgD;AAChD,MAAM,WAAW,GAA2C;IAC1D,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,kBAAkB,GACN;IACZ,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC1C,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;IACnC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACjC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,QAAQ;YAAE,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAElC,sBAAsB;IACtB,IAAI,OAAe,CAAC;IACpB,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,GAAG,OAAO;YACf,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU;YAC/B,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC;IACrC,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;IAC3E,CAAC;SAAM,CAAC;QACN,OAAO;YACL,SAAS,IAAI,SAAS;gBACpB,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ;gBAC7B,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC;IAC/B,CAAC;IAED,MAAM,aAAa,GAAG,SAAS,IAAI,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,MAAC,SAAS,IACR,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACnC,UAAU,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EACjC,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,kBAAkB,IAAI,QAAQ,EAClD,kBAAkB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EACzC,KAAK,EAAE;YACL;gBACE,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,YAAY;gBACxB,GAAG,EAAE,MAAM,CAAC,GAAG;aAChB;YACD,KAAK;SACN,aAED,KAAC,IAAI,IACH,KAAK,EAAE;oBACL,KAAK,EAAE,UAAU,CAAC,UAAU;oBAC5B,MAAM,EAAE,UAAU,CAAC,WAAW;oBAC9B,YAAY,EAAE,UAAU,CAAC,WAAW,GAAG,CAAC;oBACxC,eAAe,EAAE,OAAO;oBACxB,OAAO,EAAE,MAAM,CAAC,WAAW;oBAC3B,aAAa,EAAE,KAAK;oBACpB,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACnD,UAAU,EAAE,QAAQ;oBACpB,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;oBACtD,WAAW,EAAE,aAAa;wBACxB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;wBACxB,CAAC,CAAC,aAAa;iBAClB,YAED,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,KAAK,EAAE,UAAU,CAAC,SAAS;wBAC3B,MAAM,EAAE,UAAU,CAAC,SAAS;wBAC5B,YAAY,EAAE,UAAU,CAAC,SAAS,GAAG,CAAC;wBACtC,eAAe,EAAE,YAAY,CAAC,KAAK;qBACpC,GACD,GACG,EAEN,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,IAAI,IACH,KAAK,EAAE;oBACL,UAAU,EAAE,UAAU,CAAC,IAAI;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,QAAQ,EAAE,WAAW,CAAC,QAAQ;oBAC9B,UAAU,EAAE,WAAW,CAAC,UAAU;oBAClC,aAAa,EAAE,WAAW,CAAC,aAAa;oBACxC,KAAK,EAAE,QAAQ;wBACb,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ;wBAC7B,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO;iBAC/B,EACD,UAAU,EAAE,KAAK,YAEhB,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,IACE,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAqC,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tooltip — a small dark label that points at an anchor with an arrow.
|
|
3
|
+
*
|
|
4
|
+
* Maps to the Figma <Tooltip> component (node 307:4225):
|
|
5
|
+
* direction → top | bottom | left | right (the edge the arrow sits on)
|
|
6
|
+
* size → small | default (drives padding + type scale)
|
|
7
|
+
* hasArrow → toggles the directional arrow
|
|
8
|
+
*
|
|
9
|
+
* This is the presentational bubble only: it renders the dark surface
|
|
10
|
+
* (neutral/bold) with white text and an optional arrow. Positioning relative
|
|
11
|
+
* to a trigger is the caller's job — wrap it in a positioned container or pass
|
|
12
|
+
* a `style` with absolute coordinates.
|
|
13
|
+
*
|
|
14
|
+
* Padding comes from the `tooltip` density theme (size × density); the radius
|
|
15
|
+
* and arrow size are constant across densities.
|
|
16
|
+
*/
|
|
17
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
18
|
+
export type TooltipSize = 'small' | 'default';
|
|
19
|
+
export type TooltipDirection = 'top' | 'bottom' | 'left' | 'right';
|
|
20
|
+
export type TooltipProps = {
|
|
21
|
+
/** The tooltip label text. */
|
|
22
|
+
children: string;
|
|
23
|
+
/** The edge the arrow sits on (points away from the bubble). */
|
|
24
|
+
direction?: TooltipDirection;
|
|
25
|
+
/** Size variant — controls padding and typography scale. */
|
|
26
|
+
size?: TooltipSize;
|
|
27
|
+
/** Show the directional arrow. Defaults to true. */
|
|
28
|
+
hasArrow?: boolean;
|
|
29
|
+
/** Outer style — use for positioning (absolute coords, margin). */
|
|
30
|
+
style?: StyleProp<ViewStyle>;
|
|
31
|
+
/** Accessibility label — falls back to the children text. */
|
|
32
|
+
accessibilityLabel?: string;
|
|
33
|
+
};
|
|
34
|
+
export declare function Tooltip({ children, direction, size, hasArrow, style, accessibilityLabel, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ1E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,4DAA4D;IAC5D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AA2CF,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAoB,EACpB,IAAc,EACd,QAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,YAAY,2CAgDd"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { View, Text } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../theme';
|
|
4
|
+
import { fontFamily, fontWeight, label } from '../../tokens';
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
// Constants
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
/** Maps tooltip size → label typography scale */
|
|
9
|
+
const LABEL_SCALE = {
|
|
10
|
+
small: 'sm',
|
|
11
|
+
default: 'md',
|
|
12
|
+
};
|
|
13
|
+
// ---------------------------------------------------------------------------
|
|
14
|
+
// Component
|
|
15
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
/** Positions the rotated-square arrow on the requested edge, centred. */
|
|
17
|
+
function arrowStyle(direction, arrowSize, backgroundColor) {
|
|
18
|
+
const half = arrowSize / 2;
|
|
19
|
+
const base = {
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
width: arrowSize,
|
|
22
|
+
height: arrowSize,
|
|
23
|
+
backgroundColor,
|
|
24
|
+
transform: [{ rotate: '45deg' }],
|
|
25
|
+
};
|
|
26
|
+
switch (direction) {
|
|
27
|
+
case 'top':
|
|
28
|
+
return { ...base, top: -half, left: '50%', marginLeft: -half };
|
|
29
|
+
case 'left':
|
|
30
|
+
return { ...base, left: -half, top: '50%', marginTop: -half };
|
|
31
|
+
case 'right':
|
|
32
|
+
return { ...base, right: -half, top: '50%', marginTop: -half };
|
|
33
|
+
case 'bottom':
|
|
34
|
+
default:
|
|
35
|
+
return { ...base, bottom: -half, left: '50%', marginLeft: -half };
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
export function Tooltip({ children, direction = 'bottom', size = 'small', hasArrow = true, style, accessibilityLabel, }) {
|
|
39
|
+
const { components, scheme } = useTheme();
|
|
40
|
+
const tokens = components.tooltip;
|
|
41
|
+
const sizeTokens = tokens[size];
|
|
42
|
+
const labelTokens = label[LABEL_SCALE[size]];
|
|
43
|
+
/** Surface = neutral/bold (dark) — bg #374151, fg #FFFFFF. */
|
|
44
|
+
const SURFACE = scheme.intents.neutral.bold.default;
|
|
45
|
+
return (_jsxs(View, { accessibilityRole: "text", accessibilityLabel: accessibilityLabel || children, style: [
|
|
46
|
+
{
|
|
47
|
+
alignSelf: 'flex-start',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
justifyContent: 'center',
|
|
50
|
+
backgroundColor: SURFACE.bg,
|
|
51
|
+
borderRadius: tokens.borderRadius,
|
|
52
|
+
paddingHorizontal: sizeTokens.paddingX,
|
|
53
|
+
paddingVertical: sizeTokens.paddingY,
|
|
54
|
+
},
|
|
55
|
+
style,
|
|
56
|
+
], children: [hasArrow ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: arrowStyle(direction, tokens.arrowSize, SURFACE.bg) })) : null, _jsx(Text, { selectable: false, style: {
|
|
57
|
+
fontFamily: fontFamily.sans,
|
|
58
|
+
fontWeight: fontWeight.medium,
|
|
59
|
+
fontSize: labelTokens.fontSize,
|
|
60
|
+
lineHeight: labelTokens.lineHeight,
|
|
61
|
+
letterSpacing: labelTokens.letterSpacing,
|
|
62
|
+
color: SURFACE.fg,
|
|
63
|
+
}, children: children })] }));
|
|
64
|
+
}
|
|
65
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,gBAAgB,GACtB,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,GAIR,MAAM,WAAW,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,22 @@
|
|
|
1
|
-
export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, fontFamily, fontWeight, label, title, body, caption, type IntentName, type ProminenceName, type StateName, type LabelSize, } from './tokens';
|
|
2
|
-
export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type DeepPartial, } from './theme';
|
|
1
|
+
export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, } from './tokens';
|
|
2
|
+
export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type DeepPartial, } from './theme';
|
|
3
3
|
export { Button, type ButtonProps, type ButtonSize } from './components/Button';
|
|
4
4
|
export { Icon, type IconProps } from './components/Icon';
|
|
5
5
|
export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';
|
|
6
6
|
export { Select, SelectOption, SelectGroup, SelectSeparator, SelectTag, SelectContent as SelectDropdown, type SelectProps, type SelectSize, type SelectType, type SelectOptionProps, type SelectGroupProps, type SelectTagProps, type SelectContentProps, } from './components/Select';
|
|
7
|
+
export { List, ListItem, ListSubheader, ListDivider, type ListProps, type ListItemProps, type ListSubheaderProps, type ListDividerProps, } from './components/List';
|
|
8
|
+
export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxChecked, } from './components/Checkbox';
|
|
9
|
+
export { Alert, type AlertProps, type AlertSize, type AlertVariant, } from './components/Alert';
|
|
10
|
+
export { Toggle, type ToggleProps, type ToggleSize } from './components/Toggle';
|
|
11
|
+
export { Card, type CardProps, type CardSize, type CardVariant, } from './components/Card';
|
|
12
|
+
export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, } from './components/Badge';
|
|
13
|
+
export { Input, type InputProps, type InputSize } from './components/Input';
|
|
14
|
+
export { Radio, RadioGroup, type RadioProps, type RadioGroupProps, type RadioSize, } from './components/Radio';
|
|
15
|
+
export { Toast, type ToastProps, type ToastSize, } from './components/Toast';
|
|
16
|
+
export { Chip, type ChipProps, type ChipSize, type ChipVariant, } from './components/Chip';
|
|
17
|
+
export { Divider, type DividerProps, type DividerOrientation, } from './components/Divider';
|
|
18
|
+
export { Avatar, type AvatarProps, type AvatarSize, type AvatarType, } from './components/Avatar';
|
|
19
|
+
export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, } from './components/Popover';
|
|
20
|
+
export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/Skeleton';
|
|
21
|
+
export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';
|
|
7
22
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,KAAK,KAAK,EACV,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,MAAM,EACN,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,SAAS,EACT,aAAa,IAAI,cAAc,EAC/B,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Cast UI — Cross-platform design system component library
|
|
2
2
|
//
|
|
3
3
|
// Tokens
|
|
4
|
-
export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, fontFamily, fontWeight, label, title, body, caption, } from './tokens';
|
|
4
|
+
export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, caption, } from './tokens';
|
|
5
5
|
// Theme
|
|
6
6
|
export { ThemeProvider, useTheme, themes, } from './theme';
|
|
7
7
|
// Components
|
|
@@ -9,4 +9,19 @@ export { Button } from './components/Button';
|
|
|
9
9
|
export { Icon } from './components/Icon';
|
|
10
10
|
export { Dialog, DialogContent, } from './components/Dialog';
|
|
11
11
|
export { Select, SelectOption, SelectGroup, SelectSeparator, SelectTag, SelectContent as SelectDropdown, } from './components/Select';
|
|
12
|
+
export { List, ListItem, ListSubheader, ListDivider, } from './components/List';
|
|
13
|
+
export { Checkbox, } from './components/Checkbox';
|
|
14
|
+
export { Alert, } from './components/Alert';
|
|
15
|
+
export { Toggle } from './components/Toggle';
|
|
16
|
+
export { Card, } from './components/Card';
|
|
17
|
+
export { Badge, } from './components/Badge';
|
|
18
|
+
export { Input } from './components/Input';
|
|
19
|
+
export { Radio, RadioGroup, } from './components/Radio';
|
|
20
|
+
export { Toast, } from './components/Toast';
|
|
21
|
+
export { Chip, } from './components/Chip';
|
|
22
|
+
export { Divider, } from './components/Divider';
|
|
23
|
+
export { Avatar, } from './components/Avatar';
|
|
24
|
+
export { Popover, } from './components/Popover';
|
|
25
|
+
export { Skeleton, } from './components/Skeleton';
|
|
26
|
+
export { Tooltip, } from './components/Tooltip';
|
|
12
27
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,EAAE;AACF,SAAS;AACT,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,EAAE;AACF,SAAS;AACT,OAAO,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,GAOR,MAAM,UAAU,CAAC;AAElB,QAAQ;AACR,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,GA0CP,MAAM,SAAS,CAAC;AAEjB,aAAa;AACb,OAAO,EAAE,MAAM,EAAqC,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAkB,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,MAAM,EACN,aAAa,GAKd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,SAAS,EACT,aAAa,IAAI,cAAc,GAQhC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,WAAW,GAKZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,QAAQ,GAIT,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,GAIN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAqC,MAAM,qBAAqB,CAAC;AAChF,OAAO,EACL,IAAI,GAIL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,GAIN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAmC,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EACL,KAAK,EACL,UAAU,GAIX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,KAAK,GAGN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,IAAI,GAIL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,OAAO,GAGR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,MAAM,GAIP,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,OAAO,GAIR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,QAAQ,GAGT,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,OAAO,GAIR,MAAM,sBAAsB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* ThemeProvider — wraps your app to enable density theming
|
|
2
|
+
* ThemeProvider — wraps your app to enable density theming, light/dark colour
|
|
3
|
+
* modes, and colour customisation.
|
|
3
4
|
*
|
|
4
5
|
* @example Basic usage — switch density
|
|
5
6
|
* ```tsx
|
|
@@ -10,6 +11,13 @@
|
|
|
10
11
|
* </ThemeProvider>
|
|
11
12
|
* ```
|
|
12
13
|
*
|
|
14
|
+
* @example Dark mode
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <ThemeProvider colorMode="dark">
|
|
17
|
+
* <App />
|
|
18
|
+
* </ThemeProvider>
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
13
21
|
* @example Rebrand — override intent colours
|
|
14
22
|
* ```tsx
|
|
15
23
|
* <ThemeProvider
|
|
@@ -29,27 +37,36 @@
|
|
|
29
37
|
* ```
|
|
30
38
|
*/
|
|
31
39
|
import React from 'react';
|
|
32
|
-
import { intentColors as defaultIntentColors
|
|
33
|
-
import type { IntentName } from '../tokens/colors';
|
|
40
|
+
import { intentColors as defaultIntentColors } from '../tokens/colors';
|
|
41
|
+
import type { ColorMode, ColorScheme, IntentName } from '../tokens/colors';
|
|
34
42
|
import type { DensityTheme, ComponentTokens, DeepPartial } from './types';
|
|
35
43
|
type IntentColorMap = typeof defaultIntentColors;
|
|
36
44
|
export type Theme = {
|
|
37
45
|
density: DensityTheme;
|
|
38
46
|
components: ComponentTokens;
|
|
47
|
+
/** Active colour mode — light or dark. */
|
|
48
|
+
colorMode: ColorMode;
|
|
49
|
+
/** Full resolved colour scheme for the active mode (overrides applied). */
|
|
50
|
+
scheme: ColorScheme;
|
|
51
|
+
/** Intent colours of the active scheme — kept for backwards compatibility. */
|
|
39
52
|
colors: IntentColorMap;
|
|
40
|
-
|
|
53
|
+
/** Disabled colours of the active scheme — kept for backwards compatibility. */
|
|
54
|
+
disabledColors: ColorScheme['disabled'];
|
|
41
55
|
};
|
|
42
56
|
export type ThemeProviderProps = {
|
|
43
57
|
/** Density theme — controls spacing and padding across all components. */
|
|
44
58
|
density?: DensityTheme;
|
|
59
|
+
/** Colour mode — switches between the light and dark colour schemes. */
|
|
60
|
+
colorMode?: ColorMode;
|
|
45
61
|
/**
|
|
46
|
-
* Partial colour overrides — deep-merged with the
|
|
47
|
-
* Only provide the values you want to change; everything else
|
|
62
|
+
* Partial colour overrides — deep-merged with the active scheme's intent
|
|
63
|
+
* colours. Only provide the values you want to change; everything else
|
|
64
|
+
* stays default.
|
|
48
65
|
*/
|
|
49
66
|
colors?: Partial<Record<IntentName, DeepPartial<IntentColorMap[IntentName]>>>;
|
|
50
67
|
children: React.ReactNode;
|
|
51
68
|
};
|
|
52
|
-
export declare function ThemeProvider({ density, colors, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
export declare function ThemeProvider({ density, colorMode, colors, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
53
70
|
/**
|
|
54
71
|
* Access the current theme — density tokens, intent colours, and component tokens.
|
|
55
72
|
* Must be called within a ThemeProvider; falls back to the "default" density if not.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAEL,YAAY,IAAI,mBAAmB,EACpC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAM1E,KAAK,cAAc,GAAG,OAAO,mBAAmB,CAAC;AAEjD,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,EAAE,SAAS,CAAC;IACrB,2EAA2E;IAC3E,MAAM,EAAE,WAAW,CAAC;IACpB,8EAA8E;IAC9E,MAAM,EAAE,cAAc,CAAC;IACvB,gFAAgF;IAChF,cAAc,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AAoDF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,wEAAwE;IACxE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,OAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,2CAuBpB;AAMD;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,KAAK,CAEhC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
|
-
* ThemeProvider — wraps your app to enable density theming
|
|
3
|
+
* ThemeProvider — wraps your app to enable density theming, light/dark colour
|
|
4
|
+
* modes, and colour customisation.
|
|
4
5
|
*
|
|
5
6
|
* @example Basic usage — switch density
|
|
6
7
|
* ```tsx
|
|
@@ -11,6 +12,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
11
12
|
* </ThemeProvider>
|
|
12
13
|
* ```
|
|
13
14
|
*
|
|
15
|
+
* @example Dark mode
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <ThemeProvider colorMode="dark">
|
|
18
|
+
* <App />
|
|
19
|
+
* </ThemeProvider>
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
14
22
|
* @example Rebrand — override intent colours
|
|
15
23
|
* ```tsx
|
|
16
24
|
* <ThemeProvider
|
|
@@ -31,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
31
39
|
*/
|
|
32
40
|
import { createContext, useContext, useMemo } from 'react';
|
|
33
41
|
import { themes } from './themes';
|
|
34
|
-
import {
|
|
42
|
+
import { colorSchemes, } from '../tokens/colors';
|
|
35
43
|
// ---------------------------------------------------------------------------
|
|
36
44
|
// Deep merge utility (for partial colour overrides)
|
|
37
45
|
// ---------------------------------------------------------------------------
|
|
@@ -61,22 +69,30 @@ function deepMerge(base, overrides) {
|
|
|
61
69
|
const defaultTheme = {
|
|
62
70
|
density: 'default',
|
|
63
71
|
components: themes.default,
|
|
64
|
-
|
|
65
|
-
|
|
72
|
+
colorMode: 'light',
|
|
73
|
+
scheme: colorSchemes.light,
|
|
74
|
+
colors: colorSchemes.light.intents,
|
|
75
|
+
disabledColors: colorSchemes.light.disabled,
|
|
66
76
|
};
|
|
67
77
|
const ThemeContext = createContext(defaultTheme);
|
|
68
|
-
export function ThemeProvider({ density = 'default', colors, children, }) {
|
|
78
|
+
export function ThemeProvider({ density = 'default', colorMode = 'light', colors, children, }) {
|
|
69
79
|
const theme = useMemo(() => {
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
80
|
+
const baseScheme = colorSchemes[colorMode];
|
|
81
|
+
const resolvedIntents = colors
|
|
82
|
+
? deepMerge(baseScheme.intents, colors)
|
|
83
|
+
: baseScheme.intents;
|
|
84
|
+
const scheme = colors
|
|
85
|
+
? { ...baseScheme, intents: resolvedIntents }
|
|
86
|
+
: baseScheme;
|
|
73
87
|
return {
|
|
74
88
|
density,
|
|
75
89
|
components: themes[density],
|
|
76
|
-
|
|
77
|
-
|
|
90
|
+
colorMode,
|
|
91
|
+
scheme,
|
|
92
|
+
colors: resolvedIntents,
|
|
93
|
+
disabledColors: scheme.disabled,
|
|
78
94
|
};
|
|
79
|
-
}, [density, colors]);
|
|
95
|
+
}, [density, colorMode, colors]);
|
|
80
96
|
return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
|
|
81
97
|
}
|
|
82
98
|
// ---------------------------------------------------------------------------
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,YAAY,GAEb,MAAM,kBAAkB,CAAC;AAuB1B,8EAA8E;AAC9E,oDAAoD;AACpD,8EAA8E;AAE9E,SAAS,SAAS,CAChB,IAAO,EACP,SAAkC;IAElC,MAAM,MAAM,GAA4B,EAAE,GAAG,IAAI,EAAE,CAAC;IACpD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;QACzC,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,aAAa,IAAI,GAAG,KAAK,WAAW;YAAE,SAAS;QAClF,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;QAC/B,IACE,OAAO;YACP,OAAO,OAAO,KAAK,QAAQ;YAC3B,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YACvB,OAAO;YACP,OAAO,OAAO,KAAK,QAAQ,EAC3B,CAAC;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,SAAS,CACrB,OAAkC,EAClC,OAAkC,CACnC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACxB,CAAC;IACH,CAAC;IACD,OAAO,MAAW,CAAC;AACrB,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,YAAY,GAAU;IAC1B,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,MAAM,CAAC,OAAO;IAC1B,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,YAAY,CAAC,KAAK;IAC1B,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,OAAO;IAClC,cAAc,EAAE,YAAY,CAAC,KAAK,CAAC,QAAQ;CAC5C,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAQ,YAAY,CAAC,CAAC;AAoBxD,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,OAAO,EACnB,MAAM,EACN,QAAQ,GACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAQ,GAAG,EAAE;QAChC,MAAM,UAAU,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,eAAe,GAAG,MAAM;YAC5B,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAiC,CAAC;YAClE,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;QACvB,MAAM,MAAM,GAAgB,MAAM;YAChC,CAAC,CAAC,EAAE,GAAG,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;YAC7C,CAAC,CAAC,UAAU,CAAC;QAEf,OAAO;YACL,OAAO;YACP,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC;YAC3B,SAAS;YACT,MAAM;YACN,MAAM,EAAE,eAAiC;YACzC,cAAc,EAAE,MAAM,CAAC,QAAQ;SAChC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEjC,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CACxE,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E;;;GAGG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC"}
|