@impulse-ui-native/primitives 2.6.0 → 2.7.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 +2 -0
- package/dist/components/atoms/button.d.mts +1 -1
- package/dist/components/atoms/button.js +23 -3
- package/dist/components/atoms/button.js.map +1 -1
- package/dist/components/atoms/icon-button.d.mts +1 -1
- package/dist/components/atoms/icon-button.js +22 -2
- package/dist/components/atoms/icon-button.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -45,3 +45,5 @@ export function ProfileSummary() {
|
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
Use the compound `Control` when building a custom field that should share the same label, addon, error, size, and variant behavior as `Input` and `Select`.
|
|
48
|
+
|
|
49
|
+
`Button` and `IconButton` replace their content with a loading indicator when `loading` is true. Loading controls block interaction and expose their busy state to assistive technologies. Provide an `accessibilityLabel` for every `IconButton` because its icon does not supply an accessible name.
|
|
@@ -5,6 +5,6 @@ import { ButtonProps } from '../../types/button.types.mjs';
|
|
|
5
5
|
import 'react-native';
|
|
6
6
|
import '@impulse-ui-native/theme';
|
|
7
7
|
|
|
8
|
-
declare const Button: react.MemoExoticComponent<({ size, variant, disabled, children, style, ...props }: PropsWithChildren<ButtonProps>) => react_jsx_runtime.JSX.Element>;
|
|
8
|
+
declare const Button: react.MemoExoticComponent<({ accessibilityState, size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react_jsx_runtime.JSX.Element>;
|
|
9
9
|
|
|
10
10
|
export { Button };
|
|
@@ -5,9 +5,11 @@ import { useThemedStyles } from "@impulse-ui-native/theme";
|
|
|
5
5
|
import { Pressable } from "./pressable";
|
|
6
6
|
import { Typography } from "./typography";
|
|
7
7
|
const Button = memo(function Button2({
|
|
8
|
+
accessibilityState,
|
|
8
9
|
size = "medium",
|
|
9
10
|
variant = "filled",
|
|
10
11
|
disabled,
|
|
12
|
+
loading = false,
|
|
11
13
|
children,
|
|
12
14
|
style,
|
|
13
15
|
...props
|
|
@@ -17,17 +19,35 @@ const Button = memo(function Button2({
|
|
|
17
19
|
variant,
|
|
18
20
|
disabled
|
|
19
21
|
]);
|
|
22
|
+
const interactionDisabled = disabled === true || loading;
|
|
23
|
+
const resolvedAccessibilityState = useMemo(
|
|
24
|
+
() => ({
|
|
25
|
+
...accessibilityState,
|
|
26
|
+
busy: loading,
|
|
27
|
+
disabled: interactionDisabled
|
|
28
|
+
}),
|
|
29
|
+
[accessibilityState, interactionDisabled, loading]
|
|
30
|
+
);
|
|
20
31
|
const buttonStyles = useMemo(
|
|
21
32
|
() => [styles.button, style],
|
|
22
33
|
[styles.button, style]
|
|
23
34
|
);
|
|
24
35
|
const content = useMemo(() => {
|
|
25
|
-
if (
|
|
36
|
+
if (loading) {
|
|
26
37
|
return /* @__PURE__ */ jsx(ActivityIndicator, { color: styles.text.color });
|
|
27
38
|
}
|
|
28
39
|
return typeof children === "string" ? /* @__PURE__ */ jsx(Typography.Master, { style: styles.text, children }) : children;
|
|
29
|
-
}, [children,
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
40
|
+
}, [children, loading, styles.text]);
|
|
41
|
+
return /* @__PURE__ */ jsx(
|
|
42
|
+
Pressable,
|
|
43
|
+
{
|
|
44
|
+
...props,
|
|
45
|
+
accessibilityState: resolvedAccessibilityState,
|
|
46
|
+
disabled: interactionDisabled,
|
|
47
|
+
style: buttonStyles,
|
|
48
|
+
children: content
|
|
49
|
+
}
|
|
50
|
+
);
|
|
31
51
|
});
|
|
32
52
|
function themedStyles(theme, props) {
|
|
33
53
|
const { size, variant, disabled } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\n\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n size = \"medium\",\n variant = \"filled\",\n disabled,\n children,\n style,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n size,\n variant,\n disabled,\n ]);\n\n const buttonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n const content = useMemo(() => {\n if (
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\n\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n accessibilityState,\n size = \"medium\",\n variant = \"filled\",\n disabled,\n loading = false,\n children,\n style,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n size,\n variant,\n disabled,\n ]);\n\n const interactionDisabled = disabled === true || loading;\n\n const resolvedAccessibilityState = useMemo<AccessibilityState>(\n () => ({\n ...accessibilityState,\n busy: loading,\n disabled: interactionDisabled,\n }),\n [accessibilityState, interactionDisabled, loading],\n );\n\n const buttonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n const content = useMemo(() => {\n if (loading) {\n return <ActivityIndicator color={styles.text.color} />;\n }\n\n return typeof children === \"string\" ? (\n <Typography.Master style={styles.text}>{children}</Typography.Master>\n ) : (\n children\n );\n }, [children, loading, styles.text]);\n\n return (\n <Pressable\n {...props}\n accessibilityState={resolvedAccessibilityState}\n disabled={interactionDisabled}\n style={buttonStyles}\n >\n {content}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n const { size, variant, disabled } = props;\n\n const buttonTokens = theme.components.button;\n const sizeTokens = buttonTokens.sizes[size];\n const variantTokens = buttonTokens.variants[variant];\n\n return StyleSheet.create({\n button: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n height: sizeTokens.height,\n paddingVertical: sizeTokens.paddingVertical,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n borderWidth: buttonTokens.borderWidth,\n borderRadius: buttonTokens.borderRadius,\n\n borderColor: disabled\n ? variantTokens.disabledBorderColor\n : variantTokens.borderColor,\n\n backgroundColor: disabled\n ? variantTokens.disabledBackgroundColor\n : variantTokens.backgroundColor,\n },\n\n text: {\n width: \"100%\",\n textAlign: \"center\",\n\n fontSize: sizeTokens.fontSize,\n\n color: disabled ? variantTokens.disabledColor : variantTokens.color,\n },\n });\n}\n"],"mappings":"AA4Ca;AA3Cb,SAAS,MAAyB,eAAe;AACjD,SAAS,mBAAmB,kBAAkB;AAE9C,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,SAAS,SAAS,GAAG;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,oBAAoB,qBAAqB,OAAO;AAAA,EACnD;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,qBAAkB,OAAO,OAAO,KAAK,OAAO;AAAA,IACtD;AAEA,WAAO,OAAO,aAAa,WACzB,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,MAAO,UAAS,IAEjD;AAAA,EAEJ,GAAG,CAAC,UAAU,SAAS,OAAO,IAAI,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,iBAAiB,WAAW;AAAA,MAC5B,mBAAmB,WAAW;AAAA,MAE9B,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,MAE3B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["Button"]}
|
|
@@ -7,6 +7,6 @@ import '@impulse-ui-native/theme';
|
|
|
7
7
|
import '../../types/button.types.mjs';
|
|
8
8
|
import 'react-native';
|
|
9
9
|
|
|
10
|
-
declare const IconButton: react.MemoExoticComponent<({ size, variant, disabled, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react_jsx_runtime.JSX.Element>;
|
|
10
|
+
declare const IconButton: react.MemoExoticComponent<({ accessibilityState, size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react_jsx_runtime.JSX.Element>;
|
|
11
11
|
|
|
12
12
|
export { IconButton };
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
|
-
import { StyleSheet } from "react-native";
|
|
3
|
+
import { ActivityIndicator, StyleSheet } from "react-native";
|
|
4
4
|
import { Icon } from "@impulse-ui-native/icon/components/icon";
|
|
5
5
|
import { useThemedStyles } from "@impulse-ui-native/theme";
|
|
6
6
|
import { Pressable } from "./pressable";
|
|
7
7
|
const IconButton = memo(function IconButton2({
|
|
8
|
+
accessibilityState,
|
|
8
9
|
size = "medium",
|
|
9
10
|
variant = "filled",
|
|
10
11
|
disabled,
|
|
12
|
+
loading = false,
|
|
11
13
|
style,
|
|
12
14
|
icon,
|
|
13
15
|
...props
|
|
@@ -17,11 +19,29 @@ const IconButton = memo(function IconButton2({
|
|
|
17
19
|
variant,
|
|
18
20
|
disabled
|
|
19
21
|
]);
|
|
22
|
+
const interactionDisabled = disabled === true || loading;
|
|
23
|
+
const resolvedAccessibilityState = useMemo(
|
|
24
|
+
() => ({
|
|
25
|
+
...accessibilityState,
|
|
26
|
+
busy: loading,
|
|
27
|
+
disabled: interactionDisabled
|
|
28
|
+
}),
|
|
29
|
+
[accessibilityState, interactionDisabled, loading]
|
|
30
|
+
);
|
|
20
31
|
const iconButtonStyles = useMemo(
|
|
21
32
|
() => [styles.button, style],
|
|
22
33
|
[styles.button, style]
|
|
23
34
|
);
|
|
24
|
-
return /* @__PURE__ */ jsx(
|
|
35
|
+
return /* @__PURE__ */ jsx(
|
|
36
|
+
Pressable,
|
|
37
|
+
{
|
|
38
|
+
...props,
|
|
39
|
+
accessibilityState: resolvedAccessibilityState,
|
|
40
|
+
disabled: interactionDisabled,
|
|
41
|
+
style: iconButtonStyles,
|
|
42
|
+
children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: styles.icon.color }) : /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color })
|
|
43
|
+
}
|
|
44
|
+
);
|
|
25
45
|
});
|
|
26
46
|
function themedStyles(theme, props) {
|
|
27
47
|
const { size, variant, disabled } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\n\nexport const IconButton = memo(function IconButton({\n size = \"medium\",\n variant = \"filled\",\n disabled,\n style,\n icon,\n ...props\n}: PropsWithChildren<IconButtonProps>) {\n const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n size,\n variant,\n disabled,\n ]);\n\n const iconButtonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n return (\n <Pressable
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\n\nexport const IconButton = memo(function IconButton({\n accessibilityState,\n size = \"medium\",\n variant = \"filled\",\n disabled,\n loading = false,\n style,\n icon,\n ...props\n}: PropsWithChildren<IconButtonProps>) {\n const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n size,\n variant,\n disabled,\n ]);\n\n const interactionDisabled = disabled === true || loading;\n\n const resolvedAccessibilityState = useMemo<AccessibilityState>(\n () => ({\n ...accessibilityState,\n busy: loading,\n disabled: interactionDisabled,\n }),\n [accessibilityState, interactionDisabled, loading],\n );\n\n const iconButtonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n return (\n <Pressable\n {...props}\n accessibilityState={resolvedAccessibilityState}\n disabled={interactionDisabled}\n style={iconButtonStyles}\n >\n {loading ? (\n <ActivityIndicator color={styles.icon.color} />\n ) : (\n <Icon size={size} icon={icon} color={styles.icon.color} />\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n const { size, variant, disabled } = props;\n\n const iconButtonTokens = theme.components.iconButton;\n const sizeTokens = iconButtonTokens.sizes[size];\n const variantTokens = iconButtonTokens.variants[variant];\n\n return StyleSheet.create({\n button: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n height: sizeTokens.size,\n width: sizeTokens.size,\n padding: sizeTokens.padding,\n\n borderWidth: iconButtonTokens.borderWidth,\n borderRadius: iconButtonTokens.borderRadius,\n\n borderColor: disabled\n ? variantTokens.disabledBorderColor\n : variantTokens.borderColor,\n\n backgroundColor: disabled\n ? variantTokens.disabledBackgroundColor\n : variantTokens.backgroundColor,\n },\n\n icon: {\n color: disabled ? variantTokens.disabledColor : variantTokens.color,\n },\n });\n}\n"],"mappings":"AAkDQ;AAjDR,SAAS,MAAyB,eAAe;AACjD,SAAS,mBAAmB,kBAAkB;AAE9C,SAAS,YAAY;AACrB,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAEnB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,SAAS,SAAS,GAAG;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,oBAAoB,qBAAqB,OAAO;AAAA,EACnD;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,MAEN,oBACC,oBAAC,qBAAkB,OAAO,OAAO,KAAK,OAAO,IAE7C,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,gBAAgB,iBAAiB,SAAS,OAAO;AAEvD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.7.0",
|
|
4
4
|
"description": "Foundational UI primitives for building ImpulseUI Native components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/theme": "2.7.0",
|
|
32
|
+
"@impulse-ui-native/icon": "2.7.0",
|
|
33
|
+
"@impulse-ui-native/core": "2.7.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|