@impulse-ui-native/primitives 2.4.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.
- package/dist/components/atoms/pressable.d.mts +3 -2
- package/dist/components/atoms/pressable.js +12 -5
- package/dist/components/atoms/pressable.js.map +1 -1
- package/dist/components/atoms/tag.js +7 -2
- package/dist/components/atoms/tag.js.map +1 -1
- package/dist/components/atoms/typography.js +2 -2
- package/dist/components/atoms/typography.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/dist/constants/index.d.mts +0 -2
- package/dist/constants/index.js +0 -1
- package/dist/constants/index.js.map +1 -1
- package/dist/index.d.mts +0 -1
- package/package.json +5 -5
- package/dist/constants/control-container.constants.d.mts +0 -6
- package/dist/constants/control-container.constants.js +0 -15
- package/dist/constants/control-container.constants.js.map +0 -1
- package/dist/utils/controls.utils.d.mts +0 -13
- package/dist/utils/controls.utils.js +0 -18
- package/dist/utils/controls.utils.js.map +0 -1
- package/dist/utils/index.d.mts +0 -2
- package/dist/utils/index.js +0 -2
- package/dist/utils/index.js.map +0 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
import { PressableCoreProps } from '../../types/button.types.mjs';
|
|
4
5
|
import 'react-native';
|
|
5
6
|
import '@impulse-ui-native/theme';
|
|
6
7
|
|
|
7
|
-
declare const Pressable: ({ children, disabled, pressedStyle, style, ...props }: PropsWithChildren<PressableCoreProps>) => react_jsx_runtime.JSX.Element
|
|
8
|
+
declare const Pressable: react.MemoExoticComponent<({ children, disabled, pressedStyle, style, ...props }: PropsWithChildren<PressableCoreProps>) => react_jsx_runtime.JSX.Element>;
|
|
8
9
|
|
|
9
10
|
export { Pressable };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback } from "react";
|
|
2
|
+
import { memo, useCallback } from "react";
|
|
3
3
|
import {
|
|
4
4
|
Pressable as RNPressable,
|
|
5
5
|
StyleSheet
|
|
@@ -7,9 +7,10 @@ import {
|
|
|
7
7
|
import {
|
|
8
8
|
getShadowStyle,
|
|
9
9
|
useColors,
|
|
10
|
+
useComponentsTokens,
|
|
10
11
|
useStyleProps
|
|
11
12
|
} from "@impulse-ui-native/theme";
|
|
12
|
-
const Pressable = function PressableCore({
|
|
13
|
+
const Pressable = memo(function PressableCore({
|
|
13
14
|
children,
|
|
14
15
|
disabled,
|
|
15
16
|
pressedStyle,
|
|
@@ -17,6 +18,8 @@ const Pressable = function PressableCore({
|
|
|
17
18
|
...props
|
|
18
19
|
}) {
|
|
19
20
|
const colors = useColors();
|
|
21
|
+
const tokens = useComponentsTokens();
|
|
22
|
+
const pressableTokens = tokens.pressable;
|
|
20
23
|
const extractedStyleProps = useStyleProps(props);
|
|
21
24
|
const pressableStyles = useCallback(
|
|
22
25
|
(state) => {
|
|
@@ -27,7 +30,9 @@ const Pressable = function PressableCore({
|
|
|
27
30
|
overrideStyle = style;
|
|
28
31
|
}
|
|
29
32
|
return StyleSheet.flatten([
|
|
30
|
-
{
|
|
33
|
+
{
|
|
34
|
+
opacity: disabled ? pressableTokens.disabledOpacity : state.pressed ? pressableTokens.pressedOpacity : 1
|
|
35
|
+
},
|
|
31
36
|
getShadowStyle(props.shadow, props.shadowPosition, colors),
|
|
32
37
|
extractedStyleProps,
|
|
33
38
|
overrideStyle,
|
|
@@ -41,11 +46,13 @@ const Pressable = function PressableCore({
|
|
|
41
46
|
extractedStyleProps,
|
|
42
47
|
props.shadow,
|
|
43
48
|
props.shadowPosition,
|
|
44
|
-
colors
|
|
49
|
+
colors,
|
|
50
|
+
pressableTokens.disabledOpacity,
|
|
51
|
+
pressableTokens.pressedOpacity
|
|
45
52
|
]
|
|
46
53
|
);
|
|
47
54
|
return /* @__PURE__ */ jsx(RNPressable, { ...props, style: pressableStyles, disabled, children });
|
|
48
|
-
};
|
|
55
|
+
});
|
|
49
56
|
export {
|
|
50
57
|
Pressable
|
|
51
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import { PropsWithChildren, useCallback } from \"react\";\nimport {\n PressableStateCallbackType,\n Pressable as RNPressable,\n StyleProp,\n StyleSheet,\n ViewStyle,\n} from \"react-native\";\n\nimport {\n getShadowStyle,\n useColors,\n useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = function PressableCore({\n children,\n disabled,\n pressedStyle,\n style,\n ...props\n}: PropsWithChildren<PressableCoreProps>) {\n const colors = useColors();\n const extractedStyleProps = useStyleProps(props);\n\n const pressableStyles = useCallback(\n (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n let overrideStyle: StyleProp<ViewStyle>;\n\n if (typeof style === \"function\") {\n overrideStyle = style(state);\n } else {\n overrideStyle = style;\n }\n\n return StyleSheet.flatten([\n {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useCallback } from \"react\";\nimport {\n PressableStateCallbackType,\n Pressable as RNPressable,\n StyleProp,\n StyleSheet,\n ViewStyle,\n} from \"react-native\";\n\nimport {\n getShadowStyle,\n useColors,\n useComponentsTokens,\n useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(function PressableCore({\n children,\n disabled,\n pressedStyle,\n style,\n ...props\n}: PropsWithChildren<PressableCoreProps>) {\n const colors = useColors();\n const tokens = useComponentsTokens();\n const pressableTokens = tokens.pressable;\n const extractedStyleProps = useStyleProps(props);\n\n const pressableStyles = useCallback(\n (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n let overrideStyle: StyleProp<ViewStyle>;\n\n if (typeof style === \"function\") {\n overrideStyle = style(state);\n } else {\n overrideStyle = style;\n }\n\n return StyleSheet.flatten([\n {\n opacity: disabled\n ? pressableTokens.disabledOpacity\n : state.pressed\n ? pressableTokens.pressedOpacity\n : 1,\n },\n getShadowStyle(props.shadow, props.shadowPosition, colors),\n extractedStyleProps,\n overrideStyle,\n state.pressed ? pressedStyle : undefined,\n ]);\n },\n [\n style,\n pressedStyle,\n disabled,\n extractedStyleProps,\n props.shadow,\n props.shadowPosition,\n colors,\n pressableTokens.disabledOpacity,\n pressableTokens.pressedOpacity,\n ],\n );\n\n return (\n <RNPressable {...props} style={pressableStyles} disabled={disabled}>\n {children}\n </RNPressable>\n );\n});\n"],"mappings":"AAoEI;AApEJ,SAAS,MAAyB,mBAAmB;AACrD;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY,KAAK,SAAS,cAAc;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,oBAAoB;AACnC,QAAM,kBAAkB,OAAO;AAC/B,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA4D;AAC3D,UAAI;AAEJ,UAAI,OAAO,UAAU,YAAY;AAC/B,wBAAgB,MAAM,KAAK;AAAA,MAC7B,OAAO;AACL,wBAAgB;AAAA,MAClB;AAEA,aAAO,WAAW,QAAQ;AAAA,QACxB;AAAA,UACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,QACR;AAAA,QACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,MAAM;AAAA,QACzD;AAAA,QACA;AAAA,QACA,MAAM,UAAU,eAAe;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAO,iBAAiB,UAC7C,UACH;AAEJ,CAAC;","names":[]}
|
|
@@ -3,7 +3,10 @@ import { memo, useMemo } from "react";
|
|
|
3
3
|
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
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
useComponentsTokens,
|
|
8
|
+
useThemedStyles
|
|
9
|
+
} from "@impulse-ui-native/theme";
|
|
7
10
|
import { Pressable } from "./pressable";
|
|
8
11
|
import { Typography } from "./typography";
|
|
9
12
|
const Tag = memo(function Tag2({
|
|
@@ -16,6 +19,8 @@ const Tag = memo(function Tag2({
|
|
|
16
19
|
onClose,
|
|
17
20
|
onPress
|
|
18
21
|
}) {
|
|
22
|
+
const tokens = useComponentsTokens();
|
|
23
|
+
const tagTokens = tokens.tag;
|
|
19
24
|
const styles = useThemedStyles(
|
|
20
25
|
themedStyles,
|
|
21
26
|
{
|
|
@@ -35,7 +40,7 @@ const Tag = memo(function Tag2({
|
|
|
35
40
|
const showClose = closable && !disabled && onClose;
|
|
36
41
|
return /* @__PURE__ */ jsxs(Container, { onPress, disabled, style: styles.container, children: [
|
|
37
42
|
/* @__PURE__ */ jsx(Typography.Caption, { style: styles.label, children: label }),
|
|
38
|
-
showClose ? /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop:
|
|
43
|
+
showClose ? /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: tagTokens.closeHitSlop, children: /* @__PURE__ */ jsx(
|
|
39
44
|
Icon,
|
|
40
45
|
{
|
|
41
46
|
icon: XCircleIcon,
|
|
@@ -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 {
|
|
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 variantTokens = tagTokens.colors[color][variant];\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: disabled\n ? variantTokens.disabledBorderColor\n : variantTokens.borderColor,\n\n backgroundColor: disabled\n ? variantTokens.disabledBackgroundColor\n : variantTokens.backgroundColor,\n },\n\n label: {\n fontSize: sizeTokens.fontSize,\n color: disabled ? variantTokens.disabledColor : variantTokens.color,\n },\n\n icon: {\n marginLeft: tagTokens.iconMarginLeft,\n color: disabled ? variantTokens.disabledColor : variantTokens.color,\n },\n });\n}\n"],"mappings":"AAiDI,SACE,KADF;AAjDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAEjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EAEE;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,gBAAgB,UAAU,OAAO,KAAK,EAAE,OAAO;AAErD,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,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["Tag"]}
|
|
@@ -138,7 +138,7 @@ const Typography = {
|
|
|
138
138
|
fontSize: theme.fontSize.xs,
|
|
139
139
|
lineHeight: theme.lineHeight.xs,
|
|
140
140
|
textTransform: "uppercase",
|
|
141
|
-
letterSpacing:
|
|
141
|
+
letterSpacing: theme.letterSpacing.ultraWide
|
|
142
142
|
}),
|
|
143
143
|
"Overline"
|
|
144
144
|
),
|
|
@@ -173,7 +173,7 @@ const Typography = {
|
|
|
173
173
|
fontSize: theme.fontSize.xs,
|
|
174
174
|
lineHeight: theme.lineHeight.xs,
|
|
175
175
|
textTransform: "uppercase",
|
|
176
|
-
letterSpacing:
|
|
176
|
+
letterSpacing: theme.letterSpacing.ultraWide
|
|
177
177
|
}),
|
|
178
178
|
"Eyebrow"
|
|
179
179
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/typography.tsx"],"sourcesContent":["import { createPreset } from \"../../hocs\";\n\nexport const Typography = {\n Master: createPreset(\n (theme) => ({ fontWeight: theme.fontWeight.regular }),\n \"Master\",\n ),\n\n DisplayLarge: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.colossal,\n lineHeight: theme.lineHeight.colossal,\n }),\n \"DisplayLarge\",\n ),\n\n DisplayMedium: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.giant,\n lineHeight: theme.lineHeight.giant,\n }),\n \"DisplayMedium\",\n ),\n\n DisplaySmall: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.huge,\n lineHeight: theme.lineHeight.huge,\n }),\n \"DisplaySmall\",\n ),\n\n Title1: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.xxxl,\n lineHeight: theme.lineHeight.xxxl,\n }),\n \"Title1\",\n ),\n\n Title2: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.xxl,\n lineHeight: theme.lineHeight.xxl,\n }),\n \"Title2\",\n ),\n\n Title3: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.xl,\n lineHeight: theme.lineHeight.xl,\n }),\n \"Title3\",\n ),\n\n Title4: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.lg,\n lineHeight: theme.lineHeight.lg,\n }),\n \"Title4\",\n ),\n\n Title5: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.md,\n }),\n \"Title5\",\n ),\n\n Title6: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.sm,\n lineHeight: theme.lineHeight.sm,\n }),\n \"Title6\",\n ),\n\n Subtitle1: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.medium,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.lg,\n }),\n \"Subtitle1\",\n ),\n\n Subtitle2: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.sm,\n lineHeight: theme.lineHeight.sm,\n }),\n \"Subtitle2\",\n ),\n\n BodyLarge: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.lg,\n }),\n \"BodyLarge\",\n ),\n\n Body: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.sm,\n lineHeight: theme.lineHeight.sm,\n }),\n \"Body\",\n ),\n\n BodySmall: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"BodySmall\",\n ),\n\n Caption: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.xs,\n lineHeight: theme.lineHeight.xs,\n }),\n \"Caption\",\n ),\n\n Label: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.medium,\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"Label\",\n ),\n\n Overline: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.xs,\n lineHeight: theme.lineHeight.xs,\n textTransform: \"uppercase\",\n letterSpacing:
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/typography.tsx"],"sourcesContent":["import { createPreset } from \"../../hocs\";\n\nexport const Typography = {\n Master: createPreset(\n (theme) => ({ fontWeight: theme.fontWeight.regular }),\n \"Master\",\n ),\n\n DisplayLarge: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.colossal,\n lineHeight: theme.lineHeight.colossal,\n }),\n \"DisplayLarge\",\n ),\n\n DisplayMedium: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.giant,\n lineHeight: theme.lineHeight.giant,\n }),\n \"DisplayMedium\",\n ),\n\n DisplaySmall: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.huge,\n lineHeight: theme.lineHeight.huge,\n }),\n \"DisplaySmall\",\n ),\n\n Title1: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.xxxl,\n lineHeight: theme.lineHeight.xxxl,\n }),\n \"Title1\",\n ),\n\n Title2: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.xxl,\n lineHeight: theme.lineHeight.xxl,\n }),\n \"Title2\",\n ),\n\n Title3: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.xl,\n lineHeight: theme.lineHeight.xl,\n }),\n \"Title3\",\n ),\n\n Title4: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.lg,\n lineHeight: theme.lineHeight.lg,\n }),\n \"Title4\",\n ),\n\n Title5: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.md,\n }),\n \"Title5\",\n ),\n\n Title6: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.sm,\n lineHeight: theme.lineHeight.sm,\n }),\n \"Title6\",\n ),\n\n Subtitle1: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.medium,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.lg,\n }),\n \"Subtitle1\",\n ),\n\n Subtitle2: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.sm,\n lineHeight: theme.lineHeight.sm,\n }),\n \"Subtitle2\",\n ),\n\n BodyLarge: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.lg,\n }),\n \"BodyLarge\",\n ),\n\n Body: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.sm,\n lineHeight: theme.lineHeight.sm,\n }),\n \"Body\",\n ),\n\n BodySmall: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"BodySmall\",\n ),\n\n Caption: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.xs,\n lineHeight: theme.lineHeight.xs,\n }),\n \"Caption\",\n ),\n\n Label: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.medium,\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"Label\",\n ),\n\n Overline: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.semiBold,\n fontSize: theme.fontSize.xs,\n lineHeight: theme.lineHeight.xs,\n textTransform: \"uppercase\",\n letterSpacing: theme.letterSpacing.ultraWide,\n }),\n \"Overline\",\n ),\n\n Helper: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"Helper\",\n ),\n\n Code: createPreset(\n (theme) => ({\n fontFamily: \"monospace\",\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"Code\",\n ),\n\n Quote: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.regular,\n fontSize: theme.fontSize.md,\n lineHeight: theme.lineHeight.lg,\n fontStyle: \"italic\",\n }),\n \"Quote\",\n ),\n\n Eyebrow: createPreset(\n (theme) => ({\n fontWeight: theme.fontWeight.medium,\n fontSize: theme.fontSize.xs,\n lineHeight: theme.lineHeight.xs,\n textTransform: \"uppercase\",\n letterSpacing: theme.letterSpacing.ultraWide,\n }),\n \"Eyebrow\",\n ),\n};\n\nexport type TypographyComponent = (typeof Typography)[keyof typeof Typography];\n"],"mappings":"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","names":[]}
|
|
@@ -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/dist/constants/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./safe-area-view.constants\";\
|
|
1
|
+
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./safe-area-view.constants\";\n"],"mappings":"AAAA,cAAc;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -9,7 +9,6 @@ export { Control } from './components/controls/control.mjs';
|
|
|
9
9
|
export { useControlContext } from './components/controls/provider.mjs';
|
|
10
10
|
export { createPreset } from './hocs/create-preset.hoc.mjs';
|
|
11
11
|
export { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from './constants/safe-area-view.constants.mjs';
|
|
12
|
-
export { ControlContainerHeight, ControlFontSize } from './constants/control-container.constants.mjs';
|
|
13
12
|
export { ViewProps } from './types/view.types.mjs';
|
|
14
13
|
export { SafeAreaViewProps } from './types/safe-area-view.types.mjs';
|
|
15
14
|
export { TextProps } from './types/typography.types.mjs';
|
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",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"react-native": "0.86.2",
|
|
41
41
|
"react-native-safe-area-context": "~5.7.0",
|
|
42
42
|
"typescript": "~6.0.3",
|
|
43
|
-
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
44
43
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
44
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
45
45
|
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
const ControlContainerHeight = {
|
|
2
|
-
small: 36,
|
|
3
|
-
medium: 44,
|
|
4
|
-
large: 52
|
|
5
|
-
};
|
|
6
|
-
const ControlFontSize = {
|
|
7
|
-
small: 14,
|
|
8
|
-
medium: 16,
|
|
9
|
-
large: 18
|
|
10
|
-
};
|
|
11
|
-
export {
|
|
12
|
-
ControlContainerHeight,
|
|
13
|
-
ControlFontSize
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=control-container.constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/control-container.constants.ts"],"sourcesContent":["import { ComponentSize } from \"@impulse-ui-native/theme\";\n\nexport const ControlContainerHeight: Record<ComponentSize, number> = {\n small: 36,\n medium: 44,\n large: 52,\n};\n\nexport const ControlFontSize: Record<ComponentSize, number> = {\n small: 14,\n medium: 16,\n large: 18,\n};\n"],"mappings":"AAEO,MAAM,yBAAwD;AAAA,EACnE,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,kBAAiD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;","names":[]}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { AppTheme, ComponentSize, ThemeColors } from '@impulse-ui-native/theme';
|
|
2
|
-
|
|
3
|
-
declare function getInputStyles(theme: AppTheme, { size, }: {
|
|
4
|
-
size: ComponentSize;
|
|
5
|
-
}): {
|
|
6
|
-
fontFamily: string;
|
|
7
|
-
fontSize: number;
|
|
8
|
-
paddingHorizontal: number;
|
|
9
|
-
flex: number;
|
|
10
|
-
};
|
|
11
|
-
declare function getPlaceholderTextColor(colors: ThemeColors): string;
|
|
12
|
-
|
|
13
|
-
export { getInputStyles, getPlaceholderTextColor };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ControlFontSize } from "../constants";
|
|
2
|
-
function getInputStyles(theme, {
|
|
3
|
-
size
|
|
4
|
-
}) {
|
|
5
|
-
const fontSize = ControlFontSize[size];
|
|
6
|
-
const fontFamily = theme.fontFamily.normal[400];
|
|
7
|
-
const paddingHorizontal = theme.space.xxs;
|
|
8
|
-
const flex = 1;
|
|
9
|
-
return { fontFamily, fontSize, paddingHorizontal, flex };
|
|
10
|
-
}
|
|
11
|
-
function getPlaceholderTextColor(colors) {
|
|
12
|
-
return colors.neutral[7];
|
|
13
|
-
}
|
|
14
|
-
export {
|
|
15
|
-
getInputStyles,
|
|
16
|
-
getPlaceholderTextColor
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=controls.utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/controls.utils.ts"],"sourcesContent":["import { AppTheme, ComponentSize, ThemeColors } from \"@impulse-ui-native/theme\";\n\nimport { ControlFontSize } from \"../constants\";\n\nexport function getInputStyles(\n theme: AppTheme,\n {\n size,\n }: {\n size: ComponentSize;\n },\n) {\n const fontSize = ControlFontSize[size];\n const fontFamily = theme.fontFamily.normal[400];\n const paddingHorizontal = theme.space.xxs;\n const flex = 1;\n\n return { fontFamily, fontSize, paddingHorizontal, flex };\n}\n\nexport function getPlaceholderTextColor(colors: ThemeColors) {\n return colors.neutral[7];\n}\n"],"mappings":"AAEA,SAAS,uBAAuB;AAEzB,SAAS,eACd,OACA;AAAA,EACE;AACF,GAGA;AACA,QAAM,WAAW,gBAAgB,IAAI;AACrC,QAAM,aAAa,MAAM,WAAW,OAAO,GAAG;AAC9C,QAAM,oBAAoB,MAAM,MAAM;AACtC,QAAM,OAAO;AAEb,SAAO,EAAE,YAAY,UAAU,mBAAmB,KAAK;AACzD;AAEO,SAAS,wBAAwB,QAAqB;AAC3D,SAAO,OAAO,QAAQ,CAAC;AACzB;","names":[]}
|
package/dist/utils/index.d.mts
DELETED
package/dist/utils/index.js
DELETED
package/dist/utils/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from \"./controls.utils\";\n"],"mappings":"AAAA,cAAc;","names":[]}
|