UNPKG

@metamask/design-system-twrnc-preset

Version:
1 lines 1.98 kB
{"version":3,"file":"hooks.cjs","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AAGnC,qDAA8C;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,QAAQ,GAAG,GAAU,EAAE;IAClC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,kBAAU,EAAC,2BAAY,CAAC,CAAC;IAC3C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAHW,QAAA,QAAQ,YAGnB;AAEK,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,2BAAY,CAAC,CAAC;IACjD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAHW,QAAA,YAAY,gBAGvB;AAEF;;;;;;;;;;;;;GAaG;AACI,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,kBAAU,EAAC,2BAAY,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAHW,QAAA,WAAW,eAGtB","sourcesContent":["import { useContext } from 'react';\n\nimport type { Theme } from './Theme.types';\nimport { ThemeContext } from './ThemeContext';\n\n/**\n * Hook that provides access to the current theme.\n * Use this when you need to conditionally render content based on theme.\n *\n * @returns The current theme ('light' or 'dark')\n *\n * @example\n * const theme = useTheme();\n * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;\n * return (\n * <ThemeProvider theme={inverseTheme}>\n * <View style={tw`bg-default`}>\n * <Text style={tw`text-default`}>Toast message</Text>\n * </View>\n * </ThemeProvider>\n * );\n */\nexport const useTheme = (): Theme => {\n const { theme } = useContext(ThemeContext);\n return theme;\n};\n\nexport const usePureBlack = (): boolean => {\n const { isPureBlack } = useContext(ThemeContext);\n return isPureBlack;\n};\n\n/**\n * Hook that provides access to the tailwind utility function.\n * Use this when you only need styling capabilities.\n *\n * @returns Tailwind utility function for styling\n *\n * @example\n * const tw = useTailwind();\n * return (\n * <View style={tw`p-4 bg-primary`}>\n * <Text>Styled content</Text>\n * </View>\n * );\n */\nexport const useTailwind = () => {\n const { tw } = useContext(ThemeContext);\n return tw;\n};\n"]}