├── .changeset ├── README.md └── config.json ├── .commitlintrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github └── workflows │ ├── auto-assign-issue.yml │ ├── auto-assign-pr.yml │ ├── lighthouse.yml_old │ ├── main.yml_old │ ├── release.yml │ ├── testing.yml_old │ └── trigger-update-docs.yml ├── .gitignore ├── .husky ├── .gitignore ├── commit-msg └── pre-commit ├── .lintstagedrc ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── example ├── babel-plugin-styled-resolver-expo │ ├── .gitignore │ ├── App.web.tsx │ ├── Button.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── gluestack-style.config.ts │ ├── gluestack-ui.config.ts │ ├── index.js │ ├── metro.config.js │ ├── package.json │ ├── src │ │ ├── Button.tsx │ │ ├── index.tsx │ │ └── styled.config.ts │ ├── tsconfig.json │ └── webpack.config.js ├── expo-app │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── components │ │ ├── core │ │ │ ├── gluestack-ui-provider │ │ │ │ └── index.tsx │ │ │ └── index.ts │ │ └── index.ts │ ├── gluestack-style.config.ts │ ├── gluestack-ui.config.ts │ ├── index.js │ ├── metro.config.js │ ├── package.json │ ├── src │ │ └── App.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── expo-router-example │ ├── .gitignore │ ├── app.json │ ├── app │ │ ├── (tabs) │ │ │ ├── _layout.tsx │ │ │ ├── index.tsx │ │ │ └── two.tsx │ │ ├── +html.tsx │ │ ├── [...missing].tsx │ │ ├── _layout.tsx │ │ └── modal.tsx │ ├── assets │ │ ├── fonts │ │ │ └── SpaceMono-Regular.ttf │ │ └── images │ │ │ ├── adaptive-icon.png │ │ │ ├── favicon.png │ │ │ ├── icon.png │ │ │ └── splash.png │ ├── babel.config.js │ ├── components │ │ ├── EditScreenInfo.tsx │ │ ├── ExternalLink.tsx │ │ ├── StyledText.tsx │ │ ├── Themed.tsx │ │ └── __tests__ │ │ │ └── StyledText-test.js │ ├── constants │ │ └── Colors.ts │ ├── gluestack-ui.config.ts │ ├── metro.config.js │ ├── package-lock.json │ ├── package.json │ ├── tsconfig.json │ └── webpack.config.js ├── next │ ├── .eslintrc.js │ ├── .gitignore │ ├── .nvmrc │ ├── README.md │ ├── app.json │ ├── assets │ │ └── logo.png │ ├── babel.config.js │ ├── gluestack-style.config.ts │ ├── layouts │ │ └── GuestLayout.jsx │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.jsx │ │ ├── _document.js │ │ └── index.js │ ├── public │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── nativebase-logo.svg │ │ │ └── nextjs-logo.png │ │ └── vercel.svg │ ├── styles │ │ └── globals.css │ └── tsconfig.json ├── storybook │ ├── .expo-shared │ │ └── assets.json │ ├── .gitignore │ ├── .npmignore │ ├── .nvmrc │ ├── .ondevice │ │ ├── Storybook.tsx │ │ ├── doctools.js │ │ ├── main.js │ │ ├── preview.js │ │ └── storybook.requires.js │ ├── .storybook │ │ ├── main.js │ │ ├── preview-head.html │ │ ├── preview.js │ │ └── theme.js │ ├── .vscode │ │ └── settings.json │ ├── App.tsx │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Box.test.js │ │ ├── Button.test.js │ │ ├── Button.tsx │ │ ├── Checkbox.test.js │ │ └── __snapshots__ │ │ │ ├── Box.test.js.snap │ │ │ ├── Button.test.js.snap │ │ │ └── Checkbox.test.js.snap │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ ├── logos_mastercard.png │ │ └── splash.png │ ├── babel.config.js │ ├── do.sh │ ├── index.js │ ├── jest.config.js │ ├── junit.xml │ ├── metro.config.js │ ├── package.json │ ├── public │ │ ├── assests │ │ │ ├── BabelResolverSteps.png │ │ │ ├── BabelResolverStepsdark.png │ │ │ ├── PerformanceScreenshot.png │ │ │ └── PerformanceScreenshot1.png │ │ └── images │ │ │ ├── architecture.png │ │ │ └── themed.png │ ├── removestyle.js │ ├── src │ │ ├── advanced │ │ │ ├── Architecture │ │ │ │ └── index.stories.mdx │ │ │ ├── BabelPlugins │ │ │ │ └── index.stories.mdx │ │ │ └── Specificity │ │ │ │ └── index.stories.mdx │ │ ├── api │ │ │ ├── AsForwarder │ │ │ │ ├── AsForwarder.stories.tsx │ │ │ │ ├── AsForwarder.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── ColorModeBasedStyles │ │ │ │ ├── ColorMode.stories.tsx │ │ │ │ ├── ColorMode.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── CompoundVariants │ │ │ │ ├── CompoundVariants.tsx │ │ │ │ └── CompoundVarinats.stories.tsx │ │ │ ├── DescendantsStyles │ │ │ │ ├── ContextBasedStyles.stories.tsx │ │ │ │ ├── ContextBasedStyles.tsx │ │ │ │ ├── config.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── ExtendComponents │ │ │ │ ├── ExtendComponents.stories.tsx │ │ │ │ └── ExtendComponents.tsx │ │ │ ├── MultipleProvder │ │ │ │ ├── MultipleProvider.stories.tsx │ │ │ │ └── MultipleProvider.tsx │ │ │ ├── OverridingStyles │ │ │ │ └── index.stories.mdx │ │ │ ├── PlatformBasedStyles │ │ │ │ ├── PlatformBasedStyles.stories.tsx │ │ │ │ ├── PlatformBasedStyles.tsx │ │ │ │ ├── config.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── PropertyResolver │ │ │ │ ├── PropertyResolver.stories.tsx │ │ │ │ ├── PropertyResolver.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── PropsPassing │ │ │ │ ├── PropsPassing.stories.tsx │ │ │ │ ├── PropsPassing.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── ResponsiveStyles │ │ │ │ ├── ResponsiveStyles.stories.tsx │ │ │ │ ├── ResponsiveStyles.tsx │ │ │ │ ├── config.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── StateBasesStyles │ │ │ │ ├── ButtonStateProps.stories.tsx │ │ │ │ ├── ButtonStateProps.tsx │ │ │ │ ├── config.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── UtilityFunctions │ │ │ │ ├── UtilityFunctions.stories.tsx │ │ │ │ ├── UtilityFunctions.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── UtilityProps │ │ │ │ └── index.stories.mdx │ │ │ └── Variants │ │ │ │ ├── BaseStyleVariantSizes.stories.tsx │ │ │ │ ├── BaseStyleVariantSizes.tsx │ │ │ │ ├── config.tsx │ │ │ │ └── index.stories.mdx │ │ ├── assets │ │ │ ├── BabelResolverSteps-old.png │ │ │ ├── BabelResolverSteps.png │ │ │ └── PerformanceScreenshot.png │ │ ├── components │ │ │ ├── Wrapper.tsx │ │ │ └── nb.config.ts │ │ ├── configuration │ │ │ ├── Breakpoints │ │ │ │ └── index.stories.mdx │ │ │ ├── CustomizingComponents │ │ │ │ └── index.stories.mdx │ │ │ ├── GlobalStyle │ │ │ │ └── index.stories.mdx │ │ │ ├── SSR │ │ │ │ └── index.stories.mdx │ │ │ ├── ThemeTokens │ │ │ │ └── index.stories.mdx │ │ │ └── Themes │ │ │ │ ├── config.ts │ │ │ │ ├── index.stories.mdx │ │ │ │ ├── themes.stories.tsx │ │ │ │ └── themes.tsx │ │ ├── getting-started │ │ │ ├── Installation │ │ │ │ └── index.stories.mdx │ │ │ ├── Styled │ │ │ │ └── index.stories.mdx │ │ │ ├── StyledProvider │ │ │ │ └── index.stories.mdx │ │ │ ├── TypeScript │ │ │ │ └── index.stories.mdx │ │ │ ├── install-expo │ │ │ │ └── index.stories.mdx │ │ │ └── install-nextjs │ │ │ │ └── index.stories.mdx │ │ ├── hooks │ │ │ ├── useBreakPointValue │ │ │ │ ├── breakPointValue.tsx │ │ │ │ ├── index.stories.mdx │ │ │ │ └── useBreakPointValue.stories.tsx │ │ │ ├── useColorMode │ │ │ │ └── index.stories.mdx │ │ │ ├── useMedia │ │ │ │ ├── index.stories.mdx │ │ │ │ ├── useMedia.stories.tsx │ │ │ │ └── useMedia.tsx │ │ │ └── useToken │ │ │ │ └── index.stories.mdx │ │ ├── more │ │ │ ├── Changelog │ │ │ │ └── index.stories.mdx │ │ │ └── Roadmap │ │ │ │ └── index.stories.mdx │ │ ├── overview │ │ │ ├── API │ │ │ │ └── index.stories.mdx │ │ │ ├── Introduction │ │ │ │ └── index.stories.mdx │ │ │ └── Performance │ │ │ │ └── index.stories.mdx │ │ ├── plugins │ │ │ ├── AnimationPlugin │ │ │ │ ├── 1.png │ │ │ │ ├── 2.png │ │ │ │ ├── 3.png │ │ │ │ ├── Animation.stories.tsx │ │ │ │ ├── AnimationPlugin.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── CSSVariables │ │ │ │ ├── CSSVariables.stories.tsx │ │ │ │ ├── CSSVariables.tsx │ │ │ │ └── index.stories.mdx │ │ │ ├── FontsPlugin │ │ │ │ ├── CustomFontMapper.tsx │ │ │ │ ├── FontsPlugin.stories.tsx │ │ │ │ ├── FontsPlugin.tsx │ │ │ │ └── index.stories.mdx │ │ │ └── Introduction │ │ │ │ └── index.stories.mdx │ │ └── ui-components │ │ │ └── AsForwarder │ │ │ └── index.tsx │ ├── testcodeshift.js │ ├── transformer.js │ ├── tsconfig.json │ ├── utils.ts │ └── webpack.config.js_old ├── ui-examples-babel │ ├── .gitignore │ ├── App.tsx │ ├── BenchGlueStack.tsx │ ├── BenchReactNative.tsx │ ├── TimeRenderer.js │ ├── TimedRender.js │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── data.ts │ ├── gluestack-components │ │ ├── Button │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Group.tsx │ │ │ │ ├── GroupHSpacer.tsx │ │ │ │ ├── GroupVSpacer.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── Text.tsx │ │ │ │ └── index.tsx │ │ ├── HStack │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ ├── Spacer.tsx │ │ │ │ └── index.tsx │ │ ├── Image │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── FallbackText.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Provider │ │ │ └── index.tsx │ │ ├── Text │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── VStack │ │ │ ├── config.json │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ ├── Spacer.tsx │ │ │ │ └── index.tsx │ │ └── index.ts │ ├── gluestack-ui.config.ts │ ├── index.js │ ├── metro.config.js │ ├── package.json │ ├── readme.md │ ├── src │ │ └── core │ │ │ ├── Box │ │ │ └── styled-box.tsx │ │ │ ├── Heading │ │ │ └── styled-heading.tsx │ │ │ ├── index.ts │ │ │ └── styled.tsx │ ├── styles │ │ ├── index.ts │ │ ├── index.web.ts │ │ └── main.css │ ├── timing.ts │ ├── tsconfig.json │ ├── use-get-mount-time.ts │ ├── webpack.config.js │ └── yarn.lock └── ui-examples │ ├── .gitignore │ ├── App.tsx │ ├── AppTest.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── display │ │ ├── image1.png │ │ ├── image10.png │ │ ├── image11.png │ │ ├── image12.png │ │ ├── image13.png │ │ ├── image14.png │ │ ├── image15.png │ │ ├── image16.png │ │ ├── image17.png │ │ ├── image18.png │ │ ├── image2.png │ │ ├── image3.png │ │ ├── image4.png │ │ ├── image5.png │ │ ├── image6.png │ │ ├── image7.png │ │ ├── image8.png │ │ └── image9.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── gluestack-ui-components │ ├── core │ │ ├── Actionsheet │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Backdrop.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── DragIndicator.tsx │ │ │ │ ├── FlatList.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── IndicatorWrapper.tsx │ │ │ │ ├── Item.tsx │ │ │ │ ├── ItemText.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── ScrollView.tsx │ │ │ │ ├── SectionHeaderText.tsx │ │ │ │ ├── SectionList.tsx │ │ │ │ ├── VirtualizedList.tsx │ │ │ │ └── index.tsx │ │ ├── Alert │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Text.tsx │ │ │ │ └── index.tsx │ │ ├── AlertDialog │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Backdrop.tsx │ │ │ │ ├── Body.tsx │ │ │ │ ├── CloseButton.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── Footer.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Avatar │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Badge.tsx │ │ │ │ ├── FallbackText.tsx │ │ │ │ ├── Group.tsx │ │ │ │ ├── Image.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Badge │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Text.tsx │ │ │ │ └── index.tsx │ │ ├── Box │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Button │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Group.tsx │ │ │ │ ├── GroupHSpacer.tsx │ │ │ │ ├── GroupVSpacer.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── Text.tsx │ │ │ │ └── index.tsx │ │ ├── Center │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Checkbox │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Group.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Indicator.tsx │ │ │ │ ├── Label.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Root.web.tsx │ │ │ │ └── index.tsx │ │ ├── Divider │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Fab │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Label.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── FormControl │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Error.tsx │ │ │ │ ├── ErrorIcon.tsx │ │ │ │ ├── ErrorText.tsx │ │ │ │ ├── Helper.tsx │ │ │ │ ├── HelperText.tsx │ │ │ │ ├── Label.tsx │ │ │ │ ├── LabelAstrick.tsx │ │ │ │ ├── LabelText.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── HStack │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ ├── Spacer.tsx │ │ │ │ └── index.tsx │ │ ├── Heading │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Icons │ │ │ ├── Icons │ │ │ │ ├── Add.tsx │ │ │ │ ├── Alert.tsx │ │ │ │ ├── Arrow.tsx │ │ │ │ ├── AtSign.tsx │ │ │ │ ├── Bell.tsx │ │ │ │ ├── Calendar.tsx │ │ │ │ ├── Check.tsx │ │ │ │ ├── Chevron.tsx │ │ │ │ ├── Circle.tsx │ │ │ │ ├── Clock.tsx │ │ │ │ ├── Close.tsx │ │ │ │ ├── CodeBlock.tsx │ │ │ │ ├── ColorLine.tsx │ │ │ │ ├── ColorPalette.tsx │ │ │ │ ├── Copy.tsx │ │ │ │ ├── DarkTheme.tsx │ │ │ │ ├── Delete.tsx │ │ │ │ ├── Dismiss.tsx │ │ │ │ ├── Download.tsx │ │ │ │ ├── Earth.tsx │ │ │ │ ├── Edit.tsx │ │ │ │ ├── Eye.tsx │ │ │ │ ├── Favourite.tsx │ │ │ │ ├── Globe.tsx │ │ │ │ ├── Grid.tsx │ │ │ │ ├── Grip.tsx │ │ │ │ ├── Hamburger.tsx │ │ │ │ ├── Help.tsx │ │ │ │ ├── Info.tsx │ │ │ │ ├── Link.tsx │ │ │ │ ├── Loader.tsx │ │ │ │ ├── Lock.tsx │ │ │ │ ├── Mail.tsx │ │ │ │ ├── Menu.tsx │ │ │ │ ├── Message.tsx │ │ │ │ ├── Minus.tsx │ │ │ │ ├── Moon.tsx │ │ │ │ ├── NavigationUnread.tsx │ │ │ │ ├── Notification.tsx │ │ │ │ ├── Open.tsx │ │ │ │ ├── Options.tsx │ │ │ │ ├── Paperclip.tsx │ │ │ │ ├── Phone.tsx │ │ │ │ ├── Play.tsx │ │ │ │ ├── Plugin.tsx │ │ │ │ ├── Plus.tsx │ │ │ │ ├── Question.tsx │ │ │ │ ├── Remove.tsx │ │ │ │ ├── Repeat.tsx │ │ │ │ ├── Resize.tsx │ │ │ │ ├── Responsive.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── ScaleFill.tsx │ │ │ │ ├── Search.tsx │ │ │ │ ├── Settings.tsx │ │ │ │ ├── Share.tsx │ │ │ │ ├── Slash.tsx │ │ │ │ ├── Social.tsx │ │ │ │ ├── Star.tsx │ │ │ │ ├── Sun.tsx │ │ │ │ ├── Theme.tsx │ │ │ │ ├── ThreeDots.tsx │ │ │ │ ├── Ticket.tsx │ │ │ │ ├── Trash.tsx │ │ │ │ ├── TypeScript.tsx │ │ │ │ ├── Unlock.tsx │ │ │ │ ├── Warning.tsx │ │ │ │ ├── WarningOutline.tsx │ │ │ │ ├── WeatherMoon.tsx │ │ │ │ ├── WindowHeader.tsx │ │ │ │ └── index.tsx │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Image │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── FallbackText.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Input │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Input.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Link │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ ├── Text.tsx │ │ │ │ └── index.tsx │ │ ├── Menu │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Backdrop.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── Group.tsx │ │ │ │ ├── GroupTitle.tsx │ │ │ │ ├── Item.tsx │ │ │ │ ├── Item.web.tsx │ │ │ │ ├── ItemLabel.tsx │ │ │ │ ├── ItemOption.tsx │ │ │ │ ├── ItemOptionIndicator.tsx │ │ │ │ ├── ItemOptionLabel.tsx │ │ │ │ ├── OptionsGroup.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Trigger.tsx │ │ │ │ └── index.tsx │ │ ├── Modal │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Backdrop.tsx │ │ │ │ ├── Body.tsx │ │ │ │ ├── CloseButton.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── Footer.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Popover │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Arrow.tsx │ │ │ │ ├── Backdrop.tsx │ │ │ │ ├── Body.tsx │ │ │ │ ├── CloseButton.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── Footer.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Pressable │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Progress │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── FilledTrack.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Provider │ │ │ └── index.tsx │ │ ├── Radio │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Group.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Indicator.tsx │ │ │ │ ├── Label.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Root.web.tsx │ │ │ │ └── index.tsx │ │ ├── Select │ │ │ ├── index.tsx │ │ │ ├── styled-components-actionsheet │ │ │ │ ├── Backdrop.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── DragIndicator.tsx │ │ │ │ ├── FlatList.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── IndicatorWrapper.tsx │ │ │ │ ├── Item.tsx │ │ │ │ ├── ItemText.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── ScrollView.tsx │ │ │ │ ├── SectionHeaderText.tsx │ │ │ │ ├── SectionList.tsx │ │ │ │ ├── VirtualizedList.tsx │ │ │ │ └── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Input.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Trigger.tsx │ │ │ │ └── index.tsx │ │ ├── Slider │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── FilledTrack.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Thumb.tsx │ │ │ │ ├── ThumbInteraction.tsx │ │ │ │ ├── Track.tsx │ │ │ │ └── index.tsx │ │ ├── Spinner │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Switch │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Tabs │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ ├── Tab.tsx │ │ │ │ ├── TabIcon.tsx │ │ │ │ ├── TabList.tsx │ │ │ │ ├── TabPanel.tsx │ │ │ │ ├── TabPanels.tsx │ │ │ │ ├── TabTitle.tsx │ │ │ │ └── index.tsx │ │ ├── Text │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Textarea │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Input.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── Toast │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Description.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── Title.tsx │ │ │ │ └── index.tsx │ │ ├── Tooltip │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Content.tsx │ │ │ │ ├── Root.tsx │ │ │ │ └── index.tsx │ │ ├── VStack │ │ │ ├── index.tsx │ │ │ └── styled-components │ │ │ │ ├── Root.tsx │ │ │ │ ├── Spacer.tsx │ │ │ │ └── index.tsx │ │ ├── gluestack-ui-provider │ │ │ └── index.tsx │ │ ├── index.ts │ │ └── styled │ │ │ └── index.tsx │ └── index.ts │ ├── gluestack-ui.config.ts │ ├── index.js │ ├── kitchensink-components │ ├── Banner.tsx │ ├── ExplorePage.tsx │ ├── Header.tsx │ ├── HomestayPage.tsx │ ├── LogoutAlertDialog.tsx │ ├── MobileBottomTabs.tsx │ ├── MobileModeChangeButton.tsx │ ├── MobileProfilePage.tsx │ ├── MobileSidebarActionsheet.tsx │ ├── Sidebar.tsx │ ├── WebSidebar.tsx │ ├── header │ │ ├── HeaderTabs.tsx │ │ ├── HomestayLogo.tsx │ │ ├── ToggleMode.tsx │ │ └── UserProfile.tsx │ ├── main-content │ │ ├── HomestayInformationFold.tsx │ │ ├── ListYourPlaceModal.tsx │ │ ├── MainContent.tsx │ │ ├── MainContentHeader.tsx │ │ └── NewThisWeekFold.tsx │ └── sidebar │ │ ├── AmenitiesSection.tsx │ │ ├── BookingOptions.tsx │ │ ├── CustomerRatingSection.tsx │ │ ├── FiltersAppliedSection.tsx │ │ ├── PlaceTypeSection.tsx │ │ ├── PriceRangeSection.tsx │ │ └── SortBySection.tsx │ ├── metro.config.js │ ├── package.json │ ├── readme.md │ ├── styles │ ├── index.ts │ ├── index.web.ts │ └── main.css │ ├── timing.ts │ ├── tsconfig.json │ ├── use-get-mount-time.ts │ ├── webpack.config.js │ └── yarn.lock ├── img ├── dank-dark-mode.png ├── dank-light-mode.png ├── dank-logo-readme.png └── gluestack-logo.svg ├── package.json ├── packages ├── animation-legend-motion-driver │ ├── .gitignore │ ├── .nvmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── index.tsx │ │ ├── propertyTokenMap.ts │ │ └── utils.ts │ └── tsconfig.json ├── animation-moti-driver │ ├── .gitignore │ ├── .nvmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── index.tsx │ └── tsconfig.json ├── animation-resolver │ ├── .gitignore │ ├── .nvmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── AnimatedComponents │ │ │ └── index.tsx │ │ ├── index.tsx │ │ ├── propertyTokenMap.ts │ │ └── utils.ts │ └── tsconfig.json ├── babel-plugin-styled-resolver │ ├── .babelrc │ ├── .gitignore │ ├── .nvmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── buildConfig.js │ │ ├── config.js │ │ └── index.js │ └── tsconfig.json ├── benchmark-native │ ├── .gitignore │ ├── App.tsx │ ├── TestComp.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── components │ │ └── ChangeAVariant.tsx │ ├── index.js │ ├── metro.config.js │ ├── nb.config.ts │ ├── package.json │ ├── tsconfig.json │ └── webpack.config.js ├── benchmark-next │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── bench │ │ ├── TestResults.tsx │ │ ├── TestRunner.tsx │ │ ├── change-a-variant │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── change-css-prop │ │ │ ├── baseline.tsx │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── create-and-mount-button │ │ │ ├── baseline.tsx │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── create-and-mount-text │ │ │ ├── baseline.tsx │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── create-theme │ │ │ ├── stitches-react-v025.tsx │ │ │ └── stitches-react-vc17.tsx │ │ ├── mount-deep-tree │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── mount-wide-tree │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── sierpinski-triangle │ │ │ ├── emotion.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ └── utils │ │ │ ├── Tree.tsx │ │ │ ├── buttonStyles.js │ │ │ ├── createId.ts │ │ │ ├── stitches-core-v025.config.ts │ │ │ ├── stitches-core-vc17.config.ts │ │ │ ├── stitches-default-config-v025.ts │ │ │ ├── stitches-default-config-vc17.ts │ │ │ ├── stitches-react-v025.config.ts │ │ │ └── stitches-react-vc17.config.ts │ ├── ds │ │ ├── box.tsx │ │ ├── button.tsx │ │ ├── code.tsx │ │ ├── container.tsx │ │ ├── flex.tsx │ │ ├── grid.tsx │ │ ├── link.tsx │ │ ├── section.tsx │ │ ├── separator.tsx │ │ ├── stitches-ds.config.ts │ │ └── text.tsx │ ├── gluestack-style.config.ts │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ ├── change-a-variant │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── change-css-prop │ │ │ ├── baseline.tsx │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── create-and-mount-button │ │ │ ├── baseline.tsx │ │ │ ├── complex-ui-styled-button-example.tsx │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── create-and-mount-text │ │ │ ├── baseline.tsx │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-core-v025.tsx │ │ │ ├── stitches-core-vc17.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── create-theme │ │ │ ├── index.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ └── stitches-react-vc17.tsx │ │ ├── full-render-manual-test │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── index.tsx │ │ ├── mount-deep-tree │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ ├── mount-wide-tree │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ │ └── sierpinski-triangle │ │ │ ├── emotion.tsx │ │ │ ├── index.tsx │ │ │ ├── nativebase-v3.tsx │ │ │ ├── react-native-web.tsx │ │ │ ├── stitches-react-v025.tsx │ │ │ ├── stitches-react-vc17.tsx │ │ │ ├── styled-components.tsx │ │ │ └── ui-styled.tsx │ ├── prettier.config.js │ ├── public │ │ └── favicon.ico │ └── tsconfig.json └── react │ ├── .gitignore │ ├── .nvmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ ├── AsForwarder.tsx │ ├── StyledProvider.tsx │ ├── Theme.tsx │ ├── convertSxToSxVerbosed.ts │ ├── core │ │ ├── colorMode.ts │ │ ├── convert-utility-to-sx.ts │ │ ├── index.ts │ │ ├── styled-system.ts │ │ └── utils.ts │ ├── createConfig.ts │ ├── createGlobalStyles.ts │ ├── createGlobalStylesWeb.ts │ ├── createGlobalStylesWeb.web.ts │ ├── createStyle.ts │ ├── createStyled.ts │ ├── generateStylePropsFromCSSIds.ts │ ├── hooks │ │ ├── index.ts │ │ ├── use-media-query.ts │ │ ├── useBreakpointValue.ts │ │ ├── useColorMode.ts │ │ ├── useMedia.ts │ │ └── useToken.ts │ ├── index.ts │ ├── injectInStyle.ts │ ├── injectInStyle.web.ts │ ├── plugins │ │ ├── css-variables.tsx │ │ ├── font-resolver.tsx │ │ └── index.tsx │ ├── propertyTokenMap.ts │ ├── resolver │ │ ├── SXResolvedToOrderedSXResolved.ts │ │ ├── StyledValueToCSSObject.ts │ │ ├── checkAndPush.ts │ │ ├── getComponentStyle.ts │ │ ├── getStyleIds.ts │ │ ├── getWeightBaseOnPath.ts │ │ ├── index.ts │ │ ├── injectComponentAndDescendantStyles.ts │ │ ├── orderedResolved.ts │ │ ├── reduceAndResolveCompoundVariants.ts │ │ ├── styledResolved.ts │ │ └── sxToSxResolved.ts │ ├── stableHash.ts │ ├── style-sheet │ │ ├── index.ts │ │ ├── value.ts │ │ └── value.web.ts │ ├── styled.tsx │ ├── types.ts │ ├── updateCSSStyleInOrderedResolved.ts │ ├── updateCSSStyleInOrderedResolved.web.ts │ ├── updateOrderUnResolvedMap.ts │ ├── utils.ts │ └── utils │ │ ├── css-injector │ │ ├── index.ts │ │ └── utils │ │ │ ├── inject.ts │ │ │ └── inject.web.ts │ │ └── cssify │ │ ├── create-stylesheet │ │ └── index.ts │ │ ├── cssify.ts │ │ ├── index.ts │ │ └── utils │ │ ├── common.ts │ │ ├── create-declaration-block.ts │ │ └── react-native-web │ │ ├── canUseDom.ts │ │ ├── createReactDOMStyle.ts │ │ ├── flatten-style.ts │ │ ├── hyphenate-style-name.ts │ │ ├── normalizeColor.ts │ │ ├── normalizeValueWithProperty.ts │ │ ├── prefixStyles │ │ ├── index.js │ │ └── static.js │ │ ├── preprocess.ts │ │ └── unitlessNumbers.ts │ ├── tests │ ├── example.test.js │ └── nb.config.js │ └── tsconfig.json ├── scripts └── test.sh ├── tsconfig.json ├── turbo.json └── yarn.lock /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["benchmark-next", "@gluestack/ui-storybook"] 11 | } 12 | -------------------------------------------------------------------------------- /.commitlintrc: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "extends": [ 4 | "@commitlint/config-conventional" 5 | ] 6 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | 2 | packages/**/dist 3 | packages/**/build 4 | packages/**/node_modules 5 | packages/**/lib 6 | packages/**/cli.js 7 | 8 | packages/ui/components 9 | packages/**/example 10 | 11 | 12 | # packages/**/example 13 | # !.build/test.js 14 | 15 | ui/packages/ui/.ondevice 16 | babel.config.js 17 | 18 | example/storybook 19 | example/expo-app 20 | example/ui-examples 21 | example/ui-examples-babel 22 | example/next -------------------------------------------------------------------------------- /.github/workflows/auto-assign-issue.yml: -------------------------------------------------------------------------------- 1 | name: Issue assignment 2 | 3 | on: 4 | issues: 5 | types: [opened, edited, labeled] 6 | 7 | jobs: 8 | auto-assign: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: 'Auto-assign issue' 12 | uses: pozil/auto-assign-issue@v1 13 | with: 14 | repo-token: ${{ secrets.MY_GITHUB_TOKEN }} 15 | teams: dank-style-support 16 | numOfAssignee: 1 17 | allowSelfAssign: false 18 | -------------------------------------------------------------------------------- /.github/workflows/auto-assign-pr.yml: -------------------------------------------------------------------------------- 1 | name: PR assignment 2 | 3 | on: 4 | pull_request: 5 | types: [opened, edited, synchronize, reopened] 6 | 7 | jobs: 8 | auto-assign: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: 'Auto-assign PR' 12 | uses: pozil/auto-assign-issue@v1 13 | with: 14 | repo-token: ${{ secrets.MY_GITHUB_TOKEN }} 15 | teams: dank-style-reviewers 16 | numOfAssignee: 1 17 | -------------------------------------------------------------------------------- /.github/workflows/testing.yml_old: -------------------------------------------------------------------------------- 1 | # name: 'Unit test' 2 | # run-name: 'Unit Test' 3 | # on: [pull_request] 4 | # jobs: 5 | # test: 6 | # runs-on: ubuntu-latest 7 | # steps: 8 | # - name: Checkout repository 9 | # uses: actions/checkout@v2 10 | 11 | # - uses: actions/setup-node@v3 12 | # with: 13 | # node-version: 16.x 14 | 15 | # - name: Print Repo Name 16 | # run: echo ${{ github.event.client_payload.message.repo }} 17 | 18 | # - name: Install Dependencies 19 | # run: yarn 20 | 21 | # - name: Run Tests 22 | # run: yarn test 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | .swc/ 14 | out/ 15 | build 16 | lib 17 | # expo 18 | .expo 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | dist 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | 36 | # turbo 37 | .turbo 38 | .vercel 39 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,ts,tsx, jsx}": ["eslint --quiet --fix"], 3 | "*.{json,md,html,js,jsx,ts,tsx}": ["prettier --write"] 4 | } 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies=false 2 | enable-pre-post-scripts=true 3 | 4 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "quoteProps": "consistent", 3 | "singleQuote": true, 4 | "tabWidth": 2, 5 | "trailingComma": "es5", 6 | "useTabs": false 7 | } 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## Latest Release 4 | 5 | ### December 23, 2022: [v0.1.0](/.changelog/v1.0.0.mdx) 6 | 7 | ## Previous Releases 8 | -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/Button.tsx: -------------------------------------------------------------------------------- 1 | import { Pressable } from 'react-native'; 2 | import { styled } from '@gluestack-style/react'; 3 | export const Button = styled( 4 | Pressable, 5 | { 6 | 'bg': 'aqua', 7 | 'p': '$3', 8 | 'm': '$3', 9 | '@sm': { 10 | 'bg': `$red400`, 11 | ':hover': { 12 | 'bg': 'aqua', 13 | ':hover': { 14 | 'bg': '$yellow500', 15 | ':focus': { 16 | bg: 'red', 17 | }, 18 | }, 19 | }, 20 | }, 21 | '@md': { 22 | bg: `$green500`, 23 | }, 24 | }, 25 | { 26 | descendantStyle: ['_text'], 27 | } 28 | ); 29 | -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/babel-plugin-styled-resolver-expo/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/babel-plugin-styled-resolver-expo/assets/favicon.png -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/babel-plugin-styled-resolver-expo/assets/icon.png -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/babel-plugin-styled-resolver-expo/assets/splash.png -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/src/Button.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '@gluestack-style/react'; 2 | import { Pressable } from 'react-native'; 3 | 4 | export default styled(Pressable, { 5 | borderRadius: '$full', 6 | flexDirection: 'row', 7 | justifyContent: 'center', 8 | alignItems: 'center', 9 | outlineWidth: 0, 10 | }); 11 | -------------------------------------------------------------------------------- /example/babel-plugin-styled-resolver-expo/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Button'; 2 | -------------------------------------------------------------------------------- /example/expo-app/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /example/expo-app/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-app/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/expo-app/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-app/assets/favicon.png -------------------------------------------------------------------------------- /example/expo-app/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-app/assets/icon.png -------------------------------------------------------------------------------- /example/expo-app/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-app/assets/splash.png -------------------------------------------------------------------------------- /example/expo-app/babel.config.js: -------------------------------------------------------------------------------- 1 | const myBabel = require('../../packages/babel-plugin-styled-resolver/src/index.js'); 2 | const path = require('path'); 3 | module.exports = function (api) { 4 | api.cache(true); 5 | return { 6 | presets: ['babel-preset-expo'], 7 | plugins: [ 8 | // process.env.NODE_ENV === "production" ? myBabel : {}, 9 | [myBabel, { filename: '../../packages/react/src/index' }], 10 | [ 11 | 'module-resolver', 12 | { 13 | alias: { 14 | // For development, we want to alias the library to the source 15 | }, 16 | }, 17 | ], 18 | // 'transform-remove-console', 19 | ], 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /example/expo-app/components/core/gluestack-ui-provider/index.tsx: -------------------------------------------------------------------------------- 1 | import { createProvider } from '@gluestack-ui/provider'; 2 | import { StyledProvider } from '@gluestack-style/react'; 3 | 4 | export const Provider = createProvider({ 5 | StyledProvider, 6 | }); 7 | -------------------------------------------------------------------------------- /example/expo-app/components/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './gluestack-ui-provider'; 2 | -------------------------------------------------------------------------------- /example/expo-app/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './core'; 2 | -------------------------------------------------------------------------------- /example/expo-app/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /example/expo-router-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | 37 | # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb 38 | # The following patterns were generated by expo-cli 39 | 40 | expo-env.d.ts 41 | # @end expo-cli -------------------------------------------------------------------------------- /example/expo-router-example/assets/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-router-example/assets/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /example/expo-router-example/assets/images/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-router-example/assets/images/adaptive-icon.png -------------------------------------------------------------------------------- /example/expo-router-example/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-router-example/assets/images/favicon.png -------------------------------------------------------------------------------- /example/expo-router-example/assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-router-example/assets/images/icon.png -------------------------------------------------------------------------------- /example/expo-router-example/assets/images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/expo-router-example/assets/images/splash.png -------------------------------------------------------------------------------- /example/expo-router-example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = function (api) { 4 | api.cache(true); 5 | return { 6 | presets: ['babel-preset-expo'], 7 | plugins: [ 8 | [ 9 | 'module-resolver', 10 | { 11 | alias: { 12 | // For development, we want to alias the library to the source 13 | ['@gluestack-style/react']: path.join( 14 | __dirname, 15 | '../../packages/react/src' 16 | ), 17 | }, 18 | }, 19 | ], 20 | // Required for expo-router 21 | 'expo-router/babel', 22 | ], 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /example/expo-router-example/components/StyledText.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TextProps } from './Themed'; 2 | 3 | export function MonoText(props: TextProps) { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /example/expo-router-example/components/__tests__/StyledText-test.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | 4 | import { MonoText } from '../StyledText'; 5 | 6 | it(`renders correctly`, () => { 7 | const tree = renderer.create(Snapshot test!).toJSON(); 8 | 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /example/expo-router-example/constants/Colors.ts: -------------------------------------------------------------------------------- 1 | const tintColorLight = '#2f95dc'; 2 | const tintColorDark = '#fff'; 3 | 4 | export default { 5 | light: { 6 | text: '#000', 7 | background: '#fff', 8 | tint: tintColorLight, 9 | tabIconDefault: '#ccc', 10 | tabIconSelected: tintColorLight, 11 | }, 12 | dark: { 13 | text: '#fff', 14 | background: '#000', 15 | tint: tintColorDark, 16 | tabIconDefault: '#ccc', 17 | tabIconSelected: tintColorDark, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /example/expo-router-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "paths": { 6 | "@gluestack-style/react": ["../../packages/react/src"] 7 | }, 8 | "jsx": "preserve" 9 | }, 10 | "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /example/next/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | }; 4 | -------------------------------------------------------------------------------- /example/next/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 2 | -------------------------------------------------------------------------------- /example/next/README.md: -------------------------------------------------------------------------------- 1 | NextJS Starter 2 | -------------------------------------------------------------------------------- /example/next/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-starter", 3 | "displayName": "nextjs-starter" 4 | } 5 | -------------------------------------------------------------------------------- /example/next/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/next/assets/logo.png -------------------------------------------------------------------------------- /example/next/layouts/GuestLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export default function GuestLayout(props) { 3 | return <>; 4 | } 5 | -------------------------------------------------------------------------------- /example/next/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /example/next/pages/_app.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../styles/globals.css'; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default MyApp; 13 | -------------------------------------------------------------------------------- /example/next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/next/public/favicon.ico -------------------------------------------------------------------------------- /example/next/public/images/nextjs-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/next/public/images/nextjs-logo.png -------------------------------------------------------------------------------- /example/next/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, body { height: 100%; } 2 | body { overflow: hidden; } 3 | #root { display:flex; height:100%; } -------------------------------------------------------------------------------- /example/next/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": [ 19 | "next-env.d.ts", 20 | "**/*.ts", 21 | "**/*.tsx", 22 | "pages/_app.jsx", 23 | "pages/index.js" 24 | ], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /example/storybook/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /example/storybook/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .env 3 | .expo/ 4 | dist/ 5 | npm-debug.* 6 | *.jks 7 | *.p8 8 | *.p12 9 | *.key 10 | *.mobileprovision 11 | *.orig.* 12 | web-build/ 13 | lib 14 | 15 | # macOS 16 | .DS_Store 17 | 18 | #build 19 | storybook-static/ -------------------------------------------------------------------------------- /example/storybook/.npmignore: -------------------------------------------------------------------------------- 1 | # Dotfiles 2 | .babelrc 3 | .eslintignore 4 | .eslintrc.json 5 | .gitattributes 6 | _config.yml 7 | .editorconfig 8 | 9 | # Documents 10 | CONTRIBUTING.md 11 | ISSUE_TEMPLATE.txt 12 | img 13 | 14 | # Test cases 15 | __tests__ 16 | dist/__tests__ 17 | 18 | # Example 19 | storybook-static/ 20 | -------------------------------------------------------------------------------- /example/storybook/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /example/storybook/.ondevice/Storybook.tsx: -------------------------------------------------------------------------------- 1 | import { getStorybookUI } from '@storybook/react-native'; 2 | import './doctools'; 3 | import './storybook.requires'; 4 | 5 | const StorybookUIRoot = getStorybookUI({}); 6 | export default StorybookUIRoot; 7 | -------------------------------------------------------------------------------- /example/storybook/.ondevice/doctools.js: -------------------------------------------------------------------------------- 1 | import { extractArgTypes } from '@storybook/react/dist/modern/client/docs/extractArgTypes'; 2 | import { addArgTypesEnhancer, addParameters } from '@storybook/react-native'; 3 | import { enhanceArgTypes } from '@storybook/docs-tools'; 4 | 5 | addArgTypesEnhancer(enhanceArgTypes); 6 | addParameters({ 7 | docs: { 8 | extractArgTypes, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /example/storybook/.ondevice/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'], 3 | addons: [ 4 | '@storybook/addon-ondevice-notes', 5 | '@storybook/addon-ondevice-controls', 6 | '@storybook/addon-ondevice-backgrounds', 7 | '@storybook/addon-ondevice-actions', 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /example/storybook/.ondevice/preview.js: -------------------------------------------------------------------------------- 1 | import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; 2 | 3 | export const decorators = [withBackgrounds]; 4 | 5 | export const parameters = { 6 | backgrounds: { 7 | default: 'plain', 8 | values: [ 9 | { name: 'plain', value: 'white' }, 10 | { name: 'warm', value: 'hotpink' }, 11 | { name: 'cool', value: 'deepskyblue' }, 12 | ], 13 | }, 14 | controls: { 15 | matchers: { 16 | color: /(background|color)$/i, 17 | date: /Date$/, 18 | }, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /example/storybook/.storybook/preview-head.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/.storybook/preview-head.html -------------------------------------------------------------------------------- /example/storybook/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": ["gluestack"] 3 | } 4 | -------------------------------------------------------------------------------- /example/storybook/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @gluestack/ui 2 | 3 | ## 0.1.0 4 | 5 | ### Patch Changes 6 | 7 | - Added accessible styled awesome ui components 8 | -------------------------------------------------------------------------------- /example/storybook/__tests__/Box.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | // import { storiesOf } from '@storybook/react'; 4 | // import { action } from '@storybook/addon-actions'; 5 | import { render } from '@testing-library/react-native'; 6 | 7 | import BoxStory from '../src/components/Layout/Box/Box'; 8 | import Wrapper from '../src/components/Wrapper'; 9 | 10 | test('renders correctly', () => { 11 | const tree = renderer 12 | .create( 13 | 14 | 15 | 16 | ) 17 | .toJSON(); 18 | expect(tree).toMatchSnapshot(); 19 | }); 20 | -------------------------------------------------------------------------------- /example/storybook/__tests__/Button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const Button = () => { 4 | return
helleeo
; 5 | }; 6 | -------------------------------------------------------------------------------- /example/storybook/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/storybook/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/assets/favicon.png -------------------------------------------------------------------------------- /example/storybook/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/assets/icon.png -------------------------------------------------------------------------------- /example/storybook/assets/logos_mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/assets/logos_mastercard.png -------------------------------------------------------------------------------- /example/storybook/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/assets/splash.png -------------------------------------------------------------------------------- /example/storybook/do.sh: -------------------------------------------------------------------------------- 1 | ls -d */ | xargs -I {} bash -c "cd '{}' && cp -rf src/styled-components/* . && rm -rf src/styled-components/ .npmignore babel.config.js package.json README.md" 2 | -------------------------------------------------------------------------------- /example/storybook/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /example/storybook/public/assests/BabelResolverSteps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/public/assests/BabelResolverSteps.png -------------------------------------------------------------------------------- /example/storybook/public/assests/BabelResolverStepsdark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/public/assests/BabelResolverStepsdark.png -------------------------------------------------------------------------------- /example/storybook/public/assests/PerformanceScreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/public/assests/PerformanceScreenshot.png -------------------------------------------------------------------------------- /example/storybook/public/assests/PerformanceScreenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/public/assests/PerformanceScreenshot1.png -------------------------------------------------------------------------------- /example/storybook/public/images/architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/public/images/architecture.png -------------------------------------------------------------------------------- /example/storybook/public/images/themed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/public/images/themed.png -------------------------------------------------------------------------------- /example/storybook/src/api/AsForwarder/AsForwarder.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { AsForwarderExample } from './AsForwarder'; 3 | const MySpecificityMeta: ComponentMeta = { 4 | title: 'api/stories/AsForwarder', 5 | component: AsForwarderExample, 6 | }; 7 | 8 | export { AsForwarderExample as AsForwarder } from './AsForwarder'; 9 | 10 | export default MySpecificityMeta; 11 | -------------------------------------------------------------------------------- /example/storybook/src/api/ColorModeBasedStyles/ColorMode.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { ColorMode } from './ColorMode'; 3 | const MyColorModeMeta: ComponentMeta = { 4 | title: 'api/stories/ColorMode', 5 | component: ColorMode, 6 | }; 7 | 8 | export { ColorMode } from './ColorMode'; 9 | // 10 | export default MyColorModeMeta; 11 | -------------------------------------------------------------------------------- /example/storybook/src/api/CompoundVariants/CompoundVarinats.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { CompoundVariants } from './CompoundVariants'; 3 | const MyCompoundVariantsMeta: ComponentMeta = { 4 | title: 'api/stories/CompoundVariants', 5 | component: CompoundVariants, 6 | }; 7 | 8 | export { CompoundVariants } from './CompoundVariants'; 9 | export default MyCompoundVariantsMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/DescendantsStyles/ContextBasedStyles.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { ContextBasedStyles } from './ContextBasedStyles'; 3 | const MyDescendantsMeta: ComponentMeta = { 4 | title: 'api/stories/ContextBasedStyles', 5 | component: ContextBasedStyles, 6 | }; 7 | 8 | export { ContextBasedStyles } from './ContextBasedStyles'; 9 | export default MyDescendantsMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/ExtendComponents/ExtendComponents.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { ExtendComponentsExample } from './ExtendComponents'; 3 | const MySpecificityMeta: ComponentMeta = { 4 | title: 'api/stories/ExtendComponents', 5 | component: ExtendComponentsExample, 6 | }; 7 | 8 | export { ExtendComponentsExample as ExtendComponents } from './ExtendComponents'; 9 | 10 | export default MySpecificityMeta; 11 | -------------------------------------------------------------------------------- /example/storybook/src/api/MultipleProvder/MultipleProvider.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { MultipleProvider } from './MultipleProvider'; 3 | const MyMultipleProviderMeta: ComponentMeta = { 4 | title: 'api/stories/MultipleProvider', 5 | component: MultipleProvider, 6 | }; 7 | 8 | export { MultipleProvider } from './MultipleProvider'; 9 | // 10 | export default MyMultipleProviderMeta; 11 | -------------------------------------------------------------------------------- /example/storybook/src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { PlatformBasedStyles } from './PlatformBasedStyles'; 3 | const MyPlatformPropsMeta: ComponentMeta = { 4 | title: 'api/stories/PlatformBasedStyles', 5 | component: PlatformBasedStyles, 6 | }; 7 | 8 | export { PlatformBasedStyles } from './PlatformBasedStyles'; 9 | export default MyPlatformPropsMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/PropertyResolver/PropertyResolver.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { PropertyResolver } from './PropertyResolver'; 3 | const MyPropertyResolverMeta: ComponentMeta = { 4 | title: 'api/stories/PropertyResolver', 5 | component: PropertyResolver, 6 | }; 7 | 8 | export { PropertyResolver } from './PropertyResolver'; 9 | export default MyPropertyResolverMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/PropsPassing/PropsPassing.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { PropsPassing } from './PropsPassing'; 3 | const MyPropsPassingMeta: ComponentMeta = { 4 | title: 'api/stories/PropsPassing', 5 | component: PropsPassing, 6 | }; 7 | 8 | export { PropsPassing } from './PropsPassing'; 9 | export default MyPropsPassingMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/ResponsiveStyles/ResponsiveStyles.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { ResponsiveStyles } from './ResponsiveStyles'; 3 | const MyResponsiveStylesMeta: ComponentMeta = { 4 | title: 'api/stories/ResponsiveStyles', 5 | component: ResponsiveStyles, 6 | }; 7 | 8 | export { ResponsiveStyles } from './ResponsiveStyles'; 9 | export default MyResponsiveStylesMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/StateBasesStyles/ButtonStateProps.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { ButtonStateProps } from './ButtonStateProps'; 3 | const MyButtonStatePropsMeta: ComponentMeta = { 4 | title: 'api/stories/ButtonStateProps', 5 | component: ButtonStateProps, 6 | }; 7 | 8 | export { ButtonStateProps } from './ButtonStateProps'; 9 | export default MyButtonStatePropsMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/UtilityFunctions/UtilityFunctions.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { UtilityFunctions } from './UtilityFunctions'; 3 | const MyUtilityFunctionsMeta: ComponentMeta = { 4 | title: 'api/stories/UtilityFunctions', 5 | component: UtilityFunctions, 6 | }; 7 | 8 | export { UtilityFunctions } from './UtilityFunctions'; 9 | export default MyUtilityFunctionsMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/api/Variants/BaseStyleVariantSizes.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { BaseStyleVariantSizes } from './BaseStyleVariantSizes'; 3 | const MyBaseStyleVariantSizesMeta: ComponentMeta = 4 | { 5 | title: 'api/stories/BaseStyleVariantSizes', 6 | component: BaseStyleVariantSizes, 7 | }; 8 | 9 | export { BaseStyleVariantSizes } from './BaseStyleVariantSizes'; 10 | 11 | export default MyBaseStyleVariantSizesMeta; 12 | -------------------------------------------------------------------------------- /example/storybook/src/assets/BabelResolverSteps-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/src/assets/BabelResolverSteps-old.png -------------------------------------------------------------------------------- /example/storybook/src/assets/BabelResolverSteps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/src/assets/BabelResolverSteps.png -------------------------------------------------------------------------------- /example/storybook/src/assets/PerformanceScreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/src/assets/PerformanceScreenshot.png -------------------------------------------------------------------------------- /example/storybook/src/components/Wrapper.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { config } from './nb.config'; 3 | import { StyledProvider } from '@gluestack-style/react'; 4 | import { View } from 'react-native'; 5 | export const Wrapper = ({ children, colorMode, ...props }: any) => { 6 | return ( 7 | 8 | 9 | {children} 10 | 11 | 12 | ); 13 | }; 14 | 15 | export default Wrapper; 16 | -------------------------------------------------------------------------------- /example/storybook/src/configuration/Themes/themes.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { Themes } from './themes'; 3 | const MyThemesMeta: ComponentMeta = { 4 | title: 'configuration/stories/themes', 5 | component: Themes, 6 | }; 7 | 8 | export { Themes } from './themes'; 9 | 10 | export default MyThemesMeta; 11 | -------------------------------------------------------------------------------- /example/storybook/src/hooks/useBreakPointValue/useBreakPointValue.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { breakPointValueStory } from './breakPointValue'; 3 | 4 | const MediaQueryMeta: ComponentMeta = { 5 | title: 'hooks/stories/useMediaQuery', 6 | component: breakPointValueStory, 7 | }; 8 | 9 | export { breakPointValueStory } from './breakPointValue'; 10 | 11 | export default MediaQueryMeta; 12 | -------------------------------------------------------------------------------- /example/storybook/src/hooks/useMedia/useMedia.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { MediaHookStory } from './useMedia'; 3 | 4 | const MediaQueryMeta: ComponentMeta = { 5 | title: 'hooks/stories/useMedia', 6 | component: MediaHookStory, 7 | }; 8 | 9 | export { MediaHookStory } from './useMedia'; 10 | 11 | export default MediaQueryMeta; 12 | -------------------------------------------------------------------------------- /example/storybook/src/more/Changelog/index.stories.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Changelog | gluestack-style 3 | description: A quick look on gluestack-style changelog. 4 | --- 5 | 6 | import { Canvas, Meta, Story } from '@storybook/addon-docs'; 7 | 8 | 9 | 10 | # Changelog 11 | 12 | To view changelog, please visit [GitHub releases](https://github.com/gluestack/gluestack-style/releases). 13 | -------------------------------------------------------------------------------- /example/storybook/src/plugins/AnimationPlugin/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/src/plugins/AnimationPlugin/1.png -------------------------------------------------------------------------------- /example/storybook/src/plugins/AnimationPlugin/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/src/plugins/AnimationPlugin/2.png -------------------------------------------------------------------------------- /example/storybook/src/plugins/AnimationPlugin/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/storybook/src/plugins/AnimationPlugin/3.png -------------------------------------------------------------------------------- /example/storybook/src/plugins/AnimationPlugin/Animation.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { AnimationPlugin } from './AnimationPlugin'; 3 | const MyAnimationPluginMeta: ComponentMeta = { 4 | title: 'plugins/stories/Animation Plugin', 5 | component: AnimationPlugin, 6 | }; 7 | 8 | export { AnimationPlugin } from './AnimationPlugin'; 9 | export default MyAnimationPluginMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/plugins/CSSVariables/CSSVariables.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { CSSVariables } from './CSSVariables'; 3 | const MyCSSVariablesMeta: ComponentMeta = { 4 | title: 'plugins/stories/CSSVariables', 5 | component: CSSVariables, 6 | }; 7 | 8 | export { CSSVariables }; 9 | export default MyCSSVariablesMeta; 10 | -------------------------------------------------------------------------------- /example/storybook/src/plugins/FontsPlugin/FontsPlugin.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentMeta } from '@storybook/react-native'; 2 | import { FontsPlugin } from './FontsPlugin'; 3 | const MyFontsPluginMeta: ComponentMeta = { 4 | title: 'plugins/stories/FontsPlugin', 5 | component: FontsPlugin, 6 | }; 7 | 8 | export { FontsPlugin } from './FontsPlugin'; 9 | export { CustomFontMapper } from './CustomFontMapper'; 10 | export default MyFontsPluginMeta; 11 | -------------------------------------------------------------------------------- /example/storybook/utils.ts: -------------------------------------------------------------------------------- 1 | // Transform code To Remove Wrapper And Function Name 2 | export function transformedCode( 3 | code: string, 4 | type: 'jsx' | 'function' = 'jsx', 5 | componentName?: string 6 | ) { 7 | if (type === 'function') { 8 | return `function App() { 9 | ${code} 10 | return <${componentName} />; 11 | };`; 12 | } 13 | return `function App() { 14 | return ${code}; 15 | };`; 16 | } 17 | -------------------------------------------------------------------------------- /example/ui-examples-babel/BenchReactNative.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, View } from 'react-native'; 3 | 4 | const Native = () => { 5 | return ( 6 | 7 | {new Array(1000).fill(0).map((_, i) => ( 8 | 9 | ))} 10 | 11 | ); 12 | }; 13 | 14 | const styles = StyleSheet.create({ 15 | styledView: { 16 | backgroundColor: 'yellow', 17 | padding: 8, 18 | margin: 4, 19 | }, 20 | }); 21 | 22 | export default Native; 23 | -------------------------------------------------------------------------------- /example/ui-examples-babel/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples-babel/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/ui-examples-babel/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples-babel/assets/favicon.png -------------------------------------------------------------------------------- /example/ui-examples-babel/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples-babel/assets/icon.png -------------------------------------------------------------------------------- /example/ui-examples-babel/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples-babel/assets/splash.png -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { createButton } from '@gluestack-ui/button'; 2 | import { 3 | Root, 4 | Text, 5 | Group, 6 | GroupHSpacer, 7 | GroupVSpacer, 8 | Spinner, 9 | Icon, 10 | } from './styled-components'; 11 | 12 | export const Button = createButton({ 13 | Root, 14 | Text, 15 | Group, 16 | GroupHSpacer, 17 | GroupVSpacer, 18 | Spinner, 19 | Icon, 20 | }); 21 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Button/styled-components/GroupHSpacer.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '@gluestack-style/react'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | variants: { 8 | space: { 9 | xs: { 10 | w: '$1', 11 | }, 12 | sm: { 13 | w: '$1.5', 14 | }, 15 | md: { 16 | w: '$2', 17 | }, 18 | lg: { 19 | w: '$3', 20 | }, 21 | xl: { 22 | w: '$4', 23 | }, 24 | }, 25 | }, 26 | }, 27 | { ancestorStyle: ['_groupHSpacer'] } 28 | ); 29 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Button/styled-components/GroupVSpacer.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '@gluestack-style/react'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | variants: { 8 | space: { 9 | xs: { 10 | h: '$1', 11 | }, 12 | sm: { 13 | h: '$1.5', 14 | }, 15 | md: { 16 | h: '$2', 17 | }, 18 | lg: { 19 | h: '$3', 20 | }, 21 | xl: { 22 | h: '$4', 23 | }, 24 | }, 25 | }, 26 | }, 27 | { ancestorStyle: ['_groupVSpacer'] } 28 | ); 29 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Button/styled-components/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '@gluestack-style/react'; 2 | import { ActivityIndicator } from 'react-native'; 3 | 4 | export default styled( 5 | ActivityIndicator, 6 | {}, 7 | { ancestorStyle: ['_spinner'], resolveProps: ['color'] } 8 | ); 9 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Button/styled-components/Text.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '@gluestack-style/react'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight0', 8 | fontFamily: '$body', 9 | //@ts-ignore 10 | userSelect: 'none', 11 | }, 12 | { ancestorStyle: ['_text'], DEBUG: 'STYLEDBUTTONTEXT' } 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Button/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Group } from './Group'; 2 | export { default as Root } from './Root'; 3 | export { default as GroupHSpacer } from './GroupHSpacer'; 4 | export { default as GroupVSpacer } from './GroupVSpacer'; 5 | export { default as Spinner } from './Spinner'; 6 | export { default as Text } from './Text'; 7 | export { default as Icon } from './Icon'; 8 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/HStack/index.tsx: -------------------------------------------------------------------------------- 1 | import { createHStack } from '@gluestack-ui/hstack'; 2 | import { Root, Spacer } from './styled-components'; 3 | 4 | export const HStack = createHStack({ 5 | Root, 6 | Spacer, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/HStack/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '@gluestack-style/react'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'row', 8 | 9 | defaultProps: { 10 | space: 'md', 11 | }, 12 | }, 13 | {} 14 | ); 15 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/HStack/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Spacer } from './Spacer'; 3 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Image/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root } from './styled-components'; 2 | 3 | export const Image = Root; 4 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Image/styled-components/FallbackText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from "react-native"; 2 | import { styled } from "@gluestack-style/react"; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontFamily: "$body", 8 | color: "$blue900", 9 | bg: "$amber500", 10 | p: 10, 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Image/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Text/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root as Text } from './styled-components'; 2 | export { Text }; 3 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/Text/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/VStack/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { "@gluestack-ui/vstack": "latest" }, 3 | "keywords": ["components", "core"] 4 | } 5 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/VStack/index.tsx: -------------------------------------------------------------------------------- 1 | import { createVStack } from '@gluestack-ui/vstack'; 2 | import { Root, Spacer } from './styled-components'; 3 | 4 | export const VStack = createVStack({ 5 | Root, 6 | Spacer, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/VStack/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from "@gluestack-style/react"; 2 | import { View } from "react-native"; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: "column", 8 | defaultProps: { 9 | space: "md", 10 | }, 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/VStack/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Spacer } from './Spacer'; 3 | -------------------------------------------------------------------------------- /example/ui-examples-babel/gluestack-components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './HStack'; 2 | export * from './VStack'; 3 | export * from './Text'; 4 | export * from './Image'; 5 | export * from './Provider'; 6 | export * from './Button'; 7 | -------------------------------------------------------------------------------- /example/ui-examples-babel/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /example/ui-examples-babel/readme.md: -------------------------------------------------------------------------------- 1 | ### This repository contains source code of all the examples that are shown on website 2 | -------------------------------------------------------------------------------- /example/ui-examples-babel/src/core/Box/styled-box.tsx: -------------------------------------------------------------------------------- 1 | import { Pressable } from 'react-native'; 2 | import { styled } from '../styled'; 3 | 4 | export default styled(Pressable, { 5 | bg: '$red500', 6 | padding: '$10', 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples-babel/src/core/index.ts: -------------------------------------------------------------------------------- 1 | import styledBox from './Box/styled-box'; 2 | import styledHeading from './Heading/styled-heading'; 3 | 4 | export { styledBox as Box, styledHeading as Heading }; 5 | -------------------------------------------------------------------------------- /example/ui-examples-babel/src/core/styled.tsx: -------------------------------------------------------------------------------- 1 | export { styled } from '../../../../packages/react'; 2 | -------------------------------------------------------------------------------- /example/ui-examples-babel/styles/index.ts: -------------------------------------------------------------------------------- 1 | // Intentionally left empty 2 | export {}; 3 | -------------------------------------------------------------------------------- /example/ui-examples-babel/styles/index.web.ts: -------------------------------------------------------------------------------- 1 | import './main.css'; 2 | -------------------------------------------------------------------------------- /example/ui-examples-babel/styles/main.css: -------------------------------------------------------------------------------- 1 | /* styles.css */ 2 | 3 | body { 4 | overflow: hidden; 5 | height: 100%; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 6px; 10 | height: 8px; 11 | } 12 | 13 | ::-webkit-scrollbar-corner, 14 | ::-webkit-scrollbar-track { 15 | background: transparent; 16 | } 17 | 18 | .gs-dark ::-webkit-scrollbar-thumb { 19 | background-color: #525252; 20 | border-radius: 20px; 21 | border: 3px solid transparent; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-color: #dbdbdb; 26 | border-radius: 20px; 27 | border: 3px solid transparent; 28 | } 29 | 30 | ::-webkit-scrollbar-corner, 31 | ::-webkit-scrollbar-track { 32 | background: transparent; 33 | } 34 | -------------------------------------------------------------------------------- /example/ui-examples-babel/timing.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples-babel/timing.ts -------------------------------------------------------------------------------- /example/ui-examples-babel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "CommonJS", 4 | "target": "es2015", 5 | "declaration": true, 6 | "outDir": "./dist", 7 | "skipLibCheck": true, 8 | "checkJs": false 9 | }, 10 | "include": ["src/**/*"], 11 | "exclude": ["node_modules"], 12 | "extends": "expo/tsconfig.base" 13 | } 14 | -------------------------------------------------------------------------------- /example/ui-examples/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image1.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image10.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image11.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image12.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image13.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image14.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image15.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image16.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image17.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image18.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image2.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image3.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image4.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image5.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image6.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image7.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image8.png -------------------------------------------------------------------------------- /example/ui-examples/assets/display/image9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/display/image9.png -------------------------------------------------------------------------------- /example/ui-examples/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/favicon.png -------------------------------------------------------------------------------- /example/ui-examples/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/icon.png -------------------------------------------------------------------------------- /example/ui-examples/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/assets/splash.png -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/DragIndicator.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | height: '$1', 8 | width: '$12', 9 | rounded: '$full', 10 | bg: '$backgroundLight400', 11 | _dark: { 12 | bg: '$backgroundDark500', 13 | }, 14 | }, 15 | {} 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/FlatList.tsx: -------------------------------------------------------------------------------- 1 | import { FlatList } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | FlatList, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/Icon.tsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import { styled } from '../../styled'; 3 | import { View } from 'react-native'; 4 | 5 | export default styled( 6 | View, 7 | { 8 | w: 16, 9 | h: 16, 10 | mx: '$2', 11 | _icon: { 12 | color: '$backgroundLight500', 13 | _dark: { 14 | color: '$backgroundDark400', 15 | }, 16 | }, 17 | }, 18 | { 19 | descendantStyle: ['_icon'], 20 | } 21 | ); 22 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/IndicatorWrapper.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | py: '$3', 8 | w: '100%', 9 | alignItems: 'center', 10 | }, 11 | {} 12 | ); 13 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/ItemText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontSize: '$md', 8 | fontFamily: '$body', 9 | fontWeight: '$normal', 10 | color: '$textLight800', 11 | _dark: { 12 | color: '$textDark100', 13 | }, 14 | }, 15 | { ancestorStyle: ['_text'] } 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | width: '100%', 8 | height: '100%', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/ScrollView.tsx: -------------------------------------------------------------------------------- 1 | import { ScrollView } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | ScrollView, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/SectionHeaderText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight500', 8 | fontSize: '$sm', 9 | fontFamily: '$body', 10 | fontWeight: '$bold', 11 | textTransform: 'uppercase', 12 | p: '$3', 13 | _dark: { 14 | color: '$textDark400', 15 | }, 16 | }, 17 | { 18 | ancestorStyle: ['_sectionHeaderBackground'], 19 | } 20 | ); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/SectionList.tsx: -------------------------------------------------------------------------------- 1 | import { SectionList } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | SectionList, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Actionsheet/styled-components/VirtualizedList.tsx: -------------------------------------------------------------------------------- 1 | import { VirtualizedList } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | VirtualizedList, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Alert/index.tsx: -------------------------------------------------------------------------------- 1 | import { createAlert } from '@gluestack-ui/alert'; 2 | import { Root, Text, Icon } from './styled-components'; 3 | export const Alert = createAlert({ 4 | Root, 5 | Text, 6 | Icon, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Alert/styled-components/Text.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | flex: 1, 8 | color: '$textLight700', 9 | fontWeight: '$normal', 10 | fontFamily: '$body', 11 | fontStyle: 'normal', 12 | fontSize: '$md', 13 | lineHeight: '$md', 14 | _dark: { 15 | color: '$textDark200', 16 | }, 17 | }, 18 | { ancestorStyle: ['_text'] } 19 | ); 20 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Alert/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Icon } from './Icon'; 3 | export { default as Text } from './Text'; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/AlertDialog/index.tsx: -------------------------------------------------------------------------------- 1 | import { createAlertDialog } from '@gluestack-ui/alert-dialog'; 2 | import { 3 | Root, 4 | Content, 5 | CloseButton, 6 | Header, 7 | Footer, 8 | Body, 9 | Backdrop, 10 | } from './styled-components'; 11 | import { styled } from '../styled'; 12 | 13 | export const AlertDialog = createAlertDialog({ 14 | Root, 15 | Content, 16 | CloseButton, 17 | Header, 18 | Footer, 19 | Body, 20 | Backdrop, 21 | //@ts-ignore 22 | AnimatePresence: styled.Component, 23 | }); 24 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/AlertDialog/styled-components/Body.tsx: -------------------------------------------------------------------------------- 1 | import { ScrollView } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | ScrollView, 6 | { 7 | padding: '$4', 8 | }, 9 | {} 10 | ); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/AlertDialog/styled-components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | p: '$4', 8 | flexDirection: 'row', 9 | justifyContent: 'flex-end', 10 | alignItems: 'center', 11 | flexWrap: 'wrap', 12 | borderTopWidth: 1, 13 | borderColor: '$borderLight300', 14 | 15 | _dark: { 16 | borderColor: '$borderDark700', 17 | }, 18 | }, 19 | {} 20 | ); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/AlertDialog/styled-components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | p: '$4', 8 | borderBottomWidth: 1, 9 | borderColor: '$borderLight300', 10 | justifyContent: 'space-between', 11 | alignItems: 'center', 12 | flexDirection: 'row', 13 | _dark: { 14 | borderColor: '$borderDark700', 15 | }, 16 | }, 17 | {} 18 | ); 19 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/AlertDialog/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Content } from './Content'; 3 | export { default as CloseButton } from './CloseButton'; 4 | export { default as Header } from './Header'; 5 | export { default as Footer } from './Footer'; 6 | export { default as Body } from './Body'; 7 | export { default as Backdrop } from './Backdrop'; 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | import { createAvatar } from '@gluestack-ui/avatar'; 2 | import { Root, Badge, Group, Image, FallbackText } from './styled-components'; 3 | 4 | export const Avatar = createAvatar({ 5 | Root, 6 | Badge, 7 | Group, 8 | Image, 9 | FallbackText, 10 | }); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Avatar/styled-components/Badge.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | w: '$5', 8 | h: '$5', 9 | bg: '$success500', 10 | borderRadius: '$full', 11 | position: 'absolute', 12 | right: 0, 13 | bottom: 0, 14 | borderColor: 'white', 15 | borderWidth: 2, 16 | }, 17 | { ancestorStyle: ['_badge'] } 18 | ); 19 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Avatar/styled-components/FallbackText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight0', 8 | fontFamily: '$body', 9 | fontWeight: '$semibold', 10 | fontSize: '$xl', 11 | overflow: 'hidden', 12 | textTransform: 'uppercase', 13 | _web: { 14 | cursor: 'default', 15 | }, 16 | }, 17 | { ancestorStyle: ['_text'] } 18 | ); 19 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Avatar/styled-components/Group.tsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import { View } from 'react-native'; 3 | import { styled } from '../../styled'; 4 | 5 | export default styled( 6 | View, 7 | { 8 | flexDirection: 'row-reverse', 9 | position: 'relative', 10 | _avatar: { 11 | ml: -10, 12 | }, 13 | }, 14 | { 15 | descendantStyle: ['_avatar'], 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Avatar/styled-components/Image.tsx: -------------------------------------------------------------------------------- 1 | import { Image } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Image, 6 | { 7 | w: '100%', 8 | h: '100%', 9 | borderRadius: '$full', 10 | position: 'absolute', 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Avatar/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Badge } from './Badge'; 3 | export { default as Group } from './Group'; 4 | export { default as Image } from './Image'; 5 | export { default as FallbackText } from './FallbackText'; 6 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Badge/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root, Icon, Text } from './styled-components'; 2 | 3 | const Badge: any = Root; 4 | Badge.Icon = Icon; 5 | Badge.Text = Text; 6 | 7 | type RootProps = React.ComponentProps; 8 | type IconProps = React.ComponentProps; 9 | type TextProps = React.ComponentProps; 10 | 11 | type IBadgeComponentType = ((props: RootProps) => JSX.Element) & { 12 | Icon: (props: IconProps) => JSX.Element; 13 | Text: (props: TextProps) => JSX.Element; 14 | }; 15 | 16 | const BadgeMain = Badge as IBadgeComponentType; 17 | 18 | export { BadgeMain as Badge }; 19 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Badge/styled-components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { AsForwarder } from '@gluestack-style/react'; 3 | 4 | export default styled( 5 | AsForwarder, 6 | {}, 7 | { 8 | ancestorStyle: ['_icon'], 9 | }, 10 | { 11 | propertyTokenMap: { 12 | stroke: 'colors', 13 | }, 14 | } 15 | ); 16 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Badge/styled-components/Text.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontWeight: '$medium', 8 | fontFamily: '$body', 9 | textTransform: 'uppercase', 10 | letterSpacing: '$md', 11 | }, 12 | { ancestorStyle: ['_text'] } 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Badge/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Text } from './Text'; 3 | export { default as Icon } from './Icon'; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Box/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root } from './styled-components'; 2 | 3 | export const Box = Root; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Box/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | {}, 7 | { 8 | // descendantStyle: ['_text'], 9 | } 10 | ); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Box/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { createButton } from '@gluestack-ui/button'; 2 | import { 3 | Root, 4 | Text, 5 | Group, 6 | GroupHSpacer, 7 | GroupVSpacer, 8 | Spinner, 9 | Icon, 10 | } from './styled-components'; 11 | 12 | export const Button = createButton({ 13 | Root, 14 | Text, 15 | Group, 16 | GroupHSpacer, 17 | GroupVSpacer, 18 | Spinner, 19 | Icon, 20 | }); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Button/styled-components/GroupHSpacer.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | variants: { 8 | space: { 9 | xs: { 10 | w: '$1', 11 | }, 12 | sm: { 13 | w: '$1.5', 14 | }, 15 | md: { 16 | w: '$2', 17 | }, 18 | lg: { 19 | w: '$3', 20 | }, 21 | xl: { 22 | w: '$4', 23 | }, 24 | }, 25 | }, 26 | }, 27 | { ancestorStyle: ['_groupHSpacer'] } 28 | ); 29 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Button/styled-components/GroupVSpacer.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | variants: { 8 | space: { 9 | xs: { 10 | h: '$1', 11 | }, 12 | sm: { 13 | h: '$1.5', 14 | }, 15 | md: { 16 | h: '$2', 17 | }, 18 | lg: { 19 | h: '$3', 20 | }, 21 | xl: { 22 | h: '$4', 23 | }, 24 | }, 25 | }, 26 | }, 27 | { ancestorStyle: ['_groupVSpacer'] } 28 | ); 29 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Button/styled-components/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { ActivityIndicator } from 'react-native'; 3 | 4 | export default styled( 5 | ActivityIndicator, 6 | {}, 7 | { ancestorStyle: ['_spinner'], resolveProps: ['color'] } 8 | ); 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Button/styled-components/Text.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight0', 8 | fontFamily: '$body', 9 | //@ts-ignore 10 | userSelect: 'none', 11 | }, 12 | { ancestorStyle: ['_text'], DEBUG: 'STYLEDBUTTONTEXT' } 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Button/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Group } from './Group'; 2 | export { default as Root } from './Root'; 3 | export { default as GroupHSpacer } from './GroupHSpacer'; 4 | export { default as GroupVSpacer } from './GroupVSpacer'; 5 | export { default as Spinner } from './Spinner'; 6 | export { default as Text } from './Text'; 7 | export { default as Icon } from './Icon'; 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Center/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root } from './styled-components'; 2 | 3 | export const Center = Root; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Center/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root, Indicator, Icon, Label, Group } from './styled-components'; 2 | import { createCheckbox } from '@gluestack-ui/checkbox'; 3 | 4 | export const Checkbox = createCheckbox({ 5 | Root, 6 | Indicator, 7 | Icon, 8 | Label, 9 | Group, 10 | }); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Checkbox/styled-components/Group.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Checkbox/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Group } from './Group'; 2 | export { default as Icon } from './Icon'; 3 | export { default as Indicator } from './Indicator'; 4 | export { default as Label } from './Label'; 5 | export { default as Root } from './Root'; 6 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Divider/index.tsx: -------------------------------------------------------------------------------- 1 | import Root from './styled-components/Root'; 2 | import { createDivider } from '@gluestack-ui/divider'; 3 | export const Divider = createDivider({ Root }); 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Divider/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | bg: '$backgroundLight200', 8 | _dark: { 9 | bg: '$backgroundLight800', 10 | }, 11 | variants: { 12 | orientation: { 13 | vertical: { 14 | width: '$px', 15 | height: '100%', 16 | }, 17 | horizontal: { 18 | height: '$px', 19 | width: '100%', 20 | }, 21 | }, 22 | }, 23 | defaultProps: { 24 | orientation: 'horizontal', 25 | }, 26 | }, 27 | {} 28 | ); 29 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Divider/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | import Root from './Root'; 2 | import { createDivider } from '@gluestack-ui/divider'; 3 | export const Divider = createDivider({ Root }); 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Fab/index.tsx: -------------------------------------------------------------------------------- 1 | import { createFab } from '@gluestack-ui/fab'; 2 | import { Root, Label, Icon } from './styled-components'; 3 | 4 | export const Fab = createFab({ Root, Label, Icon }); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Fab/styled-components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { AsForwarder } from '@gluestack-style/react'; 3 | 4 | export default styled( 5 | AsForwarder, 6 | {}, 7 | { 8 | ancestorStyle: ['_icon'], 9 | }, 10 | { 11 | propertyTokenMap: { 12 | stroke: 'colors', 13 | }, 14 | } 15 | ); 16 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Fab/styled-components/Label.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Text } from 'react-native'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight50', 8 | fontFamily: '$body', 9 | }, 10 | { ancestorStyle: ['_text'] } 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Fab/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Label } from './Label'; 3 | export { default as Icon } from './Icon'; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/index.tsx: -------------------------------------------------------------------------------- 1 | import { createFormControl } from '@gluestack-ui/form-control'; 2 | import { 3 | Root, 4 | Error, 5 | ErrorText, 6 | ErrorIcon, 7 | Label, 8 | LabelText, 9 | LabelAstrick, 10 | Helper, 11 | HelperText, 12 | } from './styled-components'; 13 | 14 | export const FormControl = createFormControl({ 15 | Root, 16 | Error, 17 | ErrorText, 18 | ErrorIcon, 19 | Label, 20 | LabelText, 21 | LabelAstrick, 22 | Helper, 23 | HelperText, 24 | }); 25 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/Error.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'row', 8 | justifyContent: 'flex-start', 9 | alignItems: 'center', 10 | mt: '$1', 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/ErrorIcon.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { AsForwarder } from '@gluestack-style/react'; 3 | 4 | export default styled( 5 | AsForwarder, 6 | { 7 | color: '$error700', 8 | _dark: { 9 | color: '$error400', 10 | }, 11 | h: '$4', 12 | w: '$4', 13 | }, 14 | { 15 | ancestorStyle: ['_icon'], 16 | }, 17 | { 18 | propertyTokenMap: { 19 | stroke: 'colors', 20 | }, 21 | } 22 | ); 23 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/ErrorText.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Text } from 'react-native'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontSize: '$xs', 8 | fontFamily: '$body', 9 | color: '$error700', 10 | ml: '$1', 11 | _dark: { 12 | color: '$error400', 13 | }, 14 | }, 15 | { ancestorStyle: ['_errorText'] } 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/Helper.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'row', 8 | justifyContent: 'flex-start', 9 | alignItems: 'center', 10 | mt: '$1', 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/HelperText.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Text } from 'react-native'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontSize: '$xs', 8 | fontFamily: '$body', 9 | color: '$textLight500', 10 | _dark: { 11 | color: '$textDark400', 12 | }, 13 | }, 14 | { ancestorStyle: ['_helperText'] } 15 | ); 16 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/Label.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'row', 8 | justifyContent: 'flex-start', 9 | alignItems: 'center', 10 | mb: '$1', 11 | }, 12 | { descendantStyle: ['_labelText'] } 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/LabelAstrick.tsx: -------------------------------------------------------------------------------- 1 | // import { Text } from '@gluestack-ui/ui'; 2 | import { styled } from '../../styled'; 3 | import { Text } from 'react-native'; 4 | export default styled( 5 | Text, 6 | { 7 | ml: '$1', 8 | color: '$error700', 9 | _dark: { 10 | color: '$error400', 11 | }, 12 | }, 13 | { ancestorStyle: ['_labelAstrick'] } 14 | ); 15 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/LabelText.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Text } from 'react-native'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontWeight: '$medium', 8 | fontFamily: '$body', 9 | color: '$textLight900', 10 | _dark: { 11 | color: '$textDark50', 12 | }, 13 | }, 14 | { ancestorStyle: ['_labelText'] } 15 | ); 16 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/FormControl/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Error } from './Error'; 3 | export { default as ErrorText } from './ErrorText'; 4 | export { default as ErrorIcon } from './ErrorIcon'; 5 | export { default as Label } from './Label'; 6 | export { default as LabelText } from './LabelText'; 7 | export { default as LabelAstrick } from './LabelAstrick'; 8 | export { default as Helper } from './Helper'; 9 | export { default as HelperText } from './HelperText'; 10 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/HStack/index.tsx: -------------------------------------------------------------------------------- 1 | import { createHStack } from '@gluestack-ui/hstack'; 2 | import { Root, Spacer } from './styled-components'; 3 | 4 | export const HStack = createHStack({ 5 | Root, 6 | Spacer, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/HStack/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'row', 8 | 9 | defaultProps: { 10 | space: 'md', 11 | }, 12 | }, 13 | {} 14 | ); 15 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/HStack/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Spacer } from './Spacer'; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Heading/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root as Heading } from './styled-components'; 2 | export { Heading }; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Heading/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/DarkTheme.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | const DarkThemeIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 16 16', 7 | d: 'M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15V1ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0Z', 8 | }); 9 | 10 | DarkThemeIcon.displayName = 'DarkThemeIcon'; 11 | 12 | export { DarkThemeIcon }; 13 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Delete.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | export const DeleteIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 24 24', 7 | d: 'M5.11111 19.7778C5.11111 21 6.11111 22 7.33333 22H16.2222C17.4444 22 18.4444 21 18.4444 19.7778V6.44444H5.11111V19.7778ZM19.5556 3.11111H15.6667L14.5556 2H9L7.88889 3.11111H4V5.33333H19.5556V3.11111Z', 8 | }); 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Hamburger.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | export const HamburgerIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 24 24', 7 | d: 'M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z', 8 | }); 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Minus.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | export const MinusIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 24 24', 7 | d: 'M22 10.5H2V13H22V10.5Z', 8 | }); 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Plus.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | const PlusIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 20 20', 7 | d: 'M10 3C10 2.72386 9.77614 2.5 9.5 2.5C9.22386 2.5 9 2.72386 9 3V9.5H2.5C2.22386 9.5 2 9.72386 2 10C2 10.2761 2.22386 10.5 2.5 10.5H9V17C9 17.2761 9.22386 17.5 9.5 17.5C9.77614 17.5 10 17.2761 10 17V10.5H16.5C16.7761 10.5 17 10.2761 17 10C17 9.72386 16.7761 9.5 16.5 9.5H10V3Z', 8 | }); 9 | 10 | PlusIcon.displayName = 'PlusIcon'; 11 | 12 | export { PlusIcon }; 13 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Remove.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createIcon } from '@gluestack-ui/icon'; 3 | import { Root } from '../styled-components'; 4 | import { Path } from 'react-native-svg'; 5 | 6 | export const RemoveIcon = createIcon({ 7 | Root, 8 | viewBox: '0 0 24 24', 9 | path: ( 10 | <> 11 | 18 | 19 | ), 20 | }); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Star.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import React from 'react'; 3 | import { Path } from 'react-native-svg'; 4 | import { Root } from '../styled-components'; 5 | 6 | const StarIcon: any = createIcon({ 7 | Root, 8 | viewBox: '0 0 24 24', 9 | path: ( 10 | <> 11 | 18 | 19 | ), 20 | }); 21 | 22 | StarIcon.displayName = 'StarIcon'; 23 | 24 | export { StarIcon }; 25 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/Theme.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | const ThemeIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 20 20', 7 | d: 'M10 3.5C13.866 3.5 17 6.63401 17 10.5C17 14.366 13.866 17.5 10 17.5V3.5ZM10 2.5C5.58172 2.5 2 6.08172 2 10.5C2 14.9183 5.58172 18.5 10 18.5C14.4183 18.5 18 14.9183 18 10.5C18 6.08172 14.4183 2.5 10 2.5Z', 8 | }); 9 | 10 | ThemeIcon.displayName = 'ThemeIcon'; 11 | 12 | export { ThemeIcon }; 13 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/Icons/WindowHeader.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '@gluestack-ui/icon'; 2 | import { Root } from '../styled-components'; 3 | 4 | const WindowHeaderIcon = createIcon({ 5 | Root, 6 | viewBox: '0 0 16 16', 7 | d: 'M3.5 1C2.11929 1 1 2.11929 1 3.5V12.5C1 13.8807 2.11929 15 3.5 15H12.5C13.8807 15 15 13.8807 15 12.5V3.5C15 2.11929 13.8807 1 12.5 1H3.5ZM5 2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H5V2Z', 8 | }); 9 | 10 | WindowHeaderIcon.displayName = 'WindowHeaderIcon'; 11 | 12 | export { WindowHeaderIcon }; 13 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { AsForwarder } from '@gluestack-style/react'; 2 | import { styled } from '../../styled'; 3 | 4 | const Comp: any = styled( 5 | AsForwarder, 6 | { 7 | props: { 8 | fill: 'none', 9 | }, 10 | }, 11 | { 12 | ancestorStyle: ['_icon'], 13 | }, 14 | { 15 | propertyTokenMap: { 16 | stroke: 'colors', 17 | }, 18 | } 19 | ); 20 | 21 | export default Comp; 22 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Icons/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Image/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root } from './styled-components'; 2 | 3 | export const Image = Root; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Image/styled-components/FallbackText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontFamily: '$body', 8 | color: '$blue900', 9 | bg: '$amber500', 10 | p: 10, 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Image/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Input/index.tsx: -------------------------------------------------------------------------------- 1 | import { createInput } from '@gluestack-ui/input'; 2 | import { Root, Icon, StyledInput } from './styled-components'; 3 | 4 | export const Input = createInput({ 5 | Root, 6 | Icon, 7 | Input: StyledInput, 8 | }); 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Input/styled-components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Pressable } from 'react-native'; 3 | 4 | export default styled( 5 | Pressable, 6 | { 7 | justifyContent: 'center', 8 | alignItems: 'center', 9 | _web: { 10 | ':disabled': { 11 | cursor: 'not-allowed', 12 | }, 13 | }, 14 | }, 15 | { descendantStyle: ['_icon'] } 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Input/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Icon } from './Icon'; 3 | export { default as StyledInput } from './Input'; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Link/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root, Text } from './styled-components'; 2 | import { createLink } from '@gluestack-ui/link'; 3 | 4 | export const Link = createLink({ 5 | Root, 6 | Text, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Link/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Text } from './Text'; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/index.tsx: -------------------------------------------------------------------------------- 1 | import { createMenu } from '@gluestack-ui/menu'; 2 | import { Root, Item, Label, Backdrop } from './styled-components'; 3 | import { styled } from '../styled'; 4 | export const Menu = createMenu({ 5 | Root, 6 | Item, 7 | Label, 8 | Backdrop, 9 | //@ts-ignore 10 | AnimatePresence: styled.Component, 11 | }); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Backdrop.tsx: -------------------------------------------------------------------------------- 1 | import { Pressable } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export const Backdrop = styled( 5 | Pressable, 6 | { 7 | position: 'absolute', 8 | top: 0, 9 | bottom: 0, 10 | left: 0, 11 | right: 0, 12 | opacity: 0.5, 13 | }, 14 | {} 15 | ); 16 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Content.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | w: 200, 8 | py: '$2', 9 | rounded: '$sm', 10 | bg: '$backgroundLight0', 11 | shadowColor: '$backgroundLight800', 12 | //@ts-ignore 13 | shadowOffset: { 14 | width: 0, 15 | height: 2, 16 | }, 17 | shadowOpacity: 0.25, 18 | shadowRadius: 3.84, 19 | elevation: 5, 20 | 21 | _dark: { 22 | bg: '$backgroundDark900', 23 | }, 24 | }, 25 | {} 26 | ); 27 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Group.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/GroupTitle.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontSize: '$xs', 8 | p: '$3', 9 | color: '$textLight500', 10 | fontWeight: '$medium', 11 | _dark: { 12 | color: '$textDark400', 13 | }, 14 | }, 15 | {} 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/ItemOption.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/ItemOptionIndicator.tsx: -------------------------------------------------------------------------------- 1 | import { Pressable } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(Pressable, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/ItemOptionLabel.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/OptionsGroup.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/Trigger.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Menu/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { Root } from './Root'; 2 | export { Item } from './Item'; 3 | export { Label } from './ItemLabel'; 4 | export { Backdrop } from './Backdrop'; 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Modal/index.tsx: -------------------------------------------------------------------------------- 1 | import { createModal } from '@gluestack-ui/modal'; 2 | import { 3 | Root, 4 | Content, 5 | CloseButton, 6 | Header, 7 | Footer, 8 | Body, 9 | Backdrop, 10 | } from './styled-components'; 11 | import { styled } from '../styled'; 12 | 13 | export const Modal = createModal({ 14 | Root, 15 | Content, 16 | CloseButton, 17 | Header, 18 | Footer, 19 | Body, 20 | Backdrop, 21 | //@ts-ignore 22 | AnimatePresence: styled.Component, 23 | }); 24 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Modal/styled-components/Body.tsx: -------------------------------------------------------------------------------- 1 | import { ScrollView } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | ScrollView, 6 | { 7 | padding: '$4', 8 | }, 9 | {} 10 | ); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Modal/styled-components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | p: '$4', 8 | flexDirection: 'row', 9 | justifyContent: 'flex-end', 10 | alignItems: 'center', 11 | flexWrap: 'wrap', 12 | borderTopWidth: 1, 13 | borderColor: '$borderLight300', 14 | 15 | _dark: { 16 | borderColor: '$borderDark700', 17 | }, 18 | }, 19 | {} 20 | ); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Modal/styled-components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | p: '$4', 8 | borderBottomWidth: 1, 9 | borderColor: '$borderLight300', 10 | justifyContent: 'space-between', 11 | alignItems: 'center', 12 | flexDirection: 'row', 13 | _dark: { 14 | borderColor: '$borderDark700', 15 | }, 16 | }, 17 | {} 18 | ); 19 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Modal/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Content } from './Content'; 3 | export { default as CloseButton } from './CloseButton'; 4 | export { default as Header } from './Header'; 5 | export { default as Footer } from './Footer'; 6 | export { default as Body } from './Body'; 7 | export { default as Backdrop } from './Backdrop'; 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Popover/index.tsx: -------------------------------------------------------------------------------- 1 | import { createPopover } from '@gluestack-ui/popover'; 2 | import { styled } from '../styled'; 3 | import { 4 | Root, 5 | Arrow, 6 | Content, 7 | Header, 8 | Footer, 9 | Body, 10 | Backdrop, 11 | CloseButton, 12 | } from './styled-components'; 13 | 14 | export const Popover = createPopover({ 15 | Root, 16 | Arrow, 17 | Content, 18 | Header, 19 | Footer, 20 | Body, 21 | Backdrop, 22 | CloseButton, 23 | //@ts-ignore 24 | AnimatePresence: styled.Component, 25 | }); 26 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Popover/styled-components/Arrow.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Popover/styled-components/Body.tsx: -------------------------------------------------------------------------------- 1 | import { ScrollView } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | ScrollView, 6 | { 7 | p: '$4', 8 | pt: '$2', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Popover/styled-components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | p: '$4', 8 | flexDirection: 'row', 9 | justifyContent: 'flex-end', 10 | alignItems: 'center', 11 | flexWrap: 'wrap', 12 | borderTopWidth: 1, 13 | borderColor: '$borderLight300', 14 | 15 | _dark: { 16 | borderColor: '$borderDark700', 17 | }, 18 | }, 19 | {} 20 | ); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Popover/styled-components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | p: '$4', 8 | pb: '$2', 9 | justifyContent: 'space-between', 10 | alignItems: 'center', 11 | flexDirection: 'row', 12 | _dark: { 13 | borderColor: '$borderDark700', 14 | }, 15 | }, 16 | {} 17 | ); 18 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Popover/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Content } from './Content'; 3 | export { default as CloseButton } from './CloseButton'; 4 | export { default as Header } from './Header'; 5 | export { default as Footer } from './Footer'; 6 | export { default as Body } from './Body'; 7 | export { default as Backdrop } from './Backdrop'; 8 | export { default as Arrow } from './Arrow'; 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Pressable/index.tsx: -------------------------------------------------------------------------------- 1 | import { Pressable } from './styled-components'; 2 | export { Pressable }; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Pressable/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Pressable } from 'react-native'; 3 | 4 | export default styled( 5 | Pressable, 6 | { 7 | _web: { 8 | ':focusVisible': { 9 | outlineWidth: '2px', 10 | outlineColor: '$primary700', 11 | outlineStyle: 'solid', 12 | _dark: { 13 | outlineColor: '$primary300', 14 | }, 15 | }, 16 | }, 17 | }, 18 | {} 19 | ); 20 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Pressable/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | import Root from './Root'; 2 | import { createPressable } from '@gluestack-ui/pressable'; 3 | export const Pressable = createPressable({ Root }); 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Progress/index.tsx: -------------------------------------------------------------------------------- 1 | import { createProgress } from '@gluestack-ui/progress'; 2 | import { Root, FilledTrack } from './styled-components'; 3 | 4 | export const Progress = createProgress({ 5 | Root, 6 | FilledTrack, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Progress/styled-components/FilledTrack.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | bg: '$primary500', 8 | borderRadius: '$full', 9 | _dark: { 10 | bg: '$primary400', 11 | }, 12 | }, 13 | { ancestorStyle: ['_filledTrack'] } 14 | ); 15 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Progress/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as FilledTrack } from './FilledTrack'; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Radio/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root, Group, Icon, Indicator, Label } from './styled-components'; 2 | import { createRadio } from '@gluestack-ui/radio'; 3 | 4 | export const Radio = createRadio({ 5 | Root, 6 | Group, 7 | Icon, 8 | Indicator, 9 | Label, 10 | }); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Radio/styled-components/Group.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Radio/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Group } from './Group'; 3 | export { default as Icon } from './Icon'; 4 | export { default as Indicator } from './Indicator'; 5 | export { default as Label } from './Label'; 6 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/DragIndicator.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | height: '$1', 8 | width: '$12', 9 | bg: '$backgroundLight400', 10 | rounded: '$full', 11 | _dark: { 12 | bg: '$backgroundDark500', 13 | }, 14 | }, 15 | {} 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/FlatList.tsx: -------------------------------------------------------------------------------- 1 | import { FlatList } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | FlatList, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/Icon.tsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import { styled } from '../../styled'; 3 | import { View } from 'react-native'; 4 | 5 | export default styled( 6 | View, 7 | { 8 | w: 16, 9 | h: 16, 10 | mx: '$2', 11 | _icon: { 12 | color: '$textLight900', 13 | _dark: { 14 | color: '$textDark50', 15 | }, 16 | }, 17 | }, 18 | { 19 | descendantStyle: ['_icon'], 20 | } 21 | ); 22 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/IndicatorWrapper.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | py: '$3', 8 | mt: -4, 9 | w: '100%', 10 | alignItems: 'center', 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/ItemText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | mx: '$2', 8 | fontSize: '$md', 9 | fontWeight: '$normal', 10 | color: '$textLight800', 11 | _dark: { 12 | color: '$textDark100', 13 | }, 14 | }, 15 | { ancestorStyle: ['_text'] } 16 | ); 17 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/Root.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | width: '100%', 8 | height: '100%', 9 | justifyContent: 'flex-end', 10 | alignItems: 'center', 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/ScrollView.tsx: -------------------------------------------------------------------------------- 1 | import { ScrollView } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | ScrollView, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/SectionHeaderText.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight500', 8 | fontSize: '$sm', 9 | fontWeight: '$bold', 10 | textTransform: 'uppercase', 11 | p: '$3', 12 | _dark: { 13 | color: '$textDark400', 14 | }, 15 | }, 16 | { 17 | ancestorStyle: ['_sectionHeaderBackground'], 18 | } 19 | ); 20 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/SectionList.tsx: -------------------------------------------------------------------------------- 1 | import { SectionList } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | SectionList, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components-actionsheet/VirtualizedList.tsx: -------------------------------------------------------------------------------- 1 | import { VirtualizedList } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | VirtualizedList, 6 | { 7 | w: '$full', 8 | h: 'auto', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components/Input.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { TextInput } from 'react-native'; 3 | 4 | export default styled( 5 | TextInput, 6 | { 7 | _web: { 8 | w: '$full', 9 | }, 10 | flex: 1, 11 | color: '$textLight900', 12 | props: { 13 | placeholderTextColor: '$textLight400', 14 | }, 15 | _dark: { 16 | color: '$textDark50', 17 | props: { 18 | placeholderTextColor: '$textDark600', 19 | }, 20 | }, 21 | }, 22 | { ancestorStyle: ['_input'], resolveProps: ['placeholderTextColor'] }, 23 | { 24 | propertyTokenMap: { 25 | placeholderTextColor: 'colors', 26 | }, 27 | } 28 | ); 29 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | // TODO: style will be changed in review of select 8 | // w: '$full', 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Select/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Icon } from './Icon'; 3 | export { default as Trigger } from './Trigger'; 4 | export { default as Input } from './Input'; 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Slider/index.tsx: -------------------------------------------------------------------------------- 1 | import { createSlider } from '@gluestack-ui/slider'; 2 | 3 | import { 4 | Root, 5 | Thumb, 6 | Track, 7 | FilledTrack, 8 | ThumbInteraction, 9 | } from './styled-components'; 10 | 11 | export const Slider = createSlider({ 12 | Root, 13 | Thumb, 14 | Track, 15 | FilledTrack, 16 | ThumbInteraction, 17 | }); 18 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Slider/styled-components/ThumbInteraction.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | borderRadius: 9999, 8 | zIndex: -1, 9 | }, 10 | {} 11 | ); 12 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Slider/styled-components/Track.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Pressable } from 'react-native'; 3 | 4 | export default styled( 5 | Pressable, 6 | { 7 | // h: '100%', 8 | // w: '100%', 9 | bg: '$red500', 10 | _dark: { 11 | bg: '$backgroundDark700', 12 | }, 13 | borderRadius: '$lg', 14 | overflow: 'hidden', 15 | 16 | variants: { 17 | variant: { 18 | horizontal: { 19 | width: '100%', 20 | }, 21 | vertical: { 22 | height: '100%', 23 | }, 24 | }, 25 | }, 26 | }, 27 | { 28 | ancestorStyle: ['_track'], 29 | } 30 | ); 31 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Slider/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Thumb } from './Thumb'; 3 | export { default as Track } from './Track'; 4 | export { default as FilledTrack } from './FilledTrack'; 5 | export { default as ThumbInteraction } from './ThumbInteraction'; 6 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Spinner/index.tsx: -------------------------------------------------------------------------------- 1 | import { createSpinner } from '@gluestack-ui/spinner'; 2 | import { Root } from './styled-components'; 3 | 4 | export const Spinner = createSpinner({ Root }); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Spinner/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { ActivityIndicator } from 'react-native'; 3 | 4 | export default styled( 5 | ActivityIndicator, 6 | { 7 | props: { 8 | color: '$primary500', 9 | }, 10 | _dark: { 11 | props: { 12 | color: '$primary400', 13 | }, 14 | }, 15 | }, 16 | { 17 | resolveProps: ['color'], 18 | }, 19 | { 20 | propertyTokenMap: { 21 | size: 'size', 22 | }, 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Spinner/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Switch/index.tsx: -------------------------------------------------------------------------------- 1 | import { createSwitch } from '@gluestack-ui/switch'; 2 | import { Root } from './styled-components'; 3 | 4 | export const Switch = createSwitch({ 5 | Root, 6 | }); 7 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Switch/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/index.tsx: -------------------------------------------------------------------------------- 1 | import { createTabs } from '@gluestack-ui/tabs'; 2 | import { 3 | Root, 4 | Tab, 5 | TabPanels, 6 | TabPanel, 7 | TabList, 8 | TabTitle, 9 | TabIcon, 10 | } from './styled-components'; 11 | 12 | export const Tabs = createTabs({ 13 | Root, 14 | Tab, 15 | TabPanels, 16 | TabPanel, 17 | TabList, 18 | TabTitle, 19 | TabIcon, 20 | }); 21 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/TabIcon.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | alignItems: 'center', 8 | justifyContent: 'center', 9 | display: 'flex', 10 | mr: 12, 11 | }, 12 | { ancestorStyle: ['_icon'] } 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/TabList.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'row', 8 | alignSelf: 'flex-start', 9 | // bg: 'radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%) , rgba(255, 255, 255, 0.04);', 10 | rounded: '$full', 11 | }, 12 | { descendantStyle: ['_tab'] } 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/TabPanel.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/TabPanels.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled(View, {}, {}); 5 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/TabTitle.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { Text } from 'react-native'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | fontFamily: '$body', 8 | }, 9 | { ancestorStyle: ['_title'] } 10 | ); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tabs/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Tab } from './Tab'; 3 | export { default as TabList } from './TabList'; 4 | export { default as TabPanel } from './TabPanel'; 5 | export { default as TabPanels } from './TabPanels'; 6 | export { default as TabTitle } from './TabTitle'; 7 | export { default as TabIcon } from './TabIcon'; 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Text/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root as Text } from './styled-components'; 2 | export { Text }; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Text/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Textarea/index.tsx: -------------------------------------------------------------------------------- 1 | import { createTextArea } from '@gluestack-ui/textarea'; 2 | import { Root, Input } from './styled-components'; 3 | 4 | export const Textarea = createTextArea({ 5 | Root, 6 | Input, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Textarea/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Input } from './Input'; 2 | export { default as Root } from './Root'; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Toast/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root, Title, Description } from './styled-components'; 2 | import { createToast, createToastHook } from '@gluestack-ui/toast'; 3 | 4 | export const useToast = createToastHook(); 5 | 6 | export const Toast = createToast({ 7 | Root, 8 | Title, 9 | Description, 10 | }); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Toast/styled-components/Description.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight700', 8 | _dark: { 9 | color: '$textDark200', 10 | }, 11 | fontWeight: '$normal', 12 | fontFamily: '$body', 13 | fontStyle: 'normal', 14 | fontSize: '$sm', 15 | }, 16 | { ancestorStyle: ['_text'] } 17 | ); 18 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Toast/styled-components/Title.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import { styled } from '../../styled'; 3 | 4 | export default styled( 5 | Text, 6 | { 7 | color: '$textLight900', 8 | _dark: { 9 | color: '$textDark50', 10 | }, 11 | fontWeight: '$medium', 12 | fontFamily: '$body', 13 | fontSize: '$md', 14 | lineHeight: '$md', 15 | }, 16 | { ancestorStyle: ['_text'] } 17 | ); 18 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Toast/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Title } from './Title'; 3 | export { default as Description } from './Description'; 4 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | import { Root, Content } from './styled-components'; 2 | import { createTooltip } from '@gluestack-ui/tooltip'; 3 | import { styled } from '../styled'; 4 | 5 | export const Tooltip = createTooltip({ 6 | Root, 7 | Content, 8 | //@ts-ignore 9 | AnimatePresence: styled.Component, 10 | }); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tooltip/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | width: '100%', 8 | }, 9 | {} 10 | ); 11 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/Tooltip/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Content } from './Content'; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/VStack/index.tsx: -------------------------------------------------------------------------------- 1 | import { createVStack } from '@gluestack-ui/vstack'; 2 | import { Root, Spacer } from './styled-components'; 3 | 4 | export const VStack = createVStack({ 5 | Root, 6 | Spacer, 7 | }); 8 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/VStack/styled-components/Root.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled'; 2 | import { View } from 'react-native'; 3 | 4 | export default styled( 5 | View, 6 | { 7 | flexDirection: 'column', 8 | defaultProps: { 9 | space: 'md', 10 | }, 11 | }, 12 | {} 13 | ); 14 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/VStack/styled-components/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Root } from './Root'; 2 | export { default as Spacer } from './Spacer'; 3 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/gluestack-ui-provider/index.tsx: -------------------------------------------------------------------------------- 1 | import { createProvider } from '@gluestack-ui/provider'; 2 | import { StyledProvider } from '@gluestack-style/react'; 3 | 4 | const Provider = createProvider({ 5 | StyledProvider, 6 | }); 7 | 8 | export { Provider as GluestackUIProvider }; 9 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/core/styled/index.tsx: -------------------------------------------------------------------------------- 1 | export { styled } from '@gluestack-style/react'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/gluestack-ui-components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './core'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/kitchensink-components/WebSidebar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box } from '../gluestack-ui-components'; 3 | import Sidebar from './Sidebar'; 4 | 5 | const WebSidebar = React.memo(() => { 6 | return ( 7 | 22 | {/* common sidebar contents for web and mobile */} 23 | 24 | 25 | ); 26 | }); 27 | export default WebSidebar; 28 | -------------------------------------------------------------------------------- /example/ui-examples/readme.md: -------------------------------------------------------------------------------- 1 | ### This repository contains source code of all the examples that are shown on website 2 | -------------------------------------------------------------------------------- /example/ui-examples/styles/index.ts: -------------------------------------------------------------------------------- 1 | // Intentionally left empty 2 | export {}; 3 | -------------------------------------------------------------------------------- /example/ui-examples/styles/index.web.ts: -------------------------------------------------------------------------------- 1 | import './main.css'; 2 | -------------------------------------------------------------------------------- /example/ui-examples/styles/main.css: -------------------------------------------------------------------------------- 1 | /* styles.css */ 2 | 3 | body { 4 | overflow: hidden; 5 | height: 100%; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 6px; 10 | height: 8px; 11 | } 12 | 13 | ::-webkit-scrollbar-corner, 14 | ::-webkit-scrollbar-track { 15 | background: transparent; 16 | } 17 | 18 | .gs-dark ::-webkit-scrollbar-thumb { 19 | background-color: #525252; 20 | border-radius: 20px; 21 | border: 3px solid transparent; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-color: #dbdbdb; 26 | border-radius: 20px; 27 | border: 3px solid transparent; 28 | } 29 | 30 | ::-webkit-scrollbar-corner, 31 | ::-webkit-scrollbar-track { 32 | background: transparent; 33 | } 34 | -------------------------------------------------------------------------------- /example/ui-examples/timing.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/example/ui-examples/timing.ts -------------------------------------------------------------------------------- /img/dank-dark-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/img/dank-dark-mode.png -------------------------------------------------------------------------------- /img/dank-light-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/img/dank-light-mode.png -------------------------------------------------------------------------------- /img/dank-logo-readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/img/dank-logo-readme.png -------------------------------------------------------------------------------- /packages/animation-legend-motion-driver/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # misc 9 | .DS_Store 10 | *.pem 11 | 12 | # build 13 | dist 14 | lib 15 | 16 | # debug 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | # local env files 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | # turbo 28 | .turbo 29 | -------------------------------------------------------------------------------- /packages/animation-legend-motion-driver/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /packages/animation-legend-motion-driver/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @gluestack-style/animation-plugin 2 | 3 | ## 0.1.7 4 | 5 | ### Patch Changes 6 | 7 | - - Fixed transform array resoltion 8 | 9 | ## 0.1.0 10 | 11 | ### Changes 12 | 13 | - Fix forward ref warning 14 | - Fixed variant resolution 15 | - Moved @gluestack-style/react to devDependency 16 | - Add legend motion dependency 17 | - Add variant support 18 | -------------------------------------------------------------------------------- /packages/animation-legend-motion-driver/README.md: -------------------------------------------------------------------------------- 1 | # @gluestack-style/legend-motion-animation-driver 2 | 3 | ## Installation 4 | 5 | To use `@gluestack-style/legend-motion-animation-driver`, all you need to do is install the 6 | `@gluestack-style/legend-motion-animation-driver` package: 7 | 8 | ```sh 9 | $ yarn add @gluestack-style/legend-motion-animation-driver 10 | 11 | # or 12 | 13 | $ npm i @gluestack-style/legend-motion-animation-driver 14 | ``` 15 | 16 | ## Usage 17 | 18 | More guides on how to get started are available 19 | [here](https://gluestack.io/style). 20 | -------------------------------------------------------------------------------- /packages/animation-legend-motion-driver/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | process.env.NODE_ENV !== 'production' 7 | ? [ 8 | 'module-resolver', 9 | { 10 | alias: { 11 | // For development, we want to alias the library to the source 12 | ['@gluestack-style/react']: path.join( 13 | __dirname, 14 | '../react/src/index' 15 | ), 16 | }, 17 | }, 18 | ] 19 | : ['transform-remove-console'], 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/animation-moti-driver/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # misc 9 | .DS_Store 10 | *.pem 11 | 12 | # build 13 | dist 14 | lib 15 | 16 | # debug 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | # local env files 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | # turbo 28 | .turbo 29 | -------------------------------------------------------------------------------- /packages/animation-moti-driver/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /packages/animation-moti-driver/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @gluestack-style/animation-plugin 2 | 3 | ## 0.1.7 4 | 5 | ### Patch Changes 6 | 7 | - - Fixed transform array resoltion 8 | 9 | ## 0.1.0 10 | 11 | ### Changes 12 | 13 | - Fix forward ref warning 14 | - Fixed variant resolution 15 | - Moved @gluestack-style/react to devDependency 16 | - Add legend motion dependency 17 | - Add variant support 18 | -------------------------------------------------------------------------------- /packages/animation-moti-driver/README.md: -------------------------------------------------------------------------------- 1 | # @gluestack-style/moti-animation-driver 2 | 3 | ## Installation 4 | 5 | To use `@gluestack-style/moti-animation-driver`, all you need to do is install the 6 | `@gluestack-style/moti-animation-driver` package: 7 | 8 | ```sh 9 | $ yarn add @gluestack-style/moti-animation-driver 10 | 11 | # or 12 | 13 | $ npm i @gluestack-style/moti-animation-driver 14 | ``` 15 | 16 | ## Usage 17 | 18 | More guides on how to get started are available 19 | [here](https://gluestack.io/style). 20 | -------------------------------------------------------------------------------- /packages/animation-moti-driver/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | process.env.NODE_ENV !== 'production' 7 | ? [ 8 | 'module-resolver', 9 | { 10 | alias: { 11 | // For development, we want to alias the library to the source 12 | ['@gluestack-style/react']: path.join( 13 | __dirname, 14 | '../react/src/index' 15 | ), 16 | }, 17 | }, 18 | ] 19 | : ['transform-remove-console'], 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/animation-resolver/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # misc 9 | .DS_Store 10 | *.pem 11 | 12 | # build 13 | dist 14 | lib 15 | 16 | # debug 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | # local env files 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | # turbo 28 | .turbo 29 | -------------------------------------------------------------------------------- /packages/animation-resolver/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /packages/animation-resolver/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @gluestack-style/animation-plugin 2 | 3 | ## 0.1.7 4 | 5 | ### Patch Changes 6 | 7 | - - Fixed transform array resoltion 8 | 9 | ## 0.1.0 10 | 11 | ### Changes 12 | 13 | - Fix forward ref warning 14 | - Fixed variant resolution 15 | - Moved @gluestack-style/react to devDependency 16 | - Add legend motion dependency 17 | - Add variant support 18 | -------------------------------------------------------------------------------- /packages/animation-resolver/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | process.env.NODE_ENV !== 'production' 7 | ? [ 8 | 'module-resolver', 9 | { 10 | alias: { 11 | // For development, we want to alias the library to the source 12 | ['@gluestack-style/react']: path.join( 13 | __dirname, 14 | '../react/src/index' 15 | ), 16 | }, 17 | }, 18 | ] 19 | : ['transform-remove-console'], 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/babel-plugin-styled-resolver/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "module:metro-react-native-babel-preset" 4 | ] 5 | // "plugins": ["transform-remove-console"] 6 | } -------------------------------------------------------------------------------- /packages/babel-plugin-styled-resolver/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # misc 9 | .DS_Store 10 | *.pem 11 | 12 | # build 13 | dist 14 | lib 15 | 16 | # debug 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | # local env files 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | # turbo 28 | .turbo 29 | -------------------------------------------------------------------------------- /packages/babel-plugin-styled-resolver/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /packages/babel-plugin-styled-resolver/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @gluestack-style/babel-plugin-styled-resolver 2 | 3 | ## 1.0.2 4 | 5 | ### Patch Changes 6 | 7 | - Added dynamic config resolution [PR](https://github.com/gluestack/gluestack-style/pull/550) 8 | 9 | ## 1.0.1 10 | 11 | ### Features 12 | 13 | - Added utility props resolution [PR](https://github.com/gluestack/gluestack-style/pull/519) 14 | 15 | ## 0.1.14 16 | 17 | ### Patch Changes 18 | 19 | - Fixes 20 | 21 | - Support for `createConfig` API. 22 | 23 | ## 0.1.0 24 | 25 | ## Features 26 | 27 | - Add path based resolution 28 | - Add library name alias 29 | - Add support for styled function aliasing 30 | -------------------------------------------------------------------------------- /packages/babel-plugin-styled-resolver/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = function (api) { 4 | api.cache(true); 5 | return { 6 | presets: ['babel-preset-expo'], 7 | plugins: [ 8 | // process.env.NODE_ENV !== 'production' 9 | // ? [ 10 | // 'module-resolver', 11 | // { 12 | // alias: { 13 | // // For development, we want to alias the library to the source 14 | // // ['@gluestack/ui-styled']: path.join(__dirname, '../styled/src'), 15 | // }, 16 | // }, 17 | // ] 18 | // : ['transform-remove-console'], 19 | ], 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /packages/benchmark-native/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /packages/benchmark-native/TestComp.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pressable } from 'react-native'; 3 | 4 | // const ButtonStyled = styled( 5 | // Pressable, 6 | // { 7 | // baseStyle: { 8 | // style: { 9 | // bg: '$red500', 10 | // w: '$10', 11 | // h: '$10', 12 | // }, 13 | // }, 14 | // }, 15 | // {} 16 | // ); 17 | 18 | const TestComp = () => { 19 | return ; 20 | }; 21 | 22 | export default TestComp; 23 | -------------------------------------------------------------------------------- /packages/benchmark-native/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/packages/benchmark-native/assets/adaptive-icon.png -------------------------------------------------------------------------------- /packages/benchmark-native/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/packages/benchmark-native/assets/favicon.png -------------------------------------------------------------------------------- /packages/benchmark-native/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/packages/benchmark-native/assets/icon.png -------------------------------------------------------------------------------- /packages/benchmark-native/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/packages/benchmark-native/assets/splash.png -------------------------------------------------------------------------------- /packages/benchmark-native/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /packages/benchmark-next/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | .now 15 | 16 | # production 17 | build 18 | lib 19 | dist 20 | storybook-static 21 | .rpt2_cache 22 | .cache 23 | 24 | # misc 25 | .DS_Store 26 | .firebase 27 | .firebaserc 28 | *.tsbuildinfo 29 | 30 | # debug 31 | npm-debug.log* 32 | yarn-debug.log* 33 | yarn-error.log* 34 | 35 | # local env files 36 | .env.local 37 | .env.development.local 38 | .env.test.local 39 | .env.production.local 40 | 41 | # logs 42 | npm-debug.log* 43 | yarn-debug.log* 44 | yarn-error.log* 45 | firebase-debug.log* 46 | -------------------------------------------------------------------------------- /packages/benchmark-next/README.md: -------------------------------------------------------------------------------- 1 | Make sure to run in production mode. 2 | -------------------------------------------------------------------------------- /packages/benchmark-next/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const myBabel = require('@gluestack-style/babel-plugin-styled-resolver'); 3 | module.exports = function (api) { 4 | api.cache(true); 5 | return { 6 | presets: ['babel-preset-next', '@babel/preset-typescript'], 7 | plugins: [ 8 | process.env.NODE_ENV !== 'production' 9 | ? [myBabel] 10 | : ['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }], 11 | ['@babel/plugin-transform-flow-strip-types'], 12 | ], 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/create-and-mount-button/baseline.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TestComponentProps, TestRunner } from '../TestRunner'; 3 | // import { css } from '../utils/stitches-core-v025.config'; 4 | import { buttonStyles } from '../utils/buttonStyles'; 5 | 6 | /** This test aims to measure the baseline of just using React with vanilla CSS techniques (no CSS-in-JS) */ 7 | const Test = ({ testIndex }: TestComponentProps) => { 8 | return ; 9 | }; 10 | 11 | const StitchesTest = () => { 12 | return ; 13 | }; 14 | 15 | export default StitchesTest; 16 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/create-and-mount-text/baseline.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TestComponentProps, TestRunner } from '../TestRunner'; 3 | // import { css } from '../utils/stitches-core-v025.config'; 4 | import { buttonStyles } from '../utils/buttonStyles'; 5 | 6 | /** This test aims to measure the baseline of just using React with vanilla CSS techniques (no CSS-in-JS) */ 7 | const Test = ({ testIndex }: TestComponentProps) => { 8 | return
testing
; 9 | }; 10 | 11 | const StitchesTest = () => { 12 | return ; 13 | }; 14 | 15 | export default StitchesTest; 16 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/create-and-mount-text/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TestComponentProps, TestRunner } from '../TestRunner'; 3 | import { NativeBaseProvider, Text } from 'native-base'; 4 | 5 | const Test = ({}: // testIndex 6 | TestComponentProps) => { 7 | return ( 8 | 9 | Hello nbv3 text 10 | 11 | ); 12 | }; 13 | 14 | const StitchesTest = () => { 15 | return ; 16 | }; 17 | 18 | export default StitchesTest; 19 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/create-and-mount-text/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TestComponentProps, TestRunner } from '../TestRunner'; 3 | import { Text } from 'react-native'; 4 | 5 | const Test = ({}: // testIndex 6 | TestComponentProps) => { 7 | return Hello styled button; 8 | }; 9 | 10 | const StitchesTest = () => { 11 | return ; 12 | }; 13 | 14 | export default StitchesTest; 15 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/create-and-mount-text/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TestComponentProps, TestRunner } from '../TestRunner'; 3 | import { Text } from 'react-native'; 4 | import { styled } from '@gluestack-style/react'; 5 | 6 | const StyledText = styled(Text, {}, {}, {}); 7 | 8 | const Test = ({}: // testIndex 9 | TestComponentProps) => { 10 | return Hello styled button; 11 | }; 12 | 13 | const StitchesTest = () => { 14 | return ; 15 | }; 16 | 17 | export default StitchesTest; 18 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/utils/createId.ts: -------------------------------------------------------------------------------- 1 | import { customAlphabet } from 'nanoid'; 2 | 3 | const library = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; 4 | export const createId = customAlphabet(library, 19); 5 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/utils/stitches-core-v025.config.ts: -------------------------------------------------------------------------------- 1 | import { createCss } from '@stitches/core-v025'; 2 | import { config, darkThemeConfig } from './stitches-default-config-v025'; 3 | 4 | export const { css, theme, getCssString, global, keyframes } = createCss(config); 5 | 6 | export const darkTheme = theme('dark-theme', darkThemeConfig); 7 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/utils/stitches-core-vc17.config.ts: -------------------------------------------------------------------------------- 1 | import { createStitches } from '@stitches/core-vc17'; 2 | import { config, darkThemeConfig } from './stitches-default-config-vc17'; 3 | 4 | export const { css, createTheme, getCssText, globalCss, keyframes, theme } = createStitches(config); 5 | 6 | export const darkTheme = createTheme('dark-theme', darkThemeConfig); 7 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/utils/stitches-react-v025.config.ts: -------------------------------------------------------------------------------- 1 | import { createCss } from '@stitches/react-v025'; 2 | import { config, darkThemeConfig } from './stitches-default-config-v025'; 3 | 4 | export const { css, theme, getCssString, global, keyframes, styled } = createCss(config); 5 | 6 | export const darkTheme = theme('dark-theme', darkThemeConfig); 7 | -------------------------------------------------------------------------------- /packages/benchmark-next/bench/utils/stitches-react-vc17.config.ts: -------------------------------------------------------------------------------- 1 | import { createStitches } from '@stitches/react-vc17'; 2 | import { config, darkThemeConfig } from './stitches-default-config-vc17'; 3 | 4 | export const { css, createTheme, getCssText, globalCss, keyframes, styled, theme } = createStitches(config); 5 | 6 | export const darkTheme = createTheme('dark-theme', darkThemeConfig); 7 | -------------------------------------------------------------------------------- /packages/benchmark-next/ds/box.tsx: -------------------------------------------------------------------------------- 1 | export const box = { 2 | boxSizing: 'border-box', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/benchmark-next/ds/code.tsx: -------------------------------------------------------------------------------- 1 | export const code = { 2 | fontFamily: '$mono', 3 | fontSize: 'max(12px, 85%)', 4 | whiteSpace: 'nowrap', 5 | padding: '0 3px 2px 3px', 6 | 7 | variants: { 8 | variant: { 9 | gray: { 10 | backgroundColor: '$slate3', 11 | color: '$slate11', 12 | }, 13 | violet: { 14 | backgroundColor: '$violet3', 15 | color: '$violet11', 16 | }, 17 | }, 18 | }, 19 | defaultVariants: { 20 | variant: 'violet', 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /packages/benchmark-next/ds/container.tsx: -------------------------------------------------------------------------------- 1 | export const container = { 2 | // Reset 3 | boxSizing: 'border-box', 4 | flexShrink: 0, 5 | 6 | // Custom 7 | ml: 'auto', 8 | mr: 'auto', 9 | px: '$5', 10 | 11 | variants: { 12 | size: { 13 | '1': { 14 | maxWidth: '430px', 15 | }, 16 | '2': { 17 | maxWidth: '715px', 18 | }, 19 | '3': { 20 | maxWidth: '1145px', 21 | }, 22 | '4': { 23 | maxWidth: 'none', 24 | }, 25 | }, 26 | }, 27 | defaultVariants: { 28 | size: '4', 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /packages/benchmark-next/ds/section.tsx: -------------------------------------------------------------------------------- 1 | export const section = { 2 | // Reset 3 | boxSizing: 'border-box', 4 | flexShrink: 0, 5 | '&::before': { 6 | boxSizing: 'border-box', 7 | content: '""', 8 | }, 9 | '&::after': { 10 | boxSizing: 'border-box', 11 | content: '""', 12 | }, 13 | 14 | variants: { 15 | size: { 16 | '1': { 17 | py: '$3', 18 | }, 19 | '2': { 20 | py: '$5', 21 | }, 22 | '3': { 23 | py: '$9', 24 | }, 25 | }, 26 | }, 27 | defaultVariants: { 28 | size: '3', 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /packages/benchmark-next/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | function MyApp({ Component, pageProps }: any) { 2 | return ; 3 | } 4 | 5 | export default MyApp; 6 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/change-a-variant/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/nativebase-v3'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/react-native-web'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/stitches-core-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/stitches-core-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/stitches-core-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/stitches-core-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/change-a-variant/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-a-variant/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-a-variant/ui-styled'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/baseline.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const BaselineTest = dynamic(() => import('../../bench/change-css-prop/baseline'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/change-css-prop/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/change-css-prop/nativebase-v3'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/change-css-prop/react-native-web'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/stitches-core-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-css-prop/stitches-core-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/stitches-core-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-css-prop/stitches-core-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-css-prop/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/change-css-prop/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/change-css-prop/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/change-css-prop/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/change-css-prop/ui-styled'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/baseline.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const BaselineTest = dynamic(() => import('../../bench/create-and-mount-button/baseline'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/complex-ui-styled-button-example.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic( 5 | () => import('../../bench/create-and-mount-button/complex-ui-styled-button-example'), 6 | { 7 | ssr: false, 8 | } 9 | ); 10 | 11 | return ; 12 | }; 13 | 14 | export default CreateAndMountComponent; 15 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/create-and-mount-button/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic(() => import('../../bench/create-and-mount-button/nativebase-v3'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic(() => import('../../bench/create-and-mount-button/react-native-web'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/stitches-core-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-button/stitches-core-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/stitches-core-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-button/stitches-core-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-button/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-button/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/create-and-mount-button/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-button/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic(() => import('../../bench/create-and-mount-button/ui-styled'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/baseline.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const BaselineTest = dynamic(() => import('../../bench/create-and-mount-text/baseline'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/create-and-mount-text/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic(() => import('../../bench/create-and-mount-text/nativebase-v3'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic(() => import('../../bench/create-and-mount-text/react-native-web'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/stitches-core-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-text/stitches-core-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/stitches-core-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-text/stitches-core-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-text/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-and-mount-text/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const SCTest = dynamic(() => import('../../bench/create-and-mount-text/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-and-mount-text/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const DankStyleStyledTest = dynamic(() => import('../../bench/create-and-mount-text/ui-styled'), { 5 | ssr: false, 6 | }); 7 | 8 | return ; 9 | }; 10 | 11 | export default CreateAndMountComponent; 12 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-theme/index.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |
    7 |
  • 8 | Stitches React v0.2.5 9 |
    • 10 |
  • 11 | Stitches React v1.0.0-canary.17 12 |
    • 13 |
14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-theme/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-theme/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/create-theme/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const CreateAndMountComponent = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/create-theme/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default CreateAndMountComponent; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/full-render-manual-test/emotion.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from '@emotion/styled'; 3 | 4 | const Box: any = styled('div')((props: any) => ({ 5 | display: 'inline-block', 6 | width: 100, 7 | height: 100, 8 | backgroundColor: '$gray400', 9 | textAlign: 'center', 10 | lineHeight: 1, 11 | fontSize: 100, 12 | ...props.css, 13 | })); 14 | 15 | export default function App() { 16 | return ( 17 | <> 18 |

Emotion

19 | {Array(500) 20 | .fill(1) 21 | .map((_, i) => ( 22 | 23 | {i} 24 | 25 | ))} 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/full-render-manual-test/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled } from '../../bench/utils/stitches-react-v025.config'; 3 | 4 | const Box = styled('div', { 5 | display: 'inline-block', 6 | width: 100, 7 | height: 100, 8 | backgroundColor: '$gray400', 9 | textAlign: 'center', 10 | lineHeight: 1, 11 | fontSize: 100, 12 | }); 13 | 14 | export default function App() { 15 | return ( 16 | <> 17 |

CSSOM

18 | {Array(1000) 19 | .fill(1) 20 | .map((_, i) => ( 21 | 22 | {i} 23 | 24 | ))} 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/full-render-manual-test/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled } from '../../bench/utils/stitches-react-v025.config'; 3 | 4 | const Box = styled('div', { 5 | display: 'inline-block', 6 | width: 100, 7 | height: 100, 8 | backgroundColor: '$gray400', 9 | textAlign: 'center', 10 | lineHeight: 1, 11 | fontSize: 100, 12 | }); 13 | 14 | export default function App() { 15 | return ( 16 | <> 17 |

CSSOM

18 | {Array(1000) 19 | .fill(1) 20 | .map((_, i) => ( 21 | 22 | {i} 23 | 24 | ))} 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/full-render-manual-test/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Box: any = styled('div')((props: any) => ({ 5 | display: 'inline-block', 6 | width: 100, 7 | height: 100, 8 | backgroundColor: '$gray400', 9 | textAlign: 'center', 10 | lineHeight: 1, 11 | fontSize: 100, 12 | ...props.css, 13 | })); 14 | 15 | export default function App() { 16 | return ( 17 | <> 18 |

styled-components

19 | {Array(500) 20 | .fill(1) 21 | .map((_, i) => ( 22 | 23 | {i} 24 | 25 | ))} 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/mount-deep-tree/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-deep-tree/nativebase-v3'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-deep-tree/react-native-web'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/mount-deep-tree/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/mount-deep-tree/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-deep-tree/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-deep-tree/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-deep-tree/ui-styled'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/mount-wide-tree/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-wide-tree/nativebase-v3'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-wide-tree/react-native-web'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/mount-wide-tree/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/mount-wide-tree/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-wide-tree/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/mount-wide-tree/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/mount-wide-tree/ui-styled'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/emotion.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const EmotionTest = dynamic(() => import('../../bench/sierpinski-triangle/emotion'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/nativebase-v3.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/sierpinski-triangle/nativebase-v3'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/react-native-web.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/sierpinski-triangle/react-native-web'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/stitches-react-v025.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/sierpinski-triangle/stitches-react-v025'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/stitches-react-vc17.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/sierpinski-triangle/stitches-react-vc17'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/styled-components.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const SCTest = dynamic(() => import('../../bench/sierpinski-triangle/styled-components'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/pages/sierpinski-triangle/ui-styled.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic'; 2 | 3 | const SierpinskiTriangle = () => { 4 | const StitchesTest = dynamic(() => import('../../bench/sierpinski-triangle/ui-styled'), { ssr: false }); 5 | 6 | return ; 7 | }; 8 | 9 | export default SierpinskiTriangle; 10 | -------------------------------------------------------------------------------- /packages/benchmark-next/prettier.config.js: -------------------------------------------------------------------------------- 1 | // prettier.config.js or .prettierrc.js 2 | module.exports = { 3 | trailingComma: 'es5', 4 | tabWidth: 2, 5 | singleQuote: true, 6 | printWidth: 120, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/benchmark-next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gluestack/gluestack-style/3de2207b03d13894f7da9fa20c2ec4bf66760f2e/packages/benchmark-next/public/favicon.ico -------------------------------------------------------------------------------- /packages/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # misc 9 | .DS_Store 10 | *.pem 11 | 12 | # build 13 | dist 14 | lib 15 | 16 | # debug 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | # local env files 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | # turbo 28 | .turbo 29 | -------------------------------------------------------------------------------- /packages/react/.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 -------------------------------------------------------------------------------- /packages/react/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | process.env.NODE_ENV !== 'production' ? [] : ['transform-remove-console'], 7 | ], 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react/src/AsForwarder.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Svg from 'react-native-svg'; 3 | import type { RNProps } from './types'; 4 | 5 | const AsForwarderTemp = ({ 6 | as, 7 | children, 8 | ...props 9 | }: any): React.ReactElement => { 10 | const As: any = as; 11 | return as ? {children} : {children}; 12 | }; 13 | AsForwarderTemp.displayName = '__AsForwarder__'; 14 | 15 | export const AsForwarder = AsForwarderTemp as React.ComponentType< 16 | RNProps & { as?: any } 17 | >; 18 | -------------------------------------------------------------------------------- /packages/react/src/core/colorMode.ts: -------------------------------------------------------------------------------- 1 | let colorMode: string = 'light'; 2 | const eventsCallbacks: Array<(value: string) => void> = []; 3 | 4 | export function set(colorModeValue: string) { 5 | colorMode = colorModeValue; 6 | eventsCallbacks.forEach((callback) => { 7 | callback(colorModeValue); 8 | }); 9 | } 10 | 11 | export function get() { 12 | return colorMode; 13 | } 14 | 15 | export function onChange(callback: (colorMode: string) => void) { 16 | eventsCallbacks.push(callback); 17 | return () => { 18 | const index = eventsCallbacks.indexOf(callback); 19 | if (index !== -1) { 20 | eventsCallbacks.splice(index, 1); 21 | } 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /packages/react/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './colorMode'; 2 | export * from './convert-utility-to-sx'; 3 | -------------------------------------------------------------------------------- /packages/react/src/createGlobalStylesWeb.ts: -------------------------------------------------------------------------------- 1 | export const createGlobalStylesWeb: any = (_style: any) => { 2 | // 3 | }; 4 | -------------------------------------------------------------------------------- /packages/react/src/createGlobalStylesWeb.web.ts: -------------------------------------------------------------------------------- 1 | import { injectGlobalCssStyle } from './injectInStyle'; 2 | import { CreateCss } from './utils/cssify'; 3 | import { resolvedTokenization } from './utils'; 4 | 5 | export const createGlobalStylesWeb = (style: any) => { 6 | return (config: any) => { 7 | let css = ``; 8 | Object.keys(style).map((cssKey: string) => { 9 | const resolvedGlobalStyles = resolvedTokenization(style[cssKey], config); 10 | let rules = CreateCss(resolvedGlobalStyles); 11 | css += `\n${cssKey} ${rules}\n`; 12 | }); 13 | 14 | injectGlobalCssStyle(css, 'global-styles'); 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /packages/react/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import useMediaQuery from './use-media-query'; 2 | export { useMediaQuery }; 3 | export { useBreakpointValue } from './useBreakpointValue'; 4 | export { useToken } from './useToken'; 5 | export { useColorMode } from './useColorMode'; 6 | export { useMedia } from './useMedia'; 7 | -------------------------------------------------------------------------------- /packages/react/src/hooks/useColorMode.ts: -------------------------------------------------------------------------------- 1 | import { get, onChange } from '../core/colorMode'; 2 | import { useState, useEffect } from 'react'; 3 | 4 | /** 5 | * 6 | * @returns Current color mode value (light or dark) 7 | */ 8 | export const useColorMode = () => { 9 | const [currentColorMode, setCurrentColorMode] = useState(get()); 10 | useEffect(() => { 11 | onChange((colorMode: any) => { 12 | setCurrentColorMode(colorMode); 13 | }); 14 | // remove onchage listener on unmount 15 | () => 16 | onChange((colorMode: any) => { 17 | setCurrentColorMode(colorMode); 18 | }); 19 | }, []); 20 | 21 | return currentColorMode; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/react/src/hooks/useToken.ts: -------------------------------------------------------------------------------- 1 | import { useStyled } from '../StyledProvider'; 2 | import type { ICustomConfig } from '../types'; 3 | 4 | /** 5 | * 6 | * @param tokenScale Type of the token ex: colors, spacing, fontSizes, etc 7 | * @param token Token name ex: red500, 1, sm, etc 8 | * @returns 9 | */ 10 | export const useToken = (tokenScale: string, token: string) => { 11 | const theme: ICustomConfig = useStyled(); 12 | // @ts-ignore 13 | const themeTokens = theme.config.tokens; 14 | return themeTokens?.[`${tokenScale}`]?.[`${token}`] ?? token; 15 | }; 16 | -------------------------------------------------------------------------------- /packages/react/src/injectInStyle.ts: -------------------------------------------------------------------------------- 1 | export function injectInStyle(_globalStyleMap: any) {} 2 | export function injectCssVariablesGlobalStyle(_componentExtendedConfig: any) {} 3 | export function injectGlobalCssStyle(_css: string, _styleTagId: string) {} 4 | export function flush() { 5 | return []; 6 | } 7 | -------------------------------------------------------------------------------- /packages/react/src/plugins/index.tsx: -------------------------------------------------------------------------------- 1 | export { AddCssTokenVariables } from './css-variables'; 2 | export { FontResolver } from './font-resolver'; 3 | -------------------------------------------------------------------------------- /packages/react/src/resolver/StyledValueToCSSObject.ts: -------------------------------------------------------------------------------- 1 | import type { CSSObject, StyledValue } from '../types'; 2 | import { resolvedTokenization } from '../utils'; 3 | 4 | export function StyledValueToCSSObject( 5 | input: StyledValue | undefined, 6 | CONFIG: any 7 | ): CSSObject { 8 | if (!input) { 9 | return {}; 10 | } 11 | return resolvedTokenization(input, CONFIG); 12 | } 13 | -------------------------------------------------------------------------------- /packages/react/src/resolver/index.ts: -------------------------------------------------------------------------------- 1 | export * from './StyledValueToCSSObject'; 2 | export * from './getStyleIds'; 3 | export * from './injectComponentAndDescendantStyles'; 4 | export * from './SXResolvedToOrderedSXResolved'; 5 | export * from './checkAndPush'; 6 | export * from './getWeightBaseOnPath'; 7 | export * from './orderedResolved'; 8 | export * from './reduceAndResolveCompoundVariants'; 9 | export * from './styledResolved'; 10 | export * from './sxToSxResolved'; 11 | export * from './getComponentStyle'; 12 | -------------------------------------------------------------------------------- /packages/react/src/style-sheet/value.ts: -------------------------------------------------------------------------------- 1 | // import { StyleSheet } from 'react-native'; 2 | 3 | export function value(styleResolved: any) { 4 | return { 5 | [styleResolved.meta.cssId]: styleResolved?.resolved, 6 | }; /* StyleSheet.create({ 7 | [styleResolved.meta.cssId]: styleResolved?.resolved as any, 8 | }); */ 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/src/style-sheet/value.web.ts: -------------------------------------------------------------------------------- 1 | export function value(styleResolved: any) { 2 | return styleResolved?.meta?.cssRuleset; 3 | } 4 | -------------------------------------------------------------------------------- /packages/react/src/updateCSSStyleInOrderedResolved.ts: -------------------------------------------------------------------------------- 1 | import { stableHash } from './stableHash'; 2 | import type { OrderedSXResolved, StyledValueResolvedWithMeta } from './types'; 3 | 4 | export function INTERNAL_updateCSSStyleInOrderedResolved( 5 | orderedSXResolved: OrderedSXResolved, 6 | objectHash: string, 7 | _keepOriginal: boolean = false, 8 | _prefixClassName = '', 9 | _shouldResolve = true 10 | ) { 11 | orderedSXResolved.forEach((styleResolved: StyledValueResolvedWithMeta) => { 12 | styleResolved.meta.cssId = 13 | objectHash + 14 | '-' + 15 | stableHash({ 16 | path: styleResolved?.meta?.path, 17 | data: styleResolved.original, 18 | }); 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /packages/react/src/utils/css-injector/index.ts: -------------------------------------------------------------------------------- 1 | // export { default as StyleSheet } from './stylesheet'; 2 | // export * from './stylesheet'; 3 | export { injectCss as inject, flush, injectGlobalCss } from './utils/inject'; 4 | -------------------------------------------------------------------------------- /packages/react/src/utils/css-injector/utils/inject.ts: -------------------------------------------------------------------------------- 1 | type IWrapperType = 2 | | 'global' 3 | | 'boot' 4 | | 'inline' 5 | | 'boot-descendant' 6 | | 'inline-descendant'; 7 | 8 | export const WRAPPER_BLOCK_PREFIX = 'gs-injected'; 9 | 10 | export const hasCss = (_id: any, _text: any) => {}; 11 | 12 | export const addCss = (_id: any, _text: any) => {}; 13 | 14 | export const injectCss = ( 15 | _css: any, 16 | _wrapperType: IWrapperType, 17 | _styleTagId: string, 18 | _inlineStyleMap?: any, 19 | _id?: any 20 | ) => {}; 21 | export const injectGlobalCss = ( 22 | _css: any, 23 | _styleTagID: string = 'css-injected-global' 24 | ) => {}; 25 | 26 | export const flush = () => { 27 | return []; 28 | }; 29 | -------------------------------------------------------------------------------- /packages/react/src/utils/cssify/cssify.ts: -------------------------------------------------------------------------------- 1 | import createStyleSheet from './create-stylesheet'; 2 | 3 | const Cssify = { 4 | create: createStyleSheet, 5 | }; 6 | 7 | export default Cssify; 8 | -------------------------------------------------------------------------------- /packages/react/src/utils/cssify/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Cssify } from './cssify'; 2 | export { default as CreateCss } from './utils/create-declaration-block'; 3 | -------------------------------------------------------------------------------- /packages/react/src/utils/cssify/utils/react-native-web/canUseDom.ts: -------------------------------------------------------------------------------- 1 | // Code copied from the open source library 'react-native-web' 2 | // https://github.com/necolas/react-native-web 3 | 4 | const canUseDOM: boolean = !!( 5 | typeof window !== 'undefined' && 6 | window.document && 7 | window.document.createElement 8 | ); 9 | 10 | export default canUseDOM; 11 | -------------------------------------------------------------------------------- /packages/react/src/utils/cssify/utils/react-native-web/hyphenate-style-name.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-var, prefer-template */ 2 | var uppercasePattern = /[A-Z]/g; 3 | var msPattern = /^ms-/; 4 | var cache = {} as any; 5 | 6 | const toHyphenLower = (match: any) => '-' + match.toLowerCase(); 7 | 8 | const hyphenateStyleName = (name: string) => { 9 | if (cache.hasOwnProperty(name)) { 10 | return cache[name]; 11 | } 12 | 13 | var hName = name.replace(uppercasePattern, toHyphenLower); 14 | return (cache[name] = msPattern.test(hName) ? '-' + hName : hName); 15 | }; 16 | 17 | export default hyphenateStyleName; 18 | -------------------------------------------------------------------------------- /packages/react/src/utils/cssify/utils/react-native-web/prefixStyles/index.js: -------------------------------------------------------------------------------- 1 | // Code copied from the open source library 'react-native-web' 2 | // https://github.com/necolas/react-native-web 3 | 4 | import createPrefixer from 'inline-style-prefixer/lib/createPrefixer'; 5 | import staticData from './static'; 6 | 7 | const prefixAll = createPrefixer(staticData); 8 | 9 | export default prefixAll; 10 | -------------------------------------------------------------------------------- /packages/react/tests/example.test.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | return a + b; 3 | } 4 | test('add 2 + 5', () => { 5 | expect(add(2, 5)).toBe(7); 6 | }); 7 | -------------------------------------------------------------------------------- /scripts/test.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | lowercase(){ 4 | echo "$1" | sed "y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/" 5 | } 6 | 7 | OS=`lowercase \`uname\`` 8 | 9 | jest --silent 10 | 11 | yarn install --check-files 12 | 13 | yarn build -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "pipeline": { 4 | "build": { 5 | "outputs": ["dist/**", ".next/**"], 6 | "dependsOn": ["^build"], 7 | "cache": false 8 | }, 9 | "dev": { 10 | "cache": false 11 | }, 12 | "lint": { 13 | "outputs": [] 14 | }, 15 | "clean": { 16 | "cache": false 17 | } 18 | } 19 | } 20 | --------------------------------------------------------------------------------