@impulse-ui-native/theme 1.0.4 → 1.0.6

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.
Files changed (22) hide show
  1. package/dist/index.cjs.js +13 -27
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.mts +65 -55
  4. package/dist/index.d.ts +65 -55
  5. package/dist/index.esm.js +13 -27
  6. package/dist/index.esm.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/constants/style.constants.ts +9 -0
  9. package/src/hooks/use-colors.hook.ts +1 -1
  10. package/src/hooks/use-theme.hook.ts +1 -1
  11. package/src/hooks/use-themed-styles.ts +1 -1
  12. package/src/providers/theme.provider.tsx +2 -2
  13. package/src/theme/dark.theme.ts +14 -16
  14. package/src/theme/index.ts +2 -3
  15. package/src/theme/light.theme.ts +1 -51
  16. package/src/theme/tokens.theme.ts +1 -42
  17. package/src/types/dimension.types.ts +11 -0
  18. package/src/types/index.ts +1 -0
  19. package/src/types/style.types.ts +3 -1
  20. package/src/types/theme-provider.types.ts +48 -1
  21. package/src/types/tokens.types.ts +0 -37
  22. package/src/types/typography.types.ts +61 -37
package/dist/index.cjs.js CHANGED
@@ -101,7 +101,15 @@ var StylePropsSet = /* @__PURE__ */ new Set([
101
101
  "top",
102
102
  "right",
103
103
  "bottom",
104
- "left"
104
+ "left",
105
+ // Dimensions (ViewStyle)
106
+ "width",
107
+ "height",
108
+ "minWidth",
109
+ "maxWidth",
110
+ "minHeight",
111
+ "maxHeight",
112
+ "aspectRatio"
105
113
  ]);
106
114
 
107
115
  // src/hooks/use-border.hook.ts
@@ -170,29 +178,9 @@ var NeutralColorTokens = {
170
178
  "12": "#0d0f12",
171
179
  "13": "#000000"
172
180
  };
173
- var FontFamilyTokens = {
174
- thin: "Montserrat-Thin",
175
- thinItalic: "Montserrat-ThinItalic",
176
- extraLight: "Montserrat-ExtraLight",
177
- extraLightItalic: "Montserrat-ExtraLightItalic",
178
- light: "Montserrat-Light",
179
- lightItalic: "Montserrat-LightItalic",
180
- regular: "Montserrat-Regular",
181
- italic: "Montserrat-Italic",
182
- medium: "Montserrat-Medium",
183
- mediumItalic: "Montserrat-MediumItalic",
184
- semiBold: "Montserrat-SemiBold",
185
- semiBoldItalic: "Montserrat-SemiBoldItalic",
186
- bold: "Montserrat-Bold",
187
- boldItalic: "Montserrat-BoldItalic",
188
- extraBold: "Montserrat-ExtraBold",
189
- extraBoldItalic: "Montserrat-ExtraBoldItalic",
190
- black: "Montserrat-Black",
191
- blackItalic: "Montserrat-BlackItalic"
192
- };
193
181
 
194
- // src/theme/light.theme.ts
195
- var LightTheme = {
182
+ // src/theme/dark.theme.ts
183
+ var DarkTheme = {
196
184
  colors: {
197
185
  primary: "#f55d6b",
198
186
  secondary: "#f55d6b",
@@ -215,12 +203,11 @@ var LightTheme = {
215
203
  spacing: SpaceTokens,
216
204
  radii: RadiiTokens,
217
205
  borderSize: BorderSizeTokens,
218
- fontFamily: FontFamilyTokens,
219
206
  fontSize: FontSizeTokens
220
207
  };
221
208
 
222
- // src/theme/dark.theme.ts
223
- var DarkTheme = {
209
+ // src/theme/light.theme.ts
210
+ var LightTheme = {
224
211
  colors: {
225
212
  primary: "#f55d6b",
226
213
  secondary: "#f55d6b",
@@ -243,7 +230,6 @@ var DarkTheme = {
243
230
  spacing: SpaceTokens,
244
231
  radii: RadiiTokens,
245
232
  borderSize: BorderSizeTokens,
246
- fontFamily: FontFamilyTokens,
247
233
  fontSize: FontSizeTokens
248
234
  };
249
235
 
package/dist/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/constants/style.constants.ts","../src/hooks/use-border.hook.ts","../src/providers/theme.provider.tsx","../src/theme/tokens.theme.ts","../src/theme/light.theme.ts","../src/theme/dark.theme.ts","../src/hooks/use-colors.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","import { useMemo } from \"react\";\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 { 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\nimport { AppTheme, DarkTheme, LightTheme } from \"../theme\";\r\nimport { ColorScheme, ThemeContextData } from \"../types\";\r\n\r\nimport {\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\n\r\nconst ThemeContext = createContext<ThemeContextData | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n scheme: ColorScheme;\r\n theme: {\r\n light: AppTheme;\r\n dark: AppTheme;\r\n };\r\n}\r\n\r\nexport const ThemeProvider = memo(function ThemeProvider(\r\n props: PropsWithChildren<DeepPartial<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\r\n return {\r\n loaded,\r\n theme: merge(baseTheme, props.theme?.[scheme]),\r\n };\r\n }, [props.theme?.light, props.theme?.dark]);\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 {\r\n BorderSizes,\r\n FontFamilyMap,\r\n FontSizes,\r\n FontWeights,\r\n NeutralColors,\r\n Radii,\r\n Space,\r\n} 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\r\nexport const FontWeightTokens: FontWeights = {\r\n thin: \"100\",\r\n extraLight: \"200\",\r\n light: \"300\",\r\n regular: \"400\",\r\n medium: \"500\",\r\n semiBold: \"600\",\r\n bold: \"700\",\r\n extraBold: \"800\",\r\n black: \"900\",\r\n};\r\n\r\nexport const FontFamilyTokens: FontFamilyMap = {\r\n thin: \"Montserrat-Thin\",\r\n thinItalic: \"Montserrat-ThinItalic\",\r\n extraLight: \"Montserrat-ExtraLight\",\r\n extraLightItalic: \"Montserrat-ExtraLightItalic\",\r\n light: \"Montserrat-Light\",\r\n lightItalic: \"Montserrat-LightItalic\",\r\n regular: \"Montserrat-Regular\",\r\n italic: \"Montserrat-Italic\",\r\n medium: \"Montserrat-Medium\",\r\n mediumItalic: \"Montserrat-MediumItalic\",\r\n semiBold: \"Montserrat-SemiBold\",\r\n semiBoldItalic: \"Montserrat-SemiBoldItalic\",\r\n bold: \"Montserrat-Bold\",\r\n boldItalic: \"Montserrat-BoldItalic\",\r\n extraBold: \"Montserrat-ExtraBold\",\r\n extraBoldItalic: \"Montserrat-ExtraBoldItalic\",\r\n black: \"Montserrat-Black\",\r\n blackItalic: \"Montserrat-BlackItalic\",\r\n};\r\n","import { DeepPartial } from \"@impulse-ui-native/core\";\r\nimport {\r\n BorderSizes,\r\n FontFamilyMap,\r\n FontSizes,\r\n NeutralColors,\r\n Radii,\r\n Space,\r\n TypographyPresetKey,\r\n TypographyProps,\r\n} from \"../types\";\r\nimport {\r\n BorderSizeTokens,\r\n FontFamilyTokens,\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 borderSize: BorderSizeTokens,\r\n fontFamily: FontFamilyTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n\r\nexport interface ThemeColors {\r\n primary: string;\r\n secondary: string;\r\n neutral: NeutralColors;\r\n\r\n white: string;\r\n black: string;\r\n\r\n error: string;\r\n warning: string;\r\n success: string;\r\n info: string;\r\n\r\n text: {\r\n primary: string;\r\n secondary: string;\r\n };\r\n\r\n background: {\r\n primary: string;\r\n secondary: string;\r\n };\r\n}\r\n\r\nexport interface ComponentsThemes {\r\n typography: Record<TypographyPresetKey, TypographyProps>;\r\n}\r\n\r\nexport interface AppTheme {\r\n colors: ThemeColors;\r\n spacing: Space;\r\n radii: Radii;\r\n borderSize: BorderSizes;\r\n fontFamily: FontFamilyMap;\r\n fontSize: FontSizes;\r\n components?: DeepPartial<ComponentsThemes>;\r\n}\r\n","import { AppTheme } from './light.theme';\r\nimport {\r\n BorderSizeTokens,\r\n FontFamilyTokens,\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 borderSize: BorderSizeTokens,\r\n fontFamily: FontFamilyTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { ThemeColors } from \"../theme/light.theme\";\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 { useMemo } from \"react\";\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\";\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';\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\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { AppTheme } from \"../theme\";\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\nimport { AppTheme } from \"../theme\";\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"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/constants/style.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-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 { useMemo } from \"react\";\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 { 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\nimport { DarkTheme, LightTheme } from \"../theme\";\r\nimport { AppTheme, ColorScheme, ThemeContextData } from \"../types\";\r\n\r\nimport {\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\n\r\nconst ThemeContext = createContext<ThemeContextData | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n scheme: ColorScheme;\r\n theme: {\r\n light: AppTheme;\r\n dark: AppTheme;\r\n };\r\n}\r\n\r\nexport const ThemeProvider = memo(function ThemeProvider(\r\n props: PropsWithChildren<DeepPartial<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\r\n return {\r\n loaded,\r\n theme: merge(baseTheme, props.theme?.[scheme]),\r\n };\r\n }, [props.theme?.light, props.theme?.dark]);\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 { AppTheme } from \"../types\";\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 borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { AppTheme } from \"../types\";\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 borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { useMemo } from \"react\";\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 { useMemo } from \"react\";\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\";\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';\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\";\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\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 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"]}
package/dist/index.d.mts CHANGED
@@ -3,7 +3,7 @@ import { DeepPartial } from '@impulse-ui-native/core';
3
3
  import * as react from 'react';
4
4
  import { PropsWithChildren } from 'react';
5
5
 
6
- declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps>;
6
+ declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps | keyof DimensionProps>;
7
7
 
8
8
  type BorderProps = {
9
9
  borderRadius?: ViewStyle['borderRadius'];
@@ -20,6 +20,16 @@ type ColorProps = {
20
20
 
21
21
  type ComponentSize = "small" | "medium" | "large";
22
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
+
23
33
  type FlexProps = {
24
34
  flex?: ViewStyle["flex"];
25
35
  flexGrow?: ViewStyle["flexGrow"];
@@ -67,28 +77,56 @@ type SpacingProps = {
67
77
  };
68
78
 
69
79
  type TypographyProps = {
70
- fontSize?: TextStyle['fontSize'];
71
- fontFamily?: TextStyle['fontFamily'];
72
- fontWeight?: TextStyle['fontWeight'];
73
- fontStyle?: TextStyle['fontStyle'];
74
- letterSpacing?: TextStyle['letterSpacing'];
75
- lineHeight?: TextStyle['lineHeight'];
76
- textAlign?: TextStyle['textAlign'];
77
- textDecorationLine?: TextStyle['textDecorationLine'];
78
- textDecorationStyle?: TextStyle['textDecorationStyle'];
79
- textDecorationColor?: TextStyle['textDecorationColor'];
80
- textTransform?: TextStyle['textTransform'];
81
- includeFontPadding?: TextStyle['includeFontPadding'];
82
- textAlignVertical?: TextStyle['textAlignVertical'];
83
- writingDirection?: TextStyle['writingDirection'];
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"];
84
94
  };
85
- type TypographyPresetKey = 'Master' | 'DisplayLarge' | 'DisplayMedium' | 'DisplaySmall' | 'Title1' | 'Title2' | 'Title3' | 'Title4' | 'Title5' | 'Title6' | 'Subtitle1' | 'Subtitle2' | 'BodyLarge' | 'Body' | 'BodySmall' | 'Caption' | 'Label' | 'Overline' | 'Helper' | 'Code' | 'Quote' | 'Eyebrow';
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;
86
99
 
87
- type StyleProps = Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps>;
100
+ type StyleProps = Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
88
101
  type StylePropKey = keyof StyleProps;
89
102
 
90
- declare const LightTheme: AppTheme;
91
- interface ThemeColors {
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
+ }
128
+ type ColorScheme = "light" | "dark";
129
+ type ThemeColors = {
92
130
  primary: string;
93
131
  secondary: string;
94
132
  neutral: NeutralColors;
@@ -106,6 +144,8 @@ interface ThemeColors {
106
144
  primary: string;
107
145
  secondary: string;
108
146
  };
147
+ } & ExtendedThemeColors;
148
+ interface ExtendedThemeColors {
109
149
  }
110
150
  interface ComponentsThemes {
111
151
  typography: Record<TypographyPresetKey, TypographyProps>;
@@ -115,44 +155,10 @@ interface AppTheme {
115
155
  spacing: Space;
116
156
  radii: Radii;
117
157
  borderSize: BorderSizes;
118
- fontFamily: FontFamilyMap;
119
158
  fontSize: FontSizes;
120
159
  components?: DeepPartial<ComponentsThemes>;
121
160
  }
122
161
 
123
- declare const DarkTheme: AppTheme;
124
-
125
- interface ThemeContextData {
126
- loaded: boolean;
127
- theme: AppTheme;
128
- }
129
- type ColorScheme = "light" | "dark";
130
-
131
- type SpaceSizesKeys = "none" | "auto" | "xxs" | "xs" | "mxs" | "sm" | "msm" | "md" | "lg" | "xl" | "xxl";
132
- type Space = Record<SpaceSizesKeys, DimensionValue>;
133
- type FontSizesKeys = "xxs" | "xs" | "xsm" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "huge" | "massive";
134
- type FontSizes = Record<FontSizesKeys, number>;
135
- type LineHeightKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
136
- type LineHeights = Record<LineHeightKeys, string>;
137
- type FontWeightKey = "thin" | "extraLight" | "light" | "regular" | "medium" | "semiBold" | "bold" | "extraBold" | "black";
138
- type FontWeights = Record<FontWeightKey, "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900">;
139
- type LetterSpacingKey = "tightest" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "ultraWide";
140
- type LetterSpacings = Record<LetterSpacingKey, number>;
141
- type BorderSizeKey = "sm" | "md" | "lg" | "xl" | "xxl";
142
- type BorderSizes = Record<BorderSizeKey, number>;
143
- type RadiusKey = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "round";
144
- type Radii = Record<RadiusKey, number>;
145
- type RadiusDrawnKey = "drawn1" | "drawn2" | "drawn3" | "drawn4" | "drawn5" | "drawn6";
146
- type RadiiDrawn = Record<RadiusDrawnKey, string>;
147
- type RadiusBlobKey = "blob1" | "blob2" | "blob3" | "blob4" | "blob5";
148
- type RadiiBlob = Record<RadiusBlobKey, string>;
149
- type RadiusConditionalKey = "conditional1" | "conditional2" | "conditional3" | "conditional4" | "conditional5" | "conditional6";
150
- type RadiiConditional = Record<RadiusConditionalKey, string>;
151
- type NeutralColorKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13";
152
- type NeutralColors = Record<NeutralColorKey, string>;
153
- type FontFamilyKey = "thin" | "thinItalic" | "extraLight" | "extraLightItalic" | "light" | "lightItalic" | "regular" | "italic" | "medium" | "mediumItalic" | "semiBold" | "semiBoldItalic" | "bold" | "boldItalic" | "extraBold" | "extraBoldItalic" | "black" | "blackItalic";
154
- type FontFamilyMap = Record<FontFamilyKey, string>;
155
-
156
162
  declare function useBorder(): BorderSizes;
157
163
 
158
164
  declare function useColors(): ThemeColors;
@@ -161,7 +167,7 @@ declare function useRadii(): Radii;
161
167
 
162
168
  declare function useSpace(): Space;
163
169
 
164
- declare function useStyleProps<Props extends object>(props: Props): Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps>;
170
+ declare function useStyleProps<Props extends object>(props: Props): Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
165
171
 
166
172
  declare function useTheme(): AppTheme;
167
173
 
@@ -179,7 +185,11 @@ interface ThemeProviderProps {
179
185
  declare const ThemeProvider: react.NamedExoticComponent<PropsWithChildren<DeepPartial<ThemeProviderProps>>>;
180
186
  declare function useThemeContext(): ThemeContextData;
181
187
 
188
+ declare const DarkTheme: AppTheme;
189
+
190
+ declare const LightTheme: AppTheme;
191
+
182
192
  declare const extractStyleProps: <Props extends object>(props: Props) => StyleProps;
183
193
  declare const createStyleKey: <Props extends object>(props: Props) => string;
184
194
 
185
- export { type AppTheme, type BorderProps, type BorderSizeKey, type BorderSizes, type ColorProps, type ColorScheme, type ComponentSize, DarkTheme, type FlexProps, type FontFamilyKey, type FontFamilyMap, type FontSizes, type FontSizesKeys, type FontWeightKey, type FontWeights, type LetterSpacingKey, type LetterSpacings, LightTheme, type LineHeightKeys, type LineHeights, type NeutralColorKey, type NeutralColors, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type ShadowProps, type Space, type SpaceSizesKeys, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type ThemeContextData, ThemeProvider, type TypographyPresetKey, type TypographyProps, createStyleKey, extractStyleProps, useBorder, useColors, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };
195
+ export { type AppTheme, type BorderProps, type BorderSizeKey, type BorderSizes, type ColorProps, type ColorScheme, type ComponentSize, type ComponentsThemes, DarkTheme, type DimensionProps, type ExtendedThemeColors, type FlexProps, type FontSizes, type FontSizesKeys, type FontWeightItalic, type FontWeightKey, type FontWeightNormal, type LetterSpacingKey, type LetterSpacings, LightTheme, type LineHeightKeys, type LineHeights, type NeutralColorKey, type NeutralColors, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type ShadowProps, type Space, type SpaceSizesKeys, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type ThemeColors, type ThemeContextData, ThemeProvider, type TypographyPresetKey, type TypographyProps, createStyleKey, extractStyleProps, useBorder, useColors, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { DeepPartial } from '@impulse-ui-native/core';
3
3
  import * as react from 'react';
4
4
  import { PropsWithChildren } from 'react';
5
5
 
6
- declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps>;
6
+ declare const StylePropsSet: Set<keyof SpacingProps | keyof ColorProps | keyof ShadowProps | keyof BorderProps | keyof TypographyProps | keyof FlexProps | keyof DimensionProps>;
7
7
 
8
8
  type BorderProps = {
9
9
  borderRadius?: ViewStyle['borderRadius'];
@@ -20,6 +20,16 @@ type ColorProps = {
20
20
 
21
21
  type ComponentSize = "small" | "medium" | "large";
22
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
+
23
33
  type FlexProps = {
24
34
  flex?: ViewStyle["flex"];
25
35
  flexGrow?: ViewStyle["flexGrow"];
@@ -67,28 +77,56 @@ type SpacingProps = {
67
77
  };
68
78
 
69
79
  type TypographyProps = {
70
- fontSize?: TextStyle['fontSize'];
71
- fontFamily?: TextStyle['fontFamily'];
72
- fontWeight?: TextStyle['fontWeight'];
73
- fontStyle?: TextStyle['fontStyle'];
74
- letterSpacing?: TextStyle['letterSpacing'];
75
- lineHeight?: TextStyle['lineHeight'];
76
- textAlign?: TextStyle['textAlign'];
77
- textDecorationLine?: TextStyle['textDecorationLine'];
78
- textDecorationStyle?: TextStyle['textDecorationStyle'];
79
- textDecorationColor?: TextStyle['textDecorationColor'];
80
- textTransform?: TextStyle['textTransform'];
81
- includeFontPadding?: TextStyle['includeFontPadding'];
82
- textAlignVertical?: TextStyle['textAlignVertical'];
83
- writingDirection?: TextStyle['writingDirection'];
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"];
84
94
  };
85
- type TypographyPresetKey = 'Master' | 'DisplayLarge' | 'DisplayMedium' | 'DisplaySmall' | 'Title1' | 'Title2' | 'Title3' | 'Title4' | 'Title5' | 'Title6' | 'Subtitle1' | 'Subtitle2' | 'BodyLarge' | 'Body' | 'BodySmall' | 'Caption' | 'Label' | 'Overline' | 'Helper' | 'Code' | 'Quote' | 'Eyebrow';
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;
86
99
 
87
- type StyleProps = Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps>;
100
+ type StyleProps = Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
88
101
  type StylePropKey = keyof StyleProps;
89
102
 
90
- declare const LightTheme: AppTheme;
91
- interface ThemeColors {
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
+ }
128
+ type ColorScheme = "light" | "dark";
129
+ type ThemeColors = {
92
130
  primary: string;
93
131
  secondary: string;
94
132
  neutral: NeutralColors;
@@ -106,6 +144,8 @@ interface ThemeColors {
106
144
  primary: string;
107
145
  secondary: string;
108
146
  };
147
+ } & ExtendedThemeColors;
148
+ interface ExtendedThemeColors {
109
149
  }
110
150
  interface ComponentsThemes {
111
151
  typography: Record<TypographyPresetKey, TypographyProps>;
@@ -115,44 +155,10 @@ interface AppTheme {
115
155
  spacing: Space;
116
156
  radii: Radii;
117
157
  borderSize: BorderSizes;
118
- fontFamily: FontFamilyMap;
119
158
  fontSize: FontSizes;
120
159
  components?: DeepPartial<ComponentsThemes>;
121
160
  }
122
161
 
123
- declare const DarkTheme: AppTheme;
124
-
125
- interface ThemeContextData {
126
- loaded: boolean;
127
- theme: AppTheme;
128
- }
129
- type ColorScheme = "light" | "dark";
130
-
131
- type SpaceSizesKeys = "none" | "auto" | "xxs" | "xs" | "mxs" | "sm" | "msm" | "md" | "lg" | "xl" | "xxl";
132
- type Space = Record<SpaceSizesKeys, DimensionValue>;
133
- type FontSizesKeys = "xxs" | "xs" | "xsm" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "huge" | "massive";
134
- type FontSizes = Record<FontSizesKeys, number>;
135
- type LineHeightKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
136
- type LineHeights = Record<LineHeightKeys, string>;
137
- type FontWeightKey = "thin" | "extraLight" | "light" | "regular" | "medium" | "semiBold" | "bold" | "extraBold" | "black";
138
- type FontWeights = Record<FontWeightKey, "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900">;
139
- type LetterSpacingKey = "tightest" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "ultraWide";
140
- type LetterSpacings = Record<LetterSpacingKey, number>;
141
- type BorderSizeKey = "sm" | "md" | "lg" | "xl" | "xxl";
142
- type BorderSizes = Record<BorderSizeKey, number>;
143
- type RadiusKey = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "round";
144
- type Radii = Record<RadiusKey, number>;
145
- type RadiusDrawnKey = "drawn1" | "drawn2" | "drawn3" | "drawn4" | "drawn5" | "drawn6";
146
- type RadiiDrawn = Record<RadiusDrawnKey, string>;
147
- type RadiusBlobKey = "blob1" | "blob2" | "blob3" | "blob4" | "blob5";
148
- type RadiiBlob = Record<RadiusBlobKey, string>;
149
- type RadiusConditionalKey = "conditional1" | "conditional2" | "conditional3" | "conditional4" | "conditional5" | "conditional6";
150
- type RadiiConditional = Record<RadiusConditionalKey, string>;
151
- type NeutralColorKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13";
152
- type NeutralColors = Record<NeutralColorKey, string>;
153
- type FontFamilyKey = "thin" | "thinItalic" | "extraLight" | "extraLightItalic" | "light" | "lightItalic" | "regular" | "italic" | "medium" | "mediumItalic" | "semiBold" | "semiBoldItalic" | "bold" | "boldItalic" | "extraBold" | "extraBoldItalic" | "black" | "blackItalic";
154
- type FontFamilyMap = Record<FontFamilyKey, string>;
155
-
156
162
  declare function useBorder(): BorderSizes;
157
163
 
158
164
  declare function useColors(): ThemeColors;
@@ -161,7 +167,7 @@ declare function useRadii(): Radii;
161
167
 
162
168
  declare function useSpace(): Space;
163
169
 
164
- declare function useStyleProps<Props extends object>(props: Props): Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps>;
170
+ declare function useStyleProps<Props extends object>(props: Props): Partial<SpacingProps & ColorProps & ShadowProps & BorderProps & TypographyProps & FlexProps & DimensionProps>;
165
171
 
166
172
  declare function useTheme(): AppTheme;
167
173
 
@@ -179,7 +185,11 @@ interface ThemeProviderProps {
179
185
  declare const ThemeProvider: react.NamedExoticComponent<PropsWithChildren<DeepPartial<ThemeProviderProps>>>;
180
186
  declare function useThemeContext(): ThemeContextData;
181
187
 
188
+ declare const DarkTheme: AppTheme;
189
+
190
+ declare const LightTheme: AppTheme;
191
+
182
192
  declare const extractStyleProps: <Props extends object>(props: Props) => StyleProps;
183
193
  declare const createStyleKey: <Props extends object>(props: Props) => string;
184
194
 
185
- export { type AppTheme, type BorderProps, type BorderSizeKey, type BorderSizes, type ColorProps, type ColorScheme, type ComponentSize, DarkTheme, type FlexProps, type FontFamilyKey, type FontFamilyMap, type FontSizes, type FontSizesKeys, type FontWeightKey, type FontWeights, type LetterSpacingKey, type LetterSpacings, LightTheme, type LineHeightKeys, type LineHeights, type NeutralColorKey, type NeutralColors, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type ShadowProps, type Space, type SpaceSizesKeys, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type ThemeContextData, ThemeProvider, type TypographyPresetKey, type TypographyProps, createStyleKey, extractStyleProps, useBorder, useColors, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };
195
+ export { type AppTheme, type BorderProps, type BorderSizeKey, type BorderSizes, type ColorProps, type ColorScheme, type ComponentSize, type ComponentsThemes, DarkTheme, type DimensionProps, type ExtendedThemeColors, type FlexProps, type FontSizes, type FontSizesKeys, type FontWeightItalic, type FontWeightKey, type FontWeightNormal, type LetterSpacingKey, type LetterSpacings, LightTheme, type LineHeightKeys, type LineHeights, type NeutralColorKey, type NeutralColors, type Radii, type RadiiBlob, type RadiiConditional, type RadiiDrawn, type RadiusBlobKey, type RadiusConditionalKey, type RadiusDrawnKey, type RadiusKey, type ShadowProps, type Space, type SpaceSizesKeys, type SpacingProps, type StylePropKey, type StyleProps, StylePropsSet, type ThemeColors, type ThemeContextData, ThemeProvider, type TypographyPresetKey, type TypographyProps, createStyleKey, extractStyleProps, useBorder, useColors, useRadii, useSpace, useStyleProps, useTheme, useThemeContext, useThemedStyles };
package/dist/index.esm.js CHANGED
@@ -62,7 +62,15 @@ var StylePropsSet = /* @__PURE__ */ new Set([
62
62
  "top",
63
63
  "right",
64
64
  "bottom",
65
- "left"
65
+ "left",
66
+ // Dimensions (ViewStyle)
67
+ "width",
68
+ "height",
69
+ "minWidth",
70
+ "maxWidth",
71
+ "minHeight",
72
+ "maxHeight",
73
+ "aspectRatio"
66
74
  ]);
67
75
 
68
76
  // src/hooks/use-border.hook.ts
@@ -136,29 +144,9 @@ var NeutralColorTokens = {
136
144
  "12": "#0d0f12",
137
145
  "13": "#000000"
138
146
  };
139
- var FontFamilyTokens = {
140
- thin: "Montserrat-Thin",
141
- thinItalic: "Montserrat-ThinItalic",
142
- extraLight: "Montserrat-ExtraLight",
143
- extraLightItalic: "Montserrat-ExtraLightItalic",
144
- light: "Montserrat-Light",
145
- lightItalic: "Montserrat-LightItalic",
146
- regular: "Montserrat-Regular",
147
- italic: "Montserrat-Italic",
148
- medium: "Montserrat-Medium",
149
- mediumItalic: "Montserrat-MediumItalic",
150
- semiBold: "Montserrat-SemiBold",
151
- semiBoldItalic: "Montserrat-SemiBoldItalic",
152
- bold: "Montserrat-Bold",
153
- boldItalic: "Montserrat-BoldItalic",
154
- extraBold: "Montserrat-ExtraBold",
155
- extraBoldItalic: "Montserrat-ExtraBoldItalic",
156
- black: "Montserrat-Black",
157
- blackItalic: "Montserrat-BlackItalic"
158
- };
159
147
 
160
- // src/theme/light.theme.ts
161
- var LightTheme = {
148
+ // src/theme/dark.theme.ts
149
+ var DarkTheme = {
162
150
  colors: {
163
151
  primary: "#f55d6b",
164
152
  secondary: "#f55d6b",
@@ -181,12 +169,11 @@ var LightTheme = {
181
169
  spacing: SpaceTokens,
182
170
  radii: RadiiTokens,
183
171
  borderSize: BorderSizeTokens,
184
- fontFamily: FontFamilyTokens,
185
172
  fontSize: FontSizeTokens
186
173
  };
187
174
 
188
- // src/theme/dark.theme.ts
189
- var DarkTheme = {
175
+ // src/theme/light.theme.ts
176
+ var LightTheme = {
190
177
  colors: {
191
178
  primary: "#f55d6b",
192
179
  secondary: "#f55d6b",
@@ -209,7 +196,6 @@ var DarkTheme = {
209
196
  spacing: SpaceTokens,
210
197
  radii: RadiiTokens,
211
198
  borderSize: BorderSizeTokens,
212
- fontFamily: FontFamilyTokens,
213
199
  fontSize: FontSizeTokens
214
200
  };
215
201
 
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/constants/style.constants.ts","../src/hooks/use-border.hook.ts","../src/providers/theme.provider.tsx","../src/theme/tokens.theme.ts","../src/theme/light.theme.ts","../src/theme/dark.theme.ts","../src/hooks/use-colors.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":["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","import { useMemo } from \"react\";\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 { 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\nimport { AppTheme, DarkTheme, LightTheme } from \"../theme\";\r\nimport { ColorScheme, ThemeContextData } from \"../types\";\r\n\r\nimport {\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\n\r\nconst ThemeContext = createContext<ThemeContextData | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n scheme: ColorScheme;\r\n theme: {\r\n light: AppTheme;\r\n dark: AppTheme;\r\n };\r\n}\r\n\r\nexport const ThemeProvider = memo(function ThemeProvider(\r\n props: PropsWithChildren<DeepPartial<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\r\n return {\r\n loaded,\r\n theme: merge(baseTheme, props.theme?.[scheme]),\r\n };\r\n }, [props.theme?.light, props.theme?.dark]);\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 {\r\n BorderSizes,\r\n FontFamilyMap,\r\n FontSizes,\r\n FontWeights,\r\n NeutralColors,\r\n Radii,\r\n Space,\r\n} 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\r\nexport const FontWeightTokens: FontWeights = {\r\n thin: \"100\",\r\n extraLight: \"200\",\r\n light: \"300\",\r\n regular: \"400\",\r\n medium: \"500\",\r\n semiBold: \"600\",\r\n bold: \"700\",\r\n extraBold: \"800\",\r\n black: \"900\",\r\n};\r\n\r\nexport const FontFamilyTokens: FontFamilyMap = {\r\n thin: \"Montserrat-Thin\",\r\n thinItalic: \"Montserrat-ThinItalic\",\r\n extraLight: \"Montserrat-ExtraLight\",\r\n extraLightItalic: \"Montserrat-ExtraLightItalic\",\r\n light: \"Montserrat-Light\",\r\n lightItalic: \"Montserrat-LightItalic\",\r\n regular: \"Montserrat-Regular\",\r\n italic: \"Montserrat-Italic\",\r\n medium: \"Montserrat-Medium\",\r\n mediumItalic: \"Montserrat-MediumItalic\",\r\n semiBold: \"Montserrat-SemiBold\",\r\n semiBoldItalic: \"Montserrat-SemiBoldItalic\",\r\n bold: \"Montserrat-Bold\",\r\n boldItalic: \"Montserrat-BoldItalic\",\r\n extraBold: \"Montserrat-ExtraBold\",\r\n extraBoldItalic: \"Montserrat-ExtraBoldItalic\",\r\n black: \"Montserrat-Black\",\r\n blackItalic: \"Montserrat-BlackItalic\",\r\n};\r\n","import { DeepPartial } from \"@impulse-ui-native/core\";\r\nimport {\r\n BorderSizes,\r\n FontFamilyMap,\r\n FontSizes,\r\n NeutralColors,\r\n Radii,\r\n Space,\r\n TypographyPresetKey,\r\n TypographyProps,\r\n} from \"../types\";\r\nimport {\r\n BorderSizeTokens,\r\n FontFamilyTokens,\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 borderSize: BorderSizeTokens,\r\n fontFamily: FontFamilyTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n\r\nexport interface ThemeColors {\r\n primary: string;\r\n secondary: string;\r\n neutral: NeutralColors;\r\n\r\n white: string;\r\n black: string;\r\n\r\n error: string;\r\n warning: string;\r\n success: string;\r\n info: string;\r\n\r\n text: {\r\n primary: string;\r\n secondary: string;\r\n };\r\n\r\n background: {\r\n primary: string;\r\n secondary: string;\r\n };\r\n}\r\n\r\nexport interface ComponentsThemes {\r\n typography: Record<TypographyPresetKey, TypographyProps>;\r\n}\r\n\r\nexport interface AppTheme {\r\n colors: ThemeColors;\r\n spacing: Space;\r\n radii: Radii;\r\n borderSize: BorderSizes;\r\n fontFamily: FontFamilyMap;\r\n fontSize: FontSizes;\r\n components?: DeepPartial<ComponentsThemes>;\r\n}\r\n","import { AppTheme } from './light.theme';\r\nimport {\r\n BorderSizeTokens,\r\n FontFamilyTokens,\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 borderSize: BorderSizeTokens,\r\n fontFamily: FontFamilyTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { ThemeColors } from \"../theme/light.theme\";\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 { useMemo } from \"react\";\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\";\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';\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\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { AppTheme } from \"../theme\";\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\nimport { AppTheme } from \"../theme\";\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":["useMemo","ThemeProvider","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo"]}
1
+ {"version":3,"sources":["../src/constants/style.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-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":["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 { useMemo } from \"react\";\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 { 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\nimport { DarkTheme, LightTheme } from \"../theme\";\r\nimport { AppTheme, ColorScheme, ThemeContextData } from \"../types\";\r\n\r\nimport {\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\n\r\nconst ThemeContext = createContext<ThemeContextData | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n scheme: ColorScheme;\r\n theme: {\r\n light: AppTheme;\r\n dark: AppTheme;\r\n };\r\n}\r\n\r\nexport const ThemeProvider = memo(function ThemeProvider(\r\n props: PropsWithChildren<DeepPartial<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\r\n return {\r\n loaded,\r\n theme: merge(baseTheme, props.theme?.[scheme]),\r\n };\r\n }, [props.theme?.light, props.theme?.dark]);\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 { AppTheme } from \"../types\";\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 borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { AppTheme } from \"../types\";\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 borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { useMemo } from \"react\";\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 { useMemo } from \"react\";\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\";\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';\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\";\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\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 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":["useMemo","ThemeProvider","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@impulse-ui-native/theme",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "source": "src/index.ts",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -22,7 +22,7 @@
22
22
  ],
23
23
  "dependencies": {
24
24
  "@expo-google-fonts/montserrat": "^0.4.1",
25
- "@impulse-ui-native/core": "1.0.4"
25
+ "@impulse-ui-native/core": "1.0.6"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": ">=18",
package/src/constants/style.constants.ts CHANGED
@@ -68,4 +68,13 @@ export const StylePropsSet = new Set<keyof StyleProps>([
68
68
  "right",
69
69
  "bottom",
70
70
  "left",
71
+
72
+ // Dimensions (ViewStyle)
73
+ "width",
74
+ "height",
75
+ "minWidth",
76
+ "maxWidth",
77
+ "minHeight",
78
+ "maxHeight",
79
+ "aspectRatio",
71
80
  ]);
package/src/hooks/use-colors.hook.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useMemo } from "react";
2
2
  import { useThemeContext } from "../providers";
3
- import { ThemeColors } from "../theme/light.theme";
3
+ import { ThemeColors } from "../types";
4
4
 
5
5
  export function useColors(): ThemeColors {
6
6
  const context = useThemeContext();
package/src/hooks/use-theme.hook.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useMemo } from "react";
2
2
  import { useThemeContext } from "../providers";
3
- import { AppTheme } from "../theme";
3
+ import { AppTheme } from "../types";
4
4
 
5
5
  export function useTheme(): AppTheme {
6
6
  const context = useThemeContext();
package/src/hooks/use-themed-styles.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useMemo } from "react";
2
2
  import { StyleSheet } from "react-native";
3
- import { AppTheme } from "../theme";
3
+ import { AppTheme } from "../types";
4
4
  import { useTheme } from "./use-theme.hook";
5
5
 
6
6
  type ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;
package/src/providers/theme.provider.tsx CHANGED
@@ -6,8 +6,8 @@ import {
6
6
  useContext,
7
7
  useMemo,
8
8
  } from "react";
9
- import { AppTheme, DarkTheme, LightTheme } from "../theme";
10
- import { ColorScheme, ThemeContextData } from "../types";
9
+ import { DarkTheme, LightTheme } from "../theme";
10
+ import { AppTheme, ColorScheme, ThemeContextData } from "../types";
11
11
 
12
12
  import {
13
13
  Montserrat_100Thin,
package/src/theme/dark.theme.ts CHANGED
@@ -1,36 +1,34 @@
1
- import { AppTheme } from './light.theme';
1
+ import { AppTheme } from "../types";
2
2
  import {
3
3
  BorderSizeTokens,
4
- FontFamilyTokens,
5
4
  FontSizeTokens,
6
5
  NeutralColorTokens,
7
6
  RadiiTokens,
8
7
  SpaceTokens,
9
- } from './tokens.theme';
8
+ } from "./tokens.theme";
10
9
 
11
10
  export const DarkTheme: AppTheme = {
12
11
  colors: {
13
- primary: '#f55d6b',
14
- secondary: '#f55d6b',
12
+ primary: "#f55d6b",
13
+ secondary: "#f55d6b",
15
14
  neutral: NeutralColorTokens,
16
- white: NeutralColorTokens['0'],
17
- black: NeutralColorTokens['13'],
18
- error: '#c92a2a',
19
- warning: '#e67700',
20
- success: '#7a9908',
21
- info: '#1864ab',
15
+ white: NeutralColorTokens["0"],
16
+ black: NeutralColorTokens["13"],
17
+ error: "#c92a2a",
18
+ warning: "#e67700",
19
+ success: "#7a9908",
20
+ info: "#1864ab",
22
21
  text: {
23
- primary: NeutralColorTokens['11'],
24
- secondary: NeutralColorTokens['10'],
22
+ primary: NeutralColorTokens["11"],
23
+ secondary: NeutralColorTokens["10"],
25
24
  },
26
25
  background: {
27
- primary: NeutralColorTokens['2'],
28
- secondary: NeutralColorTokens['0'],
26
+ primary: NeutralColorTokens["2"],
27
+ secondary: NeutralColorTokens["0"],
29
28
  },
30
29
  },
31
30
  spacing: SpaceTokens,
32
31
  radii: RadiiTokens,
33
32
  borderSize: BorderSizeTokens,
34
- fontFamily: FontFamilyTokens,
35
33
  fontSize: FontSizeTokens,
36
34
  };
package/src/theme/index.ts CHANGED
@@ -1,3 +1,2 @@
1
- export { LightTheme } from './light.theme';
2
- export { DarkTheme } from './dark.theme';
3
- export type { AppTheme } from './light.theme';
1
+ export { DarkTheme } from "./dark.theme";
2
+ export { LightTheme } from "./light.theme";
package/src/theme/light.theme.ts CHANGED
@@ -1,17 +1,6 @@
1
- import { DeepPartial } from "@impulse-ui-native/core";
2
- import {
3
- BorderSizes,
4
- FontFamilyMap,
5
- FontSizes,
6
- NeutralColors,
7
- Radii,
8
- Space,
9
- TypographyPresetKey,
10
- TypographyProps,
11
- } from "../types";
1
+ import { AppTheme } from "../types";
12
2
  import {
13
3
  BorderSizeTokens,
14
- FontFamilyTokens,
15
4
  FontSizeTokens,
16
5
  NeutralColorTokens,
17
6
  RadiiTokens,
@@ -41,44 +30,5 @@ export const LightTheme: AppTheme = {
41
30
  spacing: SpaceTokens,
42
31
  radii: RadiiTokens,
43
32
  borderSize: BorderSizeTokens,
44
- fontFamily: FontFamilyTokens,
45
33
  fontSize: FontSizeTokens,
46
34
  };
47
-
48
- export interface ThemeColors {
49
- primary: string;
50
- secondary: string;
51
- neutral: NeutralColors;
52
-
53
- white: string;
54
- black: string;
55
-
56
- error: string;
57
- warning: string;
58
- success: string;
59
- info: string;
60
-
61
- text: {
62
- primary: string;
63
- secondary: string;
64
- };
65
-
66
- background: {
67
- primary: string;
68
- secondary: string;
69
- };
70
- }
71
-
72
- export interface ComponentsThemes {
73
- typography: Record<TypographyPresetKey, TypographyProps>;
74
- }
75
-
76
- export interface AppTheme {
77
- colors: ThemeColors;
78
- spacing: Space;
79
- radii: Radii;
80
- borderSize: BorderSizes;
81
- fontFamily: FontFamilyMap;
82
- fontSize: FontSizes;
83
- components?: DeepPartial<ComponentsThemes>;
84
- }
package/src/theme/tokens.theme.ts CHANGED
@@ -1,12 +1,4 @@
1
- import {
2
- BorderSizes,
3
- FontFamilyMap,
4
- FontSizes,
5
- FontWeights,
6
- NeutralColors,
7
- Radii,
8
- Space,
9
- } from "../types";
1
+ import { BorderSizes, FontSizes, NeutralColors, Radii, Space } from "../types";
10
2
 
11
3
  export const SpaceTokens: Space = {
12
4
  none: 0,
@@ -70,36 +62,3 @@ export const NeutralColorTokens: NeutralColors = {
70
62
  "12": "#0d0f12",
71
63
  "13": "#000000",
72
64
  };
73
-
74
- export const FontWeightTokens: FontWeights = {
75
- thin: "100",
76
- extraLight: "200",
77
- light: "300",
78
- regular: "400",
79
- medium: "500",
80
- semiBold: "600",
81
- bold: "700",
82
- extraBold: "800",
83
- black: "900",
84
- };
85
-
86
- export const FontFamilyTokens: FontFamilyMap = {
87
- thin: "Montserrat-Thin",
88
- thinItalic: "Montserrat-ThinItalic",
89
- extraLight: "Montserrat-ExtraLight",
90
- extraLightItalic: "Montserrat-ExtraLightItalic",
91
- light: "Montserrat-Light",
92
- lightItalic: "Montserrat-LightItalic",
93
- regular: "Montserrat-Regular",
94
- italic: "Montserrat-Italic",
95
- medium: "Montserrat-Medium",
96
- mediumItalic: "Montserrat-MediumItalic",
97
- semiBold: "Montserrat-SemiBold",
98
- semiBoldItalic: "Montserrat-SemiBoldItalic",
99
- bold: "Montserrat-Bold",
100
- boldItalic: "Montserrat-BoldItalic",
101
- extraBold: "Montserrat-ExtraBold",
102
- extraBoldItalic: "Montserrat-ExtraBoldItalic",
103
- black: "Montserrat-Black",
104
- blackItalic: "Montserrat-BlackItalic",
105
- };
package/src/types/dimension.types.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { ViewStyle } from "react-native";
2
+
3
+ export type DimensionProps = {
4
+ width?: ViewStyle["width"];
5
+ height?: ViewStyle["height"];
6
+ minWidth?: ViewStyle["minWidth"];
7
+ maxWidth?: ViewStyle["maxWidth"];
8
+ minHeight?: ViewStyle["minHeight"];
9
+ maxHeight?: ViewStyle["maxHeight"];
10
+ aspectRatio?: ViewStyle["aspectRatio"];
11
+ };
package/src/types/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from "./border.types";
2
2
  export * from "./color.types";
3
3
  export * from "./components.types";
4
+ export * from "./dimension.types";
4
5
  export * from "./flex.types";
5
6
  export * from "./shadow.types";
6
7
  export * from "./spacing.types";
package/src/types/style.types.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { BorderProps } from "./border.types";
2
2
  import { ColorProps } from "./color.types";
3
+ import { DimensionProps } from "./dimension.types";
3
4
  import { FlexProps } from "./flex.types";
4
5
  import { ShadowProps } from "./shadow.types";
5
6
  import { SpacingProps } from "./spacing.types";
@@ -11,7 +12,8 @@ export type StyleProps = Partial<
11
12
  ShadowProps &
12
13
  BorderProps &
13
14
  TypographyProps &
14
- FlexProps
15
+ FlexProps &
16
+ DimensionProps
15
17
  >;
16
18
 
17
19
  export type StylePropKey = keyof StyleProps;
package/src/types/theme-provider.types.ts CHANGED
@@ -1,4 +1,12 @@
1
- import { AppTheme } from "../theme";
1
+ import { DeepPartial } from "@impulse-ui-native/core";
2
+ import {
3
+ BorderSizes,
4
+ FontSizes,
5
+ NeutralColors,
6
+ Radii,
7
+ Space,
8
+ } from "./tokens.types";
9
+ import { TypographyPresetKey, TypographyProps } from "./typography.types";
2
10
 
3
11
  export interface ThemeContextData {
4
12
  loaded: boolean;
@@ -6,3 +14,42 @@ export interface ThemeContextData {
6
14
  }
7
15
 
8
16
  export type ColorScheme = "light" | "dark";
17
+
18
+ export type ThemeColors = {
19
+ primary: string;
20
+ secondary: string;
21
+ neutral: NeutralColors;
22
+
23
+ white: string;
24
+ black: string;
25
+
26
+ error: string;
27
+ warning: string;
28
+ success: string;
29
+ info: string;
30
+
31
+ text: {
32
+ primary: string;
33
+ secondary: string;
34
+ };
35
+
36
+ background: {
37
+ primary: string;
38
+ secondary: string;
39
+ };
40
+ } & ExtendedThemeColors;
41
+
42
+ export interface ExtendedThemeColors {}
43
+
44
+ export interface ComponentsThemes {
45
+ typography: Record<TypographyPresetKey, TypographyProps>;
46
+ }
47
+
48
+ export interface AppTheme {
49
+ colors: ThemeColors;
50
+ spacing: Space;
51
+ radii: Radii;
52
+ borderSize: BorderSizes;
53
+ fontSize: FontSizes;
54
+ components?: DeepPartial<ComponentsThemes>;
55
+ }
package/src/types/tokens.types.ts CHANGED
@@ -31,21 +31,6 @@ export type FontSizes = Record<FontSizesKeys, number>;
31
31
  export type LineHeightKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
32
32
  export type LineHeights = Record<LineHeightKeys, string>;
33
33
 
34
- export type FontWeightKey =
35
- | "thin"
36
- | "extraLight"
37
- | "light"
38
- | "regular"
39
- | "medium"
40
- | "semiBold"
41
- | "bold"
42
- | "extraBold"
43
- | "black";
44
- export type FontWeights = Record<
45
- FontWeightKey,
46
- "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"
47
- >;
48
-
49
34
  export type LetterSpacingKey =
50
35
  | "tightest"
51
36
  | "tighter"
@@ -101,25 +86,3 @@ export type NeutralColorKey =
101
86
  | "13";
102
87
 
103
88
  export type NeutralColors = Record<NeutralColorKey, string>;
104
-
105
- export type FontFamilyKey =
106
- | "thin"
107
- | "thinItalic"
108
- | "extraLight"
109
- | "extraLightItalic"
110
- | "light"
111
- | "lightItalic"
112
- | "regular"
113
- | "italic"
114
- | "medium"
115
- | "mediumItalic"
116
- | "semiBold"
117
- | "semiBoldItalic"
118
- | "bold"
119
- | "boldItalic"
120
- | "extraBold"
121
- | "extraBoldItalic"
122
- | "black"
123
- | "blackItalic";
124
-
125
- export type FontFamilyMap = Record<FontFamilyKey, string>;
package/src/types/typography.types.ts CHANGED
@@ -1,42 +1,66 @@
1
- import { TextStyle } from 'react-native';
1
+ import { TextStyle } from "react-native";
2
2
 
3
3
  export type TypographyProps = {
4
- fontSize?: TextStyle['fontSize'];
5
- fontFamily?: TextStyle['fontFamily'];
6
- fontWeight?: TextStyle['fontWeight'];
7
- fontStyle?: TextStyle['fontStyle'];
8
- letterSpacing?: TextStyle['letterSpacing'];
9
- lineHeight?: TextStyle['lineHeight'];
10
- textAlign?: TextStyle['textAlign'];
11
- textDecorationLine?: TextStyle['textDecorationLine'];
12
- textDecorationStyle?: TextStyle['textDecorationStyle'];
13
- textDecorationColor?: TextStyle['textDecorationColor'];
14
- textTransform?: TextStyle['textTransform'];
15
- includeFontPadding?: TextStyle['includeFontPadding']; // Android only
16
- textAlignVertical?: TextStyle['textAlignVertical']; // Android only
17
- writingDirection?: TextStyle['writingDirection'];
4
+ fontSize?: TextStyle["fontSize"];
5
+ fontFamily?: TextStyle["fontFamily"];
6
+ fontWeight?: FontWeightKey;
7
+ fontStyle?: TextStyle["fontStyle"];
8
+ letterSpacing?: TextStyle["letterSpacing"];
9
+ lineHeight?: TextStyle["lineHeight"];
10
+ textAlign?: TextStyle["textAlign"];
11
+ textDecorationLine?: TextStyle["textDecorationLine"];
12
+ textDecorationStyle?: TextStyle["textDecorationStyle"];
13
+ textDecorationColor?: TextStyle["textDecorationColor"];
14
+ textTransform?: TextStyle["textTransform"];
15
+ includeFontPadding?: TextStyle["includeFontPadding"]; // Android only
16
+ textAlignVertical?: TextStyle["textAlignVertical"]; // Android only
17
+ writingDirection?: TextStyle["writingDirection"];
18
18
  };
19
19
 
20
20
  export type TypographyPresetKey =
21
- | 'Master'
22
- | 'DisplayLarge'
23
- | 'DisplayMedium'
24
- | 'DisplaySmall'
25
- | 'Title1'
26
- | 'Title2'
27
- | 'Title3'
28
- | 'Title4'
29
- | 'Title5'
30
- | 'Title6'
31
- | 'Subtitle1'
32
- | 'Subtitle2'
33
- | 'BodyLarge'
34
- | 'Body'
35
- | 'BodySmall'
36
- | 'Caption'
37
- | 'Label'
38
- | 'Overline'
39
- | 'Helper'
40
- | 'Code'
41
- | 'Quote'
42
- | 'Eyebrow';
21
+ | "Master"
22
+ | "DisplayLarge"
23
+ | "DisplayMedium"
24
+ | "DisplaySmall"
25
+ | "Title1"
26
+ | "Title2"
27
+ | "Title3"
28
+ | "Title4"
29
+ | "Title5"
30
+ | "Title6"
31
+ | "Subtitle1"
32
+ | "Subtitle2"
33
+ | "BodyLarge"
34
+ | "Body"
35
+ | "BodySmall"
36
+ | "Caption"
37
+ | "Label"
38
+ | "Overline"
39
+ | "Helper"
40
+ | "Code"
41
+ | "Quote"
42
+ | "Eyebrow";
43
+
44
+ export type FontWeightNormal =
45
+ | "Montserrat_100Thin"
46
+ | "Montserrat_200ExtraLight"
47
+ | "Montserrat_300Light"
48
+ | "Montserrat_400Regular"
49
+ | "Montserrat_500Medium"
50
+ | "Montserrat_600SemiBold"
51
+ | "Montserrat_700Bold"
52
+ | "Montserrat_800ExtraBold"
53
+ | "Montserrat_900Black";
54
+
55
+ export type FontWeightItalic =
56
+ | "Montserrat_100Thin_Italic"
57
+ | "Montserrat_200ExtraLight_Italic"
58
+ | "Montserrat_300Light_Italic"
59
+ | "Montserrat_400Regular_Italic"
60
+ | "Montserrat_500Medium_Italic"
61
+ | "Montserrat_600SemiBold_Italic"
62
+ | "Montserrat_700Bold_Italic"
63
+ | "Montserrat_800ExtraBold_Italic"
64
+ | "Montserrat_900Black_Italic";
65
+
66
+ export type FontWeightKey = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;