@utilitywarehouse/hearth-react-native 0.35.8 → 0.35.9
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/build/components/Accordion/AccordionTrigger.js +1 -1
- package/build/components/Card/CardAction/CardActionRoot.js +4 -0
- package/build/components/Card/CardRoot.js +5 -1
- package/build/components/DatePicker/DatePickerDay.js +3 -3
- package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js +4 -0
- package/build/components/List/ListAction/ListAction.js +1 -0
- package/build/components/List/ListItem/ListItemHelperText.d.ts +1 -1
- package/build/components/List/ListItem/ListItemHelperText.js +2 -8
- package/build/components/List/ListItem/ListItemRoot.js +1 -0
- package/build/components/RadioCard/RadioCardIndicator.js +0 -3
- package/build/components/RadioCard/RadioCardRoot.js +3 -3
- package/build/components/SegmentedControl/SegmentedControlOption.js +3 -0
- package/build/components/Switch/Switch.js +25 -1
- package/build/components/Switch/Switch.web.js +25 -1
- package/build/components/Tabs/Tab.js +5 -5
- package/build/components/ToggleButton/ToggleButtonRoot.js +1 -1
- package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js +0 -5
- package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.js +1 -1
- package/build/core/themes.d.ts +16 -16
- package/package.json +4 -4
- package/public/llms/docs/{ai-tooling.md → ai-toolkit.md} +2 -2
- package/public/llms/docs/introduction.md +1 -1
- package/public/llms.txt +1 -1
|
@@ -25,7 +25,7 @@ const styles = StyleSheet.create(theme => ({
|
|
|
25
25
|
_hover: {
|
|
26
26
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
|
|
27
27
|
},
|
|
28
|
-
|
|
28
|
+
'_focus-visible': theme.helpers.focusVisible,
|
|
29
29
|
_active: {
|
|
30
30
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
|
|
31
31
|
},
|
|
@@ -101,6 +101,10 @@ const styles = StyleSheet.create(theme => ({
|
|
|
101
101
|
showPressed: {
|
|
102
102
|
true: {
|
|
103
103
|
_web: {
|
|
104
|
+
'_focus-visible': {
|
|
105
|
+
...theme.helpers.focusVisible,
|
|
106
|
+
outlineOffset: -theme.space[100],
|
|
107
|
+
},
|
|
104
108
|
_hover: {
|
|
105
109
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
|
|
106
110
|
},
|
|
@@ -133,9 +133,9 @@ const styles = StyleSheet.create(theme => ({
|
|
|
133
133
|
},
|
|
134
134
|
],
|
|
135
135
|
_web: {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
'_focus-visible': {
|
|
137
|
+
...theme.helpers.focusVisible,
|
|
138
|
+
},
|
|
139
139
|
_active: {
|
|
140
140
|
backgroundColor: theme.color.interactive.functional.surface.subtle.active,
|
|
141
141
|
},
|
|
@@ -56,6 +56,10 @@ const styles = StyleSheet.create(theme => ({
|
|
|
56
56
|
},
|
|
57
57
|
false: {
|
|
58
58
|
_web: {
|
|
59
|
+
'_focus-visible': {
|
|
60
|
+
...theme.helpers.focusVisible,
|
|
61
|
+
outlineOffset: -theme.space[100],
|
|
62
|
+
},
|
|
59
63
|
_hover: {
|
|
60
64
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
|
|
61
65
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BodyTextProps } from '../../BodyText';
|
|
2
2
|
declare const ListItemHelperText: {
|
|
3
|
-
({ children,
|
|
3
|
+
({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
6
|
export default ListItemHelperText;
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { StyleSheet } from 'react-native-unistyles';
|
|
3
2
|
import { BodyText } from '../../BodyText';
|
|
4
|
-
const ListItemHelperText = ({ children,
|
|
5
|
-
return (_jsx(BodyText, { size: "md",
|
|
3
|
+
const ListItemHelperText = ({ children, ...props }) => {
|
|
4
|
+
return (_jsx(BodyText, { size: "md", color: "secondary", ...props, children: children }));
|
|
6
5
|
};
|
|
7
6
|
ListItemHelperText.displayName = 'ListItemHelperText';
|
|
8
|
-
const styles = StyleSheet.create(theme => ({
|
|
9
|
-
text: {
|
|
10
|
-
color: theme.color.text.secondary,
|
|
11
|
-
},
|
|
12
|
-
}));
|
|
13
7
|
export default ListItemHelperText;
|
|
@@ -30,9 +30,6 @@ const styles = StyleSheet.create(theme => ({
|
|
|
30
30
|
_hover: {
|
|
31
31
|
outlineColor: theme.components.radio.outlineColorHover,
|
|
32
32
|
},
|
|
33
|
-
// '_focus-within': {
|
|
34
|
-
// ...theme.helpers.focusVisible,
|
|
35
|
-
// },
|
|
36
33
|
_active: {
|
|
37
34
|
outlineColor: theme.components.radio.outlineColorActive,
|
|
38
35
|
},
|
|
@@ -68,7 +68,7 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
|
|
|
68
68
|
const onPressOut = () => {
|
|
69
69
|
scale.value = withSpring(1);
|
|
70
70
|
};
|
|
71
|
-
return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
|
|
71
|
+
return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, style: styles.pressable, ...accessibilityProps, children: _jsx(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
|
|
72
72
|
const IconAny = Icon;
|
|
73
73
|
return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
|
|
74
74
|
})() }), _jsx(Animated.View, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
|
|
@@ -77,6 +77,20 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
|
|
|
77
77
|
})() })] }) }) }));
|
|
78
78
|
};
|
|
79
79
|
const styles = StyleSheet.create(theme => ({
|
|
80
|
+
pressable: {
|
|
81
|
+
variants: {
|
|
82
|
+
disabled: {
|
|
83
|
+
false: {
|
|
84
|
+
_web: {
|
|
85
|
+
'_focus-visible': { outline: 'none' },
|
|
86
|
+
'_focus-visible > div:nth-child(1)': {
|
|
87
|
+
...theme.helpers.focusVisible,
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
},
|
|
80
94
|
switch: {
|
|
81
95
|
justifyContent: 'center',
|
|
82
96
|
variants: {
|
|
@@ -97,9 +111,19 @@ const styles = StyleSheet.create(theme => ({
|
|
|
97
111
|
value: {
|
|
98
112
|
true: {
|
|
99
113
|
backgroundColor: theme.color.interactive.brand.surface.strong.default,
|
|
114
|
+
_web: {
|
|
115
|
+
_hover: {
|
|
116
|
+
backgroundColor: theme.color.interactive.brand.surface.strong.hover,
|
|
117
|
+
},
|
|
118
|
+
},
|
|
100
119
|
},
|
|
101
120
|
false: {
|
|
102
121
|
backgroundColor: theme.color.interactive.functional.surface.strong.default,
|
|
122
|
+
_web: {
|
|
123
|
+
_hover: {
|
|
124
|
+
backgroundColor: theme.color.interactive.functional.surface.strong.hover,
|
|
125
|
+
},
|
|
126
|
+
},
|
|
103
127
|
},
|
|
104
128
|
},
|
|
105
129
|
disabled: {
|
|
@@ -67,7 +67,7 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
|
|
|
67
67
|
const onPressOut = () => {
|
|
68
68
|
scale.value = withSpring(1);
|
|
69
69
|
};
|
|
70
|
-
return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
|
|
70
|
+
return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, style: styles.pressable, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
|
|
71
71
|
const IconAny = Icon;
|
|
72
72
|
return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
|
|
73
73
|
})() }), _jsx(AnimatedView, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
|
|
@@ -76,6 +76,20 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
|
|
|
76
76
|
})() })] }) }) }));
|
|
77
77
|
};
|
|
78
78
|
const styles = StyleSheet.create(theme => ({
|
|
79
|
+
pressable: {
|
|
80
|
+
variants: {
|
|
81
|
+
disabled: {
|
|
82
|
+
false: {
|
|
83
|
+
_web: {
|
|
84
|
+
'_focus-visible': { outline: 'none' },
|
|
85
|
+
'_focus-visible > div:nth-child(1)': {
|
|
86
|
+
...theme.helpers.focusVisible,
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
},
|
|
79
93
|
switch: {
|
|
80
94
|
justifyContent: 'center',
|
|
81
95
|
variants: {
|
|
@@ -96,9 +110,19 @@ const styles = StyleSheet.create(theme => ({
|
|
|
96
110
|
value: {
|
|
97
111
|
true: {
|
|
98
112
|
backgroundColor: theme.color.interactive.brand.surface.strong.default,
|
|
113
|
+
_web: {
|
|
114
|
+
_hover: {
|
|
115
|
+
backgroundColor: theme.color.interactive.brand.surface.strong.hover,
|
|
116
|
+
},
|
|
117
|
+
},
|
|
99
118
|
},
|
|
100
119
|
false: {
|
|
101
120
|
backgroundColor: theme.color.interactive.functional.surface.strong.default,
|
|
121
|
+
_web: {
|
|
122
|
+
_hover: {
|
|
123
|
+
backgroundColor: theme.color.interactive.functional.surface.strong.hover,
|
|
124
|
+
},
|
|
125
|
+
},
|
|
102
126
|
},
|
|
103
127
|
},
|
|
104
128
|
disabled: {
|
|
@@ -38,11 +38,11 @@ const styles = StyleSheet.create(theme => ({
|
|
|
38
38
|
_hover: {
|
|
39
39
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
|
|
40
40
|
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
'_focus-visible': {
|
|
42
|
+
...theme.helpers.focusVisible,
|
|
43
|
+
outlineOffset: -2,
|
|
44
|
+
borderRadius: theme.borderRadius.sm,
|
|
45
|
+
},
|
|
46
46
|
_active: {
|
|
47
47
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
|
|
48
48
|
},
|
|
@@ -32,7 +32,7 @@ const styles = StyleSheet.create(theme => ({
|
|
|
32
32
|
borderColor: theme.color.interactive.neutral.border.subtle,
|
|
33
33
|
height: theme.components.toggleButton.height,
|
|
34
34
|
_web: {
|
|
35
|
-
|
|
35
|
+
'_focus-visible': theme.helpers.focusVisible,
|
|
36
36
|
_hover: {
|
|
37
37
|
backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
|
|
38
38
|
},
|
package/build/core/themes.d.ts
CHANGED
|
@@ -36,10 +36,10 @@ export declare const lightTheme: {
|
|
|
36
36
|
pig: string;
|
|
37
37
|
};
|
|
38
38
|
readonly focusVisible: {
|
|
39
|
-
outlineStyle:
|
|
40
|
-
outlineWidth:
|
|
41
|
-
outlineColor: "#101010";
|
|
42
|
-
outlineOffset:
|
|
39
|
+
readonly outlineStyle: "solid";
|
|
40
|
+
readonly outlineWidth: 2;
|
|
41
|
+
readonly outlineColor: "#101010";
|
|
42
|
+
readonly outlineOffset: 1;
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
45
|
readonly platform: "ios" | "android" | "windows" | "macos" | "web";
|
|
@@ -1337,10 +1337,10 @@ export declare const darkTheme: {
|
|
|
1337
1337
|
pig: string;
|
|
1338
1338
|
};
|
|
1339
1339
|
readonly focusVisible: {
|
|
1340
|
-
outlineStyle:
|
|
1341
|
-
outlineWidth:
|
|
1342
|
-
outlineColor: "#ebebeb";
|
|
1343
|
-
outlineOffset:
|
|
1340
|
+
readonly outlineStyle: "solid";
|
|
1341
|
+
readonly outlineWidth: 2;
|
|
1342
|
+
readonly outlineColor: "#ebebeb";
|
|
1343
|
+
readonly outlineOffset: 1;
|
|
1344
1344
|
};
|
|
1345
1345
|
};
|
|
1346
1346
|
readonly platform: "ios" | "android" | "windows" | "macos" | "web";
|
|
@@ -2650,10 +2650,10 @@ export declare const themes: {
|
|
|
2650
2650
|
pig: string;
|
|
2651
2651
|
};
|
|
2652
2652
|
readonly focusVisible: {
|
|
2653
|
-
outlineStyle:
|
|
2654
|
-
outlineWidth:
|
|
2655
|
-
outlineColor: "#101010";
|
|
2656
|
-
outlineOffset:
|
|
2653
|
+
readonly outlineStyle: "solid";
|
|
2654
|
+
readonly outlineWidth: 2;
|
|
2655
|
+
readonly outlineColor: "#101010";
|
|
2656
|
+
readonly outlineOffset: 1;
|
|
2657
2657
|
};
|
|
2658
2658
|
};
|
|
2659
2659
|
readonly platform: "ios" | "android" | "windows" | "macos" | "web";
|
|
@@ -3951,10 +3951,10 @@ export declare const themes: {
|
|
|
3951
3951
|
pig: string;
|
|
3952
3952
|
};
|
|
3953
3953
|
readonly focusVisible: {
|
|
3954
|
-
outlineStyle:
|
|
3955
|
-
outlineWidth:
|
|
3956
|
-
outlineColor: "#ebebeb";
|
|
3957
|
-
outlineOffset:
|
|
3954
|
+
readonly outlineStyle: "solid";
|
|
3955
|
+
readonly outlineWidth: 2;
|
|
3956
|
+
readonly outlineColor: "#ebebeb";
|
|
3957
|
+
readonly outlineOffset: 1;
|
|
3958
3958
|
};
|
|
3959
3959
|
};
|
|
3960
3960
|
readonly platform: "ios" | "android" | "windows" | "macos" | "web";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utilitywarehouse/hearth-react-native",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.9",
|
|
4
4
|
"description": "Utility Warehouse React Native UI library",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -80,11 +80,11 @@
|
|
|
80
80
|
"vite-plugin-svgr": "^4.5.0",
|
|
81
81
|
"vitest": "^4.1.7",
|
|
82
82
|
"@utilitywarehouse/hearth-fonts": "^0.1.1",
|
|
83
|
-
"@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
|
|
84
83
|
"@utilitywarehouse/hearth-react-icons": "^0.9.0",
|
|
84
|
+
"@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
|
|
85
|
+
"@utilitywarehouse/hearth-storybook-utils": "0.0.0",
|
|
85
86
|
"@utilitywarehouse/hearth-svg-assets": "^0.6.5",
|
|
86
|
-
"@utilitywarehouse/hearth-tokens": "^0.4.
|
|
87
|
-
"@utilitywarehouse/hearth-storybook-utils": "0.0.0"
|
|
87
|
+
"@utilitywarehouse/hearth-tokens": "^0.4.5"
|
|
88
88
|
},
|
|
89
89
|
"peerDependencies": {
|
|
90
90
|
"@gorhom/bottom-sheet": ">=5.0.0",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# AI
|
|
1
|
+
# AI Toolkit
|
|
2
2
|
|
|
3
3
|
- [Plugin](#plugin)
|
|
4
4
|
- [Claude CLI](#claude-cli)
|
|
@@ -17,7 +17,7 @@ This should be the first step, since it gives your agent direct access to the
|
|
|
17
17
|
design you're implementing. You can read more information about setting this up
|
|
18
18
|
in the [root AI Toolkit documentation](https://hearth.prod.uw.systems/?path=/docs/ai-toolkit--docs).
|
|
19
19
|
|
|
20
|
-
Hearth's own AI
|
|
20
|
+
Hearth's own AI toolkit then supplements it for most use cases, filling in the
|
|
21
21
|
parts of the Hearth React Native API and usage guidance that the design alone
|
|
22
22
|
doesn't capture:
|
|
23
23
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Hearth React Native
|
|
2
2
|
|
|
3
3
|
React Native component library for building UIs at Utility Warehouse.<br/>
|
|
4
|
-
Current version: v0.35.
|
|
4
|
+
Current version: v0.35.9
|
|
5
5
|
|
|
6
6
|
Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.
|
|
7
7
|
|
package/public/llms.txt
CHANGED