@impulse-ui-native/primitives 2.5.0 → 2.6.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.
|
@@ -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.6.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/core": "2.
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/icon": "2.6.0",
|
|
32
|
+
"@impulse-ui-native/core": "2.6.0",
|
|
33
|
+
"@impulse-ui-native/theme": "2.6.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|