@impulse-ui-native/theme 9.1.2 → 10.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/dist/hooks/use-border.hook.js +1 -2
- package/dist/hooks/use-border.hook.js.map +1 -1
- package/dist/hooks/use-colors.hook.js +1 -2
- package/dist/hooks/use-colors.hook.js.map +1 -1
- package/dist/hooks/use-components-tokens.hook.js +1 -2
- package/dist/hooks/use-components-tokens.hook.js.map +1 -1
- package/dist/hooks/use-radii.hook.js +1 -2
- package/dist/hooks/use-radii.hook.js.map +1 -1
- package/dist/hooks/use-space.hook.js +1 -2
- package/dist/hooks/use-space.hook.js.map +1 -1
- package/dist/hooks/use-style-props.hook.js +4 -3
- package/dist/hooks/use-style-props.hook.js.map +1 -1
- package/dist/hooks/use-themed-styles.d.mts +9 -7
- package/dist/hooks/use-themed-styles.js.map +1 -1
- package/dist/index.d.mts +0 -1
- package/dist/providers/index.d.mts +0 -1
- package/dist/providers/theme.provider.d.mts +1 -2
- package/dist/utils/style.utils.js +2 -7
- package/dist/utils/style.utils.js.map +1 -1
- package/package.json +7 -7
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
1
|
import { useThemeContext } from "../providers";
|
|
3
2
|
function useBorder() {
|
|
4
3
|
const context = useThemeContext();
|
|
5
|
-
return
|
|
4
|
+
return context.borderSize;
|
|
6
5
|
}
|
|
7
6
|
export {
|
|
8
7
|
useBorder
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-border.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-border.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\r\nimport { BorderSize } from \"../types\";\r\n\r\nexport function useBorder(): BorderSize {\r\n const context = useThemeContext();\r\n\r\n return context.borderSize;\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,YAAwB;AACtC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-colors.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-colors.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\r\nimport { ThemeColors } from \"../types\";\r\n\r\nexport function useColors(): ThemeColors {\r\n const context = useThemeContext();\r\n\r\n return context.colors;\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,YAAyB;AACvC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
1
|
import { useThemeContext } from "../providers";
|
|
3
2
|
function useComponentsTokens() {
|
|
4
3
|
const context = useThemeContext();
|
|
5
|
-
return
|
|
4
|
+
return context.components;
|
|
6
5
|
}
|
|
7
6
|
export {
|
|
8
7
|
useComponentsTokens
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-components-tokens.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-components-tokens.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\n\nexport function useComponentsTokens() {\n const context = useThemeContext();\n\n return context.components;\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAEzB,SAAS,sBAAsB;AACpC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-radii.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-radii.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\r\nimport { Radii } from \"../types\";\r\n\r\nexport function useRadii(): Radii {\r\n const context = useThemeContext();\r\n\r\n return context.radii;\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,WAAkB;AAChC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-space.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-space.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\r\nimport { Space } from \"../types\";\r\n\r\nexport function useSpace(): Space {\r\n const context = useThemeContext();\r\n\r\n return context.space;\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,WAAkB;AAChC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { StylePropsSet } from "../constants";
|
|
3
|
+
import { extractStyleProps } from "../utils";
|
|
3
4
|
function useStyleProps(props) {
|
|
4
|
-
const
|
|
5
|
-
return useMemo(() => extractStyleProps(props),
|
|
5
|
+
const values = Array.from(StylePropsSet, (key) => props[key]);
|
|
6
|
+
return useMemo(() => extractStyleProps(props), values);
|
|
6
7
|
}
|
|
7
8
|
export {
|
|
8
9
|
useStyleProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-style-props.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-style-props.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { StylePropsSet } from \"../constants\";\r\nimport { extractStyleProps } from \"../utils\";\r\n\r\nexport function useStyleProps<Props extends object>(props: Props) {\r\n // The fixed key order compares actual values without a serialized cache key.\r\n const values = Array.from(StylePropsSet, (key) => props[key as keyof Props]);\r\n\r\n return useMemo(() => extractStyleProps(props), values);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAE3B,SAAS,cAAoC,OAAc;AAEhE,QAAM,SAAS,MAAM,KAAK,eAAe,CAAC,QAAQ,MAAM,GAAkB,CAAC;AAE3E,SAAO,QAAQ,MAAM,kBAAkB,KAAK,GAAG,MAAM;AACvD;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
|
|
2
2
|
import { A as AppTheme } from '../theme-provider.types-CIh3wHN_.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
@@ -38,11 +38,13 @@ import '../types/tag-tokens.types.mjs';
|
|
|
38
38
|
import '../types/textarea-tokens.types.mjs';
|
|
39
39
|
import '../types/time-picker-token.types.mjs';
|
|
40
40
|
|
|
41
|
-
type
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
type NamedStyles<T> = {
|
|
42
|
+
[Key in keyof T]: ViewStyle | TextStyle | ImageStyle;
|
|
43
|
+
};
|
|
44
|
+
type ThemedStyles<T extends NamedStyles<T>> = T;
|
|
45
|
+
type StyledFunctionNoProps<T extends NamedStyles<T>> = (theme: AppTheme) => ThemedStyles<T>;
|
|
46
|
+
type StyledFunctionWithProps<Props extends object, T extends NamedStyles<T>> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
|
|
47
|
+
declare function useThemedStyles<T extends NamedStyles<T>>(styledFunction: StyledFunctionNoProps<T>): ThemedStyles<T>;
|
|
48
|
+
declare function useThemedStyles<Props extends object, T extends NamedStyles<T>>(styledFunction: StyledFunctionWithProps<Props, T>, props: Props, dependencies: readonly unknown[]): ThemedStyles<T>;
|
|
47
49
|
|
|
48
50
|
export { useThemedStyles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-themed-styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-themed-styles.ts"],"sourcesContent":["import type { ImageStyle, TextStyle, ViewStyle } from \"react-native\";\nimport { useMemo } from \"react\";\n\nimport { AppTheme } from \"../types\";\nimport { useTheme } from \"./use-theme.hook\";\n\ntype NamedStyles<T> = { [Key in keyof T]: ViewStyle | TextStyle | ImageStyle };\n\ntype ThemedStyles<T extends NamedStyles<T>> = T;\n\ntype StyledFunctionNoProps<T extends NamedStyles<T>> = (\n theme: AppTheme,\n) => ThemedStyles<T>;\n\ntype StyledFunctionWithProps<Props extends object, T extends NamedStyles<T>> = (\n theme: AppTheme,\n props: Props,\n) => ThemedStyles<T>;\n\nexport function useThemedStyles<T extends NamedStyles<T>>(\n styledFunction: StyledFunctionNoProps<T>,\n): ThemedStyles<T>;\n\nexport function useThemedStyles<Props extends object, T extends NamedStyles<T>>(\n styledFunction: StyledFunctionWithProps<Props, T>,\n props: Props,\n dependencies: readonly unknown[],\n): ThemedStyles<T>;\n\nexport function useThemedStyles<Props extends object, T extends NamedStyles<T>>(\n styledFunction: StyledFunctionNoProps<T> | StyledFunctionWithProps<Props, T>,\n props?: Props,\n dependencies?: readonly unknown[],\n): ThemedStyles<T> {\n const theme = useTheme();\n\n const memoDependencies = dependencies ?? (props === undefined ? [] : [props]);\n\n return useMemo(() => {\n if (props === undefined) {\n return (styledFunction as StyledFunctionNoProps<T>)(theme);\n }\n\n return (styledFunction as StyledFunctionWithProps<Props, T>)(theme, props);\n }, [theme, styledFunction, ...memoDependencies]);\n}\n"],"mappings":"AACA,SAAS,eAAe;AAGxB,SAAS,gBAAgB;AAyBlB,SAAS,gBACd,gBACA,OACA,cACiB;AACjB,QAAM,QAAQ,SAAS;AAEvB,QAAM,mBAAmB,iBAAiB,UAAU,SAAY,CAAC,IAAI,CAAC,KAAK;AAE3E,SAAO,QAAQ,MAAM;AACnB,QAAI,UAAU,QAAW;AACvB,aAAQ,eAA4C,KAAK;AAAA,IAC3D;AAEA,WAAQ,eAAqD,OAAO,KAAK;AAAA,EAC3E,GAAG,CAAC,OAAO,gBAAgB,GAAG,gBAAgB,CAAC;AACjD;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
3
|
import { DeepPartial } from '@impulse-ui-native/core';
|
|
5
4
|
import { a as ColorScheme, P as PrimitiveThemeTokens, c as ComponentsTokens, A as AppTheme } from '../theme-provider.types-CIh3wHN_.mjs';
|
|
6
5
|
import '../types/badge-tokens.types.mjs';
|
|
@@ -50,7 +49,7 @@ interface ThemeProviderProps {
|
|
|
50
49
|
}>;
|
|
51
50
|
components?: ((theme: PrimitiveThemeTokens) => DeepPartial<ComponentsTokens>) | DeepPartial<ComponentsTokens>;
|
|
52
51
|
}
|
|
53
|
-
declare const ThemeProvider: react.MemoExoticComponent<(props: PropsWithChildren<ThemeProviderProps>) =>
|
|
52
|
+
declare const ThemeProvider: react.MemoExoticComponent<(props: PropsWithChildren<ThemeProviderProps>) => react.JSX.Element>;
|
|
54
53
|
declare function useThemeContext(): AppTheme;
|
|
55
54
|
|
|
56
55
|
export { ThemeProvider, useThemeContext };
|
|
@@ -11,13 +11,8 @@ const extractStyleProps = (props) => {
|
|
|
11
11
|
return style;
|
|
12
12
|
};
|
|
13
13
|
const createStyleKey = (props) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
if (isStylePropKey(k)) {
|
|
17
|
-
key += String(props[k]);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
return key;
|
|
14
|
+
const entries = Object.keys(props).filter(isStylePropKey).sort().map((key) => [key, props[key]]);
|
|
15
|
+
return JSON.stringify(entries);
|
|
21
16
|
};
|
|
22
17
|
const getShadowStyle = (level = "none", position = "bottom", colors, shadows = ShadowScale) => {
|
|
23
18
|
const token = shadows[level];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/style.utils.ts"],"sourcesContent":["import { Platform, ViewStyle } from \"react-native\";\n\nimport { ShadowScale, StylePropsSet } from \"../constants\";\nimport {\n ShadowLevel,\n ShadowPosition,\n ShadowScaleTokens,\n StylePropKey,\n StyleProps,\n ThemeColors,\n} from \"../types\";\n\nconst isStylePropKey = (k: string): k is StylePropKey =>\n StylePropsSet.has(k as StylePropKey);\n\nexport const extractStyleProps = <Props extends object>(\n props: Props,\n): StyleProps => {\n const style: StyleProps = {};\n\n for (const k in props) {\n if (isStylePropKey(k) && props[k] !== undefined) {\n style[k] = props[k] as any;\n }\n }\n\n return style;\n};\n\nexport const createStyleKey = <Props extends object>(props: Props) => {\n
|
|
1
|
+
{"version":3,"sources":["../../src/utils/style.utils.ts"],"sourcesContent":["import { Platform, ViewStyle } from \"react-native\";\n\nimport { ShadowScale, StylePropsSet } from \"../constants\";\nimport {\n ShadowLevel,\n ShadowPosition,\n ShadowScaleTokens,\n StylePropKey,\n StyleProps,\n ThemeColors,\n} from \"../types\";\n\nconst isStylePropKey = (k: string): k is StylePropKey =>\n StylePropsSet.has(k as StylePropKey);\n\nexport const extractStyleProps = <Props extends object>(\n props: Props,\n): StyleProps => {\n const style: StyleProps = {};\n\n for (const k in props) {\n if (isStylePropKey(k) && props[k] !== undefined) {\n style[k] = props[k] as any;\n }\n }\n\n return style;\n};\n\nexport const createStyleKey = <Props extends object>(props: Props) => {\n const entries = Object.keys(props)\n .filter(isStylePropKey)\n .sort()\n .map((key) => [key, props[key as keyof Props]]);\n\n return JSON.stringify(entries);\n};\n\nexport const getShadowStyle = (\n level: ShadowLevel = \"none\",\n position: ShadowPosition = \"bottom\",\n colors: ThemeColors,\n shadows: ShadowScaleTokens = ShadowScale,\n): ViewStyle => {\n const token = shadows[level];\n\n if (level === \"none\") {\n return {};\n }\n\n if (Platform.OS === \"android\") {\n return {\n elevation: token.elevation,\n };\n }\n\n let offsetY = 0;\n\n if (position === \"bottom\") {\n offsetY = token.radius / 2;\n }\n\n if (position === \"top\") {\n offsetY = -token.radius / 2;\n }\n\n if (position === \"around\") {\n offsetY = 0;\n }\n\n return {\n shadowColor: colors.black,\n shadowOpacity: token.opacity,\n shadowRadius: token.radius,\n shadowOffset: {\n width: 0,\n height: offsetY,\n },\n };\n};\n"],"mappings":"AAAA,SAAS,gBAA2B;AAEpC,SAAS,aAAa,qBAAqB;AAU3C,MAAM,iBAAiB,CAAC,MACtB,cAAc,IAAI,CAAiB;AAE9B,MAAM,oBAAoB,CAC/B,UACe;AACf,QAAM,QAAoB,CAAC;AAE3B,aAAW,KAAK,OAAO;AACrB,QAAI,eAAe,CAAC,KAAK,MAAM,CAAC,MAAM,QAAW;AAC/C,YAAM,CAAC,IAAI,MAAM,CAAC;AAAA,IACpB;AAAA,EACF;AAEA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAuB,UAAiB;AACpE,QAAM,UAAU,OAAO,KAAK,KAAK,EAC9B,OAAO,cAAc,EACrB,KAAK,EACL,IAAI,CAAC,QAAQ,CAAC,KAAK,MAAM,GAAkB,CAAC,CAAC;AAEhD,SAAO,KAAK,UAAU,OAAO;AAC/B;AAEO,MAAM,iBAAiB,CAC5B,QAAqB,QACrB,WAA2B,UAC3B,QACA,UAA6B,gBACf;AACd,QAAM,QAAQ,QAAQ,KAAK;AAE3B,MAAI,UAAU,QAAQ;AACpB,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,SAAS,OAAO,WAAW;AAC7B,WAAO;AAAA,MACL,WAAW,MAAM;AAAA,IACnB;AAAA,EACF;AAEA,MAAI,UAAU;AAEd,MAAI,aAAa,UAAU;AACzB,cAAU,MAAM,SAAS;AAAA,EAC3B;AAEA,MAAI,aAAa,OAAO;AACtB,cAAU,CAAC,MAAM,SAAS;AAAA,EAC5B;AAEA,MAAI,aAAa,UAAU;AACzB,cAAU;AAAA,EACZ;AAEA,SAAO;AAAA,IACL,aAAa,OAAO;AAAA,IACpB,eAAe,MAAM;AAAA,IACrB,cAAc,MAAM;AAAA,IACpB,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/theme",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"description": "Theme tokens, providers, and styling utilities for ImpulseUI Native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,18 +28,18 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/core": "
|
|
31
|
+
"@impulse-ui-native/core": "10.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@types/react": "~19.
|
|
34
|
+
"@types/react": "~19.3.0",
|
|
35
35
|
"eslint": "^9.38.0",
|
|
36
36
|
"prettier": "^3.6.2",
|
|
37
|
-
"react": "19.
|
|
38
|
-
"react-native": "0.
|
|
37
|
+
"react": "19.3.0",
|
|
38
|
+
"react-native": "0.88.0",
|
|
39
39
|
"typescript": "~6.0.3",
|
|
40
40
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
41
|
-
"@impulse-ui-native/
|
|
42
|
-
"@impulse-ui-native/
|
|
41
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
42
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": ">=18",
|