@impulse-ui-native/primitives 8.0.0 → 8.2.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 +7 -0
- package/dist/components/atoms/pressable.js +5 -4
- package/dist/components/atoms/pressable.js.map +1 -1
- package/dist/components/atoms/typography.js +1 -1
- package/dist/components/atoms/typography.js.map +1 -1
- package/dist/components/atoms/view.js +5 -5
- package/dist/components/atoms/view.js.map +1 -1
- package/dist/hocs/create-preset.hoc.js +1 -1
- package/dist/hocs/create-preset.hoc.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -129,3 +129,10 @@ Use `Badge` for compact states and metadata. It supports `filled`, `outlined`, a
|
|
|
129
129
|
## Dedicated component packages
|
|
130
130
|
|
|
131
131
|
Card, List, Progress, and their prop types are exported from `@impulse-ui-native/card`, `@impulse-ui-native/list`, and `@impulse-ui-native/progress`, respectively. They remain available through `@impulse-ui-native/toolkit`. Migrate direct primitives imports to their owning packages.
|
|
132
|
+
|
|
133
|
+
## Shared shadow and code-font defaults
|
|
134
|
+
|
|
135
|
+
`View` and `Pressable` resolve semantic shadow levels from the active
|
|
136
|
+
`theme.shadows` scale, including Android elevation. Explicit shadow style props
|
|
137
|
+
and style overrides still take precedence. Configure `theme.codeFontFamily`
|
|
138
|
+
to change `Typography.Code` globally; its default remains `monospace`.
|
|
@@ -6,13 +6,13 @@ import {
|
|
|
6
6
|
} from "react-native";
|
|
7
7
|
import {
|
|
8
8
|
getShadowStyle,
|
|
9
|
-
useColors,
|
|
10
9
|
useComponentsTokens,
|
|
11
|
-
useStyleProps
|
|
10
|
+
useStyleProps,
|
|
11
|
+
useTheme
|
|
12
12
|
} from "@impulse-ui-native/theme";
|
|
13
13
|
const Pressable = memo(
|
|
14
14
|
forwardRef(function PressableCore({ children, disabled, pressedStyle, style, ...props }, ref) {
|
|
15
|
-
const colors =
|
|
15
|
+
const { colors, shadows } = useTheme();
|
|
16
16
|
const tokens = useComponentsTokens();
|
|
17
17
|
const pressableTokens = tokens.pressable;
|
|
18
18
|
const extractedStyleProps = useStyleProps(props);
|
|
@@ -28,7 +28,7 @@ const Pressable = memo(
|
|
|
28
28
|
{
|
|
29
29
|
opacity: disabled ? pressableTokens.disabledOpacity : state.pressed ? pressableTokens.pressedOpacity : 1
|
|
30
30
|
},
|
|
31
|
-
getShadowStyle(props.shadow, props.shadowPosition, colors),
|
|
31
|
+
getShadowStyle(props.shadow, props.shadowPosition, colors, shadows),
|
|
32
32
|
extractedStyleProps,
|
|
33
33
|
overrideStyle,
|
|
34
34
|
state.pressed ? pressedStyle : void 0
|
|
@@ -42,6 +42,7 @@ const Pressable = memo(
|
|
|
42
42
|
props.shadow,
|
|
43
43
|
props.shadowPosition,
|
|
44
44
|
colors,
|
|
45
|
+
shadows,
|
|
45
46
|
pressableTokens.disabledOpacity,
|
|
46
47
|
pressableTokens.pressedOpacity
|
|
47
48
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type { ComponentRef, PropsWithChildren } from \"react\";\nimport { forwardRef, memo, 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
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type { ComponentRef, PropsWithChildren } from \"react\";\nimport { forwardRef, memo, 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 useComponentsTokens,\n useStyleProps,\n useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(\n forwardRef<\n ComponentRef<typeof RNPressable>,\n PropsWithChildren<PressableCoreProps>\n >(function PressableCore(\n { children, disabled, pressedStyle, style, ...props },\n ref,\n ) {\n const { colors, shadows } = useTheme();\n const tokens = useComponentsTokens();\n\n const pressableTokens = tokens.pressable;\n\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, shadows),\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 shadows,\n pressableTokens.disabledOpacity,\n pressableTokens.pressedOpacity,\n ],\n );\n\n return (\n <RNPressable\n {...props}\n ref={ref}\n style={pressableStyles}\n disabled={disabled}\n >\n {children}\n </RNPressable>\n );\n }),\n);\n"],"mappings":"AAyEM;AAxEN,SAAS,YAAY,MAAM,mBAAmB;AAC9C;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY;AAAA,EACvB,WAGE,SAAS,cACT,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,MAAM,GACpD,KACA;AACA,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS;AACrC,UAAM,SAAS,oBAAoB;AAEnC,UAAM,kBAAkB,OAAO;AAE/B,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAA4D;AAC3D,YAAI;AAEJ,YAAI,OAAO,UAAU,YAAY;AAC/B,0BAAgB,MAAM,KAAK;AAAA,QAC7B,OAAO;AACL,0BAAgB;AAAA,QAClB;AAEA,eAAO,WAAW,QAAQ;AAAA,UACxB;AAAA,YACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,UACR;AAAA,UACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,QAAQ,OAAO;AAAA,UAClE;AAAA,UACA;AAAA,UACA,MAAM,UAAU,eAAe;AAAA,QACjC,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAClB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AACH;","names":[]}
|
|
@@ -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) => ({\n color: theme.colors.text.primary,\n fontWeight: theme.fontWeight.regular,\n }),\n \"Master\",\n ),\n\n DisplayLarge: createPreset(\n (theme) => ({\n color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.primary,\n fontFamily:
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/typography.tsx"],"sourcesContent":["import { createPreset } from \"../../hocs\";\n\nexport const Typography = {\n Master: createPreset(\n (theme) => ({\n color: theme.colors.text.primary,\n fontWeight: theme.fontWeight.regular,\n }),\n \"Master\",\n ),\n\n DisplayLarge: createPreset(\n (theme) => ({\n color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.secondary,\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 color: theme.colors.text.primary,\n fontFamily: theme.codeFontFamily,\n fontSize: theme.fontSize.xsm,\n lineHeight: theme.lineHeight.xsm,\n }),\n \"Code\",\n ),\n\n Quote: createPreset(\n (theme) => ({\n color: theme.colors.text.primary,\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 color: theme.colors.text.secondary,\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":[]}
|
|
@@ -3,21 +3,21 @@ import { forwardRef, memo, useMemo } from "react";
|
|
|
3
3
|
import { View as NativeView, StyleSheet } from "react-native";
|
|
4
4
|
import {
|
|
5
5
|
getShadowStyle,
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
useStyleProps,
|
|
7
|
+
useTheme
|
|
8
8
|
} from "@impulse-ui-native/theme";
|
|
9
9
|
const View = memo(
|
|
10
10
|
forwardRef(function View2(props, ref) {
|
|
11
11
|
const { style, shadow, shadowPosition, ...rest } = props;
|
|
12
|
-
const colors =
|
|
12
|
+
const { colors, shadows } = useTheme();
|
|
13
13
|
const extractedStyleProps = useStyleProps(props);
|
|
14
14
|
const viewStyle = useMemo(() => {
|
|
15
15
|
return StyleSheet.flatten([
|
|
16
|
-
getShadowStyle(shadow, shadowPosition, colors),
|
|
16
|
+
getShadowStyle(shadow, shadowPosition, colors, shadows),
|
|
17
17
|
extractedStyleProps,
|
|
18
18
|
style
|
|
19
19
|
]);
|
|
20
|
-
}, [extractedStyleProps, style, shadow, shadowPosition, colors]);
|
|
20
|
+
}, [extractedStyleProps, style, shadow, shadowPosition, colors, shadows]);
|
|
21
21
|
return /* @__PURE__ */ jsx(NativeView, { ...rest, style: viewStyle, ref });
|
|
22
22
|
})
|
|
23
23
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/view.tsx"],"sourcesContent":["import { forwardRef, memo, useMemo } from \"react\";\nimport { View as NativeView, StyleSheet } from \"react-native\";\n\nimport {\n getShadowStyle,\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/view.tsx"],"sourcesContent":["import { forwardRef, memo, useMemo } from \"react\";\nimport { View as NativeView, StyleSheet } from \"react-native\";\n\nimport {\n getShadowStyle,\n useStyleProps,\n useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { ViewProps } from \"../../types\";\n\nexport const View = memo(\n forwardRef<NativeView, ViewProps>(function View(props: ViewProps, ref) {\n const { style, shadow, shadowPosition, ...rest } = props;\n\n const { colors, shadows } = useTheme();\n\n const extractedStyleProps = useStyleProps(props);\n\n const viewStyle = useMemo(() => {\n return StyleSheet.flatten([\n getShadowStyle(shadow, shadowPosition, colors, shadows),\n extractedStyleProps,\n style,\n ]);\n }, [extractedStyleProps, style, shadow, shadowPosition, colors, shadows]);\n\n return <NativeView {...rest} style={viewStyle} ref={ref} />;\n }),\n);\n"],"mappings":"AA2BW;AA3BX,SAAS,YAAY,MAAM,eAAe;AAC1C,SAAS,QAAQ,YAAY,kBAAkB;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,OAAO;AAAA,EAClB,WAAkC,SAASA,MAAK,OAAkB,KAAK;AACrE,UAAM,EAAE,OAAO,QAAQ,gBAAgB,GAAG,KAAK,IAAI;AAEnD,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS;AAErC,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,YAAY,QAAQ,MAAM;AAC9B,aAAO,WAAW,QAAQ;AAAA,QACxB,eAAe,QAAQ,gBAAgB,QAAQ,OAAO;AAAA,QACtD;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,qBAAqB,OAAO,QAAQ,gBAAgB,QAAQ,OAAO,CAAC;AAExE,WAAO,oBAAC,cAAY,GAAG,MAAM,OAAO,WAAW,KAAU;AAAA,EAC3D,CAAC;AACH;","names":["View"]}
|
|
@@ -20,7 +20,7 @@ function createPreset(config, key) {
|
|
|
20
20
|
const typographyStyle = useMemo(() => {
|
|
21
21
|
const themedConfig = config(theme);
|
|
22
22
|
const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? "normal";
|
|
23
|
-
const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ??
|
|
23
|
+
const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? theme.fontWeight.regular;
|
|
24
24
|
const fontFamily = customFontFamily ?? themedConfig.fontFamily ?? theme.fontFamily[resolvedFontStyle][resolvedFontWeight];
|
|
25
25
|
return StyleSheet.flatten([
|
|
26
26
|
{ color: theme.colors.text.primary },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hocs/create-preset.hoc.tsx"],"sourcesContent":["import type { TextStyle } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type {\n AppTheme,\n TypographyPresetKey,\n TypographyProps,\n} from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useTheme } from \"@impulse-ui-native/theme\";\n\nimport type { TextProps } from \"../types\";\n\nconst numericFontVariant: TextStyle[\"fontVariant\"] = [\"tabular-nums\"];\nconst defaultFontVariant: TextStyle[\"fontVariant\"] = [];\n\nexport function createPreset(\n config: (theme: AppTheme) => TypographyProps & Pick<TextProps, \"color\">,\n key: TypographyPresetKey,\n) {\n const Component = (props: TextProps) => {\n const {\n style,\n numeric,\n fontFamily: customFontFamily,\n fontVariant: customFontVariant,\n fontStyle,\n fontWeight,\n ...rest\n } = props;\n\n const theme = useTheme();\n\n const extractedStyleProps = useStyleProps(props);\n\n const typographyStyle = useMemo(() => {\n const themedConfig = config(theme);\n\n const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? \"normal\";\n const resolvedFontWeight
|
|
1
|
+
{"version":3,"sources":["../../src/hocs/create-preset.hoc.tsx"],"sourcesContent":["import type { TextStyle } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type {\n AppTheme,\n TypographyPresetKey,\n TypographyProps,\n} from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useTheme } from \"@impulse-ui-native/theme\";\n\nimport type { TextProps } from \"../types\";\n\nconst numericFontVariant: TextStyle[\"fontVariant\"] = [\"tabular-nums\"];\nconst defaultFontVariant: TextStyle[\"fontVariant\"] = [];\n\nexport function createPreset(\n config: (theme: AppTheme) => TypographyProps & Pick<TextProps, \"color\">,\n key: TypographyPresetKey,\n) {\n const Component = (props: TextProps) => {\n const {\n style,\n numeric,\n fontFamily: customFontFamily,\n fontVariant: customFontVariant,\n fontStyle,\n fontWeight,\n ...rest\n } = props;\n\n const theme = useTheme();\n\n const extractedStyleProps = useStyleProps(props);\n\n const typographyStyle = useMemo(() => {\n const themedConfig = config(theme);\n\n const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? \"normal\";\n const resolvedFontWeight =\n fontWeight ?? themedConfig.fontWeight ?? theme.fontWeight.regular;\n\n const fontFamily =\n customFontFamily ??\n themedConfig.fontFamily ??\n theme.fontFamily[resolvedFontStyle][resolvedFontWeight];\n\n return StyleSheet.flatten([\n { color: theme.colors.text.primary },\n themedConfig,\n extractedStyleProps,\n {\n fontFamily,\n fontVariant: numeric\n ? numericFontVariant\n : (customFontVariant ??\n themedConfig.fontVariant ??\n defaultFontVariant),\n },\n style,\n ]);\n }, [\n theme,\n extractedStyleProps,\n style,\n numeric,\n customFontFamily,\n customFontVariant,\n fontStyle,\n fontWeight,\n ]);\n\n return <Text {...rest} style={typographyStyle} />;\n };\n\n Component.displayName = `Typography.${key}`;\n\n return memo(Component);\n}\n"],"mappings":"AAwEW;AAvEX,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAOjC,SAAS,eAAe,gBAAgB;AAIxC,MAAM,qBAA+C,CAAC,cAAc;AACpE,MAAM,qBAA+C,CAAC;AAE/C,SAAS,aACd,QACA,KACA;AACA,QAAM,YAAY,CAAC,UAAqB;AACtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAQ,SAAS;AAEvB,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB,QAAQ,MAAM;AACpC,YAAM,eAAe,OAAO,KAAK;AAEjC,YAAM,oBAAoB,aAAa,aAAa,aAAa;AACjE,YAAM,qBACJ,cAAc,aAAa,cAAc,MAAM,WAAW;AAE5D,YAAM,aACJ,oBACA,aAAa,cACb,MAAM,WAAW,iBAAiB,EAAE,kBAAkB;AAExD,aAAO,WAAW,QAAQ;AAAA,QACxB,EAAE,OAAO,MAAM,OAAO,KAAK,QAAQ;AAAA,QACnC;AAAA,QACA;AAAA,QACA;AAAA,UACE;AAAA,UACA,aAAa,UACT,qBACC,qBACD,aAAa,eACb;AAAA,QACN;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,oBAAC,QAAM,GAAG,MAAM,OAAO,iBAAiB;AAAA,EACjD;AAEA,YAAU,cAAc,cAAc,GAAG;AAEzC,SAAO,KAAK,SAAS;AACvB;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.2.0",
|
|
4
4
|
"description": "Foundational UI primitives for building ImpulseUI Native components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/core": "8.
|
|
31
|
+
"@impulse-ui-native/theme": "8.2.0",
|
|
32
|
+
"@impulse-ui-native/icon": "8.2.0",
|
|
33
|
+
"@impulse-ui-native/core": "8.2.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"react-native-safe-area-context": "~5.7.0",
|
|
42
42
|
"react-native-svg": "15.15.4",
|
|
43
43
|
"typescript": "~6.0.3",
|
|
44
|
-
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
45
44
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
45
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
46
46
|
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|