@frosted-ui/react-native 0.0.1-canary.100
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 +160 -0
- package/dist/components/accordion.d.ts +21 -0
- package/dist/components/accordion.d.ts.map +1 -0
- package/dist/components/accordion.js +94 -0
- package/dist/components/accordion.js.map +1 -0
- package/dist/components/alert-dialog.d.ts +67 -0
- package/dist/components/alert-dialog.d.ts.map +1 -0
- package/dist/components/alert-dialog.js +170 -0
- package/dist/components/alert-dialog.js.map +1 -0
- package/dist/components/aspect-ratio.d.ts +4 -0
- package/dist/components/aspect-ratio.d.ts.map +1 -0
- package/dist/components/aspect-ratio.js +4 -0
- package/dist/components/aspect-ratio.js.map +1 -0
- package/dist/components/avatar.d.ts +23 -0
- package/dist/components/avatar.d.ts.map +1 -0
- package/dist/components/avatar.js +128 -0
- package/dist/components/avatar.js.map +1 -0
- package/dist/components/badge.d.ts +15 -0
- package/dist/components/badge.d.ts.map +1 -0
- package/dist/components/badge.js +81 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/button.d.ts +14 -0
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +81 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/callout.d.ts +23 -0
- package/dist/components/callout.d.ts.map +1 -0
- package/dist/components/callout.js +128 -0
- package/dist/components/callout.js.map +1 -0
- package/dist/components/card.d.ts +9 -0
- package/dist/components/card.d.ts.map +1 -0
- package/dist/components/card.js +41 -0
- package/dist/components/card.js.map +1 -0
- package/dist/components/checkbox.d.ts +12 -0
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +100 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/circular-progress.d.ts +21 -0
- package/dist/components/circular-progress.d.ts.map +1 -0
- package/dist/components/circular-progress.js +78 -0
- package/dist/components/circular-progress.js.map +1 -0
- package/dist/components/code.d.ts +18 -0
- package/dist/components/code.d.ts.map +1 -0
- package/dist/components/code.js +83 -0
- package/dist/components/code.js.map +1 -0
- package/dist/components/context-menu.d.ts +65 -0
- package/dist/components/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu.js +441 -0
- package/dist/components/context-menu.js.map +1 -0
- package/dist/components/dialog.d.ts +49 -0
- package/dist/components/dialog.d.ts.map +1 -0
- package/dist/components/dialog.js +141 -0
- package/dist/components/dialog.js.map +1 -0
- package/dist/components/dropdown-menu.d.ts +65 -0
- package/dist/components/dropdown-menu.d.ts.map +1 -0
- package/dist/components/dropdown-menu.js +441 -0
- package/dist/components/dropdown-menu.js.map +1 -0
- package/dist/components/heading.d.ts +15 -0
- package/dist/components/heading.d.ts.map +1 -0
- package/dist/components/heading.js +8 -0
- package/dist/components/heading.js.map +1 -0
- package/dist/components/hover-card.d.ts +24 -0
- package/dist/components/hover-card.d.ts.map +1 -0
- package/dist/components/hover-card.js +49 -0
- package/dist/components/hover-card.js.map +1 -0
- package/dist/components/icon-button.d.ts +14 -0
- package/dist/components/icon-button.d.ts.map +1 -0
- package/dist/components/icon-button.js +81 -0
- package/dist/components/icon-button.js.map +1 -0
- package/dist/components/icon.d.ts +27 -0
- package/dist/components/icon.d.ts.map +1 -0
- package/dist/components/icon.js +30 -0
- package/dist/components/icon.js.map +1 -0
- package/dist/components/index.d.ts +37 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +49 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/label.d.ts +8 -0
- package/dist/components/label.d.ts.map +1 -0
- package/dist/components/label.js +26 -0
- package/dist/components/label.js.map +1 -0
- package/dist/components/link.d.ts +19 -0
- package/dist/components/link.d.ts.map +1 -0
- package/dist/components/link.js +68 -0
- package/dist/components/link.js.map +1 -0
- package/dist/components/list.d.ts +37 -0
- package/dist/components/list.d.ts.map +1 -0
- package/dist/components/list.js +112 -0
- package/dist/components/list.js.map +1 -0
- package/dist/components/native-only-animated-view.d.ts +219 -0
- package/dist/components/native-only-animated-view.d.ts.map +1 -0
- package/dist/components/native-only-animated-view.js +26 -0
- package/dist/components/native-only-animated-view.js.map +1 -0
- package/dist/components/popover.d.ts +24 -0
- package/dist/components/popover.d.ts.map +1 -0
- package/dist/components/popover.js +52 -0
- package/dist/components/popover.js.map +1 -0
- package/dist/components/progress.d.ts +14 -0
- package/dist/components/progress.d.ts.map +1 -0
- package/dist/components/progress.js +52 -0
- package/dist/components/progress.js.map +1 -0
- package/dist/components/radio-group.d.ts +18 -0
- package/dist/components/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group.js +122 -0
- package/dist/components/radio-group.js.map +1 -0
- package/dist/components/segmented-control.d.ts +21 -0
- package/dist/components/segmented-control.d.ts.map +1 -0
- package/dist/components/segmented-control.js +113 -0
- package/dist/components/segmented-control.js.map +1 -0
- package/dist/components/select.d.ts +58 -0
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +491 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/separator.d.ts +12 -0
- package/dist/components/separator.d.ts.map +1 -0
- package/dist/components/separator.js +47 -0
- package/dist/components/separator.js.map +1 -0
- package/dist/components/skeleton.d.ts +28 -0
- package/dist/components/skeleton.d.ts.map +1 -0
- package/dist/components/skeleton.js +137 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/slider.d.ts +30 -0
- package/dist/components/slider.d.ts.map +1 -0
- package/dist/components/slider.js +248 -0
- package/dist/components/slider.js.map +1 -0
- package/dist/components/spinner.d.ts +17 -0
- package/dist/components/spinner.d.ts.map +1 -0
- package/dist/components/spinner.js +199 -0
- package/dist/components/spinner.js.map +1 -0
- package/dist/components/switch.d.ts +12 -0
- package/dist/components/switch.d.ts.map +1 -0
- package/dist/components/switch.js +188 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/tabs.d.ts +26 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +125 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/text-area.d.ts +16 -0
- package/dist/components/text-area.d.ts.map +1 -0
- package/dist/components/text-area.js +121 -0
- package/dist/components/text-area.js.map +1 -0
- package/dist/components/text-field.d.ts +35 -0
- package/dist/components/text-field.d.ts.map +1 -0
- package/dist/components/text-field.js +300 -0
- package/dist/components/text-field.js.map +1 -0
- package/dist/components/text.d.ts +23 -0
- package/dist/components/text.d.ts.map +1 -0
- package/dist/components/text.js +44 -0
- package/dist/components/text.js.map +1 -0
- package/dist/components/tooltip.d.ts +24 -0
- package/dist/components/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip.js +63 -0
- package/dist/components/tooltip.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +18 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/button-styles.d.ts +13 -0
- package/dist/lib/button-styles.d.ts.map +1 -0
- package/dist/lib/button-styles.js +115 -0
- package/dist/lib/button-styles.js.map +1 -0
- package/dist/lib/color-utils.d.ts +26 -0
- package/dist/lib/color-utils.d.ts.map +1 -0
- package/dist/lib/color-utils.js +48 -0
- package/dist/lib/color-utils.js.map +1 -0
- package/dist/lib/dialog-styles.d.ts +42 -0
- package/dist/lib/dialog-styles.d.ts.map +1 -0
- package/dist/lib/dialog-styles.js +162 -0
- package/dist/lib/dialog-styles.js.map +1 -0
- package/dist/lib/full-window-overlay.d.ts +11 -0
- package/dist/lib/full-window-overlay.d.ts.map +1 -0
- package/dist/lib/full-window-overlay.js +16 -0
- package/dist/lib/full-window-overlay.js.map +1 -0
- package/dist/lib/panel-styles.d.ts +32 -0
- package/dist/lib/panel-styles.d.ts.map +1 -0
- package/dist/lib/panel-styles.js +96 -0
- package/dist/lib/panel-styles.js.map +1 -0
- package/dist/lib/text-input-styles.d.ts +36 -0
- package/dist/lib/text-input-styles.d.ts.map +1 -0
- package/dist/lib/text-input-styles.js +88 -0
- package/dist/lib/text-input-styles.js.map +1 -0
- package/dist/lib/theme-context.d.ts +80 -0
- package/dist/lib/theme-context.d.ts.map +1 -0
- package/dist/lib/theme-context.js +97 -0
- package/dist/lib/theme-context.js.map +1 -0
- package/dist/lib/theme-tokens.d.ts +222 -0
- package/dist/lib/theme-tokens.d.ts.map +1 -0
- package/dist/lib/theme-tokens.js +158 -0
- package/dist/lib/theme-tokens.js.map +1 -0
- package/dist/lib/theme.d.ts +40 -0
- package/dist/lib/theme.d.ts.map +1 -0
- package/dist/lib/theme.js +194 -0
- package/dist/lib/theme.js.map +1 -0
- package/dist/lib/types.d.ts +18 -0
- package/dist/lib/types.d.ts.map +1 -0
- package/dist/lib/types.js +2 -0
- package/dist/lib/types.js.map +1 -0
- package/dist/lib/use-theme-tokens.d.ts +593 -0
- package/dist/lib/use-theme-tokens.d.ts.map +1 -0
- package/dist/lib/use-theme-tokens.js +44 -0
- package/dist/lib/use-theme-tokens.js.map +1 -0
- package/docs/llm/COLOR_SYSTEM.md +799 -0
- package/docs/llm/COMPONENTS.md +1329 -0
- package/docs/llm/DESIGN_PATTERNS.md +2567 -0
- package/docs/llm/README.md +118 -0
- package/docs/llm/TYPOGRAPHY.md +516 -0
- package/package.json +106 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Color } from '../lib/types';
|
|
2
|
+
import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
type RadioSize = '1' | '2' | '3';
|
|
5
|
+
type RadioGroupRootProps = RadioGroupPrimitive.RootProps & {
|
|
6
|
+
size?: RadioSize;
|
|
7
|
+
color?: Color;
|
|
8
|
+
};
|
|
9
|
+
declare function RadioGroupRoot({ size, color, value, ...props }: RadioGroupRootProps): React.JSX.Element;
|
|
10
|
+
type RadioGroupItemProps = Omit<RadioGroupPrimitive.ItemProps, 'children'>;
|
|
11
|
+
declare function RadioGroupItem({ value, disabled, onFocus, onBlur, ...props }: RadioGroupItemProps): React.JSX.Element;
|
|
12
|
+
declare const RadioGroup: {
|
|
13
|
+
Root: typeof RadioGroupRoot;
|
|
14
|
+
Item: typeof RadioGroupItem;
|
|
15
|
+
};
|
|
16
|
+
export { RadioGroup, RadioGroupItem, RadioGroupRoot };
|
|
17
|
+
export type { RadioGroupItemProps, RadioGroupRootProps };
|
|
18
|
+
//# sourceMappingURL=radio-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,KAAK,mBAAmB,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AA4BjC,KAAK,mBAAmB,GAAG,mBAAmB,CAAC,SAAS,GAAG;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,cAAc,CAAC,EAAE,IAAU,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,qBAWlF;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,qBAgH1F;AAED,QAAA,MAAM,UAAU;;;CAGf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC;AACtD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
2
|
+
import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Platform, View } from 'react-native';
|
|
5
|
+
const RadioGroupContext = React.createContext({
|
|
6
|
+
size: '2',
|
|
7
|
+
color: 'accent',
|
|
8
|
+
});
|
|
9
|
+
// Size styles from CSS:
|
|
10
|
+
// Size 1: --radio-group-item-size: var(--space-4) = 16px
|
|
11
|
+
// Size 2: --radio-group-item-size: calc(var(--space-4) * 1.25) = 20px
|
|
12
|
+
// Size 3: --radio-group-item-size: var(--space-5) = 24px
|
|
13
|
+
function getItemSize(size) {
|
|
14
|
+
switch (size) {
|
|
15
|
+
case '1':
|
|
16
|
+
return 16;
|
|
17
|
+
case '2':
|
|
18
|
+
return 20;
|
|
19
|
+
case '3':
|
|
20
|
+
return 24;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function RadioGroupRoot({ size = '2', color, value, ...props }) {
|
|
24
|
+
const contextValue = React.useMemo(() => ({ size, color: color ?? 'accent', value }), [size, color, value]);
|
|
25
|
+
return (<RadioGroupContext.Provider value={contextValue}>
|
|
26
|
+
<RadioGroupPrimitive.Root value={value} {...props}/>
|
|
27
|
+
</RadioGroupContext.Provider>);
|
|
28
|
+
}
|
|
29
|
+
function RadioGroupItem({ value, disabled, onFocus, onBlur, ...props }) {
|
|
30
|
+
const { size, color, value: groupValue } = React.useContext(RadioGroupContext);
|
|
31
|
+
const { colors } = useThemeTokens();
|
|
32
|
+
const [focused, setFocused] = React.useState(false);
|
|
33
|
+
const gray = colors.palettes.gray;
|
|
34
|
+
// Semantic colors (accent, danger, etc.) are added by useThemeTokens
|
|
35
|
+
// Fallback to gray if palette key doesn't exist
|
|
36
|
+
const palette = colors.palettes[color] ?? gray;
|
|
37
|
+
const itemSize = getItemSize(size);
|
|
38
|
+
const indicatorSize = itemSize * 0.4; // 40% scale like CSS
|
|
39
|
+
// Check if this item is selected
|
|
40
|
+
const isChecked = value === groupValue;
|
|
41
|
+
// Base style
|
|
42
|
+
const baseStyle = {
|
|
43
|
+
width: itemSize,
|
|
44
|
+
height: itemSize,
|
|
45
|
+
borderRadius: itemSize / 2,
|
|
46
|
+
alignItems: 'center',
|
|
47
|
+
justifyContent: 'center',
|
|
48
|
+
};
|
|
49
|
+
// State-based styles
|
|
50
|
+
let stateStyle;
|
|
51
|
+
if (disabled) {
|
|
52
|
+
stateStyle = {
|
|
53
|
+
backgroundColor: gray.a3,
|
|
54
|
+
borderWidth: 1,
|
|
55
|
+
borderColor: gray.a6,
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
else if (isChecked) {
|
|
59
|
+
stateStyle = {
|
|
60
|
+
backgroundColor: palette['9'],
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
stateStyle = {
|
|
65
|
+
backgroundColor: colors.surface,
|
|
66
|
+
borderWidth: 1,
|
|
67
|
+
borderColor: gray.a7,
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
// Focus style - accent-a8 outline
|
|
71
|
+
const focusStyle = focused && !disabled
|
|
72
|
+
? {
|
|
73
|
+
outlineWidth: 2,
|
|
74
|
+
outlineStyle: 'solid',
|
|
75
|
+
outlineColor: palette.a8,
|
|
76
|
+
outlineOffset: 2,
|
|
77
|
+
}
|
|
78
|
+
: undefined;
|
|
79
|
+
const combinedStyle = {
|
|
80
|
+
...baseStyle,
|
|
81
|
+
...stateStyle,
|
|
82
|
+
...focusStyle,
|
|
83
|
+
};
|
|
84
|
+
// Indicator style
|
|
85
|
+
const indicatorColor = disabled ? gray.a8 : palette['9-contrast'];
|
|
86
|
+
const indicatorStyle = {
|
|
87
|
+
width: indicatorSize,
|
|
88
|
+
height: indicatorSize,
|
|
89
|
+
borderRadius: indicatorSize / 2,
|
|
90
|
+
backgroundColor: indicatorColor,
|
|
91
|
+
};
|
|
92
|
+
const handleFocus = React.useCallback((e) => {
|
|
93
|
+
if (Platform.OS === 'web') {
|
|
94
|
+
const target = e.target;
|
|
95
|
+
if (target?.matches?.(':focus-visible')) {
|
|
96
|
+
setFocused(true);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
onFocus?.(e);
|
|
100
|
+
}, [onFocus]);
|
|
101
|
+
const handleBlur = React.useCallback((e) => {
|
|
102
|
+
setFocused(false);
|
|
103
|
+
onBlur?.(e);
|
|
104
|
+
}, [onBlur]);
|
|
105
|
+
// Reset default focus styles on the root
|
|
106
|
+
const rootStyle = {
|
|
107
|
+
outlineWidth: 0,
|
|
108
|
+
};
|
|
109
|
+
return (<RadioGroupPrimitive.Item value={value} disabled={disabled} onFocus={handleFocus} onBlur={handleBlur} style={rootStyle} {...props}>
|
|
110
|
+
<View style={combinedStyle}>
|
|
111
|
+
<RadioGroupPrimitive.Indicator>
|
|
112
|
+
<View style={indicatorStyle}/>
|
|
113
|
+
</RadioGroupPrimitive.Indicator>
|
|
114
|
+
</View>
|
|
115
|
+
</RadioGroupPrimitive.Item>);
|
|
116
|
+
}
|
|
117
|
+
const RadioGroup = {
|
|
118
|
+
Root: RadioGroupRoot,
|
|
119
|
+
Item: RadioGroupItem,
|
|
120
|
+
};
|
|
121
|
+
export { RadioGroup, RadioGroupItem, RadioGroupRoot };
|
|
122
|
+
//# sourceMappingURL=radio-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as TabsPrimitive from '@rn-primitives/tabs';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
type SegmentedControlRootProps = TabsPrimitive.RootProps;
|
|
4
|
+
declare function SegmentedControlRoot({ value, onValueChange, children, ...props }: SegmentedControlRootProps): React.JSX.Element;
|
|
5
|
+
type SegmentedControlListProps = TabsPrimitive.ListProps;
|
|
6
|
+
declare function SegmentedControlList({ children, style, ...props }: SegmentedControlListProps): React.JSX.Element;
|
|
7
|
+
type SegmentedControlTriggerProps = Omit<TabsPrimitive.TriggerProps, 'children'> & {
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
};
|
|
10
|
+
declare function SegmentedControlTrigger({ value, children, ...props }: SegmentedControlTriggerProps): React.JSX.Element;
|
|
11
|
+
type SegmentedControlContentProps = TabsPrimitive.ContentProps;
|
|
12
|
+
declare function SegmentedControlContent({ ...props }: SegmentedControlContentProps): React.JSX.Element;
|
|
13
|
+
declare const SegmentedControl: {
|
|
14
|
+
Root: typeof SegmentedControlRoot;
|
|
15
|
+
List: typeof SegmentedControlList;
|
|
16
|
+
Trigger: typeof SegmentedControlTrigger;
|
|
17
|
+
Content: typeof SegmentedControlContent;
|
|
18
|
+
};
|
|
19
|
+
export { SegmentedControl, SegmentedControlContent, SegmentedControlList, SegmentedControlRoot, SegmentedControlTrigger, };
|
|
20
|
+
export type { SegmentedControlContentProps, SegmentedControlListProps, SegmentedControlRootProps, SegmentedControlTriggerProps, };
|
|
21
|
+
//# sourceMappingURL=segmented-control.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/components/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,yBAAyB,GAAG,aAAa,CAAC,SAAS,CAAC;AAEzD,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,qBAU3B;AAED,KAAK,yBAAyB,GAAG,aAAa,CAAC,SAAS,CAAC;AAEzD,iBAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,qBAuBrF;AAkFD,KAAK,4BAA4B,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,uBAAuB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,4BAA4B,qBAe3F;AAED,KAAK,4BAA4B,GAAG,aAAa,CAAC,YAAY,CAAC;AAE/D,iBAAS,uBAAuB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,4BAA4B,qBAE1E;AAED,QAAA,MAAM,gBAAgB;;;;;CAKrB,CAAC;AAEF,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,GACxB,CAAC;AACF,YAAY,EACV,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,4BAA4B,GAC7B,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { Text, TextStyleContext } from '../components/text';
|
|
2
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
3
|
+
import * as TabsPrimitive from '@rn-primitives/tabs';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { Platform, View } from 'react-native';
|
|
6
|
+
const SegmentedControlContext = React.createContext({
|
|
7
|
+
value: undefined,
|
|
8
|
+
});
|
|
9
|
+
function SegmentedControlRoot({ value, onValueChange, children, ...props }) {
|
|
10
|
+
const contextValue = React.useMemo(() => ({ value }), [value]);
|
|
11
|
+
return (<SegmentedControlContext.Provider value={contextValue}>
|
|
12
|
+
<TabsPrimitive.Root value={value} onValueChange={onValueChange} {...props}>
|
|
13
|
+
{children}
|
|
14
|
+
</TabsPrimitive.Root>
|
|
15
|
+
</SegmentedControlContext.Provider>);
|
|
16
|
+
}
|
|
17
|
+
function SegmentedControlList({ children, style, ...props }) {
|
|
18
|
+
const { colors } = useThemeTokens();
|
|
19
|
+
const gray = colors.palettes.gray;
|
|
20
|
+
// Container style - matches CSS:
|
|
21
|
+
// height: var(--space-7) = 40px
|
|
22
|
+
// background: var(--gray-a3)
|
|
23
|
+
// border-radius: var(--radius-4) = 10px
|
|
24
|
+
// padding: var(--space-1) = 4px
|
|
25
|
+
const listStyle = {
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
height: 40,
|
|
28
|
+
backgroundColor: gray.a3,
|
|
29
|
+
borderRadius: 10,
|
|
30
|
+
padding: 4,
|
|
31
|
+
alignItems: 'stretch',
|
|
32
|
+
};
|
|
33
|
+
return (<TabsPrimitive.List {...props}>
|
|
34
|
+
<View style={[listStyle, style]}>{children}</View>
|
|
35
|
+
</TabsPrimitive.List>);
|
|
36
|
+
}
|
|
37
|
+
function SegmentedControlTriggerInner({ value, hovered, children, }) {
|
|
38
|
+
const { value: activeValue } = React.useContext(SegmentedControlContext);
|
|
39
|
+
const { colors, isDark } = useThemeTokens();
|
|
40
|
+
const gray = colors.palettes.gray;
|
|
41
|
+
const isActive = value === activeValue;
|
|
42
|
+
// Text color from CSS:
|
|
43
|
+
// Default: gray-a9
|
|
44
|
+
// Hover: gray-a11
|
|
45
|
+
// Active: gray-a12
|
|
46
|
+
const textColor = isActive ? gray['12'] : hovered ? gray.a11 : gray.a9;
|
|
47
|
+
// Trigger style - matches CSS
|
|
48
|
+
const triggerStyle = {
|
|
49
|
+
flex: 1,
|
|
50
|
+
flexShrink: 0,
|
|
51
|
+
justifyContent: 'center',
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
borderRadius: 8, // radius-3
|
|
54
|
+
paddingHorizontal: 8, // space-2
|
|
55
|
+
position: 'relative',
|
|
56
|
+
};
|
|
57
|
+
// Active thumb background with shadow
|
|
58
|
+
// Light mode: var(--color-panel-solid) = white with shadow
|
|
59
|
+
// Dark mode: white-a3 background
|
|
60
|
+
const activeStyle = isActive
|
|
61
|
+
? isDark
|
|
62
|
+
? {
|
|
63
|
+
backgroundColor: colors.palettes.white.a3,
|
|
64
|
+
}
|
|
65
|
+
: {
|
|
66
|
+
backgroundColor: colors.panelSolid,
|
|
67
|
+
...(Platform.OS === 'web'
|
|
68
|
+
? {
|
|
69
|
+
boxShadow: '0px 1px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.05)',
|
|
70
|
+
}
|
|
71
|
+
: {
|
|
72
|
+
shadowColor: '#000',
|
|
73
|
+
shadowOpacity: 0.08,
|
|
74
|
+
shadowOffset: { width: 0, height: 1 },
|
|
75
|
+
shadowRadius: 2,
|
|
76
|
+
elevation: 2,
|
|
77
|
+
}),
|
|
78
|
+
}
|
|
79
|
+
: undefined;
|
|
80
|
+
// Inner content style
|
|
81
|
+
const innerStyle = {
|
|
82
|
+
flexDirection: 'row',
|
|
83
|
+
gap: 8, // space-2
|
|
84
|
+
alignItems: 'center',
|
|
85
|
+
justifyContent: 'center',
|
|
86
|
+
};
|
|
87
|
+
// Wrap string children in Text component
|
|
88
|
+
const content = typeof children === 'string' ? <Text>{children}</Text> : children;
|
|
89
|
+
return (<TextStyleContext.Provider value={{ size: '2', weight: 'medium', color: textColor }}>
|
|
90
|
+
<View style={[triggerStyle, activeStyle]}>
|
|
91
|
+
<View style={innerStyle}>{content}</View>
|
|
92
|
+
</View>
|
|
93
|
+
</TextStyleContext.Provider>);
|
|
94
|
+
}
|
|
95
|
+
function SegmentedControlTrigger({ value, children, ...props }) {
|
|
96
|
+
const [hovered, setHovered] = React.useState(false);
|
|
97
|
+
return (<TabsPrimitive.Trigger value={value} onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)} style={{ flex: 1 }} {...props}>
|
|
98
|
+
<SegmentedControlTriggerInner value={value} hovered={hovered}>
|
|
99
|
+
{children}
|
|
100
|
+
</SegmentedControlTriggerInner>
|
|
101
|
+
</TabsPrimitive.Trigger>);
|
|
102
|
+
}
|
|
103
|
+
function SegmentedControlContent({ ...props }) {
|
|
104
|
+
return <TabsPrimitive.Content {...props}/>;
|
|
105
|
+
}
|
|
106
|
+
const SegmentedControl = {
|
|
107
|
+
Root: SegmentedControlRoot,
|
|
108
|
+
List: SegmentedControlList,
|
|
109
|
+
Trigger: SegmentedControlTrigger,
|
|
110
|
+
Content: SegmentedControlContent,
|
|
111
|
+
};
|
|
112
|
+
export { SegmentedControl, SegmentedControlContent, SegmentedControlList, SegmentedControlRoot, SegmentedControlTrigger, };
|
|
113
|
+
//# sourceMappingURL=segmented-control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../src/components/segmented-control.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { type ButtonSize } from '../lib/button-styles';
|
|
2
|
+
import type { Color } from '../lib/types';
|
|
3
|
+
import * as SelectPrimitive from '@rn-primitives/select';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
6
|
+
type SelectSize = ButtonSize;
|
|
7
|
+
type SelectTriggerVariant = 'surface' | 'soft' | 'ghost';
|
|
8
|
+
type SelectRootProps = Omit<SelectPrimitive.RootProps, 'value' | 'onValueChange'> & {
|
|
9
|
+
size?: SelectSize;
|
|
10
|
+
value?: {
|
|
11
|
+
value: string;
|
|
12
|
+
label: string;
|
|
13
|
+
} | undefined;
|
|
14
|
+
onValueChange?: (value: {
|
|
15
|
+
value: string;
|
|
16
|
+
label: string;
|
|
17
|
+
} | undefined) => void;
|
|
18
|
+
};
|
|
19
|
+
declare function SelectRoot({ size, value, onValueChange, children, ...props }: SelectRootProps): React.JSX.Element;
|
|
20
|
+
type SelectValueProps = {
|
|
21
|
+
placeholder?: string;
|
|
22
|
+
};
|
|
23
|
+
declare function SelectValue({ placeholder, ...props }: SelectValueProps): React.JSX.Element;
|
|
24
|
+
type SelectTriggerProps = Omit<SelectPrimitive.TriggerProps, 'asChild'> & {
|
|
25
|
+
variant?: SelectTriggerVariant;
|
|
26
|
+
color?: Color;
|
|
27
|
+
style?: StyleProp<ViewStyle>;
|
|
28
|
+
};
|
|
29
|
+
declare function SelectTrigger({ variant, color, style, disabled, children, ...props }: SelectTriggerProps): React.JSX.Element;
|
|
30
|
+
type SelectContentProps = SelectPrimitive.ContentProps & {
|
|
31
|
+
portalHost?: string;
|
|
32
|
+
position?: 'popper' | 'item-aligned';
|
|
33
|
+
};
|
|
34
|
+
declare function SelectContent({ portalHost, position, ...props }: SelectContentProps): React.JSX.Element;
|
|
35
|
+
type SelectItemProps = Omit<SelectPrimitive.ItemProps, 'value' | 'children'> & {
|
|
36
|
+
value: string;
|
|
37
|
+
label: string;
|
|
38
|
+
children: React.ReactNode;
|
|
39
|
+
};
|
|
40
|
+
declare function SelectItem({ children, disabled, label, value, ...props }: SelectItemProps): React.JSX.Element;
|
|
41
|
+
type SelectLabelProps = SelectPrimitive.LabelProps;
|
|
42
|
+
declare function SelectLabel({ children, ...props }: SelectLabelProps): React.JSX.Element;
|
|
43
|
+
type SelectSeparatorProps = SelectPrimitive.SeparatorProps;
|
|
44
|
+
declare function SelectSeparator({ ...props }: SelectSeparatorProps): React.JSX.Element;
|
|
45
|
+
declare const SelectGroup: typeof SelectPrimitive.Group;
|
|
46
|
+
declare const Select: {
|
|
47
|
+
Root: typeof SelectRoot;
|
|
48
|
+
Trigger: typeof SelectTrigger;
|
|
49
|
+
Value: typeof SelectValue;
|
|
50
|
+
Content: typeof SelectContent;
|
|
51
|
+
Item: typeof SelectItem;
|
|
52
|
+
Label: typeof SelectLabel;
|
|
53
|
+
Separator: typeof SelectSeparator;
|
|
54
|
+
Group: typeof SelectGroup;
|
|
55
|
+
};
|
|
56
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, };
|
|
57
|
+
export type { SelectContentProps, SelectItemProps, SelectLabelProps, SelectRootProps, SelectSeparatorProps, SelectSize, SelectTriggerProps, SelectTriggerVariant, SelectValueProps, };
|
|
58
|
+
//# sourceMappingURL=select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"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"}
|