@impulse-ui-native/primitives 2.5.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/dist/components/controls/addon.js +7 -4
- package/dist/components/controls/addon.js.map +1 -1
- package/dist/components/controls/value.js +13 -3
- package/dist/components/controls/value.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"]}
|
|
@@ -10,15 +10,16 @@ import { Pressable, View } from "../atoms";
|
|
|
10
10
|
import { useControlContext } from "./provider";
|
|
11
11
|
const ControlAddon = memo(function ControlAddon2(props) {
|
|
12
12
|
const { icon: AddonIcon, onPress, Content, style, ...rest } = props;
|
|
13
|
-
const { disabled, error } = useControlContext();
|
|
13
|
+
const { variant, disabled, error } = useControlContext();
|
|
14
14
|
const tokens = useComponentsTokens();
|
|
15
15
|
const styles = useThemedStyles(
|
|
16
16
|
themedStyles,
|
|
17
17
|
{
|
|
18
|
+
variant,
|
|
18
19
|
disabled,
|
|
19
20
|
error
|
|
20
21
|
},
|
|
21
|
-
[disabled, error]
|
|
22
|
+
[variant, disabled, error]
|
|
22
23
|
);
|
|
23
24
|
const Container = useMemo(() => {
|
|
24
25
|
if (onPress) {
|
|
@@ -55,14 +56,16 @@ const ControlAddon = memo(function ControlAddon2(props) {
|
|
|
55
56
|
);
|
|
56
57
|
});
|
|
57
58
|
function themedStyles(theme, props) {
|
|
58
|
-
const { disabled, error } = props;
|
|
59
|
+
const { variant, disabled, error } = props;
|
|
59
60
|
const controlAddonTokens = theme.components.controlAddon;
|
|
61
|
+
const variantTokens = controlAddonTokens.variants[variant];
|
|
62
|
+
const color = disabled ? variantTokens.disabledIconColor : error ? variantTokens.errorIconColor : variantTokens.iconColor;
|
|
60
63
|
return StyleSheet.create({
|
|
61
64
|
container: {
|
|
62
65
|
marginHorizontal: controlAddonTokens.marginHorizontal
|
|
63
66
|
},
|
|
64
67
|
icon: {
|
|
65
|
-
color
|
|
68
|
+
color
|
|
66
69
|
}
|
|
67
70
|
});
|
|
68
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/controls/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport {\n AppTheme,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlAddonProps } from \"../../types\";\nimport { Pressable, View } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlAddon = memo(function ControlAddon(\n props: ControlAddonProps,\n) {\n const { icon: AddonIcon, onPress, Content, style, ...rest } = props;\n\n const { disabled, error } = useControlContext();\n\n const tokens = useComponentsTokens();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n disabled,\n error,\n },\n [disabled, error],\n );\n\n const Container = useMemo(() => {\n if (onPress) {\n return Pressable;\n }\n\n return View;\n }, [onPress]);\n\n const children = useMemo(() => {\n if (Content) {\n return <Content />;\n }\n\n if (AddonIcon) {\n return <Icon color={styles.icon.color} icon={AddonIcon} />;\n }\n\n return null;\n }, [AddonIcon, Content, styles.icon.color]);\n\n const containerStyle = useMemo(\n () => [styles.container, style],\n [styles.container, style],\n );\n\n if (!children) {\n return null;\n }\n\n return (\n <Container\n {...rest}\n style={containerStyle}\n hitSlop={tokens.controlAddon.hitSlop}\n onPress={onPress}\n disabled={disabled}\n >\n {children}\n </Container>\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n props: {\n disabled?: boolean;\n error?: string;\n },\n) {\n const { disabled, error } = props;\n\n const controlAddonTokens = theme.components.controlAddon;\n\n return StyleSheet.create({\n container: {\n marginHorizontal: controlAddonTokens.marginHorizontal,\n },\n\n icon: {\n color
|
|
1
|
+
{"version":3,"sources":["../../../src/components/controls/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport {\n AppTheme,\n ComponentVariant,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlAddonProps } from \"../../types\";\nimport { Pressable, View } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlAddon = memo(function ControlAddon(\n props: ControlAddonProps,\n) {\n const { icon: AddonIcon, onPress, Content, style, ...rest } = props;\n\n const { variant, disabled, error } = useControlContext();\n\n const tokens = useComponentsTokens();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n variant,\n disabled,\n error,\n },\n [variant, disabled, error],\n );\n\n const Container = useMemo(() => {\n if (onPress) {\n return Pressable;\n }\n\n return View;\n }, [onPress]);\n\n const children = useMemo(() => {\n if (Content) {\n return <Content />;\n }\n\n if (AddonIcon) {\n return <Icon color={styles.icon.color} icon={AddonIcon} />;\n }\n\n return null;\n }, [AddonIcon, Content, styles.icon.color]);\n\n const containerStyle = useMemo(\n () => [styles.container, style],\n [styles.container, style],\n );\n\n if (!children) {\n return null;\n }\n\n return (\n <Container\n {...rest}\n style={containerStyle}\n hitSlop={tokens.controlAddon.hitSlop}\n onPress={onPress}\n disabled={disabled}\n >\n {children}\n </Container>\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n props: {\n variant: ComponentVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const { variant, disabled, error } = props;\n\n const controlAddonTokens = theme.components.controlAddon;\n const variantTokens = controlAddonTokens.variants[variant];\n\n const color = disabled\n ? variantTokens.disabledIconColor\n : error\n ? variantTokens.errorIconColor\n : variantTokens.iconColor;\n\n return StyleSheet.create({\n container: {\n marginHorizontal: controlAddonTokens.marginHorizontal,\n },\n\n icon: {\n color,\n },\n });\n}\n"],"mappings":"AA4Ca;AA5Cb,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,WAAW,YAAY;AAChC,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,MAAM,WAAW,SAAS,SAAS,OAAO,GAAG,KAAK,IAAI;AAE9D,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAEvD,QAAM,SAAS,oBAAoB;AAEnC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,UAAU,KAAK;AAAA,EAC3B;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,WAAW;AACb,aAAO,oBAAC,QAAK,OAAO,OAAO,KAAK,OAAO,MAAM,WAAW;AAAA,IAC1D;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,SAAS,OAAO,KAAK,KAAK,CAAC;AAE1C,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,KAAK;AAAA,IAC9B,CAAC,OAAO,WAAW,KAAK;AAAA,EAC1B;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,OAAO,aAAa;AAAA,MAC7B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAKA;AACA,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI;AAErC,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,gBAAgB,mBAAmB,SAAS,OAAO;AAEzD,QAAM,QAAQ,WACV,cAAc,oBACd,QACE,cAAc,iBACd,cAAc;AAEpB,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,kBAAkB,mBAAmB;AAAA,IACvC;AAAA,IAEA,MAAM;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAC;AACH;","names":["ControlAddon"]}
|
|
@@ -8,8 +8,12 @@ import { Typography } from "../atoms";
|
|
|
8
8
|
import { useControlContext } from "./provider";
|
|
9
9
|
const ControlValue = memo(function ControlValue2(props) {
|
|
10
10
|
const { style, ...rest } = props;
|
|
11
|
-
const { size } = useControlContext();
|
|
12
|
-
const styles = useThemedStyles(
|
|
11
|
+
const { size, variant, disabled, error } = useControlContext();
|
|
12
|
+
const styles = useThemedStyles(
|
|
13
|
+
themedStyles,
|
|
14
|
+
{ size, variant, disabled, error },
|
|
15
|
+
[size, variant, disabled, error]
|
|
16
|
+
);
|
|
13
17
|
const valueStyle = useMemo(
|
|
14
18
|
() => [styles.value, style],
|
|
15
19
|
[styles.value, style]
|
|
@@ -17,13 +21,19 @@ const ControlValue = memo(function ControlValue2(props) {
|
|
|
17
21
|
return /* @__PURE__ */ jsx(Typography.Master, { numberOfLines: 1, ...rest, style: valueStyle });
|
|
18
22
|
});
|
|
19
23
|
function themedStyles(theme, {
|
|
20
|
-
size
|
|
24
|
+
size,
|
|
25
|
+
variant,
|
|
26
|
+
disabled,
|
|
27
|
+
error
|
|
21
28
|
}) {
|
|
22
29
|
const controlInputTokens = theme.components.controlInput;
|
|
23
30
|
const sizeTokens = controlInputTokens.sizes[size];
|
|
31
|
+
const variantTokens = controlInputTokens.variants[variant];
|
|
32
|
+
const color = disabled ? variantTokens.disabledColor : error ? variantTokens.errorColor : variantTokens.color;
|
|
24
33
|
return StyleSheet.create({
|
|
25
34
|
value: {
|
|
26
35
|
flex: controlInputTokens.flex,
|
|
36
|
+
color,
|
|
27
37
|
fontFamily: controlInputTokens.fontFamily,
|
|
28
38
|
fontSize: sizeTokens.fontSize,
|
|
29
39
|
paddingHorizontal: controlInputTokens.paddingHorizontal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlValueProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlValue = memo(function ControlValue(\n props: ControlValueProps,\n) {\n const { style, ...rest } = props;\n\n const { size } = useControlContext();\n\n const styles = useThemedStyles(themedStyles
|
|
1
|
+
{"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n ComponentVariant,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlValueProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlValue = memo(function ControlValue(\n props: ControlValueProps,\n) {\n const { style, ...rest } = props;\n\n const { size, variant, disabled, error } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, disabled, error },\n [size, variant, disabled, error],\n );\n\n const valueStyle = useMemo(\n () => [styles.value, style],\n [styles.value, style],\n );\n\n return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\n});\n\nfunction themedStyles(\n theme: AppTheme,\n {\n size,\n variant,\n disabled,\n error,\n }: {\n size: ComponentSize;\n variant: ComponentVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const variantTokens = controlInputTokens.variants[variant];\n\n const color = disabled\n ? variantTokens.disabledColor\n : error\n ? variantTokens.errorColor\n : variantTokens.color;\n\n return StyleSheet.create({\n value: {\n flex: controlInputTokens.flex,\n color,\n fontFamily: controlInputTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n },\n });\n}\n"],"mappings":"AAgCS;AAhCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,MAAM;AAAA,IACjC,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,gBAAgB,mBAAmB,SAAS,OAAO;AAEzD,QAAM,QAAQ,WACV,cAAc,gBACd,QACE,cAAc,aACd,cAAc;AAEpB,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB;AAAA,MACA,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}
|
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/theme": "2.
|
|
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",
|