@impulse-ui-native/primitives 3.0.0 → 4.0.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 -2
- package/dist/components/atoms/button.js +20 -11
- package/dist/components/atoms/button.js.map +1 -1
- package/dist/components/atoms/icon-button.js +17 -11
- package/dist/components/atoms/icon-button.js.map +1 -1
- package/dist/components/atoms/tag.js +9 -5
- package/dist/components/atoms/tag.js.map +1 -1
- package/dist/components/controls/addon.js +6 -3
- package/dist/components/controls/addon.js.map +1 -1
- package/dist/components/controls/container.js +8 -4
- package/dist/components/controls/container.js.map +1 -1
- package/dist/components/controls/input.js +7 -5
- package/dist/components/controls/input.js.map +1 -1
- package/dist/components/controls/label.js +9 -3
- package/dist/components/controls/label.js.map +1 -1
- package/dist/components/controls/placeholder.js +6 -3
- package/dist/components/controls/placeholder.js.map +1 -1
- package/dist/components/controls/value.js +6 -3
- package/dist/components/controls/value.js.map +1 -1
- package/dist/types/avatar.types.d.mts +2 -2
- package/dist/types/badge.types.d.mts +3 -3
- package/dist/types/button.types.d.mts +4 -3
- package/dist/types/control-components.types.d.mts +2 -2
- package/dist/types/icon-button.types.d.mts +3 -2
- package/dist/types/tag.types.d.mts +3 -3
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -98,6 +98,6 @@ Use `Card.Root` for a static surface and `Card.Pressable` when the whole card ha
|
|
|
98
98
|
|
|
99
99
|
`Divider` defaults to a subtle horizontal separator and exposes `role="separator"`. Use logical start/end insets to preserve RTL alignment, switch to vertical orientation inside a container with a defined height, and use `color` only when the semantic tones do not fit the surrounding surface.
|
|
100
100
|
|
|
101
|
-
`Avatar` supports
|
|
101
|
+
`Avatar` supports `filled`, `outlined`, and `soft` display variants. It renders fallback content below its image so initials or a custom fallback remain visible while the image loads or when it fails. Provide an `accessibilityLabel` when the represented identity is meaningful, and include presence status in that label when `status` conveys useful information. Avatar grouping and overflow counts are intentionally handled separately.
|
|
102
102
|
|
|
103
|
-
Use `Badge` for compact states and metadata. It supports
|
|
103
|
+
Use `Badge` for compact states and metadata. It supports `filled`, `outlined`, and `soft` display variants and semantic tones. Its addons follow Input: use `PrefixIcon` or `Prefix`, `SuffixIcon` or `Suffix`, and optionally `onPressPrefix` or `onPressSuffix`. A custom component takes precedence over its corresponding icon. Use `Tag` when the whole label needs built-in press or close behavior.
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
getActionStateTokens,
|
|
6
|
+
useThemedStyles
|
|
7
|
+
} from "@impulse-ui-native/theme";
|
|
5
8
|
import { Pressable } from "./pressable";
|
|
6
9
|
import { Spinner } from "./spinner";
|
|
7
10
|
import { Typography } from "./typography";
|
|
@@ -15,11 +18,11 @@ const Button = memo(function Button2({
|
|
|
15
18
|
style,
|
|
16
19
|
...props
|
|
17
20
|
}) {
|
|
18
|
-
const styles = useThemedStyles(
|
|
19
|
-
|
|
20
|
-
variant,
|
|
21
|
-
disabled
|
|
22
|
-
|
|
21
|
+
const styles = useThemedStyles(
|
|
22
|
+
themedStyles,
|
|
23
|
+
{ size, variant, disabled, loading },
|
|
24
|
+
[size, variant, disabled, loading]
|
|
25
|
+
);
|
|
23
26
|
const interactionDisabled = disabled === true || loading;
|
|
24
27
|
const resolvedAccessibilityState = useMemo(
|
|
25
28
|
() => ({
|
|
@@ -51,10 +54,16 @@ const Button = memo(function Button2({
|
|
|
51
54
|
);
|
|
52
55
|
});
|
|
53
56
|
function themedStyles(theme, props) {
|
|
54
|
-
const { size, variant, disabled } = props;
|
|
57
|
+
const { size, variant, disabled, loading } = props;
|
|
55
58
|
const buttonTokens = theme.components.button;
|
|
56
59
|
const sizeTokens = buttonTokens.sizes[size];
|
|
57
|
-
const
|
|
60
|
+
const appearanceTokens = getActionStateTokens(
|
|
61
|
+
buttonTokens.variants[variant],
|
|
62
|
+
{
|
|
63
|
+
disabled,
|
|
64
|
+
loading
|
|
65
|
+
}
|
|
66
|
+
);
|
|
58
67
|
return StyleSheet.create({
|
|
59
68
|
button: {
|
|
60
69
|
alignItems: "center",
|
|
@@ -64,14 +73,14 @@ function themedStyles(theme, props) {
|
|
|
64
73
|
paddingHorizontal: sizeTokens.paddingHorizontal,
|
|
65
74
|
borderWidth: buttonTokens.borderWidth,
|
|
66
75
|
borderRadius: buttonTokens.borderRadius,
|
|
67
|
-
borderColor:
|
|
68
|
-
backgroundColor:
|
|
76
|
+
borderColor: appearanceTokens.borderColor,
|
|
77
|
+
backgroundColor: appearanceTokens.backgroundColor
|
|
69
78
|
},
|
|
70
79
|
text: {
|
|
71
80
|
width: "100%",
|
|
72
81
|
textAlign: "center",
|
|
73
82
|
fontSize: sizeTokens.fontSize,
|
|
74
|
-
color:
|
|
83
|
+
color: appearanceTokens.color
|
|
75
84
|
}
|
|
76
85
|
});
|
|
77
86
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\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(\n themedStyles,\n { size, variant, disabled, loading },\n [size, variant, disabled, loading],\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 (\n <Spinner accessible={false} color={styles.text.color} size={size} />\n );\n }\n\n return typeof children === \"string\" ? (\n <Typography.Master style={styles.text}>{children}</Typography.Master>\n ) : (\n children\n );\n }, [children, loading, size, 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, loading } = props;\n\n const buttonTokens = theme.components.button;\n const sizeTokens = buttonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n buttonTokens.variants[variant],\n {\n disabled,\n loading,\n },\n );\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: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n text: {\n width: \"100%\",\n textAlign: \"center\",\n\n fontSize: sizeTokens.fontSize,\n\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AAkDQ;AAjDR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,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;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,QAAQ;AAAA,IACnC,CAAC,MAAM,SAAS,UAAU,OAAO;AAAA,EACnC;AAEA,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,aACE,oBAAC,WAAQ,YAAY,OAAO,OAAO,OAAO,KAAK,OAAO,MAAY;AAAA,IAEtE;AAEA,WAAO,OAAO,aAAa,WACzB,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,MAAO,UAAS,IAEjD;AAAA,EAEJ,GAAG,CAAC,UAAU,SAAS,MAAM,OAAO,IAAI,CAAC;AAEzC,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,UAAU,QAAQ,IAAI;AAE7C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,SAAS,OAAO;AAAA,IAC7B;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,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,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Button"]}
|
|
@@ -2,7 +2,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
4
|
import { Icon } from "@impulse-ui-native/icon/components/icon";
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
getActionStateTokens,
|
|
7
|
+
useThemedStyles
|
|
8
|
+
} from "@impulse-ui-native/theme";
|
|
6
9
|
import { Pressable } from "./pressable";
|
|
7
10
|
import { Spinner } from "./spinner";
|
|
8
11
|
const IconButton = memo(function IconButton2({
|
|
@@ -15,11 +18,11 @@ const IconButton = memo(function IconButton2({
|
|
|
15
18
|
icon,
|
|
16
19
|
...props
|
|
17
20
|
}) {
|
|
18
|
-
const styles = useThemedStyles(
|
|
19
|
-
|
|
20
|
-
variant,
|
|
21
|
-
disabled
|
|
22
|
-
|
|
21
|
+
const styles = useThemedStyles(
|
|
22
|
+
themedStyles,
|
|
23
|
+
{ size, variant, disabled, loading },
|
|
24
|
+
[size, variant, disabled, loading]
|
|
25
|
+
);
|
|
23
26
|
const interactionDisabled = disabled === true || loading;
|
|
24
27
|
const resolvedAccessibilityState = useMemo(
|
|
25
28
|
() => ({
|
|
@@ -45,10 +48,13 @@ const IconButton = memo(function IconButton2({
|
|
|
45
48
|
);
|
|
46
49
|
});
|
|
47
50
|
function themedStyles(theme, props) {
|
|
48
|
-
const { size, variant, disabled } = props;
|
|
51
|
+
const { size, variant, disabled, loading } = props;
|
|
49
52
|
const iconButtonTokens = theme.components.iconButton;
|
|
50
53
|
const sizeTokens = iconButtonTokens.sizes[size];
|
|
51
|
-
const
|
|
54
|
+
const appearanceTokens = getActionStateTokens(
|
|
55
|
+
iconButtonTokens.variants[variant],
|
|
56
|
+
{ disabled, loading }
|
|
57
|
+
);
|
|
52
58
|
return StyleSheet.create({
|
|
53
59
|
button: {
|
|
54
60
|
alignItems: "center",
|
|
@@ -58,11 +64,11 @@ function themedStyles(theme, props) {
|
|
|
58
64
|
padding: sizeTokens.padding,
|
|
59
65
|
borderWidth: iconButtonTokens.borderWidth,
|
|
60
66
|
borderRadius: iconButtonTokens.borderRadius,
|
|
61
|
-
borderColor:
|
|
62
|
-
backgroundColor:
|
|
67
|
+
borderColor: appearanceTokens.borderColor,
|
|
68
|
+
backgroundColor: appearanceTokens.backgroundColor
|
|
63
69
|
},
|
|
64
70
|
icon: {
|
|
65
|
-
color:
|
|
71
|
+
color: appearanceTokens.color
|
|
66
72
|
}
|
|
67
73
|
});
|
|
68
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\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(\n themedStyles,\n { size, variant, disabled, loading },\n [size, variant, disabled, loading],\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 <Spinner accessible={false} color={styles.icon.color} size={size} />\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, loading } = props;\n\n const iconButtonTokens = theme.components.iconButton;\n const sizeTokens = iconButtonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n iconButtonTokens.variants[variant],\n { disabled, loading },\n );\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: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n icon: {\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AAuDQ;AAtDR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAEjB,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;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,QAAQ;AAAA,IACnC,CAAC,MAAM,SAAS,UAAU,OAAO;AAAA,EACnC;AAEA,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,WAAQ,YAAY,OAAO,OAAO,OAAO,KAAK,OAAO,MAAY,IAElE,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,UAAU,QAAQ,IAAI;AAE7C,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,mBAAmB;AAAA,IACvB,iBAAiB,SAAS,OAAO;AAAA,IACjC,EAAE,UAAU,QAAQ;AAAA,EACtB;AAEA,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,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}
|
|
@@ -4,6 +4,7 @@ import { StyleSheet, View } from "react-native";
|
|
|
4
4
|
import { Icon } from "@impulse-ui-native/icon/components/icon";
|
|
5
5
|
import { XCircleIcon } from "@impulse-ui-native/icon/icons/x-circle";
|
|
6
6
|
import {
|
|
7
|
+
getAvailabilityStateTokens,
|
|
7
8
|
useComponentsTokens,
|
|
8
9
|
useThemedStyles
|
|
9
10
|
} from "@impulse-ui-native/theme";
|
|
@@ -55,7 +56,10 @@ function themedStyles(theme, props) {
|
|
|
55
56
|
const { size, variant, color, disabled } = props;
|
|
56
57
|
const tagTokens = theme.components.tag;
|
|
57
58
|
const sizeTokens = tagTokens.sizes[size];
|
|
58
|
-
const
|
|
59
|
+
const appearanceTokens = getAvailabilityStateTokens(
|
|
60
|
+
tagTokens.colors[color][variant],
|
|
61
|
+
{ disabled }
|
|
62
|
+
);
|
|
59
63
|
return StyleSheet.create({
|
|
60
64
|
container: {
|
|
61
65
|
flexDirection: "row",
|
|
@@ -68,16 +72,16 @@ function themedStyles(theme, props) {
|
|
|
68
72
|
borderRadius: tagTokens.borderRadius,
|
|
69
73
|
gap: tagTokens.gap,
|
|
70
74
|
borderWidth: tagTokens.borderWidth,
|
|
71
|
-
borderColor:
|
|
72
|
-
backgroundColor:
|
|
75
|
+
borderColor: appearanceTokens.borderColor,
|
|
76
|
+
backgroundColor: appearanceTokens.backgroundColor
|
|
73
77
|
},
|
|
74
78
|
label: {
|
|
75
79
|
fontSize: sizeTokens.fontSize,
|
|
76
|
-
color:
|
|
80
|
+
color: appearanceTokens.color
|
|
77
81
|
},
|
|
78
82
|
icon: {
|
|
79
83
|
marginLeft: tagTokens.iconMarginLeft,
|
|
80
|
-
color:
|
|
84
|
+
color: appearanceTokens.color
|
|
81
85
|
}
|
|
82
86
|
});
|
|
83
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n AppTheme,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n label,\n size = \"medium\",\n variant = \"filled\",\n color = \"primary\",\n closable,\n disabled,\n onClose,\n onPress,\n}: TagProps) {\n const tokens = useComponentsTokens();\n const tagTokens = tokens.tag;\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n color,\n },\n [size, variant, disabled, color],\n );\n\n const Container = useMemo(() => {\n if (onPress) {\n return Pressable;\n }\n\n return View;\n }, [onPress]);\n\n const showClose = closable && !disabled && onClose;\n\n return (\n <Container onPress={onPress} disabled={disabled} style={styles.container}>\n <Typography.Caption style={styles.label}>{label}</Typography.Caption>\n\n {showClose ? (\n <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\n <Icon\n icon={XCircleIcon}\n size=\"small\"\n color={styles.icon.color}\n style={styles.icon}\n />\n </Pressable>\n ) : null}\n </Container>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\n const { size, variant, color, disabled } = props;\n\n const tagTokens = theme.components.tag;\n const sizeTokens = tagTokens.sizes[size];\n const
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n AppTheme,\n getAvailabilityStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n label,\n size = \"medium\",\n variant = \"filled\",\n color = \"primary\",\n closable,\n disabled,\n onClose,\n onPress,\n}: TagProps) {\n const tokens = useComponentsTokens();\n const tagTokens = tokens.tag;\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n color,\n },\n [size, variant, disabled, color],\n );\n\n const Container = useMemo(() => {\n if (onPress) {\n return Pressable;\n }\n\n return View;\n }, [onPress]);\n\n const showClose = closable && !disabled && onClose;\n\n return (\n <Container onPress={onPress} disabled={disabled} style={styles.container}>\n <Typography.Caption style={styles.label}>{label}</Typography.Caption>\n\n {showClose ? (\n <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\n <Icon\n icon={XCircleIcon}\n size=\"small\"\n color={styles.icon.color}\n style={styles.icon}\n />\n </Pressable>\n ) : null}\n </Container>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\n const { size, variant, color, disabled } = props;\n\n const tagTokens = theme.components.tag;\n const sizeTokens = tagTokens.sizes[size];\n const appearanceTokens = getAvailabilityStateTokens(\n tagTokens.colors[color][variant],\n { disabled },\n );\n\n return StyleSheet.create({\n container: {\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n alignSelf: \"flex-start\",\n\n height: sizeTokens.height,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n minWidth: sizeTokens.minWidth,\n\n borderRadius: tagTokens.borderRadius,\n gap: tagTokens.gap,\n borderWidth: tagTokens.borderWidth,\n\n borderColor: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n label: {\n fontSize: sizeTokens.fontSize,\n color: appearanceTokens.color,\n },\n\n icon: {\n marginLeft: tagTokens.iconMarginLeft,\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AAkDI,SACE,KADF;AAlDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAEjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,MAAM,KAAK,SAASA,KAAI;AAAA,EACnC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,SAAS,oBAAoB;AACnC,QAAM,YAAY,OAAO;AACzB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,YAAY,YAAY,CAAC,YAAY;AAE3C,SACE,qBAAC,aAAU,SAAkB,UAAoB,OAAO,OAAO,WAC7D;AAAA,wBAAC,WAAW,SAAX,EAAmB,OAAO,OAAO,OAAQ,iBAAM;AAAA,IAE/C,YACC,oBAAC,aAAU,SAAS,SAAS,SAAS,UAAU,cAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO;AAAA;AAAA,IAChB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAsB;AAC3D,QAAM,EAAE,MAAM,SAAS,OAAO,SAAS,IAAI;AAE3C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,KAAK,EAAE,OAAO;AAAA,IAC/B,EAAE,SAAS;AAAA,EACb;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,MAEX,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,UAAU,WAAW;AAAA,MAErB,cAAc,UAAU;AAAA,MACxB,KAAK,UAAU;AAAA,MACf,aAAa,UAAU;AAAA,MAEvB,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Tag"]}
|
|
@@ -3,6 +3,7 @@ import { memo, useMemo } from "react";
|
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
4
|
import { Icon } from "@impulse-ui-native/icon/components/icon";
|
|
5
5
|
import {
|
|
6
|
+
getFieldStateTokens,
|
|
6
7
|
useComponentsTokens,
|
|
7
8
|
useThemedStyles
|
|
8
9
|
} from "@impulse-ui-native/theme";
|
|
@@ -58,14 +59,16 @@ const ControlAddon = memo(function ControlAddon2(props) {
|
|
|
58
59
|
function themedStyles(theme, props) {
|
|
59
60
|
const { variant, disabled, error } = props;
|
|
60
61
|
const controlAddonTokens = theme.components.controlAddon;
|
|
61
|
-
const
|
|
62
|
-
|
|
62
|
+
const appearanceTokens = getFieldStateTokens(
|
|
63
|
+
controlAddonTokens.variants[variant],
|
|
64
|
+
{ disabled, error: Boolean(error) }
|
|
65
|
+
);
|
|
63
66
|
return StyleSheet.create({
|
|
64
67
|
container: {
|
|
65
68
|
marginHorizontal: controlAddonTokens.marginHorizontal
|
|
66
69
|
},
|
|
67
70
|
icon: {
|
|
68
|
-
color
|
|
71
|
+
color: appearanceTokens.iconColor
|
|
69
72
|
}
|
|
70
73
|
});
|
|
71
74
|
}
|
|
@@ -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
|
|
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 FieldVariant,\n getFieldStateTokens,\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: FieldVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const { variant, disabled, error } = props;\n\n const controlAddonTokens = theme.components.controlAddon;\n const appearanceTokens = getFieldStateTokens(\n controlAddonTokens.variants[variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n container: {\n marginHorizontal: controlAddonTokens.marginHorizontal,\n },\n\n icon: {\n color: appearanceTokens.iconColor,\n },\n });\n}\n"],"mappings":"AA6Ca;AA7Cb,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;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,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,kBAAkB,mBAAmB;AAAA,IACvC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlAddon"]}
|
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
4
|
import {
|
|
5
|
+
getFieldStateTokens,
|
|
5
6
|
useThemedStyles
|
|
6
7
|
} from "@impulse-ui-native/theme";
|
|
7
8
|
import { View } from "../atoms/view";
|
|
@@ -33,7 +34,10 @@ function themedStyles(theme, {
|
|
|
33
34
|
}) {
|
|
34
35
|
const controlContainerTokens = theme.components.controlContainer;
|
|
35
36
|
const sizeTokens = controlContainerTokens.sizes[size];
|
|
36
|
-
const
|
|
37
|
+
const appearanceTokens = getFieldStateTokens(
|
|
38
|
+
controlContainerTokens.variants[variant],
|
|
39
|
+
{ disabled, error: Boolean(error) }
|
|
40
|
+
);
|
|
37
41
|
return StyleSheet.create({
|
|
38
42
|
inputContainer: {
|
|
39
43
|
flexDirection: "row",
|
|
@@ -42,9 +46,9 @@ function themedStyles(theme, {
|
|
|
42
46
|
paddingHorizontal: sizeTokens.paddingHorizontal,
|
|
43
47
|
borderRadius: controlContainerTokens.borderRadius,
|
|
44
48
|
borderWidth: controlContainerTokens.borderWidth,
|
|
45
|
-
opacity:
|
|
46
|
-
backgroundColor:
|
|
47
|
-
borderColor:
|
|
49
|
+
opacity: appearanceTokens.opacity,
|
|
50
|
+
backgroundColor: appearanceTokens.backgroundColor,
|
|
51
|
+
borderColor: appearanceTokens.borderColor
|
|
48
52
|
}
|
|
49
53
|
});
|
|
50
54
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n FieldVariant,\n getFieldStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlContainerProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlContainer = memo(function ControlContainer(\n props: ControlContainerProps,\n) {\n const { style, ...rest } = props;\n\n const { size, variant, disabled, error } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n error,\n },\n [size, variant, disabled, error],\n );\n\n const containerStyle = useMemo(\n () => [styles.inputContainer, style],\n [styles.inputContainer, style],\n );\n\n return <View style={containerStyle} {...rest} />;\n});\n\nfunction themedStyles(\n theme: AppTheme,\n {\n size,\n variant,\n disabled,\n error,\n }: {\n size: ComponentSize;\n variant: FieldVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const controlContainerTokens = theme.components.controlContainer;\n const sizeTokens = controlContainerTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlContainerTokens.variants[variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n inputContainer: {\n flexDirection: \"row\",\n alignItems: \"center\",\n\n height: sizeTokens.height,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n borderRadius: controlContainerTokens.borderRadius,\n borderWidth: controlContainerTokens.borderWidth,\n\n opacity: appearanceTokens.opacity,\n backgroundColor: appearanceTokens.backgroundColor,\n borderColor: appearanceTokens.borderColor,\n },\n });\n}\n"],"mappings":"AAsCS;AAtCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAK,OAAO,gBAAiB,GAAG,MAAM;AAChD,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,yBAAyB,MAAM,WAAW;AAChD,QAAM,aAAa,uBAAuB,MAAM,IAAI;AACpD,QAAM,mBAAmB;AAAA,IACvB,uBAAuB,SAAS,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MAEZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAE9B,cAAc,uBAAuB;AAAA,MACrC,aAAa,uBAAuB;AAAA,MAEpC,SAAS,iBAAiB;AAAA,MAC1B,iBAAiB,iBAAiB;AAAA,MAClC,aAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["ControlContainer"]}
|
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet, TextInput } from "react-native";
|
|
4
4
|
import {
|
|
5
|
+
getFieldStateTokens,
|
|
5
6
|
useThemedStyles
|
|
6
7
|
} from "@impulse-ui-native/theme";
|
|
7
8
|
import { useControlContext } from "./provider";
|
|
@@ -40,20 +41,21 @@ function themedStyles(theme, {
|
|
|
40
41
|
}) {
|
|
41
42
|
const controlInputTokens = theme.components.controlInput;
|
|
42
43
|
const sizeTokens = controlInputTokens.sizes[size];
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
const appearanceTokens = getFieldStateTokens(
|
|
45
|
+
controlInputTokens.variants[variant],
|
|
46
|
+
{ disabled, error: Boolean(error) }
|
|
47
|
+
);
|
|
46
48
|
return StyleSheet.create({
|
|
47
49
|
input: {
|
|
48
50
|
flex: controlInputTokens.flex,
|
|
49
|
-
color,
|
|
51
|
+
color: appearanceTokens.color,
|
|
50
52
|
fontSize: sizeTokens.fontSize,
|
|
51
53
|
fontFamily: controlInputTokens.fontFamily,
|
|
52
54
|
paddingHorizontal: controlInputTokens.paddingHorizontal,
|
|
53
55
|
height: "100%"
|
|
54
56
|
},
|
|
55
57
|
placeholder: {
|
|
56
|
-
color: placeholderColor
|
|
58
|
+
color: appearanceTokens.placeholderColor
|
|
57
59
|
}
|
|
58
60
|
});
|
|
59
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n FieldVariant,\n getFieldStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlInputProps } from \"../../types\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlInput = memo(function ControlInput(\n props: ControlInputProps,\n) {\n const { onPress, style, ...rest } = props;\n\n const { size, variant, disabled, error } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n error,\n },\n [size, variant, disabled, error],\n );\n\n const inputStyles = useMemo(\n () => [styles.input, style],\n [styles.input, style],\n );\n\n return (\n <TextInput\n {...rest}\n style={inputStyles}\n placeholderTextColor={styles.placeholder.color}\n editable={!disabled}\n />\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n {\n size,\n variant,\n disabled,\n error,\n }: {\n size: ComponentSize;\n variant: FieldVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlInputTokens.variants[variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n input: {\n flex: controlInputTokens.flex,\n color: appearanceTokens.color,\n fontSize: sizeTokens.fontSize,\n fontFamily: controlInputTokens.fontFamily,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n height: \"100%\",\n },\n\n placeholder: {\n color: appearanceTokens.placeholderColor,\n },\n });\n}\n"],"mappings":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAEtC;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,GAAG,KAAK,IAAI;AAEpC,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ,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,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
getFieldStateTokens,
|
|
6
|
+
useThemedStyles
|
|
7
|
+
} from "@impulse-ui-native/theme";
|
|
5
8
|
import { Typography } from "../atoms";
|
|
6
9
|
import { useControlContext } from "./provider";
|
|
7
10
|
const ControlLabel = memo(function ControlLabel2(props) {
|
|
@@ -27,12 +30,15 @@ const ControlLabel = memo(function ControlLabel2(props) {
|
|
|
27
30
|
function themedStyles(theme, props) {
|
|
28
31
|
const { disabled, error } = props;
|
|
29
32
|
const controlLabelTokens = theme.components.controlLabel;
|
|
30
|
-
const
|
|
33
|
+
const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {
|
|
34
|
+
disabled,
|
|
35
|
+
error: Boolean(error)
|
|
36
|
+
});
|
|
31
37
|
return StyleSheet.create({
|
|
32
38
|
label: {
|
|
33
39
|
marginBottom: controlLabelTokens.marginBottom,
|
|
34
40
|
fontSize: controlLabelTokens.fontSize,
|
|
35
|
-
color
|
|
41
|
+
color: appearanceTokens.color
|
|
36
42
|
}
|
|
37
43
|
});
|
|
38
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n getFieldStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlLabelProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlLabel = memo(function ControlLabel(\n props: ControlLabelProps,\n) {\n const { children, disabled, style, ...rest } = props;\n\n const { error } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n disabled,\n error,\n },\n [disabled, error],\n );\n\n const labelStyle = useMemo(\n () => [styles.label, style],\n [styles.label, style],\n );\n\n if (!children) {\n return null;\n }\n\n return (\n <Typography.Label {...rest} style={labelStyle}>\n {children}\n </Typography.Label>\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 controlLabelTokens = theme.components.controlLabel;\n const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\n disabled,\n error: Boolean(error),\n });\n\n return StyleSheet.create({\n label: {\n marginBottom: controlLabelTokens.marginBottom,\n fontSize: controlLabelTokens.fontSize,\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AAuCI;AAvCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAE/C,QAAM,EAAE,MAAM,IAAI,kBAAkB;AAEpC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAIA;AACA,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}
|
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
4
|
import {
|
|
5
|
+
getFieldStateTokens,
|
|
5
6
|
useThemedStyles
|
|
6
7
|
} from "@impulse-ui-native/theme";
|
|
7
8
|
import { Typography } from "../atoms";
|
|
@@ -33,12 +34,14 @@ function themedStyles(theme, {
|
|
|
33
34
|
}) {
|
|
34
35
|
const controlInputTokens = theme.components.controlInput;
|
|
35
36
|
const sizeTokens = controlInputTokens.sizes[size];
|
|
36
|
-
const
|
|
37
|
-
|
|
37
|
+
const appearanceTokens = getFieldStateTokens(
|
|
38
|
+
controlInputTokens.variants[variant],
|
|
39
|
+
{ disabled, error: Boolean(error) }
|
|
40
|
+
);
|
|
38
41
|
return StyleSheet.create({
|
|
39
42
|
placeholder: {
|
|
40
43
|
flex: controlInputTokens.flex,
|
|
41
|
-
color,
|
|
44
|
+
color: appearanceTokens.placeholderColor,
|
|
42
45
|
fontFamily: controlInputTokens.fontFamily,
|
|
43
46
|
fontSize: sizeTokens.fontSize,
|
|
44
47
|
paddingHorizontal: controlInputTokens.paddingHorizontal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n ComponentSize,\n FieldVariant,\n getFieldStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlPlaceholderProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\n props: ControlPlaceholderProps,\n) {\n const { style, ...rest } = props;\n\n const { size, variant, disabled, error } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n error,\n },\n [size, variant, disabled, error],\n );\n\n const placeholderStyle = useMemo(\n () => [styles.placeholder, style],\n [styles.placeholder, style],\n );\n\n return (\n <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n {\n size,\n variant,\n disabled,\n error,\n }: {\n size: ComponentSize;\n variant: FieldVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlInputTokens.variants[variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n placeholder: {\n flex: controlInputTokens.flex,\n color: appearanceTokens.placeholderColor,\n fontFamily: controlInputTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n },\n });\n}\n"],"mappings":"AAuCI;AAvCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,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,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}
|
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
4
|
import {
|
|
5
|
+
getFieldStateTokens,
|
|
5
6
|
useThemedStyles
|
|
6
7
|
} from "@impulse-ui-native/theme";
|
|
7
8
|
import { Typography } from "../atoms";
|
|
@@ -28,12 +29,14 @@ function themedStyles(theme, {
|
|
|
28
29
|
}) {
|
|
29
30
|
const controlInputTokens = theme.components.controlInput;
|
|
30
31
|
const sizeTokens = controlInputTokens.sizes[size];
|
|
31
|
-
const
|
|
32
|
-
|
|
32
|
+
const appearanceTokens = getFieldStateTokens(
|
|
33
|
+
controlInputTokens.variants[variant],
|
|
34
|
+
{ disabled, error: Boolean(error) }
|
|
35
|
+
);
|
|
33
36
|
return StyleSheet.create({
|
|
34
37
|
value: {
|
|
35
38
|
flex: controlInputTokens.flex,
|
|
36
|
-
color,
|
|
39
|
+
color: appearanceTokens.color,
|
|
37
40
|
fontFamily: controlInputTokens.fontFamily,
|
|
38
41
|
fontSize: sizeTokens.fontSize,
|
|
39
42
|
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
|
|
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 FieldVariant,\n getFieldStateTokens,\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: FieldVariant;\n disabled?: boolean;\n error?: string;\n },\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlInputTokens.variants[variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n value: {\n flex: controlInputTokens.flex,\n color: appearanceTokens.color,\n fontFamily: controlInputTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n },\n });\n}\n"],"mappings":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;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,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ImageProps, StyleProp, ImageStyle, ImageSourcePropType, ViewStyle } from 'react-native';
|
|
3
|
-
import { ComponentSize, AvatarStatus,
|
|
3
|
+
import { ComponentSize, AvatarStatus, DisplayVariant } from '@impulse-ui-native/theme';
|
|
4
4
|
import { ViewProps } from './view.types.mjs';
|
|
5
5
|
|
|
6
6
|
interface AvatarImageProps extends Omit<ImageProps, "accessible" | "source" | "style"> {
|
|
@@ -14,7 +14,7 @@ interface AvatarProps extends Omit<ViewProps, "children"> {
|
|
|
14
14
|
source?: ImageSourcePropType;
|
|
15
15
|
status?: AvatarStatus;
|
|
16
16
|
statusColor?: ViewStyle["backgroundColor"];
|
|
17
|
-
variant?:
|
|
17
|
+
variant?: DisplayVariant;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export type { AvatarImageProps, AvatarProps };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ColorValue } from 'react-native';
|
|
3
|
-
import { ComponentSize, BadgeTone,
|
|
3
|
+
import { ComponentSize, BadgeTone, DisplayVariant } from '@impulse-ui-native/theme';
|
|
4
4
|
import { ControlComponentCommonProps } from './control-components.types.mjs';
|
|
5
5
|
import { ViewProps } from './view.types.mjs';
|
|
6
6
|
import '@impulse-ui-native/icon/types';
|
|
@@ -11,14 +11,14 @@ interface BadgeProps extends Omit<ViewProps, "children">, Pick<ControlComponentC
|
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
size?: ComponentSize;
|
|
13
13
|
tone?: BadgeTone;
|
|
14
|
-
variant?:
|
|
14
|
+
variant?: DisplayVariant;
|
|
15
15
|
}
|
|
16
16
|
interface BadgeThemeProps {
|
|
17
17
|
backgroundColor?: ColorValue;
|
|
18
18
|
color?: ColorValue;
|
|
19
19
|
size: ComponentSize;
|
|
20
20
|
tone: BadgeTone;
|
|
21
|
-
variant:
|
|
21
|
+
variant: DisplayVariant;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
export type { BadgeProps, BadgeThemeProps };
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { PressableProps, ViewStyle, StyleProp } from 'react-native';
|
|
2
|
-
import { DimensionProps, SpacingProps, ShadowProps, ComponentSize,
|
|
2
|
+
import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
4
|
interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, ShadowProps {
|
|
5
5
|
size?: ComponentSize;
|
|
6
|
-
variant?:
|
|
6
|
+
variant?: ActionVariant;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
style?: ViewStyle;
|
|
9
9
|
loading?: boolean;
|
|
10
10
|
}
|
|
11
11
|
interface ButtonThemeProps {
|
|
12
12
|
size: ComponentSize;
|
|
13
|
-
variant:
|
|
13
|
+
variant: ActionVariant;
|
|
14
14
|
disabled?: boolean;
|
|
15
|
+
loading: boolean;
|
|
15
16
|
}
|
|
16
17
|
interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style"> {
|
|
17
18
|
disabled?: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
2
|
import { ViewProps, TextProps, TextInputProps } from 'react-native';
|
|
3
3
|
import { IconProps } from '@impulse-ui-native/icon/types';
|
|
4
|
-
import { ComponentSize,
|
|
4
|
+
import { ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
|
|
5
5
|
import { SpinnerProps } from './spinner.types.mjs';
|
|
6
6
|
import { PressableCoreProps } from './button.types.mjs';
|
|
7
7
|
|
|
@@ -17,7 +17,7 @@ interface ControlComponentCommonProps {
|
|
|
17
17
|
}
|
|
18
18
|
interface ControlComponentProps {
|
|
19
19
|
size: ComponentSize;
|
|
20
|
-
variant:
|
|
20
|
+
variant: FieldVariant;
|
|
21
21
|
error: string | undefined;
|
|
22
22
|
disabled: boolean | undefined;
|
|
23
23
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IconProps } from '@impulse-ui-native/icon/types';
|
|
2
|
-
import { ComponentSize,
|
|
2
|
+
import { ComponentSize, ActionVariant } from '@impulse-ui-native/theme';
|
|
3
3
|
import { ButtonProps } from './button.types.mjs';
|
|
4
4
|
import 'react-native';
|
|
5
5
|
|
|
@@ -8,8 +8,9 @@ interface IconButtonProps extends ButtonProps {
|
|
|
8
8
|
}
|
|
9
9
|
interface IconButtonThemeProps {
|
|
10
10
|
size: ComponentSize;
|
|
11
|
-
variant:
|
|
11
|
+
variant: ActionVariant;
|
|
12
12
|
disabled?: boolean;
|
|
13
|
+
loading: boolean;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export type { IconButtonProps, IconButtonThemeProps };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ViewStyle, PressableProps } from 'react-native';
|
|
2
|
-
import { ComponentSize,
|
|
2
|
+
import { ComponentSize, DisplayVariant, TagColor } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
4
|
interface TagProps {
|
|
5
5
|
label: string;
|
|
6
6
|
size?: ComponentSize;
|
|
7
|
-
variant?:
|
|
7
|
+
variant?: DisplayVariant;
|
|
8
8
|
color?: TagColor;
|
|
9
9
|
closable?: boolean;
|
|
10
10
|
disabled?: boolean;
|
|
@@ -14,7 +14,7 @@ interface TagProps {
|
|
|
14
14
|
}
|
|
15
15
|
interface TagThemeProps {
|
|
16
16
|
size: ComponentSize;
|
|
17
|
-
variant:
|
|
17
|
+
variant: DisplayVariant;
|
|
18
18
|
color: TagColor;
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.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": "
|
|
32
|
-
"@impulse-ui-native/icon": "
|
|
33
|
-
"@impulse-ui-native/core": "
|
|
31
|
+
"@impulse-ui-native/theme": "4.0.0",
|
|
32
|
+
"@impulse-ui-native/icon": "4.0.0",
|
|
33
|
+
"@impulse-ui-native/core": "4.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"react-native-svg": "15.15.4",
|
|
43
43
|
"typescript": "~6.0.3",
|
|
44
44
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
45
|
-
"@impulse-ui-native/
|
|
46
|
-
"@impulse-ui-native/
|
|
45
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
46
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": ">=18",
|