@impulse-ui-native/theme 2.1.0 → 2.1.1
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/constants/index.d.mts +10 -0
- package/dist/constants/index.js +2 -0
- package/dist/constants/index.js.map +1 -0
- package/dist/constants/style.constants.d.mts +14 -0
- package/dist/constants/style.constants.js +100 -0
- package/dist/constants/style.constants.js.map +1 -0
- package/dist/hooks/index.d.mts +28 -0
- package/dist/hooks/index.js +19 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-border.hook.d.mts +5 -0
- package/dist/hooks/use-border.hook.js +10 -0
- package/dist/hooks/use-border.hook.js.map +1 -0
- package/dist/hooks/use-colors.hook.d.mts +16 -0
- package/dist/hooks/use-colors.hook.js +10 -0
- package/dist/hooks/use-colors.hook.js.map +1 -0
- package/dist/hooks/use-components-tokens.hook.d.mts +16 -0
- package/dist/hooks/use-components-tokens.hook.js +10 -0
- package/dist/hooks/use-components-tokens.hook.js.map +1 -0
- package/dist/hooks/use-radii.hook.d.mts +5 -0
- package/dist/hooks/use-radii.hook.js +10 -0
- package/dist/hooks/use-radii.hook.js.map +1 -0
- package/dist/hooks/use-space.hook.d.mts +5 -0
- package/dist/hooks/use-space.hook.js +10 -0
- package/dist/hooks/use-space.hook.js.map +1 -0
- package/dist/hooks/use-style-props.hook.d.mts +13 -0
- package/dist/hooks/use-style-props.hook.js +10 -0
- package/dist/hooks/use-style-props.hook.js.map +1 -0
- package/dist/hooks/use-theme.hook.d.mts +16 -0
- package/dist/hooks/use-theme.hook.js +8 -0
- package/dist/hooks/use-theme.hook.js.map +1 -0
- package/dist/hooks/use-themed-styles.d.mts +22 -0
- package/dist/hooks/use-themed-styles.js +16 -0
- package/dist/hooks/use-themed-styles.js.map +1 -0
- package/dist/index.d.mts +39 -574
- package/dist/index.js +6 -1069
- package/dist/index.js.map +1 -1
- package/dist/providers/index.d.mts +16 -0
- package/dist/providers/index.js +2 -0
- package/dist/providers/index.js.map +1 -0
- package/dist/providers/theme.provider.d.mts +29 -0
- package/dist/providers/theme.provider.js +35 -0
- package/dist/providers/theme.provider.js.map +1 -0
- package/dist/theme/create-button-tokens.d.mts +16 -0
- package/dist/theme/create-button-tokens.js +78 -0
- package/dist/theme/create-button-tokens.js.map +1 -0
- package/dist/theme/create-control-tokens.d.mts +20 -0
- package/dist/theme/create-control-tokens.js +153 -0
- package/dist/theme/create-control-tokens.js.map +1 -0
- package/dist/theme/create-data-state-tokens.d.mts +16 -0
- package/dist/theme/create-data-state-tokens.js +23 -0
- package/dist/theme/create-data-state-tokens.js.map +1 -0
- package/dist/theme/create-datetime-picker.d.mts +16 -0
- package/dist/theme/create-datetime-picker.js +43 -0
- package/dist/theme/create-datetime-picker.js.map +1 -0
- package/dist/theme/create-flyout-tokens.d.mts +16 -0
- package/dist/theme/create-flyout-tokens.js +27 -0
- package/dist/theme/create-flyout-tokens.js.map +1 -0
- package/dist/theme/create-icon-button-tokens.d.mts +16 -0
- package/dist/theme/create-icon-button-tokens.js +72 -0
- package/dist/theme/create-icon-button-tokens.js.map +1 -0
- package/dist/theme/create-select-tokens.d.mts +16 -0
- package/dist/theme/create-select-tokens.js +14 -0
- package/dist/theme/create-select-tokens.js.map +1 -0
- package/dist/theme/create-skeleton-tokens.d.mts +16 -0
- package/dist/theme/create-skeleton-tokens.js +21 -0
- package/dist/theme/create-skeleton-tokens.js.map +1 -0
- package/dist/theme/create-tag-tokens.d.mts +16 -0
- package/dist/theme/create-tag-tokens.js +102 -0
- package/dist/theme/create-tag-tokens.js.map +1 -0
- package/dist/theme/create-time-picker-tokens.d.mts +16 -0
- package/dist/theme/create-time-picker-tokens.js +40 -0
- package/dist/theme/create-time-picker-tokens.js.map +1 -0
- package/dist/theme/dark.theme.d.mts +16 -0
- package/dist/theme/dark.theme.js +24 -0
- package/dist/theme/dark.theme.js.map +1 -0
- package/dist/theme/index.d.mts +16 -0
- package/dist/theme/index.js +8 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/theme/light.theme.d.mts +16 -0
- package/dist/theme/light.theme.js +24 -0
- package/dist/theme/light.theme.js.map +1 -0
- package/dist/theme/tokens.theme.d.mts +29 -0
- package/dist/theme/tokens.theme.js +257 -0
- package/dist/theme/tokens.theme.js.map +1 -0
- package/dist/types/border.types.d.mts +22 -0
- package/dist/types/border.types.js +1 -0
- package/dist/types/border.types.js.map +1 -0
- package/dist/types/buttons-tokens.types.d.mts +42 -0
- package/dist/types/buttons-tokens.types.js +1 -0
- package/dist/types/buttons-tokens.types.js.map +1 -0
- package/dist/types/chart.types.d.mts +19 -0
- package/dist/types/chart.types.js +1 -0
- package/dist/types/chart.types.js.map +1 -0
- package/dist/types/color.types.d.mts +9 -0
- package/dist/types/color.types.js +1 -0
- package/dist/types/color.types.js.map +1 -0
- package/dist/types/components.types.d.mts +4 -0
- package/dist/types/components.types.js +1 -0
- package/dist/types/components.types.js.map +1 -0
- package/dist/types/control-tokes.types.d.mts +59 -0
- package/dist/types/control-tokes.types.js +1 -0
- package/dist/types/control-tokes.types.js.map +1 -0
- package/dist/types/data-state-tokens.types.d.mts +23 -0
- package/dist/types/data-state-tokens.types.js +1 -0
- package/dist/types/data-state-tokens.types.js.map +1 -0
- package/dist/types/datetime-picker-tokens.types.d.mts +47 -0
- package/dist/types/datetime-picker-tokens.types.js +1 -0
- package/dist/types/datetime-picker-tokens.types.js.map +1 -0
- package/dist/types/dimension.types.d.mts +14 -0
- package/dist/types/dimension.types.js +1 -0
- package/dist/types/dimension.types.js.map +1 -0
- package/dist/types/flex.types.d.mts +25 -0
- package/dist/types/flex.types.js +1 -0
- package/dist/types/flex.types.js.map +1 -0
- package/dist/types/flyout-tokens.types.d.mts +25 -0
- package/dist/types/flyout-tokens.types.js +1 -0
- package/dist/types/flyout-tokens.types.js.map +1 -0
- package/dist/types/index.d.mts +22 -0
- package/dist/types/index.js +22 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/select-tokens.types.d.mts +11 -0
- package/dist/types/select-tokens.types.js +1 -0
- package/dist/types/select-tokens.types.js.map +1 -0
- package/dist/types/shadow.types.d.mts +20 -0
- package/dist/types/shadow.types.js +1 -0
- package/dist/types/shadow.types.js.map +1 -0
- package/dist/types/skeleton-tokens.types.d.mts +18 -0
- package/dist/types/skeleton-tokens.types.js +1 -0
- package/dist/types/skeleton-tokens.types.js.map +1 -0
- package/dist/types/spacing.types.d.mts +20 -0
- package/dist/types/spacing.types.js +1 -0
- package/dist/types/spacing.types.js.map +1 -0
- package/dist/types/style.types.d.mts +14 -0
- package/dist/types/style.types.js +1 -0
- package/dist/types/style.types.js.map +1 -0
- package/dist/types/tag-tokens.types.d.mts +28 -0
- package/dist/types/tag-tokens.types.js +1 -0
- package/dist/types/tag-tokens.types.js.map +1 -0
- package/dist/types/theme-provider.types.d.mts +90 -0
- package/dist/types/theme-provider.types.js +1 -0
- package/dist/types/theme-provider.types.js.map +1 -0
- package/dist/types/time-picker-token.types.d.mts +34 -0
- package/dist/types/time-picker-token.types.js +1 -0
- package/dist/types/time-picker-token.types.js.map +1 -0
- package/dist/types/tokens.types.d.mts +27 -0
- package/dist/types/tokens.types.js +1 -0
- package/dist/types/tokens.types.js.map +1 -0
- package/dist/types/typography.types.d.mts +23 -0
- package/dist/types/typography.types.js +1 -0
- package/dist/types/typography.types.js.map +1 -0
- package/dist/utils/index.d.mts +22 -0
- package/dist/utils/index.js +2 -0
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/style.utils.d.mts +27 -0
- package/dist/utils/style.utils.js +49 -0
- package/dist/utils/style.utils.js.map +1 -0
- package/package.json +5 -4
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { StylePropsSet, shadowScale } from './style.constants.mjs';
|
|
2
|
+
import '../types/border.types.mjs';
|
|
3
|
+
import 'react-native';
|
|
4
|
+
import '../types/color.types.mjs';
|
|
5
|
+
import '../types/dimension.types.mjs';
|
|
6
|
+
import '../types/flex.types.mjs';
|
|
7
|
+
import '../types/shadow.types.mjs';
|
|
8
|
+
import '../types/spacing.types.mjs';
|
|
9
|
+
import '../types/typography.types.mjs';
|
|
10
|
+
import '../types/tokens.types.mjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./style.constants\";\r\n"],"mappings":"AAAA,cAAc;","names":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { BorderProps } from '../types/border.types.mjs';
|
|
2
|
+
import { ColorProps } from '../types/color.types.mjs';
|
|
3
|
+
import { DimensionProps } from '../types/dimension.types.mjs';
|
|
4
|
+
import { FlexProps } from '../types/flex.types.mjs';
|
|
5
|
+
import { ShadowProps, ShadowLevel, ShadowIntensity } from '../types/shadow.types.mjs';
|
|
6
|
+
import { SpacingProps } from '../types/spacing.types.mjs';
|
|
7
|
+
import { TypographyProps } from '../types/typography.types.mjs';
|
|
8
|
+
import 'react-native';
|
|
9
|
+
import '../types/tokens.types.mjs';
|
|
10
|
+
|
|
11
|
+
declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps | keyof DimensionProps>;
|
|
12
|
+
declare const shadowScale: Record<ShadowLevel, ShadowIntensity>;
|
|
13
|
+
|
|
14
|
+
export { StylePropsSet, shadowScale };
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
const StylePropsRecord = {
|
|
2
|
+
margin: 0,
|
|
3
|
+
marginTop: 0,
|
|
4
|
+
marginBottom: 0,
|
|
5
|
+
marginLeft: 0,
|
|
6
|
+
marginRight: 0,
|
|
7
|
+
marginHorizontal: 0,
|
|
8
|
+
marginVertical: 0,
|
|
9
|
+
padding: 0,
|
|
10
|
+
paddingTop: 0,
|
|
11
|
+
paddingBottom: 0,
|
|
12
|
+
paddingLeft: 0,
|
|
13
|
+
paddingRight: 0,
|
|
14
|
+
paddingHorizontal: 0,
|
|
15
|
+
paddingVertical: 0,
|
|
16
|
+
color: 0,
|
|
17
|
+
backgroundColor: 0,
|
|
18
|
+
opacity: 0,
|
|
19
|
+
shadow: 0,
|
|
20
|
+
shadowPosition: 0,
|
|
21
|
+
shadowColor: 0,
|
|
22
|
+
shadowOpacity: 0,
|
|
23
|
+
shadowRadius: 0,
|
|
24
|
+
shadowOffset: 0,
|
|
25
|
+
elevation: 0,
|
|
26
|
+
borderRadius: 0,
|
|
27
|
+
borderTopLeftRadius: 0,
|
|
28
|
+
borderTopRightRadius: 0,
|
|
29
|
+
borderBottomLeftRadius: 0,
|
|
30
|
+
borderBottomRightRadius: 0,
|
|
31
|
+
borderWidth: 0,
|
|
32
|
+
borderTopWidth: 0,
|
|
33
|
+
borderRightWidth: 0,
|
|
34
|
+
borderBottomWidth: 0,
|
|
35
|
+
borderLeftWidth: 0,
|
|
36
|
+
borderColor: 0,
|
|
37
|
+
borderTopColor: 0,
|
|
38
|
+
borderRightColor: 0,
|
|
39
|
+
borderBottomColor: 0,
|
|
40
|
+
borderLeftColor: 0,
|
|
41
|
+
borderStyle: 0,
|
|
42
|
+
fontSize: 0,
|
|
43
|
+
fontFamily: 0,
|
|
44
|
+
fontWeight: 0,
|
|
45
|
+
fontStyle: 0,
|
|
46
|
+
fontVariant: 0,
|
|
47
|
+
letterSpacing: 0,
|
|
48
|
+
lineHeight: 0,
|
|
49
|
+
textAlign: 0,
|
|
50
|
+
textDecorationLine: 0,
|
|
51
|
+
textDecorationStyle: 0,
|
|
52
|
+
textDecorationColor: 0,
|
|
53
|
+
textTransform: 0,
|
|
54
|
+
includeFontPadding: 0,
|
|
55
|
+
textAlignVertical: 0,
|
|
56
|
+
writingDirection: 0,
|
|
57
|
+
flex: 0,
|
|
58
|
+
flexGrow: 0,
|
|
59
|
+
flexShrink: 0,
|
|
60
|
+
flexBasis: 0,
|
|
61
|
+
flexDirection: 0,
|
|
62
|
+
flexWrap: 0,
|
|
63
|
+
justifyContent: 0,
|
|
64
|
+
alignItems: 0,
|
|
65
|
+
alignSelf: 0,
|
|
66
|
+
alignContent: 0,
|
|
67
|
+
gap: 0,
|
|
68
|
+
rowGap: 0,
|
|
69
|
+
columnGap: 0,
|
|
70
|
+
position: 0,
|
|
71
|
+
top: 0,
|
|
72
|
+
right: 0,
|
|
73
|
+
bottom: 0,
|
|
74
|
+
left: 0,
|
|
75
|
+
zIndex: 0,
|
|
76
|
+
width: 0,
|
|
77
|
+
height: 0,
|
|
78
|
+
minWidth: 0,
|
|
79
|
+
maxWidth: 0,
|
|
80
|
+
minHeight: 0,
|
|
81
|
+
maxHeight: 0,
|
|
82
|
+
aspectRatio: 0,
|
|
83
|
+
overflow: 0
|
|
84
|
+
};
|
|
85
|
+
const StylePropsSet = new Set(
|
|
86
|
+
Object.keys(StylePropsRecord)
|
|
87
|
+
);
|
|
88
|
+
const shadowScale = {
|
|
89
|
+
none: { radius: 0, opacity: 0, elevation: 0 },
|
|
90
|
+
xs: { radius: 2, opacity: 0.08, elevation: 1 },
|
|
91
|
+
sm: { radius: 4, opacity: 0.1, elevation: 2 },
|
|
92
|
+
md: { radius: 8, opacity: 0.15, elevation: 4 },
|
|
93
|
+
lg: { radius: 16, opacity: 0.18, elevation: 8 },
|
|
94
|
+
xl: { radius: 24, opacity: 0.22, elevation: 12 }
|
|
95
|
+
};
|
|
96
|
+
export {
|
|
97
|
+
StylePropsSet,
|
|
98
|
+
shadowScale
|
|
99
|
+
};
|
|
100
|
+
//# sourceMappingURL=style.constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/style.constants.ts"],"sourcesContent":["import { ShadowIntensity, ShadowLevel, StyleProps } from \"../types\";\r\n\r\nconst StylePropsRecord: Record<keyof StyleProps, number> = {\r\n margin: 0,\r\n marginTop: 0,\r\n marginBottom: 0,\r\n marginLeft: 0,\r\n marginRight: 0,\r\n marginHorizontal: 0,\r\n marginVertical: 0,\r\n padding: 0,\r\n paddingTop: 0,\r\n paddingBottom: 0,\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n paddingHorizontal: 0,\r\n paddingVertical: 0,\r\n color: 0,\r\n backgroundColor: 0,\r\n opacity: 0,\r\n shadow: 0,\r\n shadowPosition: 0,\r\n shadowColor: 0,\r\n shadowOpacity: 0,\r\n shadowRadius: 0,\r\n shadowOffset: 0,\r\n elevation: 0,\r\n borderRadius: 0,\r\n borderTopLeftRadius: 0,\r\n borderTopRightRadius: 0,\r\n borderBottomLeftRadius: 0,\r\n borderBottomRightRadius: 0,\r\n borderWidth: 0,\r\n borderTopWidth: 0,\r\n borderRightWidth: 0,\r\n borderBottomWidth: 0,\r\n borderLeftWidth: 0,\r\n borderColor: 0,\r\n borderTopColor: 0,\r\n borderRightColor: 0,\r\n borderBottomColor: 0,\r\n borderLeftColor: 0,\r\n borderStyle: 0,\r\n fontSize: 0,\r\n fontFamily: 0,\r\n fontWeight: 0,\r\n fontStyle: 0,\r\n fontVariant: 0,\r\n letterSpacing: 0,\r\n lineHeight: 0,\r\n textAlign: 0,\r\n textDecorationLine: 0,\r\n textDecorationStyle: 0,\r\n textDecorationColor: 0,\r\n textTransform: 0,\r\n includeFontPadding: 0,\r\n textAlignVertical: 0,\r\n writingDirection: 0,\r\n flex: 0,\r\n flexGrow: 0,\r\n flexShrink: 0,\r\n flexBasis: 0,\r\n flexDirection: 0,\r\n flexWrap: 0,\r\n justifyContent: 0,\r\n alignItems: 0,\r\n alignSelf: 0,\r\n alignContent: 0,\r\n gap: 0,\r\n rowGap: 0,\r\n columnGap: 0,\r\n position: 0,\r\n top: 0,\r\n right: 0,\r\n bottom: 0,\r\n left: 0,\r\n zIndex: 0,\r\n width: 0,\r\n height: 0,\r\n minWidth: 0,\r\n maxWidth: 0,\r\n minHeight: 0,\r\n maxHeight: 0,\r\n aspectRatio: 0,\r\n overflow: 0,\r\n} as const;\r\n\r\nexport const StylePropsSet = new Set<keyof StyleProps>(\r\n Object.keys(StylePropsRecord) as (keyof StyleProps)[],\r\n);\r\n\r\nexport const shadowScale: Record<ShadowLevel, ShadowIntensity> = {\r\n none: { radius: 0, opacity: 0, elevation: 0 },\r\n xs: { radius: 2, opacity: 0.08, elevation: 1 },\r\n sm: { radius: 4, opacity: 0.1, elevation: 2 },\r\n md: { radius: 8, opacity: 0.15, elevation: 4 },\r\n lg: { radius: 16, opacity: 0.18, elevation: 8 },\r\n xl: { radius: 24, opacity: 0.22, elevation: 12 },\r\n};\r\n"],"mappings":"AAEA,MAAM,mBAAqD;AAAA,EACzD,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,WAAW;AAAA,EACX,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,cAAc;AAAA,EACd,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AACZ;AAEO,MAAM,gBAAgB,IAAI;AAAA,EAC/B,OAAO,KAAK,gBAAgB;AAC9B;AAEO,MAAM,cAAoD;AAAA,EAC/D,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,EAAE;AAAA,EAC5C,IAAI,EAAE,QAAQ,GAAG,SAAS,MAAM,WAAW,EAAE;AAAA,EAC7C,IAAI,EAAE,QAAQ,GAAG,SAAS,KAAK,WAAW,EAAE;AAAA,EAC5C,IAAI,EAAE,QAAQ,GAAG,SAAS,MAAM,WAAW,EAAE;AAAA,EAC7C,IAAI,EAAE,QAAQ,IAAI,SAAS,MAAM,WAAW,EAAE;AAAA,EAC9C,IAAI,EAAE,QAAQ,IAAI,SAAS,MAAM,WAAW,GAAG;AACjD;","names":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export { useBorder } from './use-border.hook.mjs';
|
|
2
|
+
export { useColors } from './use-colors.hook.mjs';
|
|
3
|
+
export { useComponentsTokens } from './use-components-tokens.hook.mjs';
|
|
4
|
+
export { useRadii } from './use-radii.hook.mjs';
|
|
5
|
+
export { useSpace } from './use-space.hook.mjs';
|
|
6
|
+
export { useStyleProps } from './use-style-props.hook.mjs';
|
|
7
|
+
export { useTheme } from './use-theme.hook.mjs';
|
|
8
|
+
export { useThemedStyles } from './use-themed-styles.mjs';
|
|
9
|
+
import '../types/tokens.types.mjs';
|
|
10
|
+
import '../types/theme-provider.types.mjs';
|
|
11
|
+
import '../types/buttons-tokens.types.mjs';
|
|
12
|
+
import '../types/components.types.mjs';
|
|
13
|
+
import '../types/control-tokes.types.mjs';
|
|
14
|
+
import '../types/data-state-tokens.types.mjs';
|
|
15
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
16
|
+
import '../types/flyout-tokens.types.mjs';
|
|
17
|
+
import '../types/select-tokens.types.mjs';
|
|
18
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
19
|
+
import '../types/tag-tokens.types.mjs';
|
|
20
|
+
import '../types/time-picker-token.types.mjs';
|
|
21
|
+
import '../types/border.types.mjs';
|
|
22
|
+
import 'react-native';
|
|
23
|
+
import '../types/color.types.mjs';
|
|
24
|
+
import '../types/dimension.types.mjs';
|
|
25
|
+
import '../types/flex.types.mjs';
|
|
26
|
+
import '../types/shadow.types.mjs';
|
|
27
|
+
import '../types/spacing.types.mjs';
|
|
28
|
+
import '../types/typography.types.mjs';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useBorder } from "./use-border.hook";
|
|
2
|
+
import { useColors } from "./use-colors.hook";
|
|
3
|
+
import { useComponentsTokens } from "./use-components-tokens.hook";
|
|
4
|
+
import { useRadii } from "./use-radii.hook";
|
|
5
|
+
import { useSpace } from "./use-space.hook";
|
|
6
|
+
import { useStyleProps } from "./use-style-props.hook";
|
|
7
|
+
import { useTheme } from "./use-theme.hook";
|
|
8
|
+
import { useThemedStyles } from "./use-themed-styles";
|
|
9
|
+
export {
|
|
10
|
+
useBorder,
|
|
11
|
+
useColors,
|
|
12
|
+
useComponentsTokens,
|
|
13
|
+
useRadii,
|
|
14
|
+
useSpace,
|
|
15
|
+
useStyleProps,
|
|
16
|
+
useTheme,
|
|
17
|
+
useThemedStyles
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useBorder } from \"./use-border.hook\";\r\nexport { useColors } from \"./use-colors.hook\";\r\nexport { useComponentsTokens } from \"./use-components-tokens.hook\";\r\nexport { useRadii } from \"./use-radii.hook\";\r\nexport { useSpace } from \"./use-space.hook\";\r\nexport { useStyleProps } from \"./use-style-props.hook\";\r\nexport { useTheme } from \"./use-theme.hook\";\r\nexport { useThemedStyles } from \"./use-themed-styles\";\r\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useThemeContext } from "../providers";
|
|
3
|
+
function useBorder() {
|
|
4
|
+
const context = useThemeContext();
|
|
5
|
+
return useMemo(() => context.borderSize, [context.borderSize]);
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useBorder
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-border.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-border.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { 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 useMemo(() => context.borderSize, [context.borderSize]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAGzB,SAAS,YAAwB;AACtC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ,MAAM,QAAQ,YAAY,CAAC,QAAQ,UAAU,CAAC;AAC/D;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ThemeColors } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import '../types/buttons-tokens.types.mjs';
|
|
3
|
+
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/control-tokes.types.mjs';
|
|
5
|
+
import '../types/data-state-tokens.types.mjs';
|
|
6
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
|
+
import '../types/flyout-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function useColors(): ThemeColors;
|
|
15
|
+
|
|
16
|
+
export { useColors };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useThemeContext } from "../providers";
|
|
3
|
+
function useColors() {
|
|
4
|
+
const context = useThemeContext();
|
|
5
|
+
return useMemo(() => context.colors, [context.colors]);
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useColors
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-colors.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-colors.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { 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 useMemo(() => context.colors, [context.colors]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAGzB,SAAS,YAAyB;AACvC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ,MAAM,QAAQ,QAAQ,CAAC,QAAQ,MAAM,CAAC;AACvD;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ComponentsTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import '../types/buttons-tokens.types.mjs';
|
|
3
|
+
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/control-tokes.types.mjs';
|
|
5
|
+
import '../types/data-state-tokens.types.mjs';
|
|
6
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
|
+
import '../types/flyout-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function useComponentsTokens(): ComponentsTokens;
|
|
15
|
+
|
|
16
|
+
export { useComponentsTokens };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useThemeContext } from "../providers";
|
|
3
|
+
function useComponentsTokens() {
|
|
4
|
+
const context = useThemeContext();
|
|
5
|
+
return useMemo(() => context.components, [context.components]);
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useComponentsTokens
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-components-tokens.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-components-tokens.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { useThemeContext } from \"../providers\";\r\n\r\nexport function useComponentsTokens() {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.components, [context.components]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAEzB,SAAS,sBAAsB;AACpC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ,MAAM,QAAQ,YAAY,CAAC,QAAQ,UAAU,CAAC;AAC/D;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useThemeContext } from "../providers";
|
|
3
|
+
function useRadii() {
|
|
4
|
+
const context = useThemeContext();
|
|
5
|
+
return useMemo(() => context.radii, [context.radii]);
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useRadii
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-radii.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-radii.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { 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 useMemo(() => context.radii, [context.radii]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAGzB,SAAS,WAAkB;AAChC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ,MAAM,QAAQ,OAAO,CAAC,QAAQ,KAAK,CAAC;AACrD;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useThemeContext } from "../providers";
|
|
3
|
+
function useSpace() {
|
|
4
|
+
const context = useThemeContext();
|
|
5
|
+
return useMemo(() => context.space, [context.space]);
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useSpace
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-space.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-space.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { 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 useMemo(() => context.space, [context.space]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAGzB,SAAS,WAAkB;AAChC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ,MAAM,QAAQ,OAAO,CAAC,QAAQ,KAAK,CAAC;AACrD;","names":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { BorderProps } from '../types/border.types.mjs';
|
|
2
|
+
import { ColorProps } from '../types/color.types.mjs';
|
|
3
|
+
import { DimensionProps } from '../types/dimension.types.mjs';
|
|
4
|
+
import { FlexProps } from '../types/flex.types.mjs';
|
|
5
|
+
import { ShadowProps } from '../types/shadow.types.mjs';
|
|
6
|
+
import { SpacingProps } from '../types/spacing.types.mjs';
|
|
7
|
+
import { TypographyProps } from '../types/typography.types.mjs';
|
|
8
|
+
import 'react-native';
|
|
9
|
+
import '../types/tokens.types.mjs';
|
|
10
|
+
|
|
11
|
+
declare function useStyleProps<Props extends object>(props: Props): Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
|
|
12
|
+
|
|
13
|
+
export { useStyleProps };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { createStyleKey, extractStyleProps } from "../utils";
|
|
3
|
+
function useStyleProps(props) {
|
|
4
|
+
const key = useMemo(() => createStyleKey(props), [props]);
|
|
5
|
+
return useMemo(() => extractStyleProps(props), [key]);
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useStyleProps
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-style-props.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-style-props.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\n\r\nimport { createStyleKey, extractStyleProps } from \"../utils\";\r\n\r\nexport function useStyleProps<Props extends object>(props: Props) {\r\n const key = useMemo(() => createStyleKey(props), [props]);\r\n\r\n return useMemo(() => extractStyleProps(props), [key]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,gBAAgB,yBAAyB;AAE3C,SAAS,cAAoC,OAAc;AAChE,QAAM,MAAM,QAAQ,MAAM,eAAe,KAAK,GAAG,CAAC,KAAK,CAAC;AAExD,SAAO,QAAQ,MAAM,kBAAkB,KAAK,GAAG,CAAC,GAAG,CAAC;AACtD;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { AppTheme } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import '../types/buttons-tokens.types.mjs';
|
|
3
|
+
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/control-tokes.types.mjs';
|
|
5
|
+
import '../types/data-state-tokens.types.mjs';
|
|
6
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
|
+
import '../types/flyout-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function useTheme(): AppTheme;
|
|
15
|
+
|
|
16
|
+
export { useTheme };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-theme.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\r\nimport { AppTheme } from \"../types\";\r\n\r\nexport function useTheme(): AppTheme {\r\n return useThemeContext();\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,WAAqB;AACnC,SAAO,gBAAgB;AACzB;","names":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
import { AppTheme } from '../types/theme-provider.types.mjs';
|
|
3
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/control-tokes.types.mjs';
|
|
6
|
+
import '../types/data-state-tokens.types.mjs';
|
|
7
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
|
+
import '../types/flyout-tokens.types.mjs';
|
|
9
|
+
import '../types/select-tokens.types.mjs';
|
|
10
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
11
|
+
import '../types/tag-tokens.types.mjs';
|
|
12
|
+
import '../types/time-picker-token.types.mjs';
|
|
13
|
+
import '../types/tokens.types.mjs';
|
|
14
|
+
|
|
15
|
+
type ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;
|
|
16
|
+
type StyledFunctionNoProps<T extends StyleSheet.NamedStyles<T>> = (theme: AppTheme) => ThemedStyles<T>;
|
|
17
|
+
type StyledFunctionWithProps<Props extends object, T extends StyleSheet.NamedStyles<T>> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
|
|
18
|
+
declare function useThemedStyles<T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunctionNoProps<T>): ThemedStyles<T>;
|
|
19
|
+
declare function useThemedStyles<Props extends object, T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunctionWithProps<Props, T>, props: Props, dependencies: readonly unknown[]): ThemedStyles<T>;
|
|
20
|
+
declare function useThemedStyles<Props extends object, T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunctionWithProps<Props, T>, props: Props, dependencies: readonly unknown[]): ThemedStyles<T>;
|
|
21
|
+
|
|
22
|
+
export { useThemedStyles };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useTheme } from "./use-theme.hook";
|
|
3
|
+
function useThemedStyles(styledFunction, props, dependencies) {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const memoDependencies = dependencies ?? (props === void 0 ? [] : [props]);
|
|
6
|
+
return useMemo(() => {
|
|
7
|
+
if (props === void 0) {
|
|
8
|
+
return styledFunction(theme);
|
|
9
|
+
}
|
|
10
|
+
return styledFunction(theme, props);
|
|
11
|
+
}, [theme, styledFunction, ...memoDependencies]);
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
useThemedStyles
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=use-themed-styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-themed-styles.ts"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport { AppTheme } from \"../types\";\r\nimport { useTheme } from \"./use-theme.hook\";\r\n\r\ntype ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;\r\n\r\ntype StyledFunctionNoProps<T extends StyleSheet.NamedStyles<T>> = (\r\n theme: AppTheme,\r\n) => ThemedStyles<T>;\r\n\r\ntype StyledFunctionWithProps<\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>,\r\n> = (theme: AppTheme, props: Props) => ThemedStyles<T>;\r\n\r\nexport function useThemedStyles<T extends StyleSheet.NamedStyles<T>>(\r\n styledFunction: StyledFunctionNoProps<T>,\r\n): ThemedStyles<T>;\r\n\r\nexport function useThemedStyles<\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>,\r\n>(\r\n styledFunction: StyledFunctionWithProps<Props, T>,\r\n props: Props,\r\n dependencies: readonly unknown[],\r\n): ThemedStyles<T>;\r\n\r\nexport function useThemedStyles<\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>,\r\n>(\r\n styledFunction: StyledFunctionWithProps<Props, T>,\r\n props: Props,\r\n dependencies: readonly unknown[],\r\n): ThemedStyles<T>;\r\n\r\nexport function useThemedStyles<\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>,\r\n>(\r\n styledFunction: StyledFunctionNoProps<T> | StyledFunctionWithProps<Props, T>,\r\n props?: Props,\r\n dependencies?: readonly unknown[],\r\n): ThemedStyles<T> {\r\n const theme = useTheme();\r\n\r\n const memoDependencies = dependencies ?? (props === undefined ? [] : [props]);\r\n\r\n return useMemo(() => {\r\n if (props === undefined) {\r\n return (styledFunction as StyledFunctionNoProps<T>)(theme);\r\n }\r\n\r\n return (styledFunction as StyledFunctionWithProps<Props, T>)(theme, props);\r\n }, [theme, styledFunction, ...memoDependencies]);\r\n}\r\n"],"mappings":"AAAA,SAAS,eAAe;AAIxB,SAAS,gBAAgB;AAmClB,SAAS,gBAId,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":[]}
|