diff --git a/.eslintignore b/.eslintignore index b6827d017..5455217c1 100644 --- a/.eslintignore +++ b/.eslintignore @@ -8,6 +8,7 @@ packages/**/cli.js packages/ui/components packages/**/example + # packages/**/example # !.build/test.js @@ -15,4 +16,7 @@ ui/packages/ui/.ondevice babel.config.js example/storybook -example/expo-app \ No newline at end of file +example/expo-app +example/ui-examples +example/ui-examples-babel +example/next \ No newline at end of file diff --git a/example/next/.eslintrc.js b/example/next/.eslintrc.js index 5565fe909..e35135249 100644 --- a/example/next/.eslintrc.js +++ b/example/next/.eslintrc.js @@ -1,4 +1,3 @@ module.exports = { - extends: 'next', root: true, }; diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js index 4282a98eb..970bbc380 100644 --- a/example/storybook/.storybook/preview.js +++ b/example/storybook/.storybook/preview.js @@ -40,6 +40,7 @@ export const parameters = { 'Utility Functions', 'AsForwarder', ], + 'plugins', [ 'Intro to Plugins', @@ -47,6 +48,8 @@ export const parameters = { 'Animation Plugin', 'CSS Variables Plugin', ], + 'hooks', + ['useBreakPointValue', 'useColorMode', 'useToken'], 'configuration', [ 'Theme Tokens', diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx index 67d3540a9..55d3d5ec2 100644 --- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx +++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx @@ -13,7 +13,15 @@ import { StyleSheet, View, } from 'react-native'; -import { AsForwarder, createStyled, styled } from '@gluestack-style/react'; +import { + AsForwarder, + createStyled, + styled1, + Theme, + useBreakpointValue, + useStyled, + useToken, +} from '@gluestack-style/react'; import { Wrapper } from '../../components/Wrapper'; import { AddIcon, Box, Icon } from '@gluestack/design-system'; // import { AddIcon } from '@gluestack/design-system'; @@ -178,24 +186,8 @@ const Text1 = styled( export function ContextBasedStyles() { return ( - - Hello world - - {/* */} - {/* */} + + {/* */} {/* diff --git a/example/storybook/src/hooks/useBreakPointValue/breakPointValue.tsx b/example/storybook/src/hooks/useBreakPointValue/breakPointValue.tsx new file mode 100644 index 000000000..5a6a844cd --- /dev/null +++ b/example/storybook/src/hooks/useBreakPointValue/breakPointValue.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { + useMediaQuery, + styled, + useBreakpointValue, +} from '@gluestack-style/react'; +import Wrapper from '../../components/Wrapper'; +import { View, Text } from 'react-native'; + +const StyledBox = styled(View, { + w: 100, + h: 100, + justifyContent: 'center', + alignItems: 'center', + bg: '$cyan500', + rounded: '$md', +}) as any; + +const StyledText = styled(Text, { + color: '$white', + fontSize: '$md', +}); + +export const breakPointValueStory = () => { + return ( + + + + ); +}; + +const BreakPointValue = () => { + const flexDir = useBreakpointValue({ + base: 'column', + sm: 'row', + }); + + return ( + + + Universal + + + Performant + + + Accessible + + + ); +}; +export { useMediaQuery }; +export default breakPointValueStory; diff --git a/example/storybook/src/hooks/useBreakPointValue/index.stories.mdx b/example/storybook/src/hooks/useBreakPointValue/index.stories.mdx new file mode 100644 index 000000000..87452d3b5 --- /dev/null +++ b/example/storybook/src/hooks/useBreakPointValue/index.stories.mdx @@ -0,0 +1,49 @@ +--- +title: useTheme | gluestack-style +description: useTheme +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useBreakpointValue + +**useBreakpointValue** is a custom hook to returns the value for the current breakpoint based on the provided responsive values object. It is also responsive to window resizing and returning the appropriate value according to the new window size. + +### Import + +To use the `useBreakpointValue` in your project, import `useBreakpointValue` from `@gluestack-style/react`. as Demonstrated below. + +```jsx +import { useBreakpointValue } from '@gluestack-style/react'; +``` + +```jsx +const BreakPointValue = () => { + const flexDir = useBreakpointValue({ + base: 'column', + sm: 'row', + }); + + return ( + + + Universal + + + Performant + + + Accessible + + + ); +}; +``` diff --git a/example/storybook/src/hooks/useBreakPointValue/useBreakPointValue.stories.tsx b/example/storybook/src/hooks/useBreakPointValue/useBreakPointValue.stories.tsx new file mode 100644 index 000000000..37a98c079 --- /dev/null +++ b/example/storybook/src/hooks/useBreakPointValue/useBreakPointValue.stories.tsx @@ -0,0 +1,11 @@ +import type { ComponentMeta } from '@storybook/react-native'; +import { breakPointValueStory } from './breakPointValue'; + +const MediaQueryMeta: ComponentMeta = { + title: 'hooks/stories/useMediaQuery', + component: breakPointValueStory, +}; + +export { breakPointValueStory } from './breakPointValue'; + +export default MediaQueryMeta; diff --git a/example/storybook/src/hooks/useColorMode/index.stories.mdx b/example/storybook/src/hooks/useColorMode/index.stories.mdx new file mode 100644 index 000000000..d240ed6de --- /dev/null +++ b/example/storybook/src/hooks/useColorMode/index.stories.mdx @@ -0,0 +1,41 @@ +--- +title: useColorMode | gluestack-style +description: useColorMode +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useColorMode + +**useColorMode** is a custom hook which return current color mode. + +### Import + +To use the useColorMode in your project, import `useColorMode` from `@gluestack-style/react`. as Demonstrated below. + +```jsx +import { useColorMode } from '@gluestack-style/react'; +``` + +Let's use our `useColorMode` value to give background color to `View` from `react-native`. + +```jsx +import { View } from 'react-native'; +import { useColorMode } from '@gluestack-style/react'; + +function Example() { + const colorMode = useColorMode(); + return ( + + ); +} +``` diff --git a/example/storybook/src/hooks/useMediaQuery/index.stories.mdx b/example/storybook/src/hooks/useMediaQuery/index.stories.mdx new file mode 100644 index 000000000..07685bef9 --- /dev/null +++ b/example/storybook/src/hooks/useMediaQuery/index.stories.mdx @@ -0,0 +1,76 @@ +--- +title: useMediaQuery | gluestack-style +description: Learn to use the useMediaQuery hook in React Native for detecting media query matches and creating responsive UI elements, despite limitations like performance impacts and lack of typings. +canonical: https://style.gluestack.io/ +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Text, View } from 'react-native'; +import { Button, AppProvider, CodePreview } from '@gluestack/design-system'; +import { config } from '../../components/nb.config'; +import { StyledProvider, styled } from '@gluestack-style/react'; +import { useMediaQuery } from './maxWidth'; + + + +# useMediaQuery + +The useMediaQuery custom hook is designed to assist in detecting matches between one or more media queries. However, due to the lack of native support for media queries in React Native, the capabilities of useMediaQuery are somewhat constrained. + +## Import: + +```bash +import { useMediaQuery } from '@gluestack-style/react'; +``` + +### Example: + + + + + {isSmallScreen ? 'Mobile' : 'Desktop'} + + + ); + } + `, + }} +/> + + diff --git a/example/storybook/src/hooks/useMediaQuery/maxWidth.tsx b/example/storybook/src/hooks/useMediaQuery/maxWidth.tsx new file mode 100644 index 000000000..700896c01 --- /dev/null +++ b/example/storybook/src/hooks/useMediaQuery/maxWidth.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { useMediaQuery, styled } from '@gluestack-style/react'; +import Wrapper from '../../components/Wrapper'; +import { View, Text } from 'react-native'; + +const StyledBox = styled(View, { + w: 300, + h: 300, + justifyContent: 'center', + alignItems: 'center', + variants: { + size: { + sm: { + bg: '$green500', + }, + lg: { + bg: '$blue500', + }, + }, + }, +}) as any; + +const StyledText = styled(Text, { + color: '$white', + fontSize: '$xl', +}); + +export const maxWidth = () => { + const [isSmallScreen] = useMediaQuery({ + maxWidth: 700, + }); + + return ( + + + {isSmallScreen ? 'Mobile' : 'Desktop'} + + + ); +}; +export { useMediaQuery }; +export default maxWidth; diff --git a/example/storybook/src/hooks/useMediaQuery/useMediaQuery.stories.tsx b/example/storybook/src/hooks/useMediaQuery/useMediaQuery.stories.tsx new file mode 100644 index 000000000..88c81503f --- /dev/null +++ b/example/storybook/src/hooks/useMediaQuery/useMediaQuery.stories.tsx @@ -0,0 +1,11 @@ +import type { ComponentMeta } from '@storybook/react-native'; +import maxWidth from './maxWidth'; + +const MediaQueryMeta: ComponentMeta = { + title: 'hooks/stories/useMediaQuery', + component: maxWidth, +}; + +export { maxWidth } from './maxWidth'; + +export default MediaQueryMeta; diff --git a/example/storybook/src/hooks/useToken/index.stories.mdx b/example/storybook/src/hooks/useToken/index.stories.mdx new file mode 100644 index 000000000..efea427a8 --- /dev/null +++ b/example/storybook/src/hooks/useToken/index.stories.mdx @@ -0,0 +1,41 @@ +--- +title: useToken | gluestack-style +description: useToken +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useToken + +**useToken** is a custom hook to resolves design tokens from the theme. + +### Import + +To use the useToken in your project, import `useToken` from `@gluestack-style/react`. as Demonstrated below. + +```jsx +import { useToken } from '@gluestack-style/react'; +``` + +Let's use our `useToken` value to give background color to `View` from `react-native`. + +```jsx +import { View } from 'react-native'; +import { useToken } from '@gluestack-style/react'; + +function Example() { + const resolvedGreen = useToken('colors', 'green500'); + return ( + + ); +} +``` diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx index 9fa582648..12ac30f41 100644 --- a/example/ui-examples-babel/App.tsx +++ b/example/ui-examples-babel/App.tsx @@ -12,6 +12,8 @@ import { Text as RNText, StyleSheet, View, + Pressable, + Text, } from 'react-native'; import { AsForwarder, @@ -20,183 +22,60 @@ import { StyledProvider, } from '@gluestack-style/react'; import { config } from './gluestack-ui.config'; +import { createMotionAnimatedComponent, Motion } from '@legendapp/motion'; +import { AnimationResolver } from '@gluestack-style/animation-plugin'; -const styleshet = StyleSheet.create({ - style: { - padding: 12, - backgroundColor: 'red', - margin: 4, - }, +const Box = styled(View, { + bg: '$yellow500', + p: '$2', + m: '$1', }); -const Pressable = styled( - RNPressable, - { - bg: '$blue500', - p: '$2', - m: '$1', +const Gluestack = () => { + const [time, setTime] = useState(Date.now()); + const [end, setEnd] = useState(0); - // 'bg': '$red600', - // 'w': 100, - // 'h': 100, - // '_light': { - // bg: '$red600', - // }, - // '@base': { - // bg: '$blue500', - // }, - // ':hover': { - // bg: '$red500', - // }, - }, - { - componentName: 'Pressable1', - // descendantStyle: ['_text'], - } -); - -const Text = styled( - RNText, - {}, - { - componentName: 'Text', - } -); -export function ContextBasedStyles() { - return ( - - - - ); -} - -export function ContextBasedStylesContent() { - const [state, setState] = useState(false); - - // const color = tabName ? '$red500' : '$green500'; - // return ( - // <> - // {/* - // - // - // */} - // {/* - // { - // handleTabChange(!tabName); - // }} - // bg="$amber400" - // h="$50" - // w="$50" - // > - // - // hello world - // - // */} - // - // ); + React.useEffect(() => { + setEnd(Date.now()); + }, []); - // return ( - // <> - // - // - // ); return ( <> - { - setState(!state); - }} - style={{ - height: 50, - width: 200, - backgroundColor: 'red', - position: 'absolute', - top: 0, - left: 0, - top: 132, - }} - > - {state ? 'Unmount' : 'Mount'} - - {/* - Hello - */} - {/* {state && - } */} - {/* */} - {state && } - {/* */} + {end - time} ms + {new Array(1000).fill(0).map((_, k) => ( + + ))} ); -} +}; -const RenderItem = (item: any) => { - const [active, setActive] = React.useState(false); +export function ContextBasedStyles() { + const [mounted, setMounted] = useState(false); return ( - setActive(true)} - onPressOut={() => setActive(false)} - states={{ - active, - }} - sx={{ - 'bg': '$amber400', - ':active': { - bg: '$pink500', - }, + - {/* {item} */} - - ); -}; - -const renderItem2 = (item: any) => ( - - {/* {item}r */} - -); - -const MyList = React.memo(() => { - const time = React.useRef(Date.now()); - const [endTime, setEndTime] = React.useState(0); - useEffect(() => { - const end = Date.now() - time.current; - console.log(end, '>>>'); - setEndTime(end); - }, []); - const data = useMemo( - () => - Array(1000) - .fill(0) - .map((_, index) => `Item ${index}`), - [] - ); - - return ( - <> - setMounted(!mounted)} > - {endTime} - - {data.map((_, k) => ( - - ))} - + Click me + + + {mounted && } + + ); -}); +} export default ContextBasedStyles; diff --git a/example/ui-examples-babel/babel.config.js b/example/ui-examples-babel/babel.config.js index 929047992..ee4c4ec1f 100644 --- a/example/ui-examples-babel/babel.config.js +++ b/example/ui-examples-babel/babel.config.js @@ -1,4 +1,4 @@ -const myBabel = require('../../packages/babel-plugin-styled-resolver/src/index.js'); +const myBabel = require('@gluestack-style/babel-plugin-styled-resolver'); const path = require('path'); // process.env.GLUESTACK_STYLE_TARGET = 'native'; @@ -13,10 +13,11 @@ module.exports = function (api) { configPath: path.join(__dirname, './gluestack-ui.config.ts'), configThemePath: ['theme'], styled: [ - // '@gluestack-style/react', - path.join(__dirname, '../../packages/react/src'), + '@gluestack-style/react', + // path.join(__dirname, '../../packages/react/src'), + // path.join(__dirname, './node_modules/@gluestack-style/react/src'), ], - // components: ['@gluesatck-ui/themed'], + components: ['@gluesatck-ui/themed'], }, ], [ @@ -24,10 +25,14 @@ module.exports = function (api) { { alias: { // For development, we want to alias the library to the source - ['@gluestack-style/react']: path.join( - __dirname, - '../../packages/react/src' - ), + // ['@gluestack-style/react']: path.join( + // __dirname, + // './node_modules/@gluestack-style/react/src' + // ), + // ['@gluestack-style/react']: path.join( + // __dirname, + // '../../packages/react/src' + // ), // ['@gluestack-style/animation-plugin']: path.join( // __dirname, // '../../packages/animation-plugin/src' diff --git a/example/ui-examples-babel/package.json b/example/ui-examples-babel/package.json index cc725b2ac..ea53b5abf 100644 --- a/example/ui-examples-babel/package.json +++ b/example/ui-examples-babel/package.json @@ -14,7 +14,6 @@ "@expo/html-elements": "latest", "@expo/webpack-config": "18.1.0", "@gluestack-style/animation-plugin": "latest", - "@gluestack-style/react": "^0.2.32-alpha.0", "@gluestack-ui/actionsheet": "latest", "@gluestack-ui/alert": "latest", "@gluestack-ui/alert-dialog": "latest", @@ -66,7 +65,9 @@ "react": "18.1.0", "react-dom": "18.2.0", "react-native": "0.70.8", - "react-native-svg": "13.4.0" + "react-native-svg": "13.4.0", + "@gluestack-style/babel-plugin-styled-resolver": "^0.2.6-alpha.0", + "@gluestack-style/react": "^0.2.46-alpha.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/example/ui-examples-babel/yarn.lock b/example/ui-examples-babel/yarn.lock index bb7ceea60..e6da12a10 100644 --- a/example/ui-examples-babel/yarn.lock +++ b/example/ui-examples-babel/yarn.lock @@ -1982,10 +1982,10 @@ dependencies: "@legendapp/motion" "^2.2.0" -"@gluestack-style/babel-plugin-styled-resolver@latest": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@gluestack-style/babel-plugin-styled-resolver/-/babel-plugin-styled-resolver-0.2.0.tgz#b040c6943d52cf086bc64ec89aed8e984c0ebd8b" - integrity sha512-5AXRUF0DNsLV2SVitWBM0k2WHM5bnRoy4blpyKO69gPTVXXTThwT8+S4XMtSQRock+WR+vtgAnwO3h0DaiRukA== +"@gluestack-style/babel-plugin-styled-resolver@^0.2.6-alpha.0": + version "0.2.6-alpha.0" + resolved "https://registry.yarnpkg.com/@gluestack-style/babel-plugin-styled-resolver/-/babel-plugin-styled-resolver-0.2.6-alpha.0.tgz#d4ad918faaf73a163a25e7aaf755b4a3f39694ce" + integrity sha512-9IebHI3wiabta0RyGCav5N6tgB4s8k4rjKW/aK1VqoEL2D+QaEGGSEOyX5+MdlZRDWgoVCMbFVQkqMuF33d+GQ== dependencies: "@babel/core" "^7.20.5" "@babel/generator" "^7.20.5" @@ -1995,10 +1995,10 @@ "@babel/traverse" "^7.20.5" lodash.merge "^4.6.2" -"@gluestack-style/react@^0.2.32-alpha.0": - version "0.2.32-alpha.0" - resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.32-alpha.0.tgz#44fc228f49e64a9c5e2ddd1207c2abf9d092aae6" - integrity sha512-MvKh5P9M0r26h7ZnBht+hG7j1wsGBmgXUlK2NW6x3K4bE78Ji0BafZvu5ba4vn/+9BBAYQatKOD0Gvt6q2hDfQ== +"@gluestack-style/react@^0.2.46-alpha.0": + version "0.2.46" + resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.46.tgz#c408f4c05a7374690c8ebd952aa95b0a1d390c4e" + integrity sha512-ujpOIrt/b08svtUSLn4wSCn548H7lIe3oHlBCTHwDvmjheuVsXyIrECtNBA+mrL5mtkCaBmkB9iUJTWD601V+A== dependencies: inline-style-prefixer "^6.0.1" normalize-css-color "^1.0.2" diff --git a/example/ui-examples/gluestack-ui-components/core/Button/styled-components/Root.tsx b/example/ui-examples/gluestack-ui-components/core/Button/styled-components/Root.tsx index 4d6ccb7b8..aa06a0051 100644 --- a/example/ui-examples/gluestack-ui-components/core/Button/styled-components/Root.tsx +++ b/example/ui-examples/gluestack-ui-components/core/Button/styled-components/Root.tsx @@ -1,420 +1,420 @@ // @ts-nocheck -import { styled } from "../../styled"; -import { Pressable } from "react-native"; +import { styled } from '../../styled'; +import { Pressable } from 'react-native'; export default styled( Pressable, { - borderRadius: "$sm", - backgroundColor: "$primary500", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", + 'borderRadius': '$sm', + 'backgroundColor': '$primary500', + 'flexDirection': 'row', + 'justifyContent': 'center', + 'alignItems': 'center', - _text: { - color: "$textLight0", - fontWeight: "$semibold", + '_text': { + color: '$textLight0', + fontWeight: '$semibold', _dark: { - color: "$textDark0", + color: '$textDark0', }, }, - _icon: { - color: "$textLight0", + '_icon': { + color: '$textLight0', _dark: { - color: "$textDark0", + color: '$textDark0', }, }, - _spinner: { + '_spinner': { props: { - color: "$backgroundLight0", + color: '$backgroundLight0', }, _dark: { props: { - color: "$backgroundDark0", + color: '$backgroundDark0', }, }, }, - variants: { + 'variants': { action: { primary: { - bg: "$primary500", - borderColor: "$primary300", + 'bg': '$primary500', + 'borderColor': '$primary300', - ":hover": { - bg: "$primary600", - borderColor: "$primary400", + ':hover': { + bg: '$primary600', + borderColor: '$primary400', }, - ":active": { - bg: "$primary700", - borderColor: "$primary700", + ':active': { + bg: '$primary700', + borderColor: '$primary700', }, - _text: { - color: "$primary600", - ":hover": { - color: "$primary600", + '_text': { + 'color': '$primary600', + ':hover': { + color: '$primary600', }, - ":active": { - color: "$primary700", + ':active': { + color: '$primary700', }, }, - _icon: { - color: "$primary600", - ":hover": { - color: "$primary600", + '_icon': { + 'color': '$primary600', + ':hover': { + color: '$primary600', }, - ":active": { - color: "$primary700", + ':active': { + color: '$primary700', }, }, - _spinner: { - props: { - color: "$primary600", + '_spinner': { + 'props': { + color: '$primary600', }, - ":hover": { + ':hover': { props: { - color: "$primary600", + color: '$primary600', }, }, - ":active": { + ':active': { props: { - color: "$primary700", + color: '$primary700', }, }, }, - _dark: { - bg: "$primary400", - borderColor: "$primary700", - ":hover": { - bg: "$primary500", - borderColor: "$primary400", - }, - ":active": { - bg: "$primary600", - borderColor: "$primary300", - }, - _text: { - color: "$primary300", - ":hover": { - color: "$primary300", + '_dark': { + 'bg': '$primary400', + 'borderColor': '$primary700', + ':hover': { + bg: '$primary500', + borderColor: '$primary400', + }, + ':active': { + bg: '$primary600', + borderColor: '$primary300', + }, + '_text': { + 'color': '$primary300', + ':hover': { + color: '$primary300', }, - ":active": { - color: "$primary200", + ':active': { + color: '$primary200', }, }, - _icon: { - color: "$primary300", - ":hover": { - color: "$primary300", + '_icon': { + 'color': '$primary300', + ':hover': { + color: '$primary300', }, - ":active": { - color: "$primary200", + ':active': { + color: '$primary200', }, }, - _spinner: { - props: { color: "$primary300" }, - ":hover": { - props: { color: "$primary300" }, + '_spinner': { + 'props': { color: '$primary300' }, + ':hover': { + props: { color: '$primary300' }, }, - ":active": { - props: { color: "$primary200" }, + ':active': { + props: { color: '$primary200' }, }, }, - ":focusVisible": { + ':focusVisible': { _web: { - boxShadow: "offset 0 0 0 2px $info400", + boxShadow: 'offset 0 0 0 2px $info400', }, }, }, }, secondary: { - bg: "$secondary500", - borderColor: "$secondary300", + 'bg': '$secondary500', + 'borderColor': '$secondary300', - ":hover": { - bg: "$secondary600", - borderColor: "$secondary400", + ':hover': { + bg: '$secondary600', + borderColor: '$secondary400', }, - ":active": { - bg: "$secondary700", - borderColor: "$secondary700", + ':active': { + bg: '$secondary700', + borderColor: '$secondary700', }, - _text: { - color: "$secondary600", - ":hover": { - color: "$secondary600", + '_text': { + 'color': '$secondary600', + ':hover': { + color: '$secondary600', }, - ":active": { - color: "$secondary700", + ':active': { + color: '$secondary700', }, }, - _icon: { - color: "$secondary600", - ":hover": { - color: "$secondary600", + '_icon': { + 'color': '$secondary600', + ':hover': { + color: '$secondary600', }, - ":active": { - color: "$secondary700", + ':active': { + color: '$secondary700', }, }, - _spinner: { - props: { - color: "$secondary600", + '_spinner': { + 'props': { + color: '$secondary600', }, - ":hover": { - props: { color: "$secondary600" }, + ':hover': { + props: { color: '$secondary600' }, }, - ":active": { - props: { color: "$secondary700" }, + ':active': { + props: { color: '$secondary700' }, }, }, - _dark: { - bg: "$secondary400", - borderColor: "$secondary700", - ":hover": { - bg: "$secondary500", - borderColor: "$secondary400", - }, - ":active": { - bg: "$secondary600", - borderColor: "$secondary300", - }, - _text: { - color: "$secondary300", - ":hover": { - color: "$secondary300", + '_dark': { + 'bg': '$secondary400', + 'borderColor': '$secondary700', + ':hover': { + bg: '$secondary500', + borderColor: '$secondary400', + }, + ':active': { + bg: '$secondary600', + borderColor: '$secondary300', + }, + '_text': { + 'color': '$secondary300', + ':hover': { + color: '$secondary300', }, - ":active": { - color: "$secondary200", + ':active': { + color: '$secondary200', }, }, - _icon: { - color: "$secondary300", - ":hover": { - color: "$secondary300", + '_icon': { + 'color': '$secondary300', + ':hover': { + color: '$secondary300', }, - ":active": { - color: "$secondary200", + ':active': { + color: '$secondary200', }, }, - _spinner: { - props: { - color: "$secondary300", + '_spinner': { + 'props': { + color: '$secondary300', }, - ":hover": { - props: { color: "$secondary300" }, + ':hover': { + props: { color: '$secondary300' }, }, - ":active": { - props: { color: "$secondary200" }, + ':active': { + props: { color: '$secondary200' }, }, }, }, }, positive: { - bg: "$success500", - borderColor: "$success300", - ":hover": { - bg: "$success600", - borderColor: "$success400", + 'bg': '$success500', + 'borderColor': '$success300', + ':hover': { + bg: '$success600', + borderColor: '$success400', }, - ":active": { - bg: "$success700", - borderColor: "$success700", + ':active': { + bg: '$success700', + borderColor: '$success700', }, - _text: { - color: "$success600", - ":hover": { - color: "$success600", + '_text': { + 'color': '$success600', + ':hover': { + color: '$success600', }, - ":active": { - color: "$success700", + ':active': { + color: '$success700', }, }, - _icon: { - color: "$success600", - ":hover": { - color: "$success600", + '_icon': { + 'color': '$success600', + ':hover': { + color: '$success600', }, - ":active": { - color: "$success700", + ':active': { + color: '$success700', }, }, - _spinner: { - props: { - color: "$success600", + '_spinner': { + 'props': { + color: '$success600', }, - ":hover": { - props: { color: "$success600" }, + ':hover': { + props: { color: '$success600' }, }, - ":active": { - props: { color: "$success700" }, + ':active': { + props: { color: '$success700' }, }, }, - _dark: { - bg: "$success400", - borderColor: "$success700", - ":hover": { - bg: "$success500", - borderColor: "$success400", + '_dark': { + 'bg': '$success400', + 'borderColor': '$success700', + ':hover': { + bg: '$success500', + borderColor: '$success400', }, - ":active": { - bg: "$success600", - borderColor: "$success300", + ':active': { + bg: '$success600', + borderColor: '$success300', }, - _text: { - color: "$success300", - ":hover": { - color: "$success300", + '_text': { + 'color': '$success300', + ':hover': { + color: '$success300', }, - ":active": { - color: "$success200", + ':active': { + color: '$success200', }, }, - _icon: { - color: "$success300", - ":hover": { - color: "$success300", + '_icon': { + 'color': '$success300', + ':hover': { + color: '$success300', }, - ":active": { - color: "$success200", + ':active': { + color: '$success200', }, }, - _spinner: { - props: { - color: "$success300", + '_spinner': { + 'props': { + color: '$success300', }, - ":hover": { - props: { color: "$success300" }, + ':hover': { + props: { color: '$success300' }, }, - ":active": { - props: { color: "$success200" }, + ':active': { + props: { color: '$success200' }, }, }, - ":focusVisible": { + ':focusVisible': { _web: { - boxShadow: "offset 0 0 0 2px $info400", + boxShadow: 'offset 0 0 0 2px $info400', }, }, }, }, negative: { - bg: "$error500", - borderColor: "$error300", - ":hover": { - bg: "$error600", - borderColor: "$error400", + 'bg': '$error500', + 'borderColor': '$error300', + ':hover': { + bg: '$error600', + borderColor: '$error400', }, - ":active": { - bg: "$error700", - borderColor: "$error700", + ':active': { + bg: '$error700', + borderColor: '$error700', }, - _text: { - color: "$error600", - ":hover": { - color: "$error600", + '_text': { + 'color': '$error600', + ':hover': { + color: '$error600', }, - ":active": { - color: "$error700", + ':active': { + color: '$error700', }, }, - _icon: { - color: "$error600", - ":hover": { - color: "$error600", + '_icon': { + 'color': '$error600', + ':hover': { + color: '$error600', }, - ":active": { - color: "$error700", + ':active': { + color: '$error700', }, }, - _spinner: { - props: { - color: "$error600", + '_spinner': { + 'props': { + color: '$error600', }, - ":hover": { - props: { color: "$error600" }, + ':hover': { + props: { color: '$error600' }, }, - ":active": { - props: { color: "$error700" }, + ':active': { + props: { color: '$error700' }, }, }, - _dark: { - bg: "$error400", - borderColor: "$error700", - ":hover": { - bg: "$error500", - borderColor: "$error400", + '_dark': { + 'bg': '$error400', + 'borderColor': '$error700', + ':hover': { + bg: '$error500', + borderColor: '$error400', }, - ":active": { - bg: "$error600", - borderColor: "$error300", + ':active': { + bg: '$error600', + borderColor: '$error300', }, - _text: { - color: "$error300", - ":hover": { - color: "$error300", + '_text': { + 'color': '$error300', + ':hover': { + color: '$error300', }, - ":active": { - color: "$error200", + ':active': { + color: '$error200', }, }, - _icon: { - color: "$error300", - ":hover": { - color: "$error300", + '_icon': { + 'color': '$error300', + ':hover': { + color: '$error300', }, - ":active": { - color: "$error200", + ':active': { + color: '$error200', }, }, - _spinner: { - props: { - color: "$error300", + '_spinner': { + 'props': { + color: '$error300', }, - ":hover": { - props: { color: "$error300" }, + ':hover': { + props: { color: '$error300' }, }, - ":active": { - props: { color: "$error200" }, + ':active': { + props: { color: '$error200' }, }, }, - ":focusVisible": { + ':focusVisible': { _web: { - boxShadow: "offset 0 0 0 2px $info400", + boxShadow: 'offset 0 0 0 2px $info400', }, }, }, }, default: { - bg: "$transparent", - ":hover": { - bg: "$backgroundLight50", + 'bg': '$transparent', + ':hover': { + bg: '$backgroundLight50', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "$backgroundDark900", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: '$backgroundDark900', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, @@ -422,90 +422,90 @@ export default styled( variant: { link: { - ":hover": { + ':hover': { _text: { - textDecorationLine: "underline", + textDecorationLine: 'underline', }, }, - ":active": { + ':active': { _text: { - textDecorationLine: "underline", + textDecorationLine: 'underline', }, }, }, outline: { - bg: "transparent", - borderWidth: "$1", - ":hover": { - bg: "$backgroundLight50", + 'bg': 'transparent', + 'borderWidth': '$1', + ':hover': { + bg: '$backgroundLight50', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "$backgroundDark900", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: '$backgroundDark900', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, solid: { _text: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _spinner: { - props: { color: "$textLight0" }, - ":hover": { - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, + ':hover': { + props: { color: '$textLight0' }, }, - ":active": { - props: { color: "$textLight0" }, + ':active': { + props: { color: '$textLight0' }, }, }, _icon: { - props: { color: "$textLight0" }, - ":hover": { - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, + ':hover': { + props: { color: '$textLight0' }, }, - ":active": { - props: { color: "$textLight0" }, + ':active': { + props: { color: '$textLight0' }, }, }, _dark: { _text: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _spinner: { - props: { color: "$textDark0" }, - ":hover": { - props: { color: "$textDark0" }, + 'props': { color: '$textDark0' }, + ':hover': { + props: { color: '$textDark0' }, }, - ":active": { - props: { color: "$textDark0" }, + ':active': { + props: { color: '$textDark0' }, }, }, _icon: { - props: { color: "$textDark0" }, - ":hover": { - props: { color: "$textDark0" }, + 'props': { color: '$textDark0' }, + ':hover': { + props: { color: '$textDark0' }, }, - ":active": { - props: { color: "$textDark0" }, + ':active': { + props: { color: '$textDark0' }, }, }, }, @@ -514,489 +514,489 @@ export default styled( size: { xs: { - px: "$3.5", - h: "$8", + px: '$3.5', + h: '$8', _icon: { - h: "$3", - w: "$3", + h: '$3', + w: '$3', }, _text: { - fontSize: "$xs", - lineHeight: "$sm", + fontSize: '$xs', + lineHeight: '$sm', }, }, sm: { - px: "$4", - h: "$9", + px: '$4', + h: '$9', _icon: { - h: "$4", - w: "$4", + h: '$4', + w: '$4', }, _text: { - fontSize: "$sm", - lineHeight: "$sm", + fontSize: '$sm', + lineHeight: '$sm', }, }, md: { - px: "$5", - h: "$10", + px: '$5', + h: '$10', _icon: { - h: "$4.5", - w: "$4.5", + h: '$4.5', + w: '$4.5', }, _text: { - fontSize: "$md", - lineHeight: "$md", + fontSize: '$md', + lineHeight: '$md', }, }, lg: { - px: "$6", - h: "$11", + px: '$6', + h: '$11', _icon: { - h: "$4.5", - w: "$4.5", + h: '$4.5', + w: '$4.5', }, _text: { - fontSize: "$lg", - lineHeight: "$xl", + fontSize: '$lg', + lineHeight: '$xl', }, }, xl: { - px: "$7", - h: "$12", + px: '$7', + h: '$12', _icon: { - h: "$5", - w: "$5", + h: '$5', + w: '$5', }, _text: { - fontSize: "$xl", - lineHeight: "$xl", + fontSize: '$xl', + lineHeight: '$xl', }, }, }, }, - compoundVariants: [ + 'compoundVariants': [ { - action: "primary", - variant: "link", + action: 'primary', + variant: 'link', value: { - bg: "transparent", - ":hover": { - bg: "transparent", + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "transparent", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "secondary", - variant: "link", + action: 'secondary', + variant: 'link', value: { - bg: "transparent", - ":hover": { - bg: "transparent", + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "transparent", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "positive", - variant: "link", + action: 'positive', + variant: 'link', value: { - bg: "transparent", - ":hover": { - bg: "transparent", + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "transparent", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "negative", - variant: "link", + action: 'negative', + variant: 'link', value: { - bg: "transparent", - ":hover": { - bg: "transparent", + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "transparent", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: 'transparent', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "primary", - variant: "outline", + action: 'primary', + variant: 'outline', value: { - bg: "transparent", - ":hover": { - bg: "$backgroundLight50", + 'bg': 'transparent', + ':hover': { + bg: '$backgroundLight50', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "$backgroundDark900", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: '$backgroundDark900', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "secondary", - variant: "outline", + action: 'secondary', + variant: 'outline', value: { - bg: "transparent", - ":hover": { - bg: "$backgroundLight50", + 'bg': 'transparent', + ':hover': { + bg: '$backgroundLight50', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "$backgroundDark900", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: '$backgroundDark900', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "positive", - variant: "outline", + action: 'positive', + variant: 'outline', value: { - bg: "transparent", - ":hover": { - bg: "$backgroundLight50", + 'bg': 'transparent', + ':hover': { + bg: '$backgroundLight50', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "$backgroundDark900", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: '$backgroundDark900', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "negative", - variant: "outline", + action: 'negative', + variant: 'outline', value: { - bg: "transparent", - ":hover": { - bg: "$backgroundLight50", + 'bg': 'transparent', + ':hover': { + bg: '$backgroundLight50', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, - _dark: { - bg: "transparent", - ":hover": { - bg: "$backgroundDark900", + '_dark': { + 'bg': 'transparent', + ':hover': { + bg: '$backgroundDark900', }, - ":active": { - bg: "transparent", + ':active': { + bg: 'transparent', }, }, }, }, { - action: "primary", - variant: "solid", + action: 'primary', + variant: 'solid', value: { _text: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _icon: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _spinner: { - props: { color: "$textLight0" }, - ":hover": { - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, + ':hover': { + props: { color: '$textLight0' }, }, - ":active": { - props: { color: "$textLight0" }, + ':active': { + props: { color: '$textLight0' }, }, }, _dark: { _text: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _icon: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _spinner: { - props: { color: "$textDark0" }, - ":hover": { - props: { color: "$textDark0" }, + 'props': { color: '$textDark0' }, + ':hover': { + props: { color: '$textDark0' }, }, - ":active": { - props: { color: "$textDark0" }, + ':active': { + props: { color: '$textDark0' }, }, }, }, }, }, { - action: "secondary", - variant: "solid", + action: 'secondary', + variant: 'solid', value: { _text: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _icon: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _spinner: { - props: { color: "$textLight0" }, - ":hover": { - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, + ':hover': { + props: { color: '$textLight0' }, }, - ":active": { - props: { color: "$textLight0" }, + ':active': { + props: { color: '$textLight0' }, }, }, _dark: { _text: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _icon: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _spinner: { - props: { color: "$textDark0" }, - ":hover": { - props: { color: "$textDark0" }, + 'props': { color: '$textDark0' }, + ':hover': { + props: { color: '$textDark0' }, }, - ":active": { - props: { color: "$textDark0" }, + ':active': { + props: { color: '$textDark0' }, }, }, }, }, }, { - action: "positive", - variant: "solid", + action: 'positive', + variant: 'solid', value: { _text: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _icon: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, }, _spinner: { - props: { color: "$textLight0" }, - ":hover": { - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, + ':hover': { + props: { color: '$textLight0' }, }, - ":active": { - props: { color: "$textLight0" }, + ':active': { + props: { color: '$textLight0' }, }, }, _dark: { _text: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _icon: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _spinner: { - props: { color: "$textDark0" }, - ":hover": { - props: { color: "$textDark0" }, + 'props': { color: '$textDark0' }, + ':hover': { + props: { color: '$textDark0' }, }, - ":active": { - props: { color: "$textDark0" }, + ':active': { + props: { color: '$textDark0' }, }, }, }, }, }, { - action: "negative", - variant: "solid", + action: 'negative', + variant: 'solid', value: { _text: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _icon: { - color: "$textLight0", - ":hover": { - color: "$textLight0", + 'color': '$textLight0', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, }, _spinner: { - props: { color: "$textLight0" }, - ":hover": { - props: { color: "$textLight0" }, + 'props': { color: '$textLight0' }, + ':hover': { + props: { color: '$textLight0' }, }, - ":active": { - props: { color: "$textLight0" }, + ':active': { + props: { color: '$textLight0' }, }, }, _dark: { _text: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _icon: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, _spinner: { - props: { color: "$textDark0" }, - ":hover": { - props: { color: "$textDark0" }, + 'props': { color: '$textDark0' }, + ':hover': { + props: { color: '$textDark0' }, }, - ":active": { - props: { color: "$textDark0" }, + ':active': { + props: { color: '$textDark0' }, }, }, }, @@ -1004,29 +1004,29 @@ export default styled( }, ], - defaultProps: { - size: "md", - variant: "solid", - action: "primary", + 'defaultProps': { + size: 'md', + variant: 'solid', + action: 'primary', }, - _web: { - ":focusVisible": { - outlineWidth: "$0.5", - outlineColor: "$primary700", - outlineStyle: "solid", + '_web': { + ':focusVisible': { + outlineWidth: '$0.5', + outlineColor: '$primary700', + outlineStyle: 'solid', _dark: { - outlineColor: "$primary300", + outlineColor: '$primary300', }, }, }, - ":disabled": { + ':disabled': { opacity: 0.4, }, }, { - descendantStyle: ["_text", "_spinner", "_icon"], - ancestorStyle: ["_button"], + descendantStyle: ['_text', '_spinner', '_icon'], + ancestorStyle: ['_button'], } ); diff --git a/example/ui-examples/gluestack-ui-components/core/Fab/styled-components/Root.tsx b/example/ui-examples/gluestack-ui-components/core/Fab/styled-components/Root.tsx index 572329f41..2aae448b5 100644 --- a/example/ui-examples/gluestack-ui-components/core/Fab/styled-components/Root.tsx +++ b/example/ui-examples/gluestack-ui-components/core/Fab/styled-components/Root.tsx @@ -1,101 +1,101 @@ // @ts-nocheck -import { styled } from "../../styled"; -import { Pressable } from "react-native"; +import { styled } from '../../styled'; +import { Pressable } from 'react-native'; export default styled( Pressable, { - bg: "$primary500", - rounded: "$full", - zIndex: 20, - p: 16, - flexDirection: "row", + 'bg': '$primary500', + 'rounded': '$full', + 'zIndex': 20, + 'p': 16, + 'flexDirection': 'row', - alignItems: "center", - justifyContent: "center", - position: "absolute", - ":hover": { - bg: "$primary600", + 'alignItems': 'center', + 'justifyContent': 'center', + 'position': 'absolute', + ':hover': { + bg: '$primary600', }, - ":active": { - bg: "$primary700", + ':active': { + bg: '$primary700', }, - ":disabled": { + ':disabled': { opacity: 0.4, _web: { // @ts-ignore - pointerEvents: "all !important", - cursor: "not-allowed", + pointerEvents: 'all !important', + cursor: 'not-allowed', }, }, - _text: { - color: "$textLight50", - fontWeight: "$normal", + '_text': { + color: '$textLight50', + fontWeight: '$normal', _dark: { _text: { - color: "$textDark50", + color: '$textDark50', }, }, }, - _icon: { - color: "$textLight50", - ":hover": { - color: "$textLight0", + '_icon': { + 'color': '$textLight50', + ':hover': { + color: '$textLight0', }, - ":active": { - color: "$textLight0", + ':active': { + color: '$textLight0', }, - _dark: { + '_dark': { _icon: { - color: "$textDark0", - ":hover": { - color: "$textDark0", + 'color': '$textDark0', + ':hover': { + color: '$textDark0', }, - ":active": { - color: "$textDark0", + ':active': { + color: '$textDark0', }, }, }, }, - _dark: { - bg: "$primary400", - ":hover": { - bg: "$primary500", + '_dark': { + 'bg': '$primary400', + ':hover': { + bg: '$primary500', }, - ":active": { - bg: "$primary600", + ':active': { + bg: '$primary600', }, - ":disabled": { + ':disabled': { opacity: 0.4, _web: { - cursor: "not-allowed", + cursor: 'not-allowed', }, }, }, - _web: { - ":focusVisible": { + '_web': { + ':focusVisible': { outlineWidth: 2, - outlineColor: "$red500", - outlineStyle: "solid", + outlineColor: '$red500', + outlineStyle: 'solid', _dark: { - outlineColor: "$primary300", + outlineColor: '$primary300', }, }, }, - variants: { + 'variants': { size: { sm: { - px: "$2.5", - py: "$2.5", + px: '$2.5', + py: '$2.5', _text: { - fontSize: "$sm", + fontSize: '$sm', }, _icon: { h: 16, @@ -103,10 +103,10 @@ export default styled( }, }, md: { - px: "$3", - py: "$3", + px: '$3', + py: '$3', _text: { - fontSize: "$md", + fontSize: '$md', }, _icon: { h: 18, @@ -114,10 +114,10 @@ export default styled( }, }, lg: { - px: "$4", - py: "$4", + px: '$4', + py: '$4', _text: { - fontSize: "$lg", + fontSize: '$lg', }, _icon: { h: 18, @@ -127,29 +127,29 @@ export default styled( }, placement: { - "top right": { - top: "$4", - right: "$4", + 'top right': { + top: '$4', + right: '$4', }, - "top left": { - top: "$4", - left: "$4", + 'top left': { + top: '$4', + left: '$4', }, - "bottom right": { - bottom: "$4", - right: "$4", + 'bottom right': { + bottom: '$4', + right: '$4', }, - "bottom left": { - bottom: "$4", - left: "$4", + 'bottom left': { + bottom: '$4', + left: '$4', }, - "top center": { - top: "$4", - alignSelf: "center", + 'top center': { + top: '$4', + alignSelf: 'center', // TODO: fix this, this is correct way, but React Native doesn't support this on Native // left: '50%', // transform: [ @@ -160,9 +160,9 @@ export default styled( // ], }, - "bottom center": { - bottom: "$4", - alignSelf: "center", + 'bottom center': { + bottom: '$4', + alignSelf: 'center', // TODO: fix this, this is correct way, but React Native doesn't support this on Native // left: '50%', // transform: [ @@ -174,13 +174,13 @@ export default styled( }, }, }, - defaultProps: { - placement: "bottom right", - size: "md", - hardShadow: "2", + 'defaultProps': { + placement: 'bottom right', + size: 'md', + hardShadow: '2', }, }, { - descendantStyle: ["_text", "_icon"], + descendantStyle: ['_text', '_icon'], } ); diff --git a/example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Group.tsx b/example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Group.tsx index ea5fa7ab9..ee51f5f7d 100644 --- a/example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Group.tsx +++ b/example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Group.tsx @@ -1,4 +1,4 @@ -import { View } from "react-native"; -import { styled } from "../../styled"; +import { View } from 'react-native'; +import { styled } from '../../styled'; export default styled(View, {}, {}); diff --git a/example/ui-examples/gluestack-ui-components/core/Pressable/styled-components/Root.tsx b/example/ui-examples/gluestack-ui-components/core/Pressable/styled-components/Root.tsx index 3814f52c5..1e178fd93 100644 --- a/example/ui-examples/gluestack-ui-components/core/Pressable/styled-components/Root.tsx +++ b/example/ui-examples/gluestack-ui-components/core/Pressable/styled-components/Root.tsx @@ -1,16 +1,16 @@ -import { styled } from "../../styled"; -import { Pressable } from "react-native"; +import { styled } from '../../styled'; +import { Pressable } from 'react-native'; export default styled( Pressable, { _web: { - ":focusVisible": { - outlineWidth: "2px", - outlineColor: "$primary700", - outlineStyle: "solid", + ':focusVisible': { + outlineWidth: '2px', + outlineColor: '$primary700', + outlineStyle: 'solid', _dark: { - outlineColor: "$primary300", + outlineColor: '$primary300', }, }, }, diff --git a/example/ui-examples/gluestack-ui-components/core/Switch/styled-components/Root.tsx b/example/ui-examples/gluestack-ui-components/core/Switch/styled-components/Root.tsx index 56f607ae8..d644f0a48 100644 --- a/example/ui-examples/gluestack-ui-components/core/Switch/styled-components/Root.tsx +++ b/example/ui-examples/gluestack-ui-components/core/Switch/styled-components/Root.tsx @@ -1,24 +1,24 @@ -import { styled } from "../../styled"; -import { Switch } from "react-native"; +import { styled } from '../../styled'; +import { Switch } from 'react-native'; export default styled( Switch, { - props: { + 'props': { // todo: add support for this in style.gluestack.io // trackColor: { false: '$backgroundLight300', true: '$primary600' }, // hacky fix for the above //@ts-ignore - trackColor: { false: "$backgroundLight300", true: "$primary600" }, - thumbColor: "$backgroundLight0", - activeThumbColor: "$backgroundLight0", + trackColor: { false: '$backgroundLight300', true: '$primary600' }, + thumbColor: '$backgroundLight0', + activeThumbColor: '$backgroundLight0', // for ios specifically in unchecked state - ios_backgroundColor: "$backgroundLight300", + ios_backgroundColor: '$backgroundLight300', }, - borderRadius: "$full", - variants: { + 'borderRadius': '$full', + 'variants': { //@ts-ignore size: { @@ -39,59 +39,59 @@ export default styled( }, }, }, - _web: { - ":focus": { + '_web': { + ':focus': { outlineWidth: 0, - outlineColor: "$primary700", - outlineStyle: "solid", + outlineColor: '$primary700', + outlineStyle: 'solid', _dark: { // @ts-ignore - outlineColor: "$primary600", + outlineColor: '$primary600', outlineWidth: 0, - outlineStyle: "solid", + outlineStyle: 'solid', }, }, }, - defaultProps: { - size: "md", + 'defaultProps': { + size: 'md', }, - ":disabled": { - _web: { - cursor: "pointer", - ":disabled": { - cursor: "not-allowed", + ':disabled': { + '_web': { + 'cursor': 'pointer', + ':disabled': { + cursor: 'not-allowed', }, }, - opacity: 0.4, + 'opacity': 0.4, //@ts-ignore - trackColor: { false: "$backgroundLight300", true: "$primary600" }, + 'trackColor': { false: '$backgroundLight300', true: '$primary600' }, // for ios specifically in unchecked state - ios_backgroundColor: "$backgroundLight300", - ":hover": { + 'ios_backgroundColor': '$backgroundLight300', + ':hover': { props: { //@ts-ignore - trackColor: { false: "$backgroundLight300", true: "$primary600" }, + trackColor: { false: '$backgroundLight300', true: '$primary600' }, }, }, }, - ":invalid": { - borderColor: "$error700", + ':invalid': { + borderColor: '$error700', borderRadius: 12, borderWidth: 2, }, - ":hover": { - props: { + ':hover': { + 'props': { // todo: add support for this in style.gluestack.io // trackColor: { false: '$backgroundLight400', true: '$primary700' }, // hacky fix for the above //@ts-ignore - trackColor: { false: "$backgroundLight400", true: "$primary700" }, - ios_backgroundColor: "$backgroundLight400", + trackColor: { false: '$backgroundLight400', true: '$primary700' }, + ios_backgroundColor: '$backgroundLight400', }, - ":invalid": { + ':invalid': { props: { // todo: add support for this in style.gluestack.io // trackColor: { false: '$backgroundLight400', true: '$primary700' }, @@ -99,35 +99,35 @@ export default styled( // hacky fix for the above //@ts-ignore - trackColor: { false: "$backgroundLight300", true: "$primary700" }, + trackColor: { false: '$backgroundLight300', true: '$primary700' }, }, }, }, - ":checked": { + ':checked': { props: { //@ts-ignore - thumbColor: "$backgroundLight0", + thumbColor: '$backgroundLight0', }, }, - _dark: { - props: { + '_dark': { + 'props': { //@ts-ignore - trackColor: { false: "$backgroundDark700", true: "$primary500" }, - thumbColor: "$backgroundDark0", - activeThumbColor: "$backgroundDark0", + trackColor: { false: '$backgroundDark700', true: '$primary500' }, + thumbColor: '$backgroundDark0', + activeThumbColor: '$backgroundDark0', }, - ":invalid": { - borderColor: "$error400", + ':invalid': { + borderColor: '$error400', borderRadius: 12, borderWidth: 2, }, - ":hover": { - props: { + ':hover': { + 'props': { //@ts-ignore - trackColor: { false: "$backgroundDark600", true: "$primary600" }, - ios_backgroundColor: "$backgroundLight400", + trackColor: { false: '$backgroundDark600', true: '$primary600' }, + ios_backgroundColor: '$backgroundLight400', }, - ":invalid": { + ':invalid': { props: { // todo: add support for this in style.gluestack.io // trackColor: { false: '$backgroundLight400', true: '$primary700' }, @@ -135,26 +135,26 @@ export default styled( // hacky fix for the above //@ts-ignore - trackColor: { false: "$backgroundDark700", true: "$primary600" }, + trackColor: { false: '$backgroundDark700', true: '$primary600' }, }, }, }, - ":disabled": { - _web: { - cursor: "pointer", - ":disabled": { - cursor: "not-allowed", + ':disabled': { + '_web': { + 'cursor': 'pointer', + ':disabled': { + cursor: 'not-allowed', }, }, - opacity: 0.4, + 'opacity': 0.4, //@ts-ignore - trackColor: { false: "$backgroundLight300", true: "$primary500" }, + 'trackColor': { false: '$backgroundLight300', true: '$primary500' }, // for ios specifically in unchecked state - ios_backgroundColor: "$backgroundLight300", - ":hover": { + 'ios_backgroundColor': '$backgroundLight300', + ':hover': { props: { //@ts-ignore - trackColor: { false: "$backgroundDark700", true: "$primary500" }, + trackColor: { false: '$backgroundDark700', true: '$primary500' }, }, }, }, @@ -162,18 +162,18 @@ export default styled( }, { resolveProps: [ - "thumbColor", - "trackColor", - "activeThumbColor", - "ios_backgroundColor", + 'thumbColor', + 'trackColor', + 'activeThumbColor', + 'ios_backgroundColor', ], }, { propertyTokenMap: { - trackColor: "colors", - thumbColor: "colors", - activeThumbColor: "colors", - ios_backgroundColor: "colors", + trackColor: 'colors', + thumbColor: 'colors', + activeThumbColor: 'colors', + ios_backgroundColor: 'colors', }, propertyResolver: { trackColor: (rawValue: any, resolver: any) => { @@ -185,11 +185,11 @@ export default styled( }, }, aliases: { - thumbColor: "thumbColor", - activeThumbColor: "activeThumbColor", - activeTrackColor: "activeTrackColor", - trackColor: "trackColor", - ios_backgroundColor: "ios_backgroundColor", + thumbColor: 'thumbColor', + activeThumbColor: 'activeThumbColor', + activeTrackColor: 'activeTrackColor', + trackColor: 'trackColor', + ios_backgroundColor: 'ios_backgroundColor', }, } ); diff --git a/example/ui-examples/gluestack-ui-components/core/gluestack-ui-provider/index.tsx b/example/ui-examples/gluestack-ui-components/core/gluestack-ui-provider/index.tsx index 42650a5ce..7c857c336 100644 --- a/example/ui-examples/gluestack-ui-components/core/gluestack-ui-provider/index.tsx +++ b/example/ui-examples/gluestack-ui-components/core/gluestack-ui-provider/index.tsx @@ -1,5 +1,5 @@ -import { createProvider } from "@gluestack-ui/provider"; -import { StyledProvider } from "@gluestack-style/react"; +import { createProvider } from '@gluestack-ui/provider'; +import { StyledProvider } from '@gluestack-style/react'; const Provider = createProvider({ StyledProvider, diff --git a/example/ui-examples/gluestack-ui-components/index.ts b/example/ui-examples/gluestack-ui-components/index.ts index 02bb11c79..4b0e04137 100644 --- a/example/ui-examples/gluestack-ui-components/index.ts +++ b/example/ui-examples/gluestack-ui-components/index.ts @@ -1 +1 @@ -export * from './core'; \ No newline at end of file +export * from './core'; diff --git a/example/ui-examples/kitchensink-components/header/HomestayLogo.tsx b/example/ui-examples/kitchensink-components/header/HomestayLogo.tsx index 6039a6e0d..f3a3bf3e3 100644 --- a/example/ui-examples/kitchensink-components/header/HomestayLogo.tsx +++ b/example/ui-examples/kitchensink-components/header/HomestayLogo.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Svg, Path } from "react-native-svg"; +import React from 'react'; +import { Svg, Path } from 'react-native-svg'; const HomestayLogo = () => { return ( diff --git a/example/ui-examples/kitchensink-components/main-content/ListYourPlaceModal.tsx b/example/ui-examples/kitchensink-components/main-content/ListYourPlaceModal.tsx index a6fdda192..2ab3b6ff2 100644 --- a/example/ui-examples/kitchensink-components/main-content/ListYourPlaceModal.tsx +++ b/example/ui-examples/kitchensink-components/main-content/ListYourPlaceModal.tsx @@ -1,3 +1,5 @@ +// @ts-nocheck +/* eslint-disable */ import React, { forwardRef, useEffect, useState } from 'react'; import { useGetMountTime } from '../../use-get-mount-time'; import { @@ -523,3 +525,4 @@ const AmenitiesSection = () => { }; export default ListYourPlaceModal; +/* eslint-disable */ diff --git a/example/ui-examples/kitchensink-components/main-content/NewThisWeekFold.tsx b/example/ui-examples/kitchensink-components/main-content/NewThisWeekFold.tsx index 3995f636b..0dca4c2e4 100644 --- a/example/ui-examples/kitchensink-components/main-content/NewThisWeekFold.tsx +++ b/example/ui-examples/kitchensink-components/main-content/NewThisWeekFold.tsx @@ -8,7 +8,7 @@ import { Pressable, } from '../../gluestack-ui-components'; import { ScrollView } from 'react-native'; -import { ChevronLeft, ChevronRight, Scroll } from 'lucide-react-native'; +import { ChevronLeft, ChevronRight } from 'lucide-react-native'; const data = [ { diff --git a/example/ui-examples/kitchensink-components/sidebar/BookingOptions.tsx b/example/ui-examples/kitchensink-components/sidebar/BookingOptions.tsx index f13f8e4f3..948e8e980 100644 --- a/example/ui-examples/kitchensink-components/sidebar/BookingOptions.tsx +++ b/example/ui-examples/kitchensink-components/sidebar/BookingOptions.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - Box, HStack, Heading, Switch, diff --git a/example/ui-examples/styles/index.web.ts b/example/ui-examples/styles/index.web.ts index 1bebc0ca7..74f07de1b 100644 --- a/example/ui-examples/styles/index.web.ts +++ b/example/ui-examples/styles/index.web.ts @@ -1 +1 @@ -import "./main.css"; +import './main.css'; diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index 311828fec..e3041317a 100644 --- a/packages/babel-plugin-styled-resolver/package.json +++ b/packages/babel-plugin-styled-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/babel-plugin-styled-resolver", - "version": "0.2.5", + "version": "0.2.6", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js", diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 50620e005..407909053 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -464,7 +464,7 @@ module.exports = function (b) { let componentSXProp; let componentUtilityProps; const guessingStyledComponents = []; - const styled = ['@gluestack-style/react']; + const styled = ['@gluestack-style/react', '@gluestack-ui/themed']; const components = ['@gluestack-ui/themed']; let isStyledPathConfigured = false; let isComponentsPathConfigured = false; diff --git a/packages/react/src/core/convert-utility-to-sx.ts b/packages/react/src/core/convert-utility-to-sx.ts index c0018b1cd..d8f4f94df 100644 --- a/packages/react/src/core/convert-utility-to-sx.ts +++ b/packages/react/src/core/convert-utility-to-sx.ts @@ -1,13 +1,5 @@ import { deepMerge } from './utils'; -import { - CSSPropertiesMap, - // reservedKeys -} from './styled-system'; -import { - // getObjectParentProperty, - setObjectKeyValue, -} from './utils'; -import { shallowMerge } from '../utils'; +import { setObjectKeyValue } from './utils'; // const resolveResponsiveProps = ( // sxPropsConvertedObj: any, diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts index 9e5213eeb..35eeaed09 100644 --- a/packages/react/src/generateStylePropsFromCSSIds.ts +++ b/packages/react/src/generateStylePropsFromCSSIds.ts @@ -74,8 +74,12 @@ export function getClosestBreakpointValue( return index; } -function isValidBreakpoint(config: any, queryCondition: any) { - const windowWidth = Dimensions.get('window')?.width; +export function isValidBreakpoint( + config: any, + queryCondition: any, + width: any = Dimensions.get('window')?.width +) { + const windowWidth = width; const currentBreakpointValue = getClosestBreakpointValue( config.tokens.mediaQueries, diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts new file mode 100644 index 000000000..73f9b2f15 --- /dev/null +++ b/packages/react/src/hooks/index.ts @@ -0,0 +1,5 @@ +import useMediaQuery from './use-media-query'; +export { useMediaQuery }; +export { useBreakpointValue } from './useBreakpointValue'; +export { useToken } from './useToken'; +export { useColorMode } from './useColorMode'; diff --git a/packages/react/src/hooks/use-media-query.ts b/packages/react/src/hooks/use-media-query.ts new file mode 100644 index 000000000..e6efc86c5 --- /dev/null +++ b/packages/react/src/hooks/use-media-query.ts @@ -0,0 +1,95 @@ +import { useWindowDimensions } from 'react-native'; + +type QueryKeys = + | 'maxWidth' + | 'minWidth' + | 'maxHeight' + | 'minHeight' + | 'orientation'; + +type SubQuery = { + [queryKey in QueryKeys]?: number | string; +}; +type Query = Array; + +const isNil = (value: any) => { + return value === null || value === undefined; +}; + +const calculateQuery = ( + key: string, + val?: number | string, + height?: number, + width?: number +) => { + let retval; + if (isNil(width) || isNil(height) || isNil(val)) { + return; + } + switch (key) { + case 'maxWidth': + // @ts-ignore + retval = !isNil(val) ? width <= val : undefined; + break; + case 'minWidth': + // @ts-ignore + retval = !isNil(val) ? width >= val : undefined; + break; + case 'maxHeight': + // @ts-ignore + retval = !isNil(val) ? height <= val : undefined; + break; + case 'minHeight': + // @ts-ignore + retval = !isNil(val) ? height >= val : undefined; + break; + case 'orientation': + if (!isNil(val)) { + // @ts-ignore + if (width > height) { + retval = val === 'landscape'; + } else { + retval = val === 'portrait'; + } + } + break; + default: + break; + } + return retval; +}; + +const queryResolver = (query: any, width?: number, height?: number) => { + for (const queryKey in query) { + if (!calculateQuery(queryKey, query[queryKey], height, width)) { + return false; + } + } + return true; +}; + +const iterateQuery = ( + query: SubQuery | Query, + height?: number, + width?: number +) => { + const queryResults = []; + if (Array.isArray(query)) { + query.forEach((subQuery: SubQuery) => { + queryResults.push(queryResolver(subQuery, width, height)); + }); + } else { + queryResults.push(queryResolver(query, width, height)); + } + return queryResults; +}; + +const useMediaQuery = (query: SubQuery | Query) => { + const dims = useWindowDimensions(); + const height = dims?.height; + const width = dims?.width; + + return iterateQuery(query, height, width); +}; + +export default useMediaQuery; diff --git a/packages/react/src/hooks/useBreakpointValue.ts b/packages/react/src/hooks/useBreakpointValue.ts new file mode 100644 index 000000000..a70590ffb --- /dev/null +++ b/packages/react/src/hooks/useBreakpointValue.ts @@ -0,0 +1,31 @@ +import { useWindowDimensions } from 'react-native'; +import type { ICustomConfig } from '../types'; +import { useStyled } from '../StyledProvider'; +import { isValidBreakpoint } from '../generateStylePropsFromCSSIds'; +import { extractWidthValues } from '../utils'; + +type BreakPointValue = Partial<{ + // @ts-ignore + [key in keyof ICustomConfig['tokens']['breakpoints']]: any; +}>; + +export function useBreakpointValue(values: BreakPointValue) { + let { width } = useWindowDimensions(); + const theme = useStyled(); + const mediaQueries = theme?.config?.tokens?.mediaQueries; + + let validBreakpoints: any = []; + Object.keys(mediaQueries).forEach((key: any) => { + const currentBreakpoint: any = extractWidthValues(mediaQueries[key]); + const isValid = isValidBreakpoint(theme.config, mediaQueries[key], width); + if (isValid) { + validBreakpoints.push({ key: key, value: currentBreakpoint[0] }); + } + }); + + if (validBreakpoints.length === 0) { + return values; + } + validBreakpoints.sort((a: any, b: any) => a.value - b.value); + return values[validBreakpoints[validBreakpoints.length - 1].key]; +} diff --git a/packages/react/src/hooks/useColorMode.ts b/packages/react/src/hooks/useColorMode.ts new file mode 100644 index 000000000..ffb745ec0 --- /dev/null +++ b/packages/react/src/hooks/useColorMode.ts @@ -0,0 +1,9 @@ +import { get } from '../core/colorMode'; + +/** + * + * @returns Current color mode value (light or dark) + */ +export const useColorMode = () => { + return get(); +}; diff --git a/packages/react/src/hooks/useToken.ts b/packages/react/src/hooks/useToken.ts new file mode 100644 index 000000000..44b7940b6 --- /dev/null +++ b/packages/react/src/hooks/useToken.ts @@ -0,0 +1,14 @@ +import { useStyled, ICustomConfig } from '@gluestack-style/react'; + +/** + * + * @param tokenScale Type of the token ex: colors, spacing, fontSizes, etc + * @param token Token name ex: red500, 1, sm, etc + * @returns + */ +export const useToken = (tokenScale: string, token: string) => { + const theme: ICustomConfig = useStyled(); + // @ts-ignore + const themeTokens = theme.config.tokens; + return themeTokens?.[`${tokenScale}`]?.[`${token}`]; +}; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 44e251821..38246bd3e 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -65,7 +65,13 @@ export { convertStyledToStyledVerbosed, convertSxToSxVerbosed, } from './convertSxToSxVerbosed'; -export type { Tokens, Aliases, AliasesProps, ICustomConfig } from './types'; +export type { + Tokens, + Aliases, + AliasesProps, + ICustomConfig, + GSConfig, +} from './types'; export { createStyled } from './createStyled'; export type { IStyledPlugin, IStyled } from './createStyled'; export { createGlobalStylesWeb } from './createGlobalStylesWeb'; @@ -79,3 +85,4 @@ export { AddCssTokenVariables, FontResolver } from './plugins'; export { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved'; export { createConfig } from './createConfig'; export * from './core'; +export * from './hooks'; diff --git a/yarn.lock b/yarn.lock index f186a0857..6d54f753f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2505,6 +2505,14 @@ inline-style-prefixer "^6.0.1" normalize-css-color "^1.0.2" +"@gluestack-style/react@^0.2.11-alpha.0", "@gluestack-style/react@^0.2.16", "@gluestack-style/react@^0.2.21": + version "0.2.46" + resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.46.tgz#c408f4c05a7374690c8ebd952aa95b0a1d390c4e" + integrity sha512-ujpOIrt/b08svtUSLn4wSCn548H7lIe3oHlBCTHwDvmjheuVsXyIrECtNBA+mrL5mtkCaBmkB9iUJTWD601V+A== + dependencies: + inline-style-prefixer "^6.0.1" + normalize-css-color "^1.0.2" + "@gluestack-ui/actionsheet@^0.2.16", "@gluestack-ui/actionsheet@^0.2.7", "@gluestack-ui/actionsheet@latest": version "0.2.16" resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.16.tgz#052a733966c517450a3cd6f832932ccf77924867"