@impulse-ui-native/toast 14.1.1 → 15.0.1
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
CHANGED
|
@@ -121,3 +121,10 @@ The duration timer starts when status reaches open.
|
|
|
121
121
|
the transitions (180 ms, 150 ms, and 220 ms by default).
|
|
122
122
|
`actionFontWeight` defaults to the primitive theme semi-bold weight. The
|
|
123
123
|
`duration` prop still controls auto-dismiss independently of animation timing.
|
|
124
|
+
|
|
125
|
+
## Repository palette consistency
|
|
126
|
+
|
|
127
|
+
Toast keeps feedback tones (success, info, warning, error). The action foreground
|
|
128
|
+
now follows the same feedback tone as its icon; disabled actions remain neutral.
|
|
129
|
+
Custom action colors move to toast.tones[tone].actionColor. The elevated surface,
|
|
130
|
+
title, description, and close control keep their neutral semantic roles.
|
|
@@ -14,10 +14,13 @@ const ToastAction = memo(function ToastAction2({
|
|
|
14
14
|
style,
|
|
15
15
|
...props
|
|
16
16
|
}) {
|
|
17
|
-
const { interactive, close } = useToastContext();
|
|
17
|
+
const { interactive, close, tone } = useToastContext();
|
|
18
18
|
const tokens = useComponentsTokens().toast;
|
|
19
19
|
const blocked = disabled === true || loading === true || !interactive;
|
|
20
|
-
const styles = useThemedStyles(themedStyles, { blocked }, [
|
|
20
|
+
const styles = useThemedStyles(themedStyles, { blocked, tone }, [
|
|
21
|
+
blocked,
|
|
22
|
+
tone
|
|
23
|
+
]);
|
|
21
24
|
const actionStyle = useMemo(
|
|
22
25
|
() => [styles.action, style],
|
|
23
26
|
[styles.action, style]
|
|
@@ -50,7 +53,7 @@ const ToastAction = memo(function ToastAction2({
|
|
|
50
53
|
}
|
|
51
54
|
);
|
|
52
55
|
});
|
|
53
|
-
function themedStyles(theme, { blocked }) {
|
|
56
|
+
function themedStyles(theme, { blocked, tone }) {
|
|
54
57
|
const tokens = theme.components.toast;
|
|
55
58
|
return StyleSheet.create({
|
|
56
59
|
action: {
|
|
@@ -61,7 +64,7 @@ function themedStyles(theme, { blocked }) {
|
|
|
61
64
|
paddingHorizontal: tokens.gap
|
|
62
65
|
},
|
|
63
66
|
label: {
|
|
64
|
-
color: blocked ? tokens.disabledColor : tokens.actionColor
|
|
67
|
+
color: blocked ? tokens.disabledColor : tokens.tones[tone].actionColor
|
|
65
68
|
}
|
|
66
69
|
});
|
|
67
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/toast-action.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Pressable, Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ToastActionProps } from \"../types\";\nimport type { ToastActionThemeProps } from \"../types/toast-theme.types\";\nimport { useToastContext } from \"../hooks/use-toast-context.hook\";\n\nexport const ToastAction = memo(function ToastAction({\n children,\n closeOnPress = true,\n onPress,\n disabled,\n loading,\n style,\n ...props\n}: ToastActionProps) {\n const { interactive, close } = useToastContext();\n const tokens = useComponentsTokens().toast;\n\n const blocked = disabled === true || loading === true || !interactive;\n\n const styles = useThemedStyles(themedStyles, { blocked }, [blocked]);\n\n const actionStyle = useMemo(\n () => [styles.action, style],\n [styles.action, style],\n );\n\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\n if (blocked) {\n return;\n }\n\n onPress?.(event);\n\n if (closeOnPress) {\n close();\n }\n });\n\n return (\n <Pressable\n hitSlop={styles.action.paddingHorizontal}\n {...props}\n disabled={blocked}\n onPress={handlePress}\n style={actionStyle}\n >\n {typeof children === \"string\" ? (\n <Typography.Label\n fontWeight={tokens.actionFontWeight}\n style={styles.label}\n >\n {children}\n </Typography.Label>\n ) : (\n children\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme
|
|
1
|
+
{"version":3,"sources":["../../src/components/toast-action.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Pressable, Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ToastActionProps } from \"../types\";\nimport type { ToastActionThemeProps } from \"../types/toast-theme.types\";\nimport { useToastContext } from \"../hooks/use-toast-context.hook\";\n\nexport const ToastAction = memo(function ToastAction({\n children,\n closeOnPress = true,\n onPress,\n disabled,\n loading,\n style,\n ...props\n}: ToastActionProps) {\n const { interactive, close, tone } = useToastContext();\n const tokens = useComponentsTokens().toast;\n\n const blocked = disabled === true || loading === true || !interactive;\n\n const styles = useThemedStyles(themedStyles, { blocked, tone }, [\n blocked,\n tone,\n ]);\n\n const actionStyle = useMemo(\n () => [styles.action, style],\n [styles.action, style],\n );\n\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\n if (blocked) {\n return;\n }\n\n onPress?.(event);\n\n if (closeOnPress) {\n close();\n }\n });\n\n return (\n <Pressable\n hitSlop={styles.action.paddingHorizontal}\n {...props}\n disabled={blocked}\n onPress={handlePress}\n style={actionStyle}\n >\n {typeof children === \"string\" ? (\n <Typography.Label\n fontWeight={tokens.actionFontWeight}\n style={styles.label}\n >\n {children}\n </Typography.Label>\n ) : (\n children\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n { blocked, tone }: ToastActionThemeProps,\n) {\n const tokens = theme.components.toast;\n\n return StyleSheet.create({\n action: {\n minHeight: tokens.actionMinSize,\n minWidth: tokens.actionMinSize,\n alignItems: \"center\",\n justifyContent: \"center\",\n paddingHorizontal: tokens.gap,\n },\n label: {\n color: blocked ? tokens.disabledColor : tokens.tones[tone].actionColor,\n },\n });\n}\n"],"mappings":"AA0DQ;AAzDR,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,wBAAwB;AACjC,SAAS,WAAW,kBAAkB;AACtC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,uBAAuB;AAEzB,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,aAAa,OAAO,KAAK,IAAI,gBAAgB;AACrD,QAAM,SAAS,oBAAoB,EAAE;AAErC,QAAM,UAAU,aAAa,QAAQ,YAAY,QAAQ,CAAC;AAE1D,QAAM,SAAS,gBAAgB,cAAc,EAAE,SAAS,KAAK,GAAG;AAAA,IAC9D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,cAAU,KAAK;AAEf,QAAI,cAAc;AAChB,YAAM;AAAA,IACR;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,OAAO;AAAA,MACtB,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,MAEN,iBAAO,aAAa,WACnB;AAAA,QAAC,WAAW;AAAA,QAAX;AAAA,UACC,YAAY,OAAO;AAAA,UACnB,OAAO,OAAO;AAAA,UAEb;AAAA;AAAA,MACH,IAEA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,SAAS,KAAK,GAChB;AACA,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,WAAW,OAAO;AAAA,MAClB,UAAU,OAAO;AAAA,MACjB,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,mBAAmB,OAAO;AAAA,IAC5B;AAAA,IACA,OAAO;AAAA,MACL,OAAO,UAAU,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC7D;AAAA,EACF,CAAC;AACH;","names":["ToastAction"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/toast",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.1",
|
|
4
4
|
"description": "Compound toast notifications for ImpulseUI Native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/theme": "
|
|
31
|
-
"@impulse-ui-native/overlay": "
|
|
32
|
-
"@impulse-ui-native/primitives": "
|
|
33
|
-
"@impulse-ui-native/core": "
|
|
34
|
-
"@impulse-ui-native/icon": "
|
|
30
|
+
"@impulse-ui-native/theme": "15.0.1",
|
|
31
|
+
"@impulse-ui-native/overlay": "15.0.1",
|
|
32
|
+
"@impulse-ui-native/primitives": "15.0.1",
|
|
33
|
+
"@impulse-ui-native/core": "15.0.1",
|
|
34
|
+
"@impulse-ui-native/icon": "15.0.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@impulse-ui-native/eslint-config": "1.0.0",
|