@impulse-ui-native/theme 1.0.10 → 2.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/index.d.mts +446 -101
- package/dist/index.js +1052 -0
- package/dist/index.js.map +1 -0
- package/package.json +21 -16
- package/dist/index.cjs.js +0 -429
- package/dist/index.cjs.js.map +0 -1
- package/dist/index.d.ts +0 -209
- package/dist/index.esm.js +0 -406
- package/dist/index.esm.js.map +0 -1
- package/src/constants/index.ts +0 -2
- package/src/constants/style.constants.ts +0 -80
- package/src/constants/typography.constants.ts +0 -25
- package/src/hooks/index.ts +0 -8
- package/src/hooks/use-border.hook.ts +0 -10
- package/src/hooks/use-colors.hook.ts +0 -10
- package/src/hooks/use-components-theme.hook.ts +0 -13
- package/src/hooks/use-radii.hook.ts +0 -10
- package/src/hooks/use-space.hook.ts +0 -10
- package/src/hooks/use-style-props.hook.ts +0 -9
- package/src/hooks/use-theme.hook.ts +0 -10
- package/src/hooks/use-themed-styles.ts +0 -25
- package/src/index.ts +0 -6
- package/src/providers/index.ts +0 -1
- package/src/providers/theme.provider.tsx +0 -113
- package/src/theme/dark.theme.ts +0 -40
- package/src/theme/index.ts +0 -4
- package/src/theme/light.theme.ts +0 -40
- package/src/theme/tokens.theme.ts +0 -64
- package/src/types/border.types.ts +0 -8
- package/src/types/color.types.ts +0 -7
- package/src/types/components.types.ts +0 -1
- package/src/types/dimension.types.ts +0 -11
- package/src/types/flex.types.ts +0 -27
- package/src/types/index.ts +0 -11
- package/src/types/shadow.types.ts +0 -9
- package/src/types/spacing.types.ts +0 -19
- package/src/types/style.types.ts +0 -19
- package/src/types/theme-provider.types.ts +0 -65
- package/src/types/tokens.types.ts +0 -88
- package/src/types/typography.types.ts +0 -66
- package/src/utils/index.ts +0 -1
- package/src/utils/style.utils.ts +0 -31
package/dist/index.cjs.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/constants/style.constants.ts","../src/constants/typography.constants.ts","../src/hooks/use-border.hook.ts","../src/providers/theme.provider.tsx","../src/theme/tokens.theme.ts","../src/theme/dark.theme.ts","../src/theme/light.theme.ts","../src/hooks/use-colors.hook.ts","../src/hooks/use-components-theme.hook.ts","../src/hooks/use-radii.hook.ts","../src/hooks/use-space.hook.ts","../src/hooks/use-style-props.hook.ts","../src/utils/style.utils.ts","../src/hooks/use-theme.hook.ts","../src/hooks/use-themed-styles.ts"],"sourcesContent":["export * from \"./constants\";\r\nexport * from \"./hooks\";\r\nexport * from \"./providers\";\r\nexport * from \"./theme\";\r\nexport * from \"./types\";\r\nexport * from \"./utils\";\r\n","import { StyleProps } from \"../types\";\r\n\r\nexport const StylePropsSet = new Set<keyof StyleProps>([\r\n // Spacing\r\n \"margin\",\r\n \"marginTop\",\r\n \"marginBottom\",\r\n \"marginLeft\",\r\n \"marginRight\",\r\n \"marginHorizontal\",\r\n \"marginVertical\",\r\n \"padding\",\r\n \"paddingTop\",\r\n \"paddingBottom\",\r\n \"paddingLeft\",\r\n \"paddingRight\",\r\n \"paddingHorizontal\",\r\n \"paddingVertical\",\r\n\r\n // Appearance\r\n \"color\",\r\n \"backgroundColor\",\r\n \"opacity\",\r\n \"borderRadius\",\r\n \"borderColor\",\r\n \"borderWidth\",\r\n \"borderStyle\",\r\n \"shadowColor\",\r\n \"shadowOpacity\",\r\n \"shadowRadius\",\r\n \"shadowOffset\",\r\n \"elevation\",\r\n\r\n // Typography (TextStyle)\r\n \"fontSize\",\r\n \"fontFamily\",\r\n \"fontWeight\",\r\n \"fontStyle\",\r\n \"letterSpacing\",\r\n \"lineHeight\",\r\n \"textAlign\",\r\n \"textDecorationLine\",\r\n \"textDecorationStyle\",\r\n \"textDecorationColor\",\r\n \"textTransform\",\r\n \"includeFontPadding\",\r\n \"textAlignVertical\",\r\n \"writingDirection\",\r\n\r\n // Flex (ViewStyle)\r\n \"flex\",\r\n \"flexGrow\",\r\n \"flexShrink\",\r\n \"flexBasis\",\r\n \"flexDirection\",\r\n \"flexWrap\",\r\n \"justifyContent\",\r\n \"alignItems\",\r\n \"alignSelf\",\r\n \"alignContent\",\r\n \"gap\",\r\n \"rowGap\",\r\n \"columnGap\",\r\n\r\n // Positioning (commonly used with flex layouts)\r\n \"position\",\r\n \"top\",\r\n \"right\",\r\n \"bottom\",\r\n \"left\",\r\n\r\n // Dimensions (ViewStyle)\r\n \"width\",\r\n \"height\",\r\n \"minWidth\",\r\n \"maxWidth\",\r\n \"minHeight\",\r\n \"maxHeight\",\r\n \"aspectRatio\",\r\n]);\r\n","import { FontWeightItalic, FontWeightKey, FontWeightNormal } from \"../types\";\r\n\r\nexport const FontWeightsNormal: Record<FontWeightKey, FontWeightNormal> = {\r\n 100: \"Montserrat_100Thin\",\r\n 200: \"Montserrat_200ExtraLight\",\r\n 300: \"Montserrat_300Light\",\r\n 400: \"Montserrat_400Regular\",\r\n 500: \"Montserrat_500Medium\",\r\n 600: \"Montserrat_600SemiBold\",\r\n 700: \"Montserrat_700Bold\",\r\n 800: \"Montserrat_800ExtraBold\",\r\n 900: \"Montserrat_900Black\",\r\n};\r\n\r\nexport const FontWeightsItalic: Record<FontWeightKey, FontWeightItalic> = {\r\n 100: \"Montserrat_100Thin_Italic\",\r\n 200: \"Montserrat_200ExtraLight_Italic\",\r\n 300: \"Montserrat_300Light_Italic\",\r\n 400: \"Montserrat_400Regular_Italic\",\r\n 500: \"Montserrat_500Medium_Italic\",\r\n 600: \"Montserrat_600SemiBold_Italic\",\r\n 700: \"Montserrat_700Bold_Italic\",\r\n 800: \"Montserrat_800ExtraBold_Italic\",\r\n 900: \"Montserrat_900Black_Italic\",\r\n};\r\n","import { useMemo } from \"react\";\n\r\nimport { useThemeContext } from \"../providers\";\r\nimport { BorderSizes } from \"../types\";\r\n\r\nexport function useBorder(): BorderSizes {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme.borderSize, [context.theme.borderSize]);\r\n}\r\n","import {\r\n Montserrat_100Thin,\r\n Montserrat_100Thin_Italic,\r\n Montserrat_200ExtraLight,\r\n Montserrat_200ExtraLight_Italic,\r\n Montserrat_300Light,\r\n Montserrat_300Light_Italic,\r\n Montserrat_400Regular,\r\n Montserrat_400Regular_Italic,\r\n Montserrat_500Medium,\r\n Montserrat_500Medium_Italic,\r\n Montserrat_600SemiBold,\r\n Montserrat_600SemiBold_Italic,\r\n Montserrat_700Bold,\r\n Montserrat_700Bold_Italic,\r\n Montserrat_800ExtraBold,\r\n Montserrat_800ExtraBold_Italic,\r\n Montserrat_900Black,\r\n Montserrat_900Black_Italic,\r\n useFonts,\r\n} from \"@expo-google-fonts/montserrat\";\r\nimport { DeepPartial, merge } from \"@impulse-ui-native/core\";\r\nimport {\r\n createContext,\r\n memo,\r\n PropsWithChildren,\r\n useContext,\r\n useMemo,\r\n} from \"react\";\r\n\r\nimport { DarkTheme, LightTheme } from \"../theme\";\r\nimport {\r\n AppTheme,\r\n ColorScheme,\r\n ComponentsThemes,\r\n CustomComponentsTheme,\r\n ThemeContextData,\r\n} from \"../types\";\r\n\r\n\r\nconst ThemeContext = createContext<ThemeContextData | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n scheme?: ColorScheme;\r\n theme?: DeepPartial<{\r\n light: AppTheme;\r\n dark: AppTheme;\r\n }>;\r\n components?: CustomComponentsTheme;\r\n}\r\n\r\nexport const ThemeProvider = memo(function ThemeProvider(\r\n props: PropsWithChildren<ThemeProviderProps>\r\n) {\r\n const scheme = props.scheme ?? \"light\";\r\n\r\n const [loaded] = useFonts({\r\n Montserrat_100Thin,\r\n Montserrat_100Thin_Italic,\r\n Montserrat_200ExtraLight,\r\n Montserrat_200ExtraLight_Italic,\r\n Montserrat_300Light,\r\n Montserrat_300Light_Italic,\r\n Montserrat_400Regular,\r\n Montserrat_400Regular_Italic,\r\n Montserrat_500Medium,\r\n Montserrat_500Medium_Italic,\r\n Montserrat_600SemiBold,\r\n Montserrat_600SemiBold_Italic,\r\n Montserrat_700Bold,\r\n Montserrat_700Bold_Italic,\r\n Montserrat_800ExtraBold,\r\n Montserrat_800ExtraBold_Italic,\r\n Montserrat_900Black,\r\n Montserrat_900Black_Italic,\r\n });\r\n\r\n const context = useMemo<ThemeContextData>(() => {\r\n const baseTheme = scheme === \"light\" ? LightTheme : DarkTheme;\r\n const customBaseTheme = props.theme?.[scheme];\r\n const theme = merge(baseTheme, customBaseTheme);\r\n\r\n let componentsTheme: DeepPartial<ComponentsThemes> | undefined;\r\n\r\n if (typeof props.components === \"function\") {\r\n componentsTheme = props.components(theme);\r\n } else {\r\n componentsTheme = props.components;\r\n }\r\n\r\n return {\r\n loaded,\r\n theme,\r\n components: componentsTheme,\r\n };\r\n }, [props.theme?.light, props.theme?.dark, props.components]);\r\n\r\n return (\r\n <ThemeContext.Provider value={context}>\r\n {props.children}\r\n </ThemeContext.Provider>\r\n );\r\n});\r\n\r\nexport function useThemeContext() {\r\n const context = useContext(ThemeContext);\r\n\r\n if (!context) {\r\n throw new Error(\"useThemeContext must be used within a ThemeProvider\");\r\n }\r\n\r\n return context;\r\n}\r\n","import { BorderSizes, FontSizes, NeutralColors, Radii, Space } from \"../types\";\r\n\r\nexport const SpaceTokens: Space = {\r\n none: 0,\r\n auto: \"auto\",\r\n xxs: 4,\r\n xs: 8,\r\n mxs: 12,\r\n sm: 16,\r\n msm: 24,\r\n md: 32,\r\n lg: 48,\r\n xl: 64,\r\n xxl: 96,\r\n};\r\n\r\nexport const BorderSizeTokens: BorderSizes = {\r\n sm: 1,\r\n md: 2,\r\n lg: 3,\r\n xl: 5,\r\n xxl: 10,\r\n};\r\n\r\nexport const RadiiTokens: Radii = {\r\n sm: 4,\r\n md: 8,\r\n lg: 16,\r\n xl: 32,\r\n xxl: 64,\r\n xxxl: 128,\r\n round: 100000,\r\n};\r\n\r\nexport const FontSizeTokens: FontSizes = {\r\n xxs: 8,\r\n xs: 12,\r\n xsm: 14,\r\n sm: 16,\r\n md: 18,\r\n lg: 20,\r\n xl: 24,\r\n xxl: 32,\r\n xxxl: 40,\r\n huge: 48,\r\n massive: 56,\r\n};\r\n\r\nexport const NeutralColorTokens: NeutralColors = {\r\n \"0\": \"#ffffff\",\r\n \"1\": \"#f8f9fa\",\r\n \"2\": \"#f1f3f5\",\r\n \"3\": \"#e9ecef\",\r\n \"4\": \"#dee2e6\",\r\n \"5\": \"#ced4da\",\r\n \"6\": \"#adb5bd\",\r\n \"7\": \"#868e96\",\r\n \"8\": \"#495057\",\r\n \"9\": \"#343a40\",\r\n \"10\": \"#212529\",\r\n \"11\": \"#16191d\",\r\n \"12\": \"#0d0f12\",\r\n \"13\": \"#000000\",\r\n};\r\n","import { FontWeightsItalic, FontWeightsNormal } from \"../constants\";\r\nimport { AppTheme } from \"../types\";\r\n\r\nimport {\r\n BorderSizeTokens,\r\n FontSizeTokens,\r\n NeutralColorTokens,\r\n RadiiTokens,\r\n SpaceTokens,\r\n} from \"./tokens.theme\";\r\n\r\nexport const DarkTheme: AppTheme = {\r\n colors: {\r\n primary: \"#f55d6b\",\r\n secondary: \"#f55d6b\",\r\n neutral: NeutralColorTokens,\r\n white: NeutralColorTokens[\"0\"],\r\n black: NeutralColorTokens[\"13\"],\r\n error: \"#c92a2a\",\r\n warning: \"#e67700\",\r\n success: \"#7a9908\",\r\n info: \"#1864ab\",\r\n text: {\r\n primary: NeutralColorTokens[\"11\"],\r\n secondary: NeutralColorTokens[\"10\"],\r\n },\r\n background: {\r\n primary: NeutralColorTokens[\"2\"],\r\n secondary: NeutralColorTokens[\"0\"],\r\n },\r\n },\r\n spacing: SpaceTokens,\r\n radii: RadiiTokens,\r\n fontWeights: {\r\n normal: FontWeightsNormal,\r\n italic: FontWeightsItalic,\r\n },\r\n borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { FontWeightsItalic, FontWeightsNormal } from \"../constants\";\r\nimport { AppTheme } from \"../types\";\r\n\r\nimport {\r\n BorderSizeTokens,\r\n FontSizeTokens,\r\n NeutralColorTokens,\r\n RadiiTokens,\r\n SpaceTokens,\r\n} from \"./tokens.theme\";\r\n\r\nexport const LightTheme: AppTheme = {\r\n colors: {\r\n primary: \"#f55d6b\",\r\n secondary: \"#f55d6b\",\r\n neutral: NeutralColorTokens,\r\n white: NeutralColorTokens[\"0\"],\r\n black: NeutralColorTokens[\"13\"],\r\n error: \"#c92a2a\",\r\n warning: \"#e67700\",\r\n success: \"#7a9908\",\r\n info: \"#1864ab\",\r\n text: {\r\n primary: NeutralColorTokens[\"11\"],\r\n secondary: NeutralColorTokens[\"10\"],\r\n },\r\n background: {\r\n primary: NeutralColorTokens[\"2\"],\r\n secondary: NeutralColorTokens[\"0\"],\r\n },\r\n },\r\n spacing: SpaceTokens,\r\n radii: RadiiTokens,\r\n fontWeights: {\r\n normal: FontWeightsNormal,\r\n italic: FontWeightsItalic,\r\n },\r\n borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { useMemo } from \"react\";\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.theme.colors, [context.theme.colors]);\r\n}\r\n","import { DeepPartial } from \"@impulse-ui-native/core\";\r\nimport { useMemo } from \"react\";\n\r\nimport { useThemeContext } from \"../providers\";\r\nimport { ComponentsThemes } from \"../types\";\r\n\r\nexport function useComponentsTheme():\r\n | DeepPartial<ComponentsThemes>\r\n | undefined {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.components, [context.components]);\r\n}\r\n","import { useMemo } from \"react\";\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.theme.radii, [context.theme.radii]);\r\n}\r\n","import { useMemo } from \"react\";\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.theme.spacing, [context.theme.spacing]);\r\n}\r\n","import { useMemo } from 'react';\n\r\nimport { createStyleKey, extractStyleProps } from '../utils';\r\n\r\nexport function useStyleProps<Props extends object>(props: Props) {\r\n const key = createStyleKey(props);\r\n\r\n return useMemo(() => extractStyleProps(props), [key]);\r\n}\r\n","import { StylePropsSet } from '../constants';\r\nimport { StylePropKey, StyleProps } from '../types';\r\n\r\nconst isStylePropKey = (k: string): k is StylePropKey =>\r\n StylePropsSet.has(k as StylePropKey);\r\n\r\nexport const extractStyleProps = <Props extends object>(\r\n props: Props\r\n): StyleProps => {\r\n const style: StyleProps = {};\r\n \r\n for (const k in props) {\r\n if (isStylePropKey(k) && props[k] !== undefined) {\r\n style[k] = props[k] as any;\r\n }\r\n }\r\n \r\n return style;\r\n};\r\n\r\nexport const createStyleKey = <Props extends object>(props: Props) => {\r\n let key = '';\r\n\r\n for (const k in props) {\r\n if (isStylePropKey(k)) {\r\n key += String(props[k as keyof Props]);\r\n }\r\n }\r\n \r\n return key;\r\n};\r\n","import { useMemo } from \"react\";\n\r\nimport { useThemeContext } from \"../providers\";\r\nimport { AppTheme } from \"../types\";\r\n\r\nexport function useTheme(): AppTheme {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme, [context.theme]);\r\n}\r\n","import { useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport { AppTheme } from \"../types\";\r\n\r\nimport { useTheme } from \"./use-theme.hook\";\r\n\r\ntype ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;\r\n\r\ntype StyledFunction<\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>\r\n> = (theme: AppTheme, props: Props) => ThemedStyles<T>;\r\n\r\nexport const useThemedStyles = <\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>\r\n>(\r\n styledFunction: StyledFunction<Props, T>,\r\n props: Props\r\n): ThemedStyles<T> => {\r\n const theme = useTheme();\r\n\r\n return useMemo(() => styledFunction(theme, props), [theme, props]);\r\n};\r\n"],"mappings":"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","names":["import_react","ThemeProvider","import_react","import_react","import_react","import_react","import_react","import_react","import_react"]}
|
package/dist/index.d.ts
DELETED
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
import { ViewStyle, TextStyle, DimensionValue, StyleSheet } from 'react-native';
|
|
2
|
-
import { DeepPartial } from '@impulse-ui-native/core';
|
|
3
|
-
import * as react from 'react';
|
|
4
|
-
import { PropsWithChildren } from 'react';
|
|
5
|
-
|
|
6
|
-
declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps | keyof DimensionProps>;
|
|
7
|
-
|
|
8
|
-
type BorderProps = {
|
|
9
|
-
borderRadius?: ViewStyle['borderRadius'];
|
|
10
|
-
borderColor?: ViewStyle['borderColor'];
|
|
11
|
-
borderWidth?: ViewStyle['borderWidth'];
|
|
12
|
-
borderStyle?: ViewStyle['borderStyle'];
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
type ColorProps = {
|
|
16
|
-
color?: TextStyle['color'];
|
|
17
|
-
backgroundColor?: ViewStyle['backgroundColor'];
|
|
18
|
-
opacity?: ViewStyle['opacity'];
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
type ComponentSize = "small" | "medium" | "large";
|
|
22
|
-
|
|
23
|
-
type DimensionProps = {
|
|
24
|
-
width?: ViewStyle["width"];
|
|
25
|
-
height?: ViewStyle["height"];
|
|
26
|
-
minWidth?: ViewStyle["minWidth"];
|
|
27
|
-
maxWidth?: ViewStyle["maxWidth"];
|
|
28
|
-
minHeight?: ViewStyle["minHeight"];
|
|
29
|
-
maxHeight?: ViewStyle["maxHeight"];
|
|
30
|
-
aspectRatio?: ViewStyle["aspectRatio"];
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
type FlexProps = {
|
|
34
|
-
flex?: ViewStyle["flex"];
|
|
35
|
-
flexGrow?: ViewStyle["flexGrow"];
|
|
36
|
-
flexShrink?: ViewStyle["flexShrink"];
|
|
37
|
-
flexBasis?: ViewStyle["flexBasis"];
|
|
38
|
-
flexDirection?: ViewStyle["flexDirection"];
|
|
39
|
-
flexWrap?: ViewStyle["flexWrap"];
|
|
40
|
-
justifyContent?: ViewStyle["justifyContent"];
|
|
41
|
-
alignItems?: ViewStyle["alignItems"];
|
|
42
|
-
alignSelf?: ViewStyle["alignSelf"];
|
|
43
|
-
alignContent?: ViewStyle["alignContent"];
|
|
44
|
-
gap?: ViewStyle["gap"];
|
|
45
|
-
rowGap?: ViewStyle["rowGap"];
|
|
46
|
-
columnGap?: ViewStyle["columnGap"];
|
|
47
|
-
position?: ViewStyle["position"];
|
|
48
|
-
top?: ViewStyle["top"];
|
|
49
|
-
right?: ViewStyle["right"];
|
|
50
|
-
bottom?: ViewStyle["bottom"];
|
|
51
|
-
left?: ViewStyle["left"];
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
type ShadowProps = {
|
|
55
|
-
shadowColor?: ViewStyle['shadowColor'];
|
|
56
|
-
shadowOpacity?: ViewStyle['shadowOpacity'];
|
|
57
|
-
shadowRadius?: ViewStyle['shadowRadius'];
|
|
58
|
-
shadowOffset?: ViewStyle['shadowOffset'];
|
|
59
|
-
elevation?: ViewStyle['elevation'];
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
type SpacingProps = {
|
|
63
|
-
margin?: ViewStyle['margin'];
|
|
64
|
-
marginTop?: ViewStyle['marginTop'];
|
|
65
|
-
marginBottom?: ViewStyle['marginBottom'];
|
|
66
|
-
marginLeft?: ViewStyle['marginLeft'];
|
|
67
|
-
marginRight?: ViewStyle['marginRight'];
|
|
68
|
-
marginHorizontal?: ViewStyle['marginHorizontal'];
|
|
69
|
-
marginVertical?: ViewStyle['marginVertical'];
|
|
70
|
-
padding?: ViewStyle['padding'];
|
|
71
|
-
paddingTop?: ViewStyle['paddingTop'];
|
|
72
|
-
paddingBottom?: ViewStyle['paddingBottom'];
|
|
73
|
-
paddingLeft?: ViewStyle['paddingLeft'];
|
|
74
|
-
paddingRight?: ViewStyle['paddingRight'];
|
|
75
|
-
paddingHorizontal?: ViewStyle['paddingHorizontal'];
|
|
76
|
-
paddingVertical?: ViewStyle['paddingVertical'];
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
type TypographyProps = {
|
|
80
|
-
fontSize?: TextStyle["fontSize"];
|
|
81
|
-
fontFamily?: TextStyle["fontFamily"];
|
|
82
|
-
fontWeight?: FontWeightKey;
|
|
83
|
-
fontStyle?: TextStyle["fontStyle"];
|
|
84
|
-
letterSpacing?: TextStyle["letterSpacing"];
|
|
85
|
-
lineHeight?: TextStyle["lineHeight"];
|
|
86
|
-
textAlign?: TextStyle["textAlign"];
|
|
87
|
-
textDecorationLine?: TextStyle["textDecorationLine"];
|
|
88
|
-
textDecorationStyle?: TextStyle["textDecorationStyle"];
|
|
89
|
-
textDecorationColor?: TextStyle["textDecorationColor"];
|
|
90
|
-
textTransform?: TextStyle["textTransform"];
|
|
91
|
-
includeFontPadding?: TextStyle["includeFontPadding"];
|
|
92
|
-
textAlignVertical?: TextStyle["textAlignVertical"];
|
|
93
|
-
writingDirection?: TextStyle["writingDirection"];
|
|
94
|
-
};
|
|
95
|
-
type TypographyPresetKey = "Master" | "DisplayLarge" | "DisplayMedium" | "DisplaySmall" | "Title1" | "Title2" | "Title3" | "Title4" | "Title5" | "Title6" | "Subtitle1" | "Subtitle2" | "BodyLarge" | "Body" | "BodySmall" | "Caption" | "Label" | "Overline" | "Helper" | "Code" | "Quote" | "Eyebrow";
|
|
96
|
-
type FontWeightNormal = "Montserrat_100Thin" | "Montserrat_200ExtraLight" | "Montserrat_300Light" | "Montserrat_400Regular" | "Montserrat_500Medium" | "Montserrat_600SemiBold" | "Montserrat_700Bold" | "Montserrat_800ExtraBold" | "Montserrat_900Black";
|
|
97
|
-
type FontWeightItalic = "Montserrat_100Thin_Italic" | "Montserrat_200ExtraLight_Italic" | "Montserrat_300Light_Italic" | "Montserrat_400Regular_Italic" | "Montserrat_500Medium_Italic" | "Montserrat_600SemiBold_Italic" | "Montserrat_700Bold_Italic" | "Montserrat_800ExtraBold_Italic" | "Montserrat_900Black_Italic";
|
|
98
|
-
type FontWeightKey = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
99
|
-
|
|
100
|
-
type StyleProps = Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
|
|
101
|
-
type StylePropKey = keyof StyleProps;
|
|
102
|
-
|
|
103
|
-
type SpaceSizesKeys = "none" | "auto" | "xxs" | "xs" | "mxs" | "sm" | "msm" | "md" | "lg" | "xl" | "xxl";
|
|
104
|
-
type Space = Record<SpaceSizesKeys, DimensionValue>;
|
|
105
|
-
type FontSizesKeys = "xxs" | "xs" | "xsm" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "huge" | "massive";
|
|
106
|
-
type FontSizes = Record<FontSizesKeys, number>;
|
|
107
|
-
type LineHeightKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
108
|
-
type LineHeights = Record<LineHeightKeys, string>;
|
|
109
|
-
type LetterSpacingKey = "tightest" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "ultraWide";
|
|
110
|
-
type LetterSpacings = Record<LetterSpacingKey, number>;
|
|
111
|
-
type BorderSizeKey = "sm" | "md" | "lg" | "xl" | "xxl";
|
|
112
|
-
type BorderSizes = Record<BorderSizeKey, number>;
|
|
113
|
-
type RadiusKey = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "round";
|
|
114
|
-
type Radii = Record<RadiusKey, number>;
|
|
115
|
-
type RadiusDrawnKey = "drawn1" | "drawn2" | "drawn3" | "drawn4" | "drawn5" | "drawn6";
|
|
116
|
-
type RadiiDrawn = Record<RadiusDrawnKey, string>;
|
|
117
|
-
type RadiusBlobKey = "blob1" | "blob2" | "blob3" | "blob4" | "blob5";
|
|
118
|
-
type RadiiBlob = Record<RadiusBlobKey, string>;
|
|
119
|
-
type RadiusConditionalKey = "conditional1" | "conditional2" | "conditional3" | "conditional4" | "conditional5" | "conditional6";
|
|
120
|
-
type RadiiConditional = Record<RadiusConditionalKey, string>;
|
|
121
|
-
type NeutralColorKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13";
|
|
122
|
-
type NeutralColors = Record<NeutralColorKey, string>;
|
|
123
|
-
|
|
124
|
-
interface ThemeContextData {
|
|
125
|
-
loaded: boolean;
|
|
126
|
-
theme: AppTheme;
|
|
127
|
-
components?: DeepPartial<ComponentsThemes>;
|
|
128
|
-
}
|
|
129
|
-
type ColorScheme = "light" | "dark";
|
|
130
|
-
type ThemeColors = {
|
|
131
|
-
primary: string;
|
|
132
|
-
secondary: string;
|
|
133
|
-
neutral: NeutralColors;
|
|
134
|
-
white: string;
|
|
135
|
-
black: string;
|
|
136
|
-
error: string;
|
|
137
|
-
warning: string;
|
|
138
|
-
success: string;
|
|
139
|
-
info: string;
|
|
140
|
-
text: {
|
|
141
|
-
primary: string;
|
|
142
|
-
secondary: string;
|
|
143
|
-
};
|
|
144
|
-
background: {
|
|
145
|
-
primary: string;
|
|
146
|
-
secondary: string;
|
|
147
|
-
};
|
|
148
|
-
} & ExtendedThemeColors;
|
|
149
|
-
interface ExtendedThemeColors {
|
|
150
|
-
}
|
|
151
|
-
interface ComponentsThemes {
|
|
152
|
-
typography: Record<TypographyPresetKey, TypographyProps>;
|
|
153
|
-
}
|
|
154
|
-
interface AppTheme {
|
|
155
|
-
colors: ThemeColors;
|
|
156
|
-
spacing: Space;
|
|
157
|
-
radii: Radii;
|
|
158
|
-
borderSize: BorderSizes;
|
|
159
|
-
fontWeights: Record<"normal" | "italic", Record<FontWeightKey, string>>;
|
|
160
|
-
fontSize: FontSizes;
|
|
161
|
-
}
|
|
162
|
-
type CustomComponentsTheme = ((theme: AppTheme) => DeepPartial<ComponentsThemes>) | DeepPartial<ComponentsThemes>;
|
|
163
|
-
|
|
164
|
-
declare const FontWeightsNormal: Record<FontWeightKey, FontWeightNormal>;
|
|
165
|
-
declare const FontWeightsItalic: Record<FontWeightKey, FontWeightItalic>;
|
|
166
|
-
|
|
167
|
-
declare function useBorder(): BorderSizes;
|
|
168
|
-
|
|
169
|
-
declare function useColors(): ThemeColors;
|
|
170
|
-
|
|
171
|
-
declare function useComponentsTheme(): DeepPartial<ComponentsThemes> | undefined;
|
|
172
|
-
|
|
173
|
-
declare function useRadii(): Radii;
|
|
174
|
-
|
|
175
|
-
declare function useSpace(): Space;
|
|
176
|
-
|
|
177
|
-
declare function useStyleProps<Props extends object>(props: Props): Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
|
|
178
|
-
|
|
179
|
-
declare function useTheme(): AppTheme;
|
|
180
|
-
|
|
181
|
-
type ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;
|
|
182
|
-
type StyledFunction<Props extends object, T extends StyleSheet.NamedStyles<T>> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
|
|
183
|
-
declare const useThemedStyles: <Props extends object, T extends StyleSheet.NamedStyles<T>>(styledFunction: StyledFunction<Props, T>, props: Props) => ThemedStyles<T>;
|
|
184
|
-
|
|
185
|
-
interface ThemeProviderProps {
|
|
186
|
-
scheme?: ColorScheme;
|
|
187
|
-
theme?: DeepPartial<{
|
|
188
|
-
light: AppTheme;
|
|
189
|
-
dark: AppTheme;
|
|
190
|
-
}>;
|
|
191
|
-
components?: CustomComponentsTheme;
|
|
192
|
-
}
|
|
193
|
-
declare const ThemeProvider: react.NamedExoticComponent<PropsWithChildren<ThemeProviderProps>>;
|
|
194
|
-
declare function useThemeContext(): ThemeContextData;
|
|
195
|
-
|
|
196
|
-
declare const DarkTheme: AppTheme;
|
|
197
|
-
|
|
198
|
-
declare const LightTheme: AppTheme;
|
|
199
|
-
|
|
200
|
-
declare const SpaceTokens: Space;
|
|
201
|
-
declare const BorderSizeTokens: BorderSizes;
|
|
202
|
-
declare const RadiiTokens: Radii;
|
|
203
|
-
declare const FontSizeTokens: FontSizes;
|
|
204
|
-
declare const NeutralColorTokens: NeutralColors;
|
|
205
|
-
|
|
206
|
-
declare const extractStyleProps: <Props extends object>(props: Props) => StyleProps;
|
|
207
|
-
declare const createStyleKey: <Props extends object>(props: Props) => string;
|
|
208
|
-
|
|
209
|
-
export { type AppTheme, type BorderProps, type BorderSizeKey, BorderSizeTokens, type BorderSizes, type ColorProps, type ColorScheme, type ComponentSize, type ComponentsThemes, type CustomComponentsTheme, DarkTheme, type DimensionProps, type ExtendedThemeColors, type FlexProps, FontSizeTokens, type FontSizes, type FontSizesKeys, type FontWeightItalic, type FontWeightKey, type FontWeightNormal, FontWeightsItalic, FontWeightsNormal, type LetterSpacingKey, type LetterSpacings, LightTheme, type LineHeightKeys, type LineHeights, type NeutralColorKey, NeutralColorTokens, type NeutralColors, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, RadiiTokens, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type ShadowProps, type Space, type SpaceSizesKeys, SpaceTokens, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type ThemeColors, type ThemeContextData, ThemeProvider, type TypographyPresetKey, type TypographyProps, createStyleKey, extractStyleProps, useBorder, useColors, useComponentsTheme, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };
|
package/dist/index.esm.js
DELETED
|
@@ -1,406 +0,0 @@
|
|
|
1
|
-
// src/constants/style.constants.ts
|
|
2
|
-
var StylePropsSet = /* @__PURE__ */ new Set([
|
|
3
|
-
// Spacing
|
|
4
|
-
"margin",
|
|
5
|
-
"marginTop",
|
|
6
|
-
"marginBottom",
|
|
7
|
-
"marginLeft",
|
|
8
|
-
"marginRight",
|
|
9
|
-
"marginHorizontal",
|
|
10
|
-
"marginVertical",
|
|
11
|
-
"padding",
|
|
12
|
-
"paddingTop",
|
|
13
|
-
"paddingBottom",
|
|
14
|
-
"paddingLeft",
|
|
15
|
-
"paddingRight",
|
|
16
|
-
"paddingHorizontal",
|
|
17
|
-
"paddingVertical",
|
|
18
|
-
// Appearance
|
|
19
|
-
"color",
|
|
20
|
-
"backgroundColor",
|
|
21
|
-
"opacity",
|
|
22
|
-
"borderRadius",
|
|
23
|
-
"borderColor",
|
|
24
|
-
"borderWidth",
|
|
25
|
-
"borderStyle",
|
|
26
|
-
"shadowColor",
|
|
27
|
-
"shadowOpacity",
|
|
28
|
-
"shadowRadius",
|
|
29
|
-
"shadowOffset",
|
|
30
|
-
"elevation",
|
|
31
|
-
// Typography (TextStyle)
|
|
32
|
-
"fontSize",
|
|
33
|
-
"fontFamily",
|
|
34
|
-
"fontWeight",
|
|
35
|
-
"fontStyle",
|
|
36
|
-
"letterSpacing",
|
|
37
|
-
"lineHeight",
|
|
38
|
-
"textAlign",
|
|
39
|
-
"textDecorationLine",
|
|
40
|
-
"textDecorationStyle",
|
|
41
|
-
"textDecorationColor",
|
|
42
|
-
"textTransform",
|
|
43
|
-
"includeFontPadding",
|
|
44
|
-
"textAlignVertical",
|
|
45
|
-
"writingDirection",
|
|
46
|
-
// Flex (ViewStyle)
|
|
47
|
-
"flex",
|
|
48
|
-
"flexGrow",
|
|
49
|
-
"flexShrink",
|
|
50
|
-
"flexBasis",
|
|
51
|
-
"flexDirection",
|
|
52
|
-
"flexWrap",
|
|
53
|
-
"justifyContent",
|
|
54
|
-
"alignItems",
|
|
55
|
-
"alignSelf",
|
|
56
|
-
"alignContent",
|
|
57
|
-
"gap",
|
|
58
|
-
"rowGap",
|
|
59
|
-
"columnGap",
|
|
60
|
-
// Positioning (commonly used with flex layouts)
|
|
61
|
-
"position",
|
|
62
|
-
"top",
|
|
63
|
-
"right",
|
|
64
|
-
"bottom",
|
|
65
|
-
"left",
|
|
66
|
-
// Dimensions (ViewStyle)
|
|
67
|
-
"width",
|
|
68
|
-
"height",
|
|
69
|
-
"minWidth",
|
|
70
|
-
"maxWidth",
|
|
71
|
-
"minHeight",
|
|
72
|
-
"maxHeight",
|
|
73
|
-
"aspectRatio"
|
|
74
|
-
]);
|
|
75
|
-
|
|
76
|
-
// src/constants/typography.constants.ts
|
|
77
|
-
var FontWeightsNormal = {
|
|
78
|
-
100: "Montserrat_100Thin",
|
|
79
|
-
200: "Montserrat_200ExtraLight",
|
|
80
|
-
300: "Montserrat_300Light",
|
|
81
|
-
400: "Montserrat_400Regular",
|
|
82
|
-
500: "Montserrat_500Medium",
|
|
83
|
-
600: "Montserrat_600SemiBold",
|
|
84
|
-
700: "Montserrat_700Bold",
|
|
85
|
-
800: "Montserrat_800ExtraBold",
|
|
86
|
-
900: "Montserrat_900Black"
|
|
87
|
-
};
|
|
88
|
-
var FontWeightsItalic = {
|
|
89
|
-
100: "Montserrat_100Thin_Italic",
|
|
90
|
-
200: "Montserrat_200ExtraLight_Italic",
|
|
91
|
-
300: "Montserrat_300Light_Italic",
|
|
92
|
-
400: "Montserrat_400Regular_Italic",
|
|
93
|
-
500: "Montserrat_500Medium_Italic",
|
|
94
|
-
600: "Montserrat_600SemiBold_Italic",
|
|
95
|
-
700: "Montserrat_700Bold_Italic",
|
|
96
|
-
800: "Montserrat_800ExtraBold_Italic",
|
|
97
|
-
900: "Montserrat_900Black_Italic"
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// src/hooks/use-border.hook.ts
|
|
101
|
-
import { useMemo as useMemo2 } from "react";
|
|
102
|
-
|
|
103
|
-
// src/providers/theme.provider.tsx
|
|
104
|
-
import {
|
|
105
|
-
Montserrat_100Thin,
|
|
106
|
-
Montserrat_100Thin_Italic,
|
|
107
|
-
Montserrat_200ExtraLight,
|
|
108
|
-
Montserrat_200ExtraLight_Italic,
|
|
109
|
-
Montserrat_300Light,
|
|
110
|
-
Montserrat_300Light_Italic,
|
|
111
|
-
Montserrat_400Regular,
|
|
112
|
-
Montserrat_400Regular_Italic,
|
|
113
|
-
Montserrat_500Medium,
|
|
114
|
-
Montserrat_500Medium_Italic,
|
|
115
|
-
Montserrat_600SemiBold,
|
|
116
|
-
Montserrat_600SemiBold_Italic,
|
|
117
|
-
Montserrat_700Bold,
|
|
118
|
-
Montserrat_700Bold_Italic,
|
|
119
|
-
Montserrat_800ExtraBold,
|
|
120
|
-
Montserrat_800ExtraBold_Italic,
|
|
121
|
-
Montserrat_900Black,
|
|
122
|
-
Montserrat_900Black_Italic,
|
|
123
|
-
useFonts
|
|
124
|
-
} from "@expo-google-fonts/montserrat";
|
|
125
|
-
import { merge } from "@impulse-ui-native/core";
|
|
126
|
-
import {
|
|
127
|
-
createContext,
|
|
128
|
-
memo,
|
|
129
|
-
useContext,
|
|
130
|
-
useMemo
|
|
131
|
-
} from "react";
|
|
132
|
-
|
|
133
|
-
// src/theme/tokens.theme.ts
|
|
134
|
-
var SpaceTokens = {
|
|
135
|
-
none: 0,
|
|
136
|
-
auto: "auto",
|
|
137
|
-
xxs: 4,
|
|
138
|
-
xs: 8,
|
|
139
|
-
mxs: 12,
|
|
140
|
-
sm: 16,
|
|
141
|
-
msm: 24,
|
|
142
|
-
md: 32,
|
|
143
|
-
lg: 48,
|
|
144
|
-
xl: 64,
|
|
145
|
-
xxl: 96
|
|
146
|
-
};
|
|
147
|
-
var BorderSizeTokens = {
|
|
148
|
-
sm: 1,
|
|
149
|
-
md: 2,
|
|
150
|
-
lg: 3,
|
|
151
|
-
xl: 5,
|
|
152
|
-
xxl: 10
|
|
153
|
-
};
|
|
154
|
-
var RadiiTokens = {
|
|
155
|
-
sm: 4,
|
|
156
|
-
md: 8,
|
|
157
|
-
lg: 16,
|
|
158
|
-
xl: 32,
|
|
159
|
-
xxl: 64,
|
|
160
|
-
xxxl: 128,
|
|
161
|
-
round: 1e5
|
|
162
|
-
};
|
|
163
|
-
var FontSizeTokens = {
|
|
164
|
-
xxs: 8,
|
|
165
|
-
xs: 12,
|
|
166
|
-
xsm: 14,
|
|
167
|
-
sm: 16,
|
|
168
|
-
md: 18,
|
|
169
|
-
lg: 20,
|
|
170
|
-
xl: 24,
|
|
171
|
-
xxl: 32,
|
|
172
|
-
xxxl: 40,
|
|
173
|
-
huge: 48,
|
|
174
|
-
massive: 56
|
|
175
|
-
};
|
|
176
|
-
var NeutralColorTokens = {
|
|
177
|
-
"0": "#ffffff",
|
|
178
|
-
"1": "#f8f9fa",
|
|
179
|
-
"2": "#f1f3f5",
|
|
180
|
-
"3": "#e9ecef",
|
|
181
|
-
"4": "#dee2e6",
|
|
182
|
-
"5": "#ced4da",
|
|
183
|
-
"6": "#adb5bd",
|
|
184
|
-
"7": "#868e96",
|
|
185
|
-
"8": "#495057",
|
|
186
|
-
"9": "#343a40",
|
|
187
|
-
"10": "#212529",
|
|
188
|
-
"11": "#16191d",
|
|
189
|
-
"12": "#0d0f12",
|
|
190
|
-
"13": "#000000"
|
|
191
|
-
};
|
|
192
|
-
|
|
193
|
-
// src/theme/dark.theme.ts
|
|
194
|
-
var DarkTheme = {
|
|
195
|
-
colors: {
|
|
196
|
-
primary: "#f55d6b",
|
|
197
|
-
secondary: "#f55d6b",
|
|
198
|
-
neutral: NeutralColorTokens,
|
|
199
|
-
white: NeutralColorTokens["0"],
|
|
200
|
-
black: NeutralColorTokens["13"],
|
|
201
|
-
error: "#c92a2a",
|
|
202
|
-
warning: "#e67700",
|
|
203
|
-
success: "#7a9908",
|
|
204
|
-
info: "#1864ab",
|
|
205
|
-
text: {
|
|
206
|
-
primary: NeutralColorTokens["11"],
|
|
207
|
-
secondary: NeutralColorTokens["10"]
|
|
208
|
-
},
|
|
209
|
-
background: {
|
|
210
|
-
primary: NeutralColorTokens["2"],
|
|
211
|
-
secondary: NeutralColorTokens["0"]
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
spacing: SpaceTokens,
|
|
215
|
-
radii: RadiiTokens,
|
|
216
|
-
fontWeights: {
|
|
217
|
-
normal: FontWeightsNormal,
|
|
218
|
-
italic: FontWeightsItalic
|
|
219
|
-
},
|
|
220
|
-
borderSize: BorderSizeTokens,
|
|
221
|
-
fontSize: FontSizeTokens
|
|
222
|
-
};
|
|
223
|
-
|
|
224
|
-
// src/theme/light.theme.ts
|
|
225
|
-
var LightTheme = {
|
|
226
|
-
colors: {
|
|
227
|
-
primary: "#f55d6b",
|
|
228
|
-
secondary: "#f55d6b",
|
|
229
|
-
neutral: NeutralColorTokens,
|
|
230
|
-
white: NeutralColorTokens["0"],
|
|
231
|
-
black: NeutralColorTokens["13"],
|
|
232
|
-
error: "#c92a2a",
|
|
233
|
-
warning: "#e67700",
|
|
234
|
-
success: "#7a9908",
|
|
235
|
-
info: "#1864ab",
|
|
236
|
-
text: {
|
|
237
|
-
primary: NeutralColorTokens["11"],
|
|
238
|
-
secondary: NeutralColorTokens["10"]
|
|
239
|
-
},
|
|
240
|
-
background: {
|
|
241
|
-
primary: NeutralColorTokens["2"],
|
|
242
|
-
secondary: NeutralColorTokens["0"]
|
|
243
|
-
}
|
|
244
|
-
},
|
|
245
|
-
spacing: SpaceTokens,
|
|
246
|
-
radii: RadiiTokens,
|
|
247
|
-
fontWeights: {
|
|
248
|
-
normal: FontWeightsNormal,
|
|
249
|
-
italic: FontWeightsItalic
|
|
250
|
-
},
|
|
251
|
-
borderSize: BorderSizeTokens,
|
|
252
|
-
fontSize: FontSizeTokens
|
|
253
|
-
};
|
|
254
|
-
|
|
255
|
-
// src/providers/theme.provider.tsx
|
|
256
|
-
var ThemeContext = createContext(void 0);
|
|
257
|
-
var ThemeProvider = memo(function ThemeProvider2(props) {
|
|
258
|
-
const scheme = props.scheme ?? "light";
|
|
259
|
-
const [loaded] = useFonts({
|
|
260
|
-
Montserrat_100Thin,
|
|
261
|
-
Montserrat_100Thin_Italic,
|
|
262
|
-
Montserrat_200ExtraLight,
|
|
263
|
-
Montserrat_200ExtraLight_Italic,
|
|
264
|
-
Montserrat_300Light,
|
|
265
|
-
Montserrat_300Light_Italic,
|
|
266
|
-
Montserrat_400Regular,
|
|
267
|
-
Montserrat_400Regular_Italic,
|
|
268
|
-
Montserrat_500Medium,
|
|
269
|
-
Montserrat_500Medium_Italic,
|
|
270
|
-
Montserrat_600SemiBold,
|
|
271
|
-
Montserrat_600SemiBold_Italic,
|
|
272
|
-
Montserrat_700Bold,
|
|
273
|
-
Montserrat_700Bold_Italic,
|
|
274
|
-
Montserrat_800ExtraBold,
|
|
275
|
-
Montserrat_800ExtraBold_Italic,
|
|
276
|
-
Montserrat_900Black,
|
|
277
|
-
Montserrat_900Black_Italic
|
|
278
|
-
});
|
|
279
|
-
const context = useMemo(() => {
|
|
280
|
-
const baseTheme = scheme === "light" ? LightTheme : DarkTheme;
|
|
281
|
-
const customBaseTheme = props.theme?.[scheme];
|
|
282
|
-
const theme = merge(baseTheme, customBaseTheme);
|
|
283
|
-
let componentsTheme;
|
|
284
|
-
if (typeof props.components === "function") {
|
|
285
|
-
componentsTheme = props.components(theme);
|
|
286
|
-
} else {
|
|
287
|
-
componentsTheme = props.components;
|
|
288
|
-
}
|
|
289
|
-
return {
|
|
290
|
-
loaded,
|
|
291
|
-
theme,
|
|
292
|
-
components: componentsTheme
|
|
293
|
-
};
|
|
294
|
-
}, [props.theme?.light, props.theme?.dark, props.components]);
|
|
295
|
-
return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: context }, props.children);
|
|
296
|
-
});
|
|
297
|
-
function useThemeContext() {
|
|
298
|
-
const context = useContext(ThemeContext);
|
|
299
|
-
if (!context) {
|
|
300
|
-
throw new Error("useThemeContext must be used within a ThemeProvider");
|
|
301
|
-
}
|
|
302
|
-
return context;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
// src/hooks/use-border.hook.ts
|
|
306
|
-
function useBorder() {
|
|
307
|
-
const context = useThemeContext();
|
|
308
|
-
return useMemo2(() => context.theme.borderSize, [context.theme.borderSize]);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
// src/hooks/use-colors.hook.ts
|
|
312
|
-
import { useMemo as useMemo3 } from "react";
|
|
313
|
-
function useColors() {
|
|
314
|
-
const context = useThemeContext();
|
|
315
|
-
return useMemo3(() => context.theme.colors, [context.theme.colors]);
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
// src/hooks/use-components-theme.hook.ts
|
|
319
|
-
import { useMemo as useMemo4 } from "react";
|
|
320
|
-
function useComponentsTheme() {
|
|
321
|
-
const context = useThemeContext();
|
|
322
|
-
return useMemo4(() => context.components, [context.components]);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
// src/hooks/use-radii.hook.ts
|
|
326
|
-
import { useMemo as useMemo5 } from "react";
|
|
327
|
-
function useRadii() {
|
|
328
|
-
const context = useThemeContext();
|
|
329
|
-
return useMemo5(() => context.theme.radii, [context.theme.radii]);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
// src/hooks/use-space.hook.ts
|
|
333
|
-
import { useMemo as useMemo6 } from "react";
|
|
334
|
-
function useSpace() {
|
|
335
|
-
const context = useThemeContext();
|
|
336
|
-
return useMemo6(() => context.theme.spacing, [context.theme.spacing]);
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
// src/hooks/use-style-props.hook.ts
|
|
340
|
-
import { useMemo as useMemo7 } from "react";
|
|
341
|
-
|
|
342
|
-
// src/utils/style.utils.ts
|
|
343
|
-
var isStylePropKey = (k) => StylePropsSet.has(k);
|
|
344
|
-
var extractStyleProps = (props) => {
|
|
345
|
-
const style = {};
|
|
346
|
-
for (const k in props) {
|
|
347
|
-
if (isStylePropKey(k) && props[k] !== void 0) {
|
|
348
|
-
style[k] = props[k];
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
return style;
|
|
352
|
-
};
|
|
353
|
-
var createStyleKey = (props) => {
|
|
354
|
-
let key = "";
|
|
355
|
-
for (const k in props) {
|
|
356
|
-
if (isStylePropKey(k)) {
|
|
357
|
-
key += String(props[k]);
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
return key;
|
|
361
|
-
};
|
|
362
|
-
|
|
363
|
-
// src/hooks/use-style-props.hook.ts
|
|
364
|
-
function useStyleProps(props) {
|
|
365
|
-
const key = createStyleKey(props);
|
|
366
|
-
return useMemo7(() => extractStyleProps(props), [key]);
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
// src/hooks/use-theme.hook.ts
|
|
370
|
-
import { useMemo as useMemo8 } from "react";
|
|
371
|
-
function useTheme() {
|
|
372
|
-
const context = useThemeContext();
|
|
373
|
-
return useMemo8(() => context.theme, [context.theme]);
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
// src/hooks/use-themed-styles.ts
|
|
377
|
-
import { useMemo as useMemo9 } from "react";
|
|
378
|
-
var useThemedStyles = (styledFunction, props) => {
|
|
379
|
-
const theme = useTheme();
|
|
380
|
-
return useMemo9(() => styledFunction(theme, props), [theme, props]);
|
|
381
|
-
};
|
|
382
|
-
export {
|
|
383
|
-
BorderSizeTokens,
|
|
384
|
-
DarkTheme,
|
|
385
|
-
FontSizeTokens,
|
|
386
|
-
FontWeightsItalic,
|
|
387
|
-
FontWeightsNormal,
|
|
388
|
-
LightTheme,
|
|
389
|
-
NeutralColorTokens,
|
|
390
|
-
RadiiTokens,
|
|
391
|
-
SpaceTokens,
|
|
392
|
-
StylePropsSet,
|
|
393
|
-
ThemeProvider,
|
|
394
|
-
createStyleKey,
|
|
395
|
-
extractStyleProps,
|
|
396
|
-
useBorder,
|
|
397
|
-
useColors,
|
|
398
|
-
useComponentsTheme,
|
|
399
|
-
useRadii,
|
|
400
|
-
useSpace,
|
|
401
|
-
useStyleProps,
|
|
402
|
-
useTheme,
|
|
403
|
-
useThemeContext,
|
|
404
|
-
useThemedStyles
|
|
405
|
-
};
|
|
406
|
-
//# sourceMappingURL=index.esm.js.map
|