diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
index 9b4bbf185a..8201d81410 100644
--- a/example/storybook-nativewind/.storybook/preview.js
+++ b/example/storybook-nativewind/.storybook/preview.js
@@ -60,7 +60,7 @@ export const parameters = {
'Textarea',
],
'Overlay',
- ['AlertDialog', 'Modal', 'Popover', 'Tooltip'],
+ ['AlertDialog', 'Menu', 'Modal', 'Popover', 'Tooltip'],
'Disclosure',
['Actionsheet', 'Accordion'],
'Media And Icons',
diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
index 1fbd7c269e..8d8fe012b7 100644
--- a/example/storybook-nativewind/babel.config.js
+++ b/example/storybook-nativewind/babel.config.js
@@ -46,6 +46,10 @@ module.exports = function (api) {
__dirname,
'../../packages/unstyled/button/src'
),
+ '@gluestack-ui/menu': path.resolve(
+ __dirname,
+ '../../packages/unstyled/menu/src'
+ ),
'@gluestack-ui/link': path.resolve(
__dirname,
'../../packages/unstyled/link/src'
@@ -68,24 +72,24 @@ module.exports = function (api) {
),
'@gluestack-ui/nativewind-utils/withStyleContext': path.resolve(
__dirname,
- '../../packages/nativewind/utils/src/withStyleContext'
+ '../../packages/nativewind/utils/withStyleContext'
),
'@gluestack-ui/nativewind-utils/withStyleContextAndStates':
path.resolve(
__dirname,
- '../../packages/nativewind/utils/src/withStyleContextAndStates'
+ '../../packages/nativewind/utils/withStyleContextAndStates'
),
'@gluestack-ui/nativewind-utils/cssInterop': path.resolve(
__dirname,
- '../../packages/nativewind/utils/src/cssInterop'
+ '../../packages/nativewind/utils/cssInterop'
),
'@gluestack-ui/nativewind-utils/tva': path.resolve(
__dirname,
- '../../packages/nativewind/utils/src/tva'
+ '../../packages/nativewind/utils/tva'
),
'@gluestack-ui/nativewind-utils': path.resolve(
__dirname,
- '../../packages/nativewind/utils/src'
+ '../../packages/nativewind/utils/'
),
},
},
diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
index 15874de849..4d449ea5d9 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
@@ -7,15 +7,1164 @@ pageTitle: Accordion
pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
-showHeader: false
-
-tag: coming soon
+showHeader: true
---
import { Meta } from '@storybook/addon-docs';
+import {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ Divider,
+ ChevronDownIcon,
+ ChevronUpIcon,
+} from '../../core-components/nativewind';
+import {
+ PlusIcon, MinusIcon
+} from 'lucide-react-native'
+import {
+ AppProvider,
+ CodePreview,
+ Table,
+ TableContainer,
+ InlineCode,
+ AddIcon,
+ InfoIcon,
+ Alert,
+} from '@gluestack/design-system';
+import { transformedCode } from '../../utils';
+import { CollapsibleCode } from '@gluestack/design-system';
+import Wrapper from '../../core-components/nativewind/Wrapper';
<Meta title="with-nativewind/components/Disclosure/Accordion" />
-# Accordion
+This is an illustration of **Accordion** component.
+
+<>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={true}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+ <Accordion {...props} className="m-5 w-[90%]">
+ <AccordionItem value="a">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ How do I place an order?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={ChevronUpIcon} className="ml-3"/>
+ ) : (
+ <AccordionIcon as={ChevronDownIcon} className="ml-3"/>
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ To place an order, simply select the products you want, proceed to
+ checkout, provide shipping and payment information, and finalize
+ your purchase.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <AccordionItem value="b">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ What payment methods do you accept?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={ChevronUpIcon} className="ml-3"/>
+ ) : (
+ <AccordionIcon as={ChevronDownIcon} className="ml-3"/>
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ We accept all major credit cards, including Visa, Mastercard, and
+ American Express. We also support payments through PayPal.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+ `,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ ChevronDownIcon,
+ ChevronUpIcon,
+ Wrapper,
+ },
+ argsType: {
+ size: {
+ control: 'select',
+ options: ['sm', 'md', 'lg'],
+ default: 'md',
+ },
+ variant: {
+ control: 'select',
+ options: ['filled', 'unfilled'],
+ default: 'filled',
+ },
+ type: {
+ control: 'select',
+ options: ['single', 'multiple'],
+ default: 'single',
+ },
+ isCollapsible: {
+ control: 'boolean',
+ default: true,
+ },
+ isDisabled: {
+ control: 'boolean',
+ },
+ },
+ }}
+ />
+</>
+
+<br />
+
+## Installation
+
+### Step 1: Install the following dependencies:
+
+```bash
+
+npm i @gluestack-ui/accordion
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+<CollapsibleCode>
+ ```jsx %%-- File: core-components/nativewind/accordion/index.tsx --%% ```
+</CollapsibleCode>
+
+### Step 3: Update the import paths to match your project setup.
+
+## API Reference
+
+To use this component in your project, include the following import statement in your file.
+
+```jsx
+import {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionContent,
+ AccordionContentText,
+ AccordionIcon,
+} from '@/components/ui/accordion';
+```
+
+```jsx
+export default () => (
+ <Accordion>
+ <AccordionItem>
+ <AccordionHeader>
+ <AccordionTrigger>
+ <AccordionTitleText />
+ <AccordionIcon />
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText />
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+```
+### Component Props
+
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
+
+#### Accordion
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+<>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Prop</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Type</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Description</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>type</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>"single" | "multiple"</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>"single"</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Determines whether one or multiple items can be opened at the same time.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isCollapsible</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>defaultValue</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>string[]</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>[]</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The value of the item to expand when initially rendered when type is "single" or "multiple".`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>value</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>string[]</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>[]</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The controlled value of the item to expand when type is "single" or "multiple".`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onValueChange</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>function</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isDisabled</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`When true, prevents the user from interacting with the accordion and all its items.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</>
+
+#### AccordionItem
+
+Contains all the parts of a collapsible section.
+
+<>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Prop</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Type</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Description</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>value</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>string</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isDisabled</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`When true, prevents the user from interacting with the accordion and all its items.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</>
+
+#### AccordionHeader
+
+Wraps an `Accordion.Trigger`. It inherits all the properties of @expo/html-elements's [H3](https://www.npmjs.com/package/@expo/html-elements#h3) on web and It inherits all the properties of react native's [View](https://reactnative.dev/docs/view) on native. Use the as prop to update it to the appropriate heading level for your page.
+
+
+#### AccordionTrigger
+
+Toggles the collapsed state of its associated item. It inherits all the properties of react native's [Pressable](https://reactnative.dev/docs/pressable). It should be nested inside of an `Accordion.Header`.
+
+#### AccordionTitleText
+
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+#### AccordionIcon
+
+Contains all Icon related layout style props and actions.It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+#### AccordionContent
+
+Contains all the collapsible content for an item. It inherits all the properties of React Native [View](https://reactnative.dev/docs/view) component.
+
+#### AccordionContentText
+
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+### Accessibility
+
+Adheres to the Accordion [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/).
+
+
+We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
+
+- Header is h3 tag on web.
+- aria-expanded is "true" when the Accordion Content is visible, otherwise false.
+- role is set to "region" for the currently expanded accordion panel.
+- aria-controls points to the id of the Accordion Content.
+- aria-labelledby references the accordion header button that expands and collapses the region.
+
+### Keyboard Interactions
+
+- `Space` - When focus is on an Accordion.Trigger of a collapsed section, expands the section.
+- `Enter` - When focus is on an Accordion.Trigger of a collapsed section, expands the section.
+- `Tab` - Moves focus to the next focusable element.
+- `Shift + Tab` - Moves focus to the previous focusable element.
+
+### Screen Reader
+
+- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed).
+
+
+## Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+### Customized Component
+
+The following example demonstrates how easily you can customize the Accordion component to suit your needs.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+function App(){
+ return (
+ <Accordion
+ className="w-[90%] m-5 border border-outline-300"
+ type="multiple"
+ >
+ <AccordionItem value="a"
+ className="border-b border-outline-300"
+ >
+ <AccordionHeader
+ className="bg-background-0"
+ >
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ What does the "type" prop of the Accordion component do?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={ChevronUpIcon} />
+ ) : (
+ <AccordionIcon as={ChevronDownIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent className="mt-0 pt-2 bg-background-50"
+ >
+ <AccordionContentText>
+ The type prop determines whether one or multiple items can be
+ opened at the same time. The default value is "single" which means
+ only one item can be opened at a time.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <AccordionItem
+ value="b"
+ className="border-b border-outline-300"
+ >
+ <AccordionHeader
+ sx={{
+ backgroundColor: "$backgroundLight0",
+ _dark: {
+ backgroundColor: "$backgroundDark950"
+ }
+ }}>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ Can I disable the whole accordion?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={ChevronUpIcon} />
+ ) : (
+ <AccordionIcon as={ChevronDownIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent className="mt-0 pt-2 bg-background-50"
+ >
+ <AccordionContentText>
+ Yes, you can disable the whole accordion by setting the isDisabled
+ prop to true on the Accordion component.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <AccordionItem
+ value="c"
+ >
+ <AccordionHeader
+ className="bg-background-0"
+ >
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ What is a controlled accordion? How can I make it controlled?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={ChevronUpIcon} />
+ ) : (
+ <AccordionIcon as={ChevronDownIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent className="mt-0 pt-2 bg-background-50"
+ >
+ <AccordionContentText>
+ Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+}
+`,
+transformCode: (code) => {
+return transformedCode(code, 'function', 'App');
+},
+scope: {
+Accordion,
+AccordionItem,
+AccordionHeader,
+AccordionTrigger,
+AccordionTitleText,
+AccordionIcon,
+AccordionContent,
+AccordionContentText,
+ChevronDownIcon,
+ChevronUpIcon,
+Wrapper,
+},
+}}
+/>
+
+</AppProvider>
+
+### Rounded corners
+
+The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+function App(){
+ return (
+ <Accordion className="m-5 w-[80%] max-w-[640px] bg-transparent">
+ <AccordionItem value="item-1" className="rounded-lg">
+ <AccordionHeader>
+ <AccordionTrigger
+ className="focus:web:rounded-lg"
+ >
+ {({ isExpanded }) => {
+ return (
+ <>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} className="mr-3"/>
+ ) : (
+ <AccordionIcon as={PlusIcon} className="mr-3"/>
+ )}
+ <AccordionTitleText>
+ How do I place an order?
+ </AccordionTitleText>
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent className="ml-9">
+ <AccordionContentText>
+ To place an order, simply select the products you want, proceed to
+ checkout, provide shipping and payment information, and finalize
+ your purchase.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <AccordionItem value="item-2" className="mt-5 rounded-lg">
+ <AccordionHeader>
+ <AccordionTrigger className="focus:web:rounded-lg">
+ {({ isExpanded }) => {
+ return (
+ <>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} className="mr-3"/>
+ ) : (
+ <AccordionIcon as={PlusIcon} className="mr-3"/>
+ )}
+ <AccordionTitleText>
+ What payment methods do you accept?
+ </AccordionTitleText>
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent className="ml-9">
+ <AccordionContentText>
+ We accept all major credit cards, including Visa, Mastercard, and
+ American Express. We also support payments through PayPal.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+}
+`,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ MinusIcon,
+ PlusIcon,
+ Wrapper,
+ },
+ }}
+ />
+</AppProvider>
+
+### Disabled item
+
+You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+function App(){
+ return (
+ <Accordion variant="unfilled" className="m-5 w-[90%]">
+ <AccordionItem value="item-1" isDisabled={true}
+ className= "border-b border-outline-300"
+ >
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ Disabled Item
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ This is a Disabled Item.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+
+ <AccordionItem value="item-2" >
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ Is this accordion accessible?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Yes, the accordion is accessible. It adheres to the WAI-ARIA design
+ pattern. You can read more about it in the accessibility section of
+ the docs.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+}
+`,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ Divider,
+ MinusIcon,
+ PlusIcon,
+ Wrapper,
+ },
+ }}
+ />
+</AppProvider>
+
+### Default value
+
+Use the defaultValue prop to define the open item by default.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+function App(){
+ return (
+ <Accordion variant="unfilled" type="single" defaultValue="item-3" className="w-[90%] m-5">
+ <AccordionItem value="item-1" className="rounded-lg">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ What is the defaultValue prop of the Accordion component?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ The defaultValue prop of the Accordion component is used to define
+ the open item by default. It is used when the Accordion component is
+ uncontrolled.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <Divider />
+ <AccordionItem value="item-2" className="rounded-lg">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ How many size variants does the Accordion component have?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ The Accordion component has three size variants - sm, md and lg.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <Divider />
+ <AccordionItem value="item-3" className="rounded-lg">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ Can I nest my accordions?
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Yes, you can nest your accordions. Refer to the nested accordion example in the docs.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+}
+`,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ Divider,
+ MinusIcon,
+ PlusIcon,
+ Wrapper,
+ },
+ }}
+ />
+</AppProvider>
+
+### Nested Components
+
+You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+function App(){
+ return (
+ <Accordion
+ variant="unfilled"
+ size="sm"
+ className="m-5 border border-outline-300 w-[80%] max-w-[640px]"
+ >
+ <AccordionItem value="a">
+ <AccordionHeader
+ className="bg-background-0"
+ >
+ <AccordionTrigger>
+ {({isExpanded}) => (
+ <>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ <AccordionTitleText className="ml-3">USA</AccordionTitleText>
+ </>
+ )}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent className="pb-0">
+ <Accordion
+ className="w-full border border-outline-300"
+ >
+ <AccordionItem value="b">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({isExpanded}) => (
+ <>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ <AccordionTitleText className="ml-3">
+ California
+ </AccordionTitleText>
+ </>
+ )}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Capital city of California is Sacramento. California has a GDP
+ of 2.89 trillion dollars and follows Pacific Standard Time
+ zone.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+ <Accordion className="w-full mt-5 bg-background-0"
+ >
+ <AccordionItem value="c">
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({isExpanded}) => (
+ <>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ <AccordionTitleText className="ml-3">Nevada</AccordionTitleText>
+ </>
+ )}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Nevada is located in a mountainous region that includes vast
+ semiarid grasslands and sandy alkali deserts. It is the most
+ arid state of the country.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+}
+`,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ Divider,
+ MinusIcon,
+ PlusIcon,
+ Wrapper,
+ },
+ }}
+ />
+</AppProvider>
+
+### Controlled Accordion
+
+A component is controlled when it's managed by its parent using props.
+You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ _rendererWrapper={{
+ display: 'grid',
+ justifyContent: 'stretch',
+ }}
+ metaData={{
+ code: `
+function App(){
+ const [selectedValues, setSelectedValues] = React.useState(['item-1', 'item-2']);
+ return (
+ <Accordion variant="unfilled" type="multiple" value={selectedValues} onValueChange={(item) => setSelectedValues(item)} className="m-5 w-[95%]">
+ <AccordionItem value="item-1" className="border-t border-b border-outline-300"
+ >
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ Exploring Nature's Wonders
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Embark on a journey through the breathtaking landscapes and diverse ecosystems of our planet. From majestic mountains to serene oceans, discover the beauty that nature has to offer.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+
+ <AccordionItem value="item-2"
+ >
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ The Art of Culinary Delights
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ <AccordionItem value="item-3"
+ className="border-t border-b border-outline-300"
+ >
+ <AccordionHeader>
+ <AccordionTrigger>
+ {({ isExpanded }) => {
+ return (
+ <>
+ <AccordionTitleText>
+ Mastering the Creative Process
+ </AccordionTitleText>
+ {isExpanded ? (
+ <AccordionIcon as={MinusIcon} />
+ ) : (
+ <AccordionIcon as={PlusIcon} />
+ )}
+ </>
+ );
+ }}
+ </AccordionTrigger>
+ </AccordionHeader>
+ <AccordionContent>
+ <AccordionContentText>
+ Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression.
+ </AccordionContentText>
+ </AccordionContent>
+ </AccordionItem>
+ </Accordion>
+);
+}
+`,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionTrigger,
+ AccordionTitleText,
+ AccordionIcon,
+ AccordionContent,
+ AccordionContentText,
+ Divider,
+ MinusIcon,
+ PlusIcon,
+ PlusIcon,
+ Wrapper,
+ },
+ }}
+ />
+</AppProvider>
+
+
+
+
+
+
+
+
+
-Coming Soon!
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
index 298d687f37..ee9f35c5b9 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
@@ -17,7 +17,7 @@ import {
Image,
Text,
Center,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { config } from '@gluestack-ui/config';
import {
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx
index b4eaba8855..16ba50de0d 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx
@@ -21,47 +21,8 @@ import {
Text,
Box,
Icon,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { KeyboardAvoidingView, Platform } from 'react-native';
-import { createIcon } from '@gluestack-ui/icon';
-import { Svg, Path } from 'react-native-svg';
-import { styled, AsForwarder } from '@gluestack-ui/themed';
-
-const IconRoot: any = styled(
- AsForwarder,
- {},
- {
- ancestorStyle: ['_icon'],
- },
- {
- propertyTokenMap: {
- stroke: 'colors',
- },
- }
-);
-
-const LeadingIcon = createIcon({
- Root: IconRoot,
- viewBox: '0 0 18 18',
- path: (
- <Svg fill="none">
- <Path
- d="M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z"
- stroke="#A3A3A3"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- <Path
- d="M1.5 7.5H16.5"
- stroke="#A3A3A3"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- </Svg>
- ),
-});
const ActionsheetWithKeyboardAvoidingView = ({
showActionsheet: showActionsheetProp = true,
@@ -122,7 +83,7 @@ const ActionsheetWithKeyboardAvoidingView = ({
</FormControlLabel>
<Input isFullWidth={true} {...props}>
<InputSlot>
- <InputIcon as={LeadingIcon} ml="$3" />
+ <InputIcon ml="$3" />
</InputSlot>
<InputField placeholder="CVC/CVV" />
</Input>
@@ -158,8 +119,6 @@ export {
Text,
Box,
Icon,
- LeadingIcon,
- IconRoot,
KeyboardAvoidingView,
Platform,
};
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
index fdecad50df..202bc884b5 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
@@ -21,47 +21,8 @@ import {
Text,
Box,
Icon,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { KeyboardAvoidingView } from 'react-native';
-import { createIcon } from '@gluestack-ui/icon';
-import { Svg, Path } from 'react-native-svg';
-import { styled, AsForwarder } from '@gluestack-ui/themed';
-
-const IconRoot: any = styled(
- AsForwarder,
- {},
- {
- ancestorStyle: ['_icon'],
- },
- {
- propertyTokenMap: {
- stroke: 'colors',
- },
- }
-);
-
-const LeadingIcon = createIcon({
- Root: IconRoot,
- viewBox: '0 0 18 18',
- path: (
- <Svg fill="none">
- <Path
- d="M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z"
- stroke="#A3A3A3"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- <Path
- d="M1.5 7.5H16.5"
- stroke="#A3A3A3"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- </Svg>
- ),
-});
const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
showActionsheet: showActionsheetProp = true,
@@ -139,7 +100,7 @@ const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
</FormControlLabel>
<Input isFullWidth={true} {...props}>
<InputSlot>
- <InputIcon as={LeadingIcon} ml="$3" />
+ <InputIcon ml="$3" />
</InputSlot>
<InputField placeholder="CVC/CVV" />
</Input>
@@ -179,6 +140,4 @@ export {
Text,
Box,
Icon,
- LeadingIcon,
- IconRoot,
};
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetFlatList.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetFlatList.tsx
index 825b3b15b2..0c5d20ef48 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetFlatList.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetFlatList.tsx
@@ -10,7 +10,7 @@ import {
ActionsheetItemText,
ActionsheetFlatList,
Button,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { useEffect } from 'react';
const ActionsheetWithFlatList = ({
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetIcon.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetIcon.tsx
index f3b74cbf17..14770914b7 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetIcon.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetIcon.tsx
@@ -16,7 +16,7 @@ import {
PlayIcon,
FavouriteIcon,
CloseIcon,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { useEffect } from 'react';
const ActionsheetWithIcon = ({
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetScrollView.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetScrollView.tsx
index e02fe80e65..b224b4c7c3 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetScrollView.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetScrollView.tsx
@@ -10,7 +10,7 @@ import {
ActionsheetItemText,
ActionsheetScrollView,
Button,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { useEffect } from 'react';
const ActionsheetWithScrollView = ({
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetSectionList.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetSectionList.tsx
index 8aca84b392..243d367de3 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetSectionList.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetSectionList.tsx
@@ -11,7 +11,7 @@ import {
ActionsheetSectionList,
ActionsheetSectionHeaderText,
Button,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
const ActionsheetWithSectionlist = ({
showActionsheet: showActionsheetProp = true,
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetVirtualizedList.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetVirtualizedList.tsx
index f721d390a5..c0dca48a09 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetVirtualizedList.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetVirtualizedList.tsx
@@ -10,7 +10,7 @@ import {
ActionsheetItemText,
ActionsheetVirtualizedList,
Button,
-} from '@gluestack-ui/themed';
+} from '@/components/ui';
import { useEffect } from 'react';
const ActionsheetWithVirtualizedList = ({
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
index bd94ba1549..8e52d6e11f 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
@@ -1,5 +1,5 @@
---
-title: AlertDialog | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui AlertDialog Component | Installation, Usage, and API
description: AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.
@@ -7,15 +7,632 @@ pageTitle: AlertDialog
pageDescription: AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.
-showHeader: false
-
-tag: coming soon
+showHeader: true
---
import { Meta } from '@storybook/addon-docs';
<Meta title="with-nativewind/components/Overlay/AlertDialog" />
-# AlertDialog
+import {
+ AlertDialog,
+ AlertDialogBackdrop,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogCloseButton,
+ AlertDialogFooter,
+ AlertDialogBody,
+ CloseIcon,
+ Button,
+ ButtonText,
+ Center,
+ HStack,
+ Text,
+ CheckCircleIcon,
+ Heading,
+ Icon,
+ AlertCircleIcon,
+} from '../../core-components/nativewind';
+import {AlertTriangle} from "lucide-react-native"
+import { transformedCode } from '../../utils';
+import {
+ AppProvider,
+ CodePreview,
+ Table,
+ TableContainer,
+ InlineCode,
+ CollapsibleCode
+} from '@gluestack/design-system';
+import Wrapper from '../../core-components/nativewind/Wrapper';
+
+
+This is an illustration of **AlertDialog** component.
+
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ function Example(){
+ const [showAlertDialog, setShowAlertDialog] = React.useState(false);
+ return (
+ <Center className="h-[300px]">
+ <Button onPress={() => setShowAlertDialog(true)}>
+ <ButtonText>Click me</ButtonText>
+ </Button>
+ <AlertDialog
+ isOpen={showAlertDialog}
+ onClose={() => {
+ setShowAlertDialog(false);
+ }}
+ >
+ <AlertDialogBackdrop />
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <Heading size='lg'>Deactivate account</Heading>
+ <AlertDialogCloseButton>
+ <Icon as={CloseIcon} />
+ </AlertDialogCloseButton>
+ </AlertDialogHeader>
+ <AlertDialogBody>
+ <Text size='sm'>
+ Are you sure you want to deactivate your account? Your data will be permanently removed and cannot be undone.
+ </Text>
+ </AlertDialogBody>
+ <AlertDialogFooter>
+ <Button
+ variant="outline"
+ action="secondary"
+ className="mr-3"
+ onPress={() => {
+ setShowAlertDialog(false);
+ }}
+ >
+ <ButtonText>Cancel</ButtonText>
+ </Button>
+ <Button
+ action="negative"
+ className="bg-error-600"
+ onPress={() => {
+ setShowAlertDialog(false);
+ }}
+ >
+ <ButtonText>Deactivate</ButtonText>
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ </Center>
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ Wrapper,
+ AlertDialog,
+ AlertDialogBackdrop,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogCloseButton,
+ AlertDialogFooter,
+ AlertDialogBody,
+ CloseIcon,
+ Button,
+ ButtonText,
+ Center,
+ Text,
+ Heading,
+ Icon,
+ },
+ argsType: {},
+ }}
+ />
+</Wrapper>
+
+<br />
+
+## Installation
+
+### Step 1: Install the following dependencies:
+
+```bash
+
+npm i @gluestack-ui/alert-dialog
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+<CollapsibleCode>
+
+```jsx
+%%-- File: core-components/nativewind/alert-dialog/index.tsx --%%
+```
+
+</CollapsibleCode>
+
+### Step 3: Update the import paths to match your project setup.
+
+## API Reference
+
+To use this component in your project, include the following import statement in your file.
+
+```jsx
+import {
+ AlertDialog,
+ AlertDialogBackdrop,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogCloseButton,
+ AlertDialogFooter,
+ AlertDialogBody,
+} from '@/components/ui/alert-dialog';
+```
+
+```jsx
+export default () => (
+ <AlertDialog>
+ <AlertDialogBackdrop />
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogCloseButton />
+ </AlertDialogHeader>
+ <AlertDialogBody />
+ <AlertDialogFooter />
+ </AlertDialogContent>
+ </AlertDialog>
+);
+```
+### Component Props
+
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
+
+#### AlertDialog
+
+Contains all View related layout style props and actions.
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+<>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Prop</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Type</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Description</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, the alert-dialog will open. Useful for controllable state behavior.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onClose</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`() => any`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Callback invoked when the alert-dialog is closed.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>useRNModal</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, renders react-native native modal. (Only works in react-native)`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>defaultIsOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Specifies the default open state of the AlertDialog`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>initialFocusRef</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`React.RefObject<any>`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The ref of element to receive focus when the alert-dialog opens.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>finalFocusRef</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`React.RefObject<any>`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The ref of element to receive focus when the alert-dialog closes.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>avoidKeyboard</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, the AlertDialog will avoid the keyboard.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>closeOnOverlayClick</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, the AlertDialog will close when the overlay is clicked.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isKeyboardDismissable</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD >
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, the keyboard can dismiss the AlertDialog`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>animationPreset</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>slide | fade</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>slide</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Specifies the animation preset for the AlertDialog`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</>
+
+#### AlertDialogBackdrop
+
+It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.
+
+#### AlertDialogContent
+
+It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.
+
+#### AlertDialogCloseButton
+
+It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+
+#### AlertDialogHeader
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+#### AlertDialogBody
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+#### AlertDialogFooter
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+### Accessibility
+
+We have outlined the various features that ensure the AlertDialog component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/) which follows the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
+
+### Props
+
+AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), and the props mentioned below.
+
+#### AlertDialog
+
+<>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Name</Table.TText>
+ </Table.TH>
+ <Table.TH >
+ <Table.TText>Value</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>size</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>xs | sm | md | lg | full</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>md</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### AlertDialog with semantic icon
+
+An example of an AlertDialog component incorporating an icon component for visually representing important information or actions.
+
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ function App(){
+ const [showAlertDialog, setShowAlertDialog] = React.useState(false);
+ return (
+ <>
+ <Center className="h-[300px]">
+ <Button onPress={() => setShowAlertDialog(true)}>
+ <ButtonText>Click me</ButtonText>
+ </Button>
+ </Center>
+ <AlertDialog
+ isOpen={showAlertDialog}
+ onClose={() => {
+ setShowAlertDialog(false);
+ }}
+ >
+ <AlertDialogBackdrop/>
+ <AlertDialogContent>
+ <AlertDialogHeader className="border-b-0">
+ <HStack space='sm' className="items-center">
+ <Icon as={CheckCircleIcon}className="text-success-700"/>
+ <Heading size='lg'>Order placed</Heading>
+ </HStack>
+ </AlertDialogHeader>
+ <AlertDialogBody>
+ <Text size="sm">
+ Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us.
+ </Text>
+ </AlertDialogBody>
+ <AlertDialogFooter className="border-t-0">
+ <Button
+ variant="outline"
+ size="sm"
+ action="secondary"
+ className="mr-3"
+ onPress={() => {
+ setShowAlertDialog(false);
+ }}
+ >
+ <ButtonText>Okay</ButtonText>
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ </>
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Button,
+ ButtonText,
+ Center,
+ Wrapper,
+ AlertDialog,
+ AlertDialogBackdrop,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogCloseButton,
+ AlertDialogFooter,
+ AlertDialogBody,
+ Icon,
+ Text,
+ HStack,
+ CheckCircleIcon,
+ Heading,
+ },
+ argsType: {},
+ }}
+ />
+</Wrapper>
+
+
+#### AlertDialog Sizes
+
+An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users.
+
-Coming Soon!
\ No newline at end of file
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={true}
+ metaData={{
+ code: `
+ function App(){
+ const [showAlertDialog, setShowAlertDialog] = React.useState(false);
+ return (
+ <>
+ <Center className="h-[300px]">
+ <Button onPress={() => setShowAlertDialog(true)}>
+ <ButtonText>Click me</ButtonText>
+ </Button>
+ </Center>
+ <AlertDialog
+ isOpen={showAlertDialog}
+ onClose={() => {
+ setShowAlertDialog(false);
+ }}
+ {...props}
+ >
+ <AlertDialogBackdrop/>
+ <AlertDialogContent>
+ <AlertDialogHeader className="border-b-0">
+ <HStack space='sm' className="items-center">
+ <Icon as={AlertTriangle} className="text-error-700"/>
+ <Heading size='lg'>Order placed</Heading>
+ </HStack>
+ </AlertDialogHeader>
+ <AlertDialogBody>
+ <Text>
+ You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading.
+ </Text>
+ </AlertDialogBody>
+ <AlertDialogFooter className="border-t-0">
+ <Button
+ variant="outline"
+ action="secondary"
+ onPress={() => {
+ setShowAlertDialog(false)
+ }}
+ className="mr-3"
+ >
+ <ButtonText className="text-base">Close</ButtonText>
+ </Button>
+ <Button
+ action="primary"
+ onPress={() => {
+ setShowAlertDialog(false)
+ }}
+
+ >
+ <ButtonText>View plans</ButtonText>
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ </>
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Button,
+ ButtonText,
+ Center,
+ Wrapper,
+ AlertDialog,
+ AlertDialogBackdrop,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogCloseButton,
+ AlertDialogFooter,
+ AlertDialogBody,
+ Icon,
+ Text,
+ HStack,
+ AlertTriangle,
+ CheckCircleIcon,
+ Heading,
+ },
+ argsType: {
+ size: {
+ control: 'select',
+ options: ['xs', 'sm', 'md', 'lg', 'full'],
+ default: 'md',
+ },
+ },
+ }}
+ />
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
index 5c9eb1d2a1..d804c7b2e6 100644
--- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -36,11 +36,8 @@ import {
Button,
ButtonText,
GlobeIcon,
- Menu,
- MenuIcon,
- MenuItem,
- MenuItemLabel,
} from '../../core-components/nativewind';
+
import {
PaintBucket,
PuzzleIcon,
diff --git a/example/storybook-nativewind/src/components/Menu/Menu.tsx b/example/storybook-nativewind/src/components/Menu/Menu.tsx
index e044f7cd98..aff1f17e16 100644
--- a/example/storybook-nativewind/src/components/Menu/Menu.tsx
+++ b/example/storybook-nativewind/src/components/Menu/Menu.tsx
@@ -1,24 +1,12 @@
import React from 'react';
+import { Button, ButtonText } from '@/components/ui/button';
+import { Box } from '@/components/ui/box';
+import { HStack } from '@/components/ui/hstack';
+import { Text } from '@/components/ui/text';
+import { Icon, AddIcon, GlobeIcon, SettingsIcon } from '@/components/ui/icon';
+import { Center } from '@/components/ui/center';
+import { Menu, MenuItem, MenuItemLabel } from '@/components/ui/menu';
-import {
- Box,
- Button,
- ButtonText,
- GlobeIcon,
- HStack,
- // Icon,
- SettingsIcon,
- AddIcon,
- Text,
- Center,
-} from '@gluestack-ui/themed';
-import {
- Menu,
- // MenuIcon,
- MenuItem,
- MenuItemLabel,
-} from '@/components/ui/menu';
-import { Icon } from '@gluestack-ui/themed';
import { PaintBucket, PuzzleIcon } from 'lucide-react-native';
const MenuBasic = ({ placement = 'bottom' }: any) => {
@@ -37,24 +25,24 @@ const MenuBasic = ({ placement = 'bottom' }: any) => {
);
}}
>
- <MenuItem key="Community" textValue="Community" gap="$2">
- <Icon as={GlobeIcon} size="sm" />
+ <MenuItem key="Community" textValue="Community">
+ <Icon as={GlobeIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Community</MenuItemLabel>
</MenuItem>
- <MenuItem key="Plugins" textValue="Plugins" gap="$2">
- <Icon as={PuzzleIcon} size="sm" />
+ <MenuItem key="Plugins" textValue="Plugins">
+ <Icon as={PuzzleIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Plugins</MenuItemLabel>
</MenuItem>
- <MenuItem key="Theme" textValue="Theme" gap="$2">
- <Icon as={PaintBucket} size="sm" />
+ <MenuItem key="Theme" textValue="Theme">
+ <Icon as={PaintBucket} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Theme</MenuItemLabel>
</MenuItem>
- <MenuItem key="Settings" textValue="Settings" gap="$2">
- <Icon as={SettingsIcon} size="sm" />
+ <MenuItem key="Settings" textValue="Settings">
+ <Icon as={SettingsIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Settings</MenuItemLabel>
</MenuItem>
- <MenuItem key="Add account" textValue="Add account" gap="$2">
- <Icon as={AddIcon} size="sm" />
+ <MenuItem key="Add account" textValue="Add account">
+ <Icon as={AddIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Add account</MenuItemLabel>
</MenuItem>
</Menu>
@@ -62,55 +50,12 @@ const MenuBasic = ({ placement = 'bottom' }: any) => {
);
};
-const FigmaMenuStory = ({ _colorMode, ...props }) => {
- return (
- <Menu
- {...props}
- // @ts-ignore
- _experimentalOverlay={true}
- isOpen={true}
- placement="bottom"
- offset={30}
- // eslint-disable-next-line react/no-unstable-nested-components
- trigger={({ ...triggerProps }) => {
- return (
- <Button {...triggerProps}>
- <ButtonText>Menu</ButtonText>
- </Button>
- );
- }}
- >
- <Menu.Item key="Community" textValue="Community" gap="$2">
- <Icon as={GlobeIcon} size="sm" />
- <Menu.ItemLabel size="sm">Community</Menu.ItemLabel>
- </Menu.Item>
- <Menu.Item key="Plugins" textValue="Plugins" gap="$2">
- <Icon as={PuzzleIcon} size="sm" />
- <Menu.ItemLabel size="sm">Plugins</Menu.ItemLabel>
- </Menu.Item>
- <Menu.Item key="Theme" textValue="Theme" gap="$2">
- <Icon as={PaintBucket} size="sm" />
- <Menu.ItemLabel size="sm">Theme</Menu.ItemLabel>
- </Menu.Item>
- <Menu.Item key="Settings" textValue="Settings" gap="$2">
- <Icon as={SettingsIcon} size="sm" />
- <Menu.ItemLabel size="sm">Settings</Menu.ItemLabel>
- </Menu.Item>
- <Menu.Item key="Add account" textValue="Add account" gap="$2">
- <Icon as={AddIcon} size="sm" />
- <Menu.ItemLabel size="sm">Add account</Menu.ItemLabel>
- </Menu.Item>
- </Menu>
- );
-};
-
MenuBasic.description =
'This is a basic Menu component example.The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.';
export default MenuBasic;
export {
- FigmaMenuStory,
Button,
ButtonText,
GlobeIcon,
diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
new file mode 100644
index 0000000000..7d22e1bdf7
--- /dev/null
+++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
@@ -0,0 +1,763 @@
+---
+title: gluestack-ui Menu Component | Installation, Usage, and API
+
+description: The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.
+
+pageTitle: Menu
+
+pageDescription: The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.
+
+showHeader: true
+---
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="with-nativewind/components/Overlay/Menu" />
+
+import {
+ Button,
+ ButtonText,
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuItemLabel,
+ ThemeIcon,
+ SettingsIcon,
+ PlusIcon,
+ Box,
+ Badge,
+ Pressable,
+ Avatar,
+ Divider,
+ Text,
+ Center,
+ GlobeIcon,
+ Icon,
+ AddIcon,
+} from '../../core-components/nativewind';
+import { PaintBucket, PuzzleIcon } from 'lucide-react-native';
+import { transformedCode } from '../../utils';
+import {
+ CodePreview,
+ Table,
+ TableContainer,
+ InfoIcon,
+ InlineCode,
+} from '@gluestack/design-system';
+
+import Wrapper from '../../core-components/nativewind/Wrapper';
+import { CollapsibleCode } from '@gluestack/design-system';
+
+This is an illustration of a **Menu** component.
+
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ <Menu
+ size="lg"
+ placement="top"
+ trigger={({ ...triggerProps }) => {
+ return (
+ <Button {...triggerProps}>
+ <ButtonText>Menu</ButtonText>
+ </Button>
+ );
+ }}
+ >
+ <MenuItem key="Community" textValue="Community">
+ <Icon as={GlobeIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Community
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Plugins" textValue="Plugins">
+ {\/* PuzzleIcon is imported from 'lucide-react-native' *\/}
+ <Icon as={PuzzleIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Plugins
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Theme" textValue="Theme">
+ {\/* PaintBucket is imported from 'lucide-react-native' *\/}
+ <Icon as={PaintBucket} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Theme
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Settings" textValue="Settings">
+ <Icon as={SettingsIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Settings
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Add account" textValue="Add account">
+ <Icon as={AddIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Add account
+ </MenuItemLabel>
+ </MenuItem>
+ </Menu>
+`,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Wrapper,
+ Button,
+ ButtonText,
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuItemLabel,
+ Text,
+ Box,
+ Icon,
+ GlobeIcon,
+ PuzzleIcon,
+ PaintBucket,
+ SettingsIcon,
+ AddIcon,
+ },
+ argsType: {},
+ }}
+ />
+</Wrapper>
+
+<br />
+
+## Installation
+
+### Step 1: Install the following dependencies:
+
+```bash
+
+npm i @gluestack-ui/menu
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+<CollapsibleCode>
+
+```jsx
+%%-- File: core-components/nativewind/menu/index.tsx --%%
+```
+
+</CollapsibleCode>
+
+### Step 3: Update the import paths to match your project setup.
+
+## API Reference
+
+To use this component in your project, include the following import statement in your file.
+
+```jsx
+import {
+ Menu,
+ MenuItem,
+ MenuItemLabel,
+} from '@/components/ui/menu';
+```
+
+```jsx
+export default () => (
+ <Menu>
+ <MenuItem>
+ <MenuItemLabel />
+ </MenuItem>
+ </Menu>
+);
+```
+
+### Component Props
+
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
+
+#### Menu
+
+Contains all menu related layout style props and actions.
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+<Wrapper>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Prop</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Type</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Description</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>trigger</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ {'(_props: any, state: { open: boolean; }) => Element'}
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Function that returns a React Element. This element will be used as a Trigger for the Menu`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>placement</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ {
+ '"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"'
+ }
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>bottom left</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>menu placement</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>defaultIsOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, the menu will be opened by default.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{'() => void'}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`This function will be invoked when the menu is opened.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onClose</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{' () => void'}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`This function will be invoked when menu is closed. It will also be called when the user attempts to close the menu via Escape key or backdrop press.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Whether the menu is opened. Useful for controlling the open state.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>offset</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>number</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ The additional offset applied along the main axis between the
+ element and its trigger element.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>crossOffset</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>number</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ The additional offset applied along the cross axis between the
+ element and its trigger element.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>disabledKeys</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>string []</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ Item keys in this collection will be disabled.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>closeOnSelect</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`This prop determine whether menu is closed after option is selected.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>selectedKeys</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`'all' | Iterable<Key>`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The currently selected keys in the collection (controlled).`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>selectionMode</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>'none'| 'single' | 'multiple'</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`The type of selection that is allowed in the collection.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onSelectionChange</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`(keys: 'all' | Iterable<Key>) => void`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Handler that is called when the selection changes.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</Wrapper>
+
+#### MenuItem
+
+Contains all button related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+
+<Wrapper>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Prop</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Type</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Description</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>closeOnSelect</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`This prop determine whether menu is closed after option is selected.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</Wrapper>
+
+#### MenuItemLabel
+
+Contains all text related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+### Features
+
+- Keyboard support for actions.
+- Support for hover, focus and active states.
+
+### Accessibility
+
+We have outlined the various features that ensure the Menu component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
+
+
+Adheres to the [MENU WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Menu Placement
+
+Menu Component provides different placement options, allowing you to position it dynamically based on user interaction or layout requirements.
+
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={true}
+ metaData={{
+ code: `
+ <Menu
+ {...props}
+ trigger={({ ...triggerProps }) => {
+ return (
+ <Button {...triggerProps}>
+ <ButtonText>Menu</ButtonText>
+ </Button>
+ );
+ }}
+ >
+ <MenuItem key="Community" textValue="Community">
+ <Icon as={GlobeIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Community
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Plugins" textValue="Plugins">
+ {\/* PuzzleIcon is imported from 'lucide-react-native' *\/}
+ <Icon as={PuzzleIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Plugins
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Theme" textValue="Theme">
+ {\/* PaintBucket is imported from 'lucide-react-native' *\/}
+ <Icon as={PaintBucket} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Theme
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Settings" textValue="Settings">
+ <Icon as={SettingsIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Settings
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Add account" textValue="Add account">
+ <Icon as={AddIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Add account
+ </MenuItemLabel>
+ </MenuItem>
+ </Menu>
+`,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Wrapper,
+ Button,
+ ButtonText,
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuItemLabel,
+ Text,
+ Box,
+ Icon,
+ GlobeIcon,
+ PuzzleIcon,
+ PaintBucket,
+ SettingsIcon,
+ AddIcon,
+ },
+ argsType: {
+ placement: {
+ control: 'select',
+ options: [
+ 'bottom',
+ 'bottom end',
+ 'bottom start',
+ 'top',
+ 'top end',
+ 'top start',
+ 'left',
+ 'left end',
+ 'left start',
+ 'right',
+ 'right end',
+ 'right start',
+ ],
+ default: 'top',
+ },
+ },
+ }}
+ />
+</Wrapper>
+
+
+#### Disabled MenuItem
+
+Our Menu component supports dynamic disabling of menu items, enabling you to control the availability and interaction of specific menu options based on conditions or user permissions.
+
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ <Menu
+ placement={"top"}
+ disabledKeys={['Theme']}
+ trigger={({ ...triggerProps }) => {
+ return (
+ <Button {...triggerProps}>
+ <ButtonText>Menu</ButtonText>
+ </Button>
+ );
+ }}
+ >
+ <MenuItem key="Community" textValue="Community">
+ <Icon as={GlobeIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Community
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Plugins" textValue="Plugins">
+ {\/* PuzzleIcon is imported from 'lucide-react-native' *\/}
+ <Icon as={PuzzleIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Plugins
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Theme" textValue="Theme">
+ {\/* PaintBucket is imported from 'lucide-react-native' *\/}
+ <Icon as={PaintBucket} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>Theme</MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Settings" textValue="Settings">
+ <Icon as={SettingsIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Settings
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Add account" textValue="Add account">
+ <Icon as={AddIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Add account
+ </MenuItemLabel>
+ </MenuItem>
+ </Menu>
+`,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Wrapper,
+ Button,
+ ButtonText,
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuItemLabel,
+ Text,
+ Box,
+ Icon,
+ GlobeIcon,
+ PuzzleIcon,
+ PaintBucket,
+ SettingsIcon,
+ AddIcon,
+ },
+ argsType: {},
+ }}
+ />
+</Wrapper>
+
+#### Selection
+
+Our menu component supports selection mode, logging the selected menu item key to the console when a selection change occurs. Based on the selected key, it prints a corresponding message, indicating a route push for the menu items in the example given below.
+
+<Wrapper>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ function Example () {
+ const [selected, setSelected] = React.useState(new Set([]));
+ return (
+ <Menu
+ placement="bottom left"
+ selectionMode="single"
+ selectedKeys={selected}
+ onSelectionChange={(keys) => {
+ console.log('onSelectionChange', keys);
+ setSelected(keys);
+ if (keys.currentKey === 'Community') {
+ console.log('Push to', keys.currentKey, 'route');
+ }
+ else if (keys.currentKey === 'Plugins') {
+ console.log('Push to', keys.currentKey, 'route');
+ }
+ else if (keys.currentKey === 'Theme') {
+ console.log('Push to', keys.currentKey, 'route');
+ }
+ else if (keys.currentKey === 'Settings') {
+ console.log('Push to', keys.currentKey, 'route');
+ }
+ }}
+ closeOnSelect={true}
+ trigger={({ ...triggerProps }) => {
+ return (
+ <Button {...triggerProps}>
+ <ButtonText>Menu</ButtonText>
+ </Button>
+ );
+ }}
+ >
+ <MenuItem key="Community" textValue="Community">
+ <Icon as={GlobeIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Community
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Plugins" textValue="Plugins">
+ {\/* PuzzleIcon is imported from 'lucide-react-native' *\/}
+ <Icon as={PuzzleIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Plugins
+ </MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Theme" textValue="Theme">
+ {\/* PaintBucket is imported from 'lucide-react-native' *\/}
+ <Icon as={PaintBucket} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>Theme</MenuItemLabel>
+ </MenuItem>
+ <MenuItem key="Settings" textValue="Settings">
+ <Icon as={SettingsIcon} size="sm" className="mr-2"/>
+ <MenuItemLabel size='sm'>
+ Settings
+ </MenuItemLabel>
+ </MenuItem>
+ </Menu>
+ )
+ }
+`,
+ scope: {
+ Wrapper,
+ Button,
+ ButtonText,
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuItemLabel,
+ Text,
+ Box,
+ Icon,
+ GlobeIcon,
+ PuzzleIcon,
+ PaintBucket,
+ SettingsIcon,
+ AddIcon,
+ },
+ argsType: {},
+ }}
+ />
+</Wrapper>
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Menu/index.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx
similarity index 87%
rename from example/storybook-nativewind/src/components/Menu/index.stories.mdx
rename to example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx
index 00a03d1897..cc5017e39a 100644
--- a/example/storybook-nativewind/src/components/Menu/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx
@@ -1,5 +1,5 @@
---
-title: Menu | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Menu Component | Installation, Usage, and API
description: The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.
@@ -8,47 +8,49 @@ pageTitle: Menu
pageDescription: The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.
showHeader: true
-
-tag: beta
---
import { Meta } from '@storybook/addon-docs';
-<Meta title="common/components/Menu" />
+<Meta title="with-gluestack-style/components/Overlay/Menu" />
-import { Menu, MenuIcon, MenuItem, MenuItemLabel } from '../../core-components/themed';
import {
- ThemeIcon,
- SettingsIcon,
- PlusIcon,
- Box,
Button,
ButtonText,
-} from '@gluestack-ui/themed';
-import { Badge, Pressable, Avatar, Divider } from '@gluestack-ui/themed';
-import {
- Text as MenuText,
- Center,
- GlobeIcon,
- PuzzleIcon,
-} from '@gluestack-ui/themed';
-import { Icon, PaintBucket, AddIcon } from '@gluestack-ui/themed';
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuItemLabel,
+ ThemeIcon,
+ SettingsIcon,
+ PlusIcon,
+ Box,
+ Badge,
+ Pressable,
+ Avatar,
+ Divider,
+ Text as MenuText,
+ Center,
+ GlobeIcon,
+ Icon,
+ AddIcon,
+} from '../../core-components/themed';
+import { PaintBucket, PuzzleIcon } from 'lucide-react-native';
import { transformedCode } from '../../utils';
import {
- AppProvider,
CodePreview,
Table,
TableContainer,
- Text,
InfoIcon,
InlineCode,
} from '@gluestack/design-system';
import Wrapper from '../../core-components/themed/Wrapper';
+import { CollapsibleCode } from '@gluestack/design-system';
-This is an illustration of **Menu** component.
+This is an illustration of a **Menu** component.
-<>
+<Wrapper>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
@@ -121,23 +123,43 @@ This is an illustration of **Menu** component.
argsType: {},
}}
/>
-</>
+</Wrapper>
<br />
-## API Reference
+## Installation
-### Import
+### Step 1: Install the following dependencies:
-To use this component in your project, include the following import statement in your file.
+```bash
-```jsx
-import { Menu } from '@gluestack-ui/themed';
+npm i @gluestack-ui/menu
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+<CollapsibleCode>
+
+```jsx
+%%-- File: core-components/themed/menu/index.tsx --%%
```
-### Anatomy
+</CollapsibleCode>
+
+### Step 3: Update the import paths to match your project setup.
+
+## API Reference
-The structure provided below can help you identify and understand a Menu component's various parts.
+To use this component in your project, include the following import statement in your file.
+
+```jsx
+import {
+ Menu,
+ MenuItem,
+ MenuItemLabel,
+} from '@/components/ui/menu';
+```
```jsx
export default () => (
@@ -158,7 +180,7 @@ This section provides a comprehensive reference list for the component props, de
Contains all menu related layout style props and actions.
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-<>
+<AppProvider>
<TableContainer>
<Table>
<Table.THead>
@@ -403,13 +425,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
</Table.TBody>
</Table>
</TableContainer>
-</>
+</AppProvider>
#### MenuItem
Contains all button related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-<>
+<AppProvider>
<TableContainer>
<Table>
<Table.THead>
@@ -448,12 +470,12 @@ Contains all button related layout style props and actions. It inherits all the
</Table.TBody>
</Table>
</TableContainer>
-</>
+</AppProvider>
**Descendants Styling Props**
Props to style child components.
-<>
+<AppProvider>
<TableContainer>
<Table>
<Table.THead>
@@ -480,7 +502,7 @@ Props to style child components.
</Table.TBody>
</Table>
</TableContainer>
-</>
+</AppProvider>
#### MenuItemLabel
@@ -505,7 +527,7 @@ The Examples section provides visual representations of the different variants o
Menu Component provides different placement options, allowing you to position it dynamically based on user interaction or layout requirements.
-<>
+<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={true}
@@ -597,13 +619,13 @@ Menu Component provides different placement options, allowing you to position it
},
}}
/>
-</>
+</AppProvider>
#### Disabled MenuItem
Our Menu component supports dynamic disabling of menu items, enabling you to control the availability and interaction of specific menu options based on conditions or user permissions.
-<>
+<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
@@ -675,13 +697,13 @@ Our Menu component supports dynamic disabling of menu items, enabling you to con
argsType: {},
}}
/>
-</>
+</AppProvider>
#### Selection
Our menu component supports selection mode, logging the selected menu item key to the console when a selection change occurs. Based on the selected key, it prints a corresponding message, indicating a route push for the menu items in the example given below.
-<>
+<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
@@ -767,67 +789,4 @@ Our menu component supports selection mode, logging the selected menu item key t
argsType: {},
}}
/>
-</>
-
-## Unstyled
-
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
-
-<!--
-
-### Advanced
-
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
-
-### Customizing the Menu
-
-We have a function called `createMenu` which can be used to create a custom menu component. This function takes in a configuration object which contains the styled components that you want to use for the Menu You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
-
-#### Usage
-
-Default styling of all these components can be found in the `components/core/menu` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Menu) of the styled `Menu` components.
-
-```jsx
-// import the styles
-import {
- Root,
- Item,
- Label,
- Backdrop,
-} from 'components/core/menu/styled-components';
-
-// import the createMenu function
-import { createMenu } from '@gluestack-ui/menu';
-
-// Understanding the API
-const Menu = createMenu({
- Root,
- Item,
- Label,
- Backdrop,
-});
-
-// Using the menu component
-export default () => (
- <Menu>
- <MenuItem>
- <MenuItemLabel />
- </MenuItem>
- </Menu>
-);
-```
--->
-
-## Spec Doc
-
-Explore the comprehensive details of the Menu in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
- style={{
- borderRadius: '8px',
- border: ' 1px solid rgba(0, 0, 0, 0.1)',
- aspectRatio: 736 / 585,
- }}
- src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6560-29825%26t%3DqdPgXEPsmuFGx10L-1%26scaling%3Dscale-down%26page-id%3D6560%253A27924%26starting-point-node-id%3D6560%253A29825%26mode%3Ddesign"
- allowFullScreen
-/>
+</AppProvider>
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
index 39b247c951..7e999367c5 100644
--- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
@@ -175,7 +175,7 @@ npm i @gluestack-ui/modal @legendapp/motion
To use this component in your project, include the following import statement in your file.
```jsx
-import { Modal } from '@/components/ui/Modal';
+import { Modal } from '@/components/ui/modal';
```
```jsx
@@ -394,7 +394,7 @@ It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) c
It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.
-<Wrapper>
+<>
<TableContainer>
<Table>
<Table.THead>
@@ -433,7 +433,7 @@ It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.V
</Table.TBody>
</Table>
</TableContainer>
-</Wrapper>
+</>
#### ModalHeader
@@ -461,7 +461,7 @@ Modal component is created using View component from react-native. It extends al
#### Modal
-<Wrapper>
+<>
<TableContainer>
<Table>
<Table.THead>
@@ -494,7 +494,7 @@ Modal component is created using View component from react-native. It extends al
</Table.TBody>
</Table>
</TableContainer>
-</Wrapper>
+</>
### Examples
diff --git a/example/storybook-nativewind/src/components/Slider/Slider.tsx b/example/storybook-nativewind/src/components/Slider/Slider.tsx
index 0954b467ac..0565c86715 100644
--- a/example/storybook-nativewind/src/components/Slider/Slider.tsx
+++ b/example/storybook-nativewind/src/components/Slider/Slider.tsx
@@ -36,6 +36,7 @@ const SliderBasic = ({ value: valueProp = 60, ...props }: any) => {
height: 300,
marginTop: 16,
}}
+ isReversed
onChange={(value: any) => {
handleChange(value);
}}
diff --git a/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx b/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx
index 28a79ac09f..dee82fdb80 100644
--- a/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx
+++ b/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx
@@ -1,16 +1,4 @@
import React from 'react';
-import {
- Center,
- Text,
- Avatar,
- AvatarGroup,
- AvatarFallbackText,
- Box,
- Heading,
- VStack,
- HStack,
- Icon,
-} from '@gluestack-ui/themed';
import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/tooltip';
import { Button, ButtonText } from '@/components/ui/button';
import { Edit, Command } from 'lucide-react-native';
@@ -42,60 +30,18 @@ const TooltipBasic = ({
);
};
-const FigmaTooltipStory = ({
- showTooltip: _showTooltipProp = true,
- _placement = 'bottom',
- ...props
-}: any) => {
- 2;
- return (
- <Tooltip
- {...props}
- offset={10}
- placement="bottom"
- isOpen={true}
- _experimentalOverlay={true}
- // eslint-disable-next-line react/no-unstable-nested-components
- trigger={(triggerProps: any) => {
- return (
- <Box w={200} h={100} py="$20" alignItems="center">
- <Button {...triggerProps}>
- <ButtonText>More</ButtonText>
- </Button>
- </Box>
- );
- }}
- >
- <TooltipContent>
- <TooltipText>Hello world!</TooltipText>
- </TooltipContent>
- </Tooltip>
- );
-};
-
TooltipBasic.description =
'This is a basic Tooltip component example. A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.';
export default TooltipBasic;
export {
- FigmaTooltipStory,
TooltipBasic,
Tooltip,
TooltipContent,
TooltipText,
- Center,
Button,
ButtonText,
- Text,
- Avatar,
- AvatarGroup,
- AvatarFallbackText,
- Box,
- Heading,
Edit,
- VStack,
Command,
- HStack,
- Icon,
};
diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx
index 0e225322c9..10f7275782 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx
@@ -7,15 +7,613 @@ pageTitle: Tooltip
pageDescription: Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way.
-showHeader: false
-
-tag: coming soon
+showHeader: true
---
import { Meta } from '@storybook/addon-docs';
<Meta title="with-nativewind/components/Overlay/Tooltip" />
-# Tooltip
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipText,
+ Button,
+ ButtonText,
+ Avatar,
+ AvatarGroup,
+ AvatarFallbackText,
+ HStack,
+ Box,
+ Heading,
+ EditIcon,
+ Center,
+ VStack,
+ Icon
+} from '../../core-components/nativewind';
+
+import { transformedCode } from '../../utils';
+
+import {
+ AppProvider,
+ CodePreview,
+ Table,
+ TableContainer,
+ Text,
+ InlineCode,
+ CollapsibleCode
+} from '@gluestack/design-system';
+
+import Wrapper from '../../core-components/nativewind/Wrapper';
+
+import {Command} from 'lucide-react-native';
+
+This is an illustration of **Tooltip** component.
+
+<>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={true}
+ metaData={{
+ code: `
+ <Tooltip
+ {...props}
+ trigger={(triggerProps) => {
+ return (
+ <Button className='h-24' {...triggerProps}>
+ <ButtonText>Hover on me!</ButtonText>
+ </Button>
+ );
+ }}
+ >
+ <TooltipContent>
+ <TooltipText>Tooltip</TooltipText>
+ </TooltipContent>
+ </Tooltip>
+ `,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Wrapper,
+ Tooltip,
+ TooltipContent,
+ TooltipText,
+ Center,
+ Button,
+ ButtonText,
+ },
+ argsType: {
+ placement: {
+ control: 'select',
+ options: [
+ 'top left',
+ 'top',
+ 'top right',
+ 'left top',
+ 'left',
+ 'left bottom',
+ 'bottom left',
+ 'bottom',
+ 'bottom right',
+ 'right top',
+ 'right',
+ 'right bottom',
+ ],
+ default: 'top',
+ },
+ },
+ }}
+ />
+</>
+
+<br />
+
+## Installation
+
+### Step 1: Install the following dependencies:
+
+```bash
+
+npm i @gluestack-ui/tooltip
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+<CollapsibleCode>
+
+```jsx
+%%-- File: core-components/nativewind/tooltip/index.tsx --%%
+```
+
+</CollapsibleCode>
+
+### Step 3: Update the import paths to match your project setup.
+
+## API Reference
+
+To use this component in your project, include the following import statement in your file.
+
+```jsx
+import { Tooltip } from '@/components/ui/tooltip';
+```
+
+```jsx
+export default () => (
+ <Tooltip>
+ <TooltipContent>
+ <TooltipText />
+ </TooltipContent>
+ </Tooltip>
+);
+```
+### Component Props
+
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
+
+#### Tooltip
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+<>
+ <TableContainer>
+ <Table>
+ <Table.THead>
+ <Table.TR>
+ <Table.TH>
+ <Table.TText>Prop</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Type</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Default</Table.TText>
+ </Table.TH>
+ <Table.TH>
+ <Table.TText>Description</Table.TText>
+ </Table.TH>
+ </Table.TR>
+ </Table.THead>
+ <Table.TBody>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Whether the tooltip is opened. Useful for controlling the open state.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>isDisabled</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Whether the tooltip is disabled.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>defaultIsOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`If true, the popover will be opened by default.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onOpen</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{'() => void'}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`This function will be invoked when the tooltip is opened.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>onClose</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{'() => void'}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`This function will be invoked when tooltip is closed. It will also be called when the user attempts to close the tooltip via Escape key or backdrop press.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>openDelay</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{'number'}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>0</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Duration in ms to wait till displaying the tooltip.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>closeDelay</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{'number'}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>0</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Duration in ms to wait till hiding the tooltip.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>placement</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>bottom left</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Tooltip placement`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>children</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>any</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ The content to display inside the tooltip.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>closeOnClick</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ Whether tooltip should be closed on Trigger click.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>trigger</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`() => any`}</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>offset</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>number</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>10</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ Distance between the trigger and the tooltip.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>crossOffset</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>number</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>-</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ The additional offset applied along the cross axis between the
+ element and its trigger element.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>shouldOverlapWithTrigger</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>false</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ Determines whether tooltip content should overlap with the
+ trigger.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>shouldFlip</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>
+ Whether the element should flip its orientation (e.g. top to
+ bottom or left to right) when there is insufficient room for it to
+ render completely.
+ </Table.TText>
+ </Table.TD>
+ </Table.TR>
+ <Table.TR>
+ <Table.TD>
+ <Table.TText>
+ <InlineCode>closeOnOverlayClick</InlineCode>
+ </Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>boolean</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>true</Table.TText>
+ </Table.TD>
+ <Table.TD>
+ <Table.TText>{`Closes tooltip when clicked outside.`}</Table.TText>
+ </Table.TD>
+ </Table.TR>
+ </Table.TBody>
+ </Table>
+ </TableContainer>
+</>
+
+#### TooltipText
+
+Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component.
+
+#### TooltipContent
+
+Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+### Accessibility
+
+We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
+
+### Examples
+
+#### Tooltip with Heading
+
+A tooltip component with an avatar is a user interface element that displays a small pop-up box of additional information when the user hovers over or interacts with an avatar or an icon.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ function App(){
+ return (
+ <Box className="justify-center h-96">
+ <AvatarGroup className="flex-row">
+ <Tooltip
+ placement={"top"}
+ trigger={(triggerProps) => {
+ return (
+ <Avatar
+ size="lg"
+ {...triggerProps}
+ className="border-outline-0 border-2 bg-primary-600"
+ >
+ <AvatarFallbackText>+ 3</AvatarFallbackText>
+ </Avatar>
+ )
+ }}
+ >
+ <TooltipContent
+ className="p-5 max-w-72 bg-background-0"
+ >
+ <VStack space='md' className="rounded-lg">
+ <Heading size="sm">View all members of this channel</Heading>
+ <Center>
+ <Text className="font-sm">Includes John, Sarah, Mike, Emily</Text>
+ <Text className="font-sm">and David</Text>
+ </Center>
+ </VStack>
+ </TooltipContent>
+ </Tooltip>
+ <Avatar size="lg"
+ className={"border-outline-0 border-2 bg-emerald-600"} >
+ <AvatarFallbackText>Sandeep Srivastva</AvatarFallbackText>
+ </Avatar>
+ <Avatar size="lg"
+ className={"border-outline-0 border-2 bg-cyan-600"} >
+ <AvatarFallbackText>Arjun Kapoor</AvatarFallbackText>
+ </Avatar>
+ <Avatar size="lg"
+ className={"border-outline-0 border-2 bg-indigo-600"} >
+ <AvatarFallbackText>Ritik Sharma </AvatarFallbackText>
+ </Avatar>
+ </AvatarGroup>
+ </Box>
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Avatar,
+ AvatarGroup,
+ AvatarFallbackText,
+ Wrapper,
+ HStack,
+ Tooltip,
+ TooltipContent,
+ TooltipText,
+ Text,
+ Box,
+ Heading,
+ VStack,
+ Center,
+ },
+ argsType: {},
+ }}
+ />
+</AppProvider>
+
+#### Tooltip with Icon
+
+A tooltip component with an icon is a user interface element that provides contextual information or explanatory text when the user hovers over or interacts with an icon.
+
+<AppProvider>
+ <CodePreview
+ showComponentRenderer={true}
+ showArgsController={false}
+ metaData={{
+ code: `
+ function App(){
+ return (
+ <Box className="h-96 justify-center">
+ <Tooltip
+ placement={"top"}
+ trigger={(triggerProps) => {
+ return (
+ <Avatar size="md" {...triggerProps} className="bg-indigo-600">
+ <Icon as={EditIcon} size="sm" className="text-typography-0"/>
+ </Avatar>
+ )
+ }}
+ >
+ <TooltipContent
+ className="bg-background-0"
+ >
+ <Box className="rounded-lg p-2.5">
+ <Text size="sm">New message</Text>
+ <HStack space="xs" className="p-1 ml-3">
+ <Avatar size="xs" className="bg-gray-500 rounded">
+ <Icon as={Command} className="text-typography-0"/>
+ </Avatar>
+ <Avatar size="xs" className="bg-gray-500 rounded">
+ <AvatarFallbackText>N</AvatarFallbackText>
+ </Avatar>
+ </HStack>
+ </Box>
+ </TooltipContent>
+ </Tooltip>
+ </Box>
+ );
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Avatar,
+ AvatarFallbackText,
+ Wrapper,
+ HStack,
+ Tooltip,
+ TooltipContent,
+ TooltipText,
+ Text,
+ Box,
+ Heading,
+ EditIcon,
+ Command,
+ Icon,
+ },
+ argsType: {},
+ }}
+ />
+</AppProvider>
+
+
+
+
-Coming Soon!
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
index 0bc514d9da..e5b540a84c 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
@@ -613,7 +613,7 @@ A tooltip component with an icon is a user interface element that provides conte
<Box p="$2.5" boderRadius="$2">
<Text size="sm">New message</Text>
<HStack space="xs" p="$1" ml="$3">
- <Avatar size="xs" bg="$trueGray500" rounded="$sm">
+ <Avatar size="xs" bg="$trueGray500" rounded="$sm">
<Icon as={Command} color="$white"/>
</Avatar>
<Avatar size="xs" bg="$trueGray500" rounded="$sm">
diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
index 01f9e79bd3..ae8c179b47 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
@@ -35,7 +35,7 @@ const accordionTitleTextStyle = tva({
parentVariants: {
size: {
sm: 'text-sm',
- md: 'text-md',
+ md: 'text-base',
lg: 'text-lg',
},
},
@@ -48,7 +48,7 @@ const accordionContentTextStyle = tva({
parentVariants: {
size: {
sm: 'text-sm ',
- md: 'text-md',
+ md: 'text-base',
lg: 'text-lg',
},
},
@@ -68,8 +68,8 @@ const UIAccordion = createAccordion({
//@ts-ignore
Root:
Platform.OS === 'web'
- ? withStyleContext(Pressable)
- : withStyleContextAndStates(Pressable),
+ ? withStyleContext(View)
+ : withStyleContextAndStates(View),
Item: View,
// @ts-ignore
Header: Platform.OS === 'web' ? H3 : View,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
index 2d91f15a91..8a3ef4ec66 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
@@ -14,12 +14,17 @@ import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
-
+import {
+ Motion,
+ AnimatePresence,
+ createMotionComponent,
+} from '@legendapp/motion';
import React from 'react';
+const AnimatedPressable = createMotionComponent(Pressable);
export const UIActionsheet = createActionsheet({
Root: View,
- Content: withStyleContext(View),
+ Content: withStyleContext(Motion.View),
// @ts-ignore
Item:
Platform.OS === 'web'
@@ -28,7 +33,7 @@ export const UIActionsheet = createActionsheet({
ItemText: Text,
DragIndicator: View,
IndicatorWrapper: View,
- Backdrop: Pressable,
+ Backdrop: AnimatedPressable,
ScrollView: ScrollView,
VirtualizedList: VirtualizedList,
FlatList: FlatList,
@@ -36,7 +41,7 @@ export const UIActionsheet = createActionsheet({
SectionHeaderText: H4,
Icon: View,
//@ts-ignore
- AnimatePresence: null,
+ AnimatePresence: AnimatePresence,
});
cssInterop(UIActionsheet, { className: 'style' });
@@ -169,7 +174,7 @@ const actionsheetSectionHeaderTextStyle = tva({
});
const actionsheetIconStyle = tva({
- base: 'bg-background-500',
+ base: 'text-typography-900',
variants: {
size: {
'2xs': 'h-3 w-3',
@@ -180,9 +185,6 @@ const actionsheetIconStyle = tva({
'xl': 'h-6 w-6',
},
},
- defaultVariants: {
- size: 'sm',
- },
});
const Actionsheet = React.forwardRef(
@@ -392,7 +394,19 @@ const ActionsheetSectionHeaderText = React.forwardRef(
);
const ActionsheetIcon = React.forwardRef(
- ({ className, size, ...props }: any, ref: any) => {
+ ({ className, as: AsComp, size = 'sm', ...props }: any, ref: any) => {
+ if (AsComp) {
+ return (
+ <AsComp
+ className={actionsheetIconStyle({
+ class: className,
+ size,
+ })}
+ ref={ref}
+ {...props}
+ />
+ );
+ }
return (
<UIActionsheet.Icon
className={actionsheetIconStyle({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
index 7b94f1211e..27fc9ca2a8 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import { createAlertDialog } from '@gluestack-ui/alert-dialog';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
@@ -10,21 +10,15 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import Animated, {
- Easing,
- useSharedValue,
- withSpring,
- withTiming,
-} from 'react-native-reanimated';
import {
- View,
- StyleSheet,
- Pressable,
- ScrollView,
- Platform,
-} from 'react-native';
+ Motion,
+ AnimatePresence,
+ createMotionAnimatedComponent,
+} from '@legendapp/motion';
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+import { View, Pressable, ScrollView, Platform } from 'react-native';
+
+const AnimatedPressable = createMotionAnimatedComponent(Pressable);
const UIAccessibleAlertDialog = createAlertDialog({
// @ts-ignore
Root:
@@ -32,12 +26,12 @@ const UIAccessibleAlertDialog = createAlertDialog({
? withStyleContext(View)
: withStyleContextAndStates(View),
Body: ScrollView,
- Content: Animated.View,
+ Content: Motion.View,
CloseButton: Pressable,
Header: View,
Footer: View,
Backdrop: AnimatedPressable,
- AnimatePresence: React.Fragment, //TODO: Add support for this
+ AnimatePresence: AnimatePresence, //TODO: Add support for this
});
cssInterop(UIAccessibleAlertDialog, { className: 'style' });
@@ -50,6 +44,15 @@ cssInterop(UIAccessibleAlertDialog.Backdrop, { className: 'style' });
const alertDialogStyle = tva({
base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
+ parentVariants: {
+ size: {
+ xs: '',
+ sm: '',
+ md: '',
+ lg: '',
+ full: '',
+ },
+ },
});
const alertDialogContentStyle = tva({
@@ -70,17 +73,17 @@ const alertDialogCloseButtonStyle = tva({
});
const alertDialogHeaderStyle = tva({
- base: 'p-4 border border-outline-300 justify-between items-center flex-row',
+ base: 'p-4 justify-between items-center flex-row',
});
const alertDialogFooterStyle = tva({
- base: 'p-4 flex-row justify-end items-center flex-wrap border-outline-300',
+ base: 'p-4 flex-row justify-end items-center flex-wrap',
});
const alertDialogBodyStyle = tva({ base: 'px-4 py-2' });
const alertDialogBackdropStyle = tva({
- base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-950 web:cursor-default',
+ base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
});
type IAlertDialogProps = React.ComponentProps<typeof UIAccessibleAlertDialog> &
@@ -120,11 +123,10 @@ const AlertDialog = React.forwardRef(
(
{
className,
- //@ts-ignore
size = 'md',
...props
}: { className?: string } & IAlertDialogProps,
- ref
+ ref?: any
) => {
return (
<UIAccessibleAlertDialog
@@ -145,29 +147,35 @@ const AlertDialogContent = React.forwardRef(
size,
...props
}: { className?: string } & IAlertDialogContentProps,
- ref
+ ref?: any
) => {
const { size: parentSize } = useStyleContext();
- const opacity = useSharedValue(0);
- const scale = useSharedValue(0.9);
- useEffect(() => {
- opacity.value = withTiming(1, {
- easing: Easing.linear,
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
- useEffect(() => {
- scale.value = withSpring(1, {
- damping: 18,
- stiffness: 250,
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
return (
<UIAccessibleAlertDialog.Content
pointerEvents="auto"
ref={ref}
+ initial={{
+ scale: 0.9,
+ opacity: 0,
+ }}
+ animate={{
+ scale: 1,
+ opacity: 1,
+ }}
+ exit={{
+ scale: 0.9,
+ opacity: 0,
+ }}
+ transition={{
+ type: 'spring',
+ damping: 18,
+ stiffness: 250,
+ opacity: {
+ type: 'timing',
+ duration: 250,
+ },
+ }}
{...props}
className={alertDialogContentStyle({
parentVariants: {
@@ -176,10 +184,6 @@ const AlertDialogContent = React.forwardRef(
size,
class: className,
})}
- style={{
- opacity: opacity,
- transform: [{ scale: scale }],
- }}
/>
);
}
@@ -191,7 +195,7 @@ const AlertDialogCloseButton = React.forwardRef(
className,
...props
}: { className?: string } & IAlertDialogCloseButtonProps,
- ref
+ ref?: any
) => {
return (
<UIAccessibleAlertDialog.CloseButton
@@ -208,7 +212,7 @@ const AlertDialogCloseButton = React.forwardRef(
const AlertDialogHeader = React.forwardRef(
(
{ className, ...props }: { className?: string } & IAlertDialogHeaderProps,
- ref
+ ref?: any
) => {
return (
<UIAccessibleAlertDialog.Header
@@ -225,7 +229,7 @@ const AlertDialogHeader = React.forwardRef(
const AlertDialogFooter = React.forwardRef(
(
{ className, ...props }: { className?: string } & IAlertDialogFooterProps,
- ref
+ ref?: any
) => {
return (
<UIAccessibleAlertDialog.Footer
@@ -242,7 +246,7 @@ const AlertDialogFooter = React.forwardRef(
const AlertDialogBody = React.forwardRef(
(
{ className, ...props }: { className?: string } & IAlertDialogBodyProps,
- ref
+ ref?: any
) => {
return (
<UIAccessibleAlertDialog.Body
@@ -259,29 +263,33 @@ const AlertDialogBody = React.forwardRef(
const AlertDialogBackdrop = React.forwardRef(
(
{ className, ...props }: { className?: string } & IAlertDialogBackdropProps,
- ref
+ ref?: any
) => {
- const opacity = useSharedValue(0);
-
- useEffect(() => {
- opacity.value = withTiming(0.5, {
- easing: Easing.linear,
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
return (
<UIAccessibleAlertDialog.Backdrop
ref={ref}
+ initial={{
+ opacity: 0,
+ }}
+ animate={{
+ opacity: 0.5,
+ }}
+ exit={{
+ opacity: 0,
+ }}
+ transition={{
+ type: 'spring',
+ damping: 18,
+ stiffness: 250,
+ opacity: {
+ type: 'timing',
+ duration: 250,
+ },
+ }}
{...props}
className={alertDialogBackdropStyle({
class: className,
})}
- style={[
- StyleSheet.absoluteFill,
- {
- opacity: opacity,
- },
- ]}
/>
);
}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
index 397efa0da0..25052a3292 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -13,7 +13,7 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
import { Platform } from 'react-native';
import { Check } from 'lucide-react-native';
-
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
const UICheckbox = createCheckbox({
// @ts-ignore
Root:
@@ -102,6 +102,7 @@ type ICheckboxIndicatorProps = React.ComponentProps<
typeof UICheckbox.Indicator
> &
VariantProps<typeof checkboxIndicatorStyle>;
+
const CheckboxIndicator = React.forwardRef(
(
{ className, ...props }: { className?: string } & ICheckboxIndicatorProps,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
index 9bf26815a0..43f2ee2a84 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
@@ -11,6 +11,13 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
const formControlStyle = tva({
base: 'flex flex-col',
+ variants: {
+ size: {
+ sm: '',
+ md: '',
+ lg: '',
+ },
+ },
});
const formControlErrorIconStyle = tva({
@@ -161,6 +168,7 @@ const formControlLabelTextStyle = tva({
});
const formControlLabelAstrickStyle = tva({
+ base: 'font-medium text-typography-900',
variants: {
isTruncated: {
true: 'web:truncate',
@@ -199,6 +207,20 @@ const formControlLabelAstrickStyle = tva({
},
});
+const FormControlLabelAstrick = ({ className, ...props }: any) => {
+ const { size: parentSize } = useStyleContext();
+
+ return (
+ <Text
+ className={formControlLabelAstrickStyle({
+ parentVariants: { size: parentSize },
+ class: className,
+ })}
+ {...props}
+ />
+ );
+};
+
export const UIFormControl = createFormControl({
Root: withStyleContext(View),
Error: View,
@@ -206,7 +228,7 @@ export const UIFormControl = createFormControl({
ErrorIcon: View,
Label: View,
LabelText: Text,
- LabelAstrick: Text,
+ LabelAstrick: FormControlLabelAstrick,
Helper: View,
HelperText: Text,
});
@@ -217,7 +239,6 @@ cssInterop(UIFormControl.Error.Text, { className: 'style' });
cssInterop(UIFormControl.Error.Icon, { className: 'style' });
cssInterop(UIFormControl.Label, { className: 'style' });
cssInterop(UIFormControl.Label.Text, { className: 'style' });
-cssInterop(UIFormControl.Label.Astrick, { className: 'style' });
cssInterop(UIFormControl.Helper, { className: 'style' });
cssInterop(UIFormControl.Helper.Text, { className: 'style' });
@@ -282,7 +303,7 @@ const FormControlErrorIcon = ({
size,
as: AsComp,
...props
-}: { className?: string } & IFormControlErrorIconProps) => {
+}: { className?: string; as?: any } & IFormControlErrorIconProps) => {
const { size: parentSize } = useStyleContext();
if (AsComp) {
return (
@@ -345,33 +366,11 @@ const FormControlLabelText = ({
);
};
-type IFormControlLabelAstrickProps = React.ComponentProps<
- typeof UIFormControl.Label.Astrick
-> &
- VariantProps<typeof formControlLabelAstrickStyle>;
-const FormControlLabelAstrick = ({
- className,
- size,
- ...props
-}: { className?: string } & IFormControlLabelAstrickProps) => {
- const { size: parentSize } = useStyleContext();
-
- return (
- <UIFormControl.Label.Astrick
- className={formControlLabelAstrickStyle({
- parentVariants: { size: parentSize },
- size,
- class: className,
- })}
- {...props}
- />
- );
-};
-
type IFormControlHelperProps = React.ComponentProps<
typeof UIFormControl.Helper
> &
VariantProps<typeof formControlHelperStyle>;
+
const FormControlHelper = ({
className,
...props
@@ -390,6 +389,7 @@ type IFormControlHelperTextProps = React.ComponentProps<
typeof UIFormControl.Helper.Text
> &
VariantProps<typeof formControlHelperTextStyle>;
+
const FormControlHelperText = ({
className,
size,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx
index 3581f69e30..e62c8b3734 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx
@@ -1,40 +1,19 @@
import React from 'react';
-import { Platform, View } from 'react-native';
-
-// Change the config file path
import { config } from './config';
-
-const providerStyle = Platform.select({
- web: {
- flex: 1,
- height: '100vh',
- width: '100%',
- },
- android: {
- flex: 1,
- height: '100%',
- width: '100%',
- },
- ios: {
- flex: 1,
- height: '100%',
- width: '100%',
- },
-});
+import { View } from 'react-native';
export function GluestackUIProvider({
- mode,
+ mode = 'light',
...props
}: {
- mode?: 'light' | 'dark';
+ mode: 'light' | 'dark';
children: any;
}) {
- // @ts-ignore
return (
<View
style={[
- mode ? config[mode] : config['light'],
- providerStyle,
+ config[mode],
+ { flex: 1, height: '100%', width: '100%' },
// @ts-ignore
props.style,
]}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
new file mode 100644
index 0000000000..83729410d9
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
@@ -0,0 +1,24 @@
+import { config } from './config';
+
+export function GluestackUIProvider({
+ mode = 'light',
+ ...props
+}: {
+ mode: 'light' | 'dark';
+ children: any;
+}) {
+ if (config[mode] && typeof document !== 'undefined') {
+ const element = document.documentElement;
+ if (element) {
+ const head = element.querySelector('head');
+ const style = document.createElement('style');
+ const stringcssvars = Object.keys(config[mode]).reduce((acc, cur) => {
+ acc += `${cur}:${config[mode][cur]};`;
+ return acc;
+ }, '');
+ style.innerHTML = `:root {${stringcssvars}} `;
+ if (head) head.appendChild(style);
+ }
+ }
+ return props.children;
+}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
index 0f65d15cb9..bd50c46ea3 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { H4 } from '@expo/html-elements';
+import React, { useCallback } from 'react';
+import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
@@ -43,8 +43,75 @@ const headingStyle = tva({
cssInterop(H4, { className: 'style' });
-const Heading = ({ className, size = 'lg', ...props }: any) => {
- return <H4 className={headingStyle({ size, class: className })} {...props} />;
+const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => {
+ const MappedHeading = useCallback(
+ () => {
+ switch (size) {
+ case '5xl':
+ case '4xl':
+ case '3xl':
+ return (
+ <H1
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ case '2xl':
+ return (
+ <H2
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ case 'xl':
+ return (
+ <H3
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ case 'lg':
+ return (
+ <H4
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ case 'md':
+ return (
+ <H5
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ case 'sm':
+ case 'xs':
+ return (
+ <H6
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ default:
+ return (
+ <H4
+ className={headingStyle({ size, class: className })}
+ {...props}
+ />
+ );
+ }
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [size]
+ );
+
+ if (AsComp) {
+ return (
+ <AsComp className={headingStyle({ size, class: className })} {...props} />
+ );
+ }
+
+ return <MappedHeading />;
};
Heading.displayName = 'Heading';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
index e84b4653e4..d6d086f1f0 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -10,6 +10,7 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
const UIInput = createInput({
// @ts-ignore
diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
index 54a0c7cc62..0d3ee498dd 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
@@ -8,6 +8,7 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
import React from 'react';
export const UILink = createLink({
@@ -33,10 +34,9 @@ const linkTextStyle = tva({
type ILinkProps = React.ComponentProps<typeof UILink> &
VariantProps<typeof linkStyle>;
const Link = React.forwardRef(
- ({ className, ...props }: { className?: string } & ILinkProps, ref) => {
+ ({ className, ...props }: { className?: string } & ILinkProps, ref?: any) => {
return (
<UILink
- // @ts-ignore
ref={ref}
{...props}
className={linkStyle({ class: className })}
@@ -48,10 +48,12 @@ const Link = React.forwardRef(
type ILinkTextProps = React.ComponentProps<typeof UILink.Text> &
VariantProps<typeof linkTextStyle>;
const LinkText = React.forwardRef(
- ({ className, ...props }: { className?: string } & ILinkTextProps, ref) => {
+ (
+ { className, ...props }: { className?: string } & ILinkTextProps,
+ ref?: any
+ ) => {
return (
<UILink.Text
- // @ts-ignore
ref={ref}
{...props}
className={linkTextStyle({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
index f74f0b72ec..ba57e3a9dc 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
@@ -1,221 +1,187 @@
-import { AnimatePresence } from '@gluestack-style/animation-resolver';
+import React from 'react';
import { createMenu } from '@gluestack-ui/menu';
-import { styled } from '@gluestack-style/react';
-import { AnimatedView } from '@gluestack-style/animation-resolver';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { Pressable, Text } from 'react-native';
+import { Motion, AnimatePresence } from '@legendapp/motion';
+import { VariantProps } from '@gluestack-ui/nativewind-utils';
-const StyledRoot = styled(
- AnimatedView,
- {
- ':initial': {
- opacity: 0,
- },
-
- ':animate': {
- opacity: 1,
- },
+const menuStyle = tva({
+ base: 'min-w-[200px] py-2 rounded-sm bg-background-0',
+});
- ':exit': {
- opacity: 0,
- },
+const menuItemStyle = tva({
+ base: 'p-3 flex-row items-center data-[hover=true]:bg-background-100 data-[active=true]:bg-background-200 data-[focus=true]:bg-background-100 data-[focus=true]:web:outline-noe data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent ',
+});
- ':transition': {
- type: 'spring',
- damping: 18,
- stiffness: 250,
- opacity: {
- type: 'timing',
- duration: 200,
- },
- },
+const menuBackdropStyle = tva({
+ base: 'absolute top-0 bottom-0 left-0 right-0 bg-background-dark opacity-50 web:cursor-default',
+ // add this classnames if you want to give background colour to backdrop
+ // opacity-50 bg-background-500,
+});
- 'minWidth': 200,
- 'py': '$2',
- 'rounded': '$sm',
- 'bg': '$background0',
+const menuItemLabelStyle = tva({
+ base: 'text-typography-700 font-normal font-body',
- 'defaultProps': {
- softShadow: '3',
+ variants: {
+ isTruncated: {
+ true: 'web:truncate',
},
- },
- {}
-);
-
-const StyledItem = styled(
- Pressable,
- {
- 'p': '$3',
- 'flexDirection': 'row',
- 'alignItems': 'center',
-
- ':hover': {
- bg: '$background100',
+ bold: {
+ true: 'font-bold',
},
-
- ':disabled': {
- 'opacity': 0.4,
-
- '_web': {
- cursor: 'not-allowed',
- },
-
- ':focus': {
- bg: 'transparent',
- },
+ underline: {
+ true: 'underline',
},
-
- ':active': {
- bg: '$background200',
+ strikeThrough: {
+ true: 'line-through',
},
-
- ':focus': {
- bg: '$background100',
- // @ts-ignore
- outlineWidth: '$0',
- outlineStyle: 'none',
+ size: {
+ '2xs': 'text-2xs',
+ 'xs': 'text-xs',
+ 'sm': 'text-sm',
+ 'md': 'text-base',
+ 'lg': 'text-lg',
+ 'xl': 'text-xl',
+ '2xl': 'text-2xl',
+ '3xl': 'text-3xl',
+ '4xl': 'text-4xl',
+ '5xl': 'text-5xl',
+ '6xl': 'text-6xl',
},
-
- ':focusVisible': {
- // @ts-ignore
- outlineWidth: '$0.5',
-
- outlineColor: '$primary700',
- outlineStyle: 'solid',
+ sub: {
+ true: 'text-xs',
},
-
- '_web': {
- cursor: 'pointer',
+ italic: {
+ true: 'italic',
},
- },
- { descendantStyle: ['_text'] }
-);
-
-const StyledBackdrop = styled(
- Pressable,
- {
- position: 'absolute',
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- // use this for when you want to give background colour to backdrop
- // opacity: 0.5,
- // bg: '$background500',
- _web: {
- cursor: 'default',
+ highlight: {
+ true: 'bg-yellow-500',
},
},
- {}
+});
+
+const BackdropPressable = React.forwardRef(
+ ({ className, ...props }: any, ref?: any) => {
+ return (
+ <Pressable
+ ref={ref}
+ className={menuBackdropStyle({
+ class: className,
+ })}
+ {...props}
+ />
+ );
+ }
);
-const StyledLabel = styled(
- Text,
- {
- color: '$text700',
- fontWeight: '$normal',
- fontFamily: '$body',
- fontStyle: 'normal',
- letterSpacing: '$md',
+type IMenuItemProps = VariantProps<typeof menuItemStyle>;
+
+const Item = React.forwardRef(
+ (
+ { className, ...props }: { className?: string } & IMenuItemProps,
+ ref?: any
+ ) => {
+ return (
+ <Pressable
+ ref={ref}
+ className={menuItemStyle({
+ class: className,
+ })}
+ {...props}
+ />
+ );
+ }
+);
+export const UIMenu = createMenu({
+ Root: Motion.View,
+ Item: Item,
+ Label: Text,
+ Backdrop: BackdropPressable,
+ AnimatePresence: AnimatePresence,
+});
- variants: {
- isTruncated: {
- true: {
- props: {
- // @ts-ignore
- numberOfLines: 1,
- ellipsizeMode: 'tail',
+type IMenuProps = React.ComponentProps<typeof UIMenu> &
+ VariantProps<typeof menuStyle>;
+type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
+ VariantProps<typeof menuItemLabelStyle>;
+
+const Menu = React.forwardRef(
+ ({ className, ...props }: { className?: string } & IMenuProps, ref?: any) => {
+ return (
+ <UIMenu
+ ref={ref}
+ initial={{
+ opacity: 0,
+ }}
+ animate={{
+ opacity: 1,
+ }}
+ exit={{
+ opacity: 0,
+ }}
+ transition={{
+ type: 'spring',
+ damping: 18,
+ stiffness: 250,
+ opacity: {
+ type: 'timing',
+ duration: 200,
},
- },
- },
- bold: {
- true: {
- fontWeight: '$bold',
- },
- },
- underline: {
- true: {
- textDecorationLine: 'underline',
- },
- },
- strikeThrough: {
- true: {
- textDecorationLine: 'line-through',
- },
- },
- size: {
- '2xs': {
- fontSize: '$2xs',
- },
- 'xs': {
- fontSize: '$xs',
- },
-
- 'sm': {
- fontSize: '$sm',
- },
-
- 'md': {
- fontSize: '$md',
- },
-
- 'lg': {
- fontSize: '$lg',
- },
-
- 'xl': {
- fontSize: '$xl',
- },
-
- '2xl': {
- fontSize: '$2xl',
- },
-
- '3xl': {
- fontSize: '$3xl',
- },
-
- '4xl': {
- fontSize: '$4xl',
- },
+ }}
+ className={menuStyle({
+ class: className,
+ })}
+ {...props}
+ />
+ );
+ }
+);
- '5xl': {
- fontSize: '$5xl',
- },
+cssInterop(UIMenu, { className: 'style' });
+cssInterop(UIMenu.Item, { className: 'style' });
+cssInterop(UIMenu.ItemLabel, { className: 'style' });
+
+const MenuItem = UIMenu.Item;
+
+const MenuItemLabel = React.forwardRef(
+ (
+ {
+ className,
+ isTruncated,
+ bold,
+ underline,
+ strikeThrough,
+ size = 'md',
+ sub,
+ italic,
+ highlight,
+ ...props
+ }: { className?: string } & IMenuItemLabelProps,
+ ref?: any
+ ) => {
+ return (
+ <UIMenu.ItemLabel
+ ref={ref}
+ className={menuItemLabelStyle({
+ isTruncated,
+ bold,
+ underline,
+ strikeThrough,
+ size,
+ sub,
+ italic,
+ highlight,
+ class: className,
+ })}
+ {...props}
+ />
+ );
+ }
+);
- '6xl': {
- fontSize: '$6xl',
- },
- },
- sub: {
- true: {
- fontSize: '$xs',
- },
- },
- italic: {
- true: {
- fontStyle: 'italic',
- },
- },
- highlight: {
- true: {
- bg: '$yellow500',
- },
- },
- },
+Menu.displayName = 'Menu';
+MenuItem.displayName = 'MenuItem';
+MenuItemLabel.displayName = 'MenuItemLabel';
- defaultProps: {
- size: 'md',
- },
- },
- { ancestorStyle: ['_text'] }
-);
-export const Menu = createMenu({
- Root: StyledRoot,
- Item: StyledItem,
- Label: StyledLabel,
- Backdrop: StyledBackdrop,
- //@ts-ignore
- AnimatePresence: AnimatePresence,
-});
-export const MenuItem = Menu.Item;
-export const MenuItemLabel = Menu.ItemLabel;
+export { Menu, MenuItem, MenuItemLabel };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
index 5b1bc5c760..942d33692f 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
@@ -53,7 +53,7 @@ const modalStyle = tva({
});
const modalBackdropStyle = tva({
- base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-950 web:cursor-default',
+ base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
});
const modalContentStyle = tva({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
index 2edac1c852..07109cc784 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
@@ -61,7 +61,7 @@ const popoverArrowStyle = tva({
});
const popoverBackdropStyle = tva({
- base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-950 web:cursor-default',
+ base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
});
const popoverBodyStyle = tva({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
index c08ed9c2ba..a237fef35d 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
@@ -9,12 +9,22 @@ import {
} from '@gluestack-ui/nativewind-utils/withStyleContext';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
+import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
const radioStyle = tva({
base: 'flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed gap-2',
+ variants: {
+ size: {
+ sm: '',
+ md: '',
+ lg: '',
+ },
+ },
});
-const groupStyle = tva({ base: 'gap-2' });
+const groupStyle = tva({
+ base: 'gap-2',
+});
const iconStyle = tva({
base: 'fill-background-800 stroke-background-800 rounded-full data-[checked=true]:text-primary-600 data-[checked=true]:data-[hover=true]:text-primary-700 data-[checked=true]:data-[hover=true]:data-[disabled=true]:text-primary-600',
@@ -32,7 +42,7 @@ const iconStyle = tva({
});
const indicatorStyle = tva({
- base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400',
+ base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-primary-700 data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400',
parentVariants: {
size: {
sm: 'h-4 w-4',
@@ -53,6 +63,7 @@ const UIRadio = createRadio({
? withStyleContext(View)
: withStyleContextAndStates(Pressable),
Group: View,
+ // @ts-ignore
Icon: Platform.OS === 'web' ? Circle : withStates(Circle),
Indicator: Platform.OS === 'web' ? View : withStates(View),
Label: Platform.OS === 'web' ? Text : withStates(Text),
diff --git a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
index 37547f4a21..057be5a7ed 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
@@ -30,8 +30,7 @@ cssInterop(UISlider.Track, { className: 'style' });
cssInterop(UISlider.FilledTrack, { className: 'style' });
const sliderStyle = tva({
- base: 'justify-center items-center data-[disabled=true]:web:cursor-not-allowed data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-auto',
-
+ base: 'justify-center items-center data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-none',
variants: {
orientation: {
horizontal: 'w-full',
@@ -45,7 +44,7 @@ const sliderStyle = tva({
});
const sliderThumbStyle = tva({
- base: 'bg-primary-500 absolute rounded-full focus:bg-primary-600 active:bg-primary-600 hover:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:active:outline-4 web:active:outline web:active:outline-primary-400 web:focus:outline-4 web:focus:outline web:focus:outline-primary-400 shadow',
+ base: 'bg-primary-500 absolute rounded-full focus:bg-primary-600 active:bg-primary-600 hover:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:active:outline-4 web:active:outline web:active:outline-primary-400 data-[focus=true]:web:outline-4 data-[focus=true]:web:outline data-[focus=true]:web:outline-primary-400 shadow',
parentVariants: {
size: {
@@ -58,17 +57,20 @@ const sliderThumbStyle = tva({
const sliderTrackStyle = tva({
base: 'bg-background-300 rounded-lg overflow-hidden',
- variants: {
- variant: {
- horizontal: 'w-full',
- vertical: 'h-full',
- },
- },
parentVariants: {
orientation: {
horizontal: 'w-full',
vertical: 'h-full',
},
+ isReversed: {
+ true: '',
+ false: '',
+ },
+ size: {
+ sm: '',
+ md: '',
+ lg: '',
+ },
},
parentCompoundVariants: [
{
@@ -85,7 +87,7 @@ const sliderTrackStyle = tva({
{
orientation: 'horizontal',
size: 'md',
- class: 'h-[5px] flex-row',
+ class: 'h-1 flex-row',
},
{
orientation: 'horizontal',
@@ -150,10 +152,6 @@ const sliderFilledTrackStyle = tva({
},
});
-// const sliderThumbInteractionStyle = tva({
-// base: 'rounded-full -z-10',
-// });
-
export const Slider = React.forwardRef(
(
{
@@ -168,9 +166,10 @@ export const Slider = React.forwardRef(
return (
<UISlider
ref={ref}
+ isReversed={isReversed}
+ orientation={orientation}
{...props}
className={sliderStyle({
- size,
orientation,
isReversed,
class: className,
@@ -183,11 +182,7 @@ export const Slider = React.forwardRef(
export const SliderThumb = React.forwardRef(
({ className, size, ...props }: any, ref) => {
- const {
- orientation: parentOrientation,
- size: parentSize,
- isReversed,
- } = useStyleContext();
+ const { size: parentSize } = useStyleContext();
return (
<UISlider.Thumb
@@ -195,9 +190,7 @@ export const SliderThumb = React.forwardRef(
{...props}
className={sliderThumbStyle({
parentVariants: {
- orientation: parentOrientation,
size: parentSize,
- isReversed,
},
size,
class: className,
@@ -234,11 +227,7 @@ export const SliderTrack = React.forwardRef(
export const SliderFilledTrack = React.forwardRef(
({ className, ...props }: any, ref) => {
- const {
- orientation: parentOrientation,
- size: parentSize,
- isReversed,
- } = useStyleContext();
+ const { orientation: parentOrientation } = useStyleContext();
return (
<UISlider.FilledTrack
@@ -247,8 +236,6 @@ export const SliderFilledTrack = React.forwardRef(
className={sliderFilledTrackStyle({
parentVariants: {
orientation: parentOrientation,
- size: parentSize,
- isReversed,
},
class: className,
})}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
index cd06d53aeb..ed94f88da8 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
@@ -61,7 +61,7 @@ const Text = React.forwardRef(
italic,
highlight,
...props
- }: ITextProps,
+ }: { className?: string } & ITextProps,
ref?: any
) => {
return (
diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
index ac79396883..57f51975b4 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
@@ -10,6 +10,7 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
const UITextarea = createTextarea({
// @ts-ignore
diff --git a/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
index 32c2d001c4..fd378ad76e 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
@@ -1,85 +1,50 @@
import React from 'react';
import { createToast, createToastHook } from '@gluestack-ui/toast';
-import {
- AnimatePresence,
- AnimatedView,
-} from '@gluestack-style/animation-resolver';
-import { styled } from '@gluestack-style/react';
import { Text, View } from 'react-native';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import {
- withStyleContext,
- useStyleContext,
-} from '@gluestack-ui/nativewind-utils/withStyleContext';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { Motion, AnimatePresence } from '@legendapp/motion';
-const AnimationWrapper = styled(AnimatedView, {});
-export const useToast = createToastHook(AnimationWrapper, AnimatePresence);
+export const useToast = createToastHook(Motion.View, AnimatePresence);
export const UIToast = createToast({
- Root: withStyleContext(View),
+ Root: View,
Title: Text,
Description: Text,
});
+cssInterop(Motion.View, { className: 'style' });
cssInterop(UIToast, { className: 'style' });
cssInterop(UIToast.Title, { className: 'style' });
cssInterop(UIToast.Description, { className: 'style' });
-const toastStyle = tva(
- {
- base: 'px-4 py-3 m-3 rounded-sm flex-row web:pointer-events-auto shadow-lg',
- variants: {
- action: {
- error: 'bg-background-error border-error-300',
-
- // _icon: {
- // color: '$error500',
- // },
-
- warning: 'bg-background-warning border-warning-300',
-
- // _icon: {
- // color: '$warning500',
- // },
- // },
- success: 'bg-background-success border-success-300',
+const toastStyle = tva({
+ base: 'px-4 py-3 m-3 rounded-sm flex-row web:pointer-events-auto shadow-lg',
+ variants: {
+ action: {
+ error: 'bg-background-error border-error-300',
- // _icon: {
- // color: '$success500',
- // },
- // },
- info: 'bg-background-info border-info-300',
+ warning: 'bg-background-warning border-warning-300',
- // _icon: {
- // color: '$info500',
- // },
- // },
- attention: 'bg-background-muted border-secondary-30',
- // bg: '$backgroundMuted',
- // borderColor: '$secondary300',
+ success: 'bg-background-success border-success-300',
- // _icon: {
- // color: '$secondary600',
- // },
- // },
- },
+ info: 'bg-background-info border-info-300',
- variant: {
- solid: '',
- outline: 'border-1 bg-white border-red-400',
- accent: 'border-l-4',
- },
+ attention: 'bg-background-muted border-secondary-300',
},
- defaultVariants: {
- // hardShadow: '5',
- variant: 'solid',
- action: 'attention',
+ variant: {
+ solid: '',
+ outline: 'border bg-white',
+ accent: 'border-l-4',
},
- }
- // { descendantStyle: ['_icon', '_title', '_description'] }
-);
+ },
+
+ defaultVariants: {
+ variant: 'solid',
+ action: 'attention',
+ },
+});
const toastTitleStyle = tva({
base: 'text-typography-700 font-medium font-body tracking-md text-left',
variants: {
@@ -109,83 +74,59 @@ const toastTitleStyle = tva({
'6xl': 'text-6xl',
},
},
- defaultVariants: {
- size: 'md',
- },
- // { ancestorStyle: ['_title'] }
});
-const toastDescriptionStyle = tva(
- {
- base: 'text-typography-700 font-normal font-body tracking-md text-left',
- variants: {
- isTruncated: {
- true: '',
- },
- bold: {
- true: 'font-bold',
- },
- underline: {
- true: 'underline',
- },
- strikeThrough: {
- true: 'line-through',
- },
- size: {
- '2xs': 'text-2xs',
- 'xs': 'text-xs',
- 'sm': 'text-sm',
- 'md': 'text-md',
- 'lg': 'text-lg',
- 'xl': 'text-xl',
- '2xl': 'text-2xl',
- '3xl': 'text-3xl',
- '4xl': 'text-4xl',
- '5xl': 'text-5xl',
- '6xl': 'text-6xl',
- },
+const toastDescriptionStyle = tva({
+ base: 'text-typography-700 font-normal font-body tracking-md text-left',
+ variants: {
+ isTruncated: {
+ true: '',
},
- defaultVariants: {
- size: 'sm',
+ bold: {
+ true: 'font-bold',
},
- }
- // { ancestorStyle: ['_description'] }
-);
+ underline: {
+ true: 'underline',
+ },
+ strikeThrough: {
+ true: 'line-through',
+ },
+ size: {
+ '2xs': 'text-2xs',
+ 'xs': 'text-xs',
+ 'sm': 'text-sm',
+ 'md': 'text-md',
+ 'lg': 'text-lg',
+ 'xl': 'text-xl',
+ '2xl': 'text-2xl',
+ '3xl': 'text-3xl',
+ '4xl': 'text-4xl',
+ '5xl': 'text-5xl',
+ '6xl': 'text-6xl',
+ },
+ },
+});
export const Toast = React.forwardRef(
- ({ className, variant, size, action, ...props }: any, ref) => {
+ ({ className, variant, action, ...props }: any, ref?: any) => {
return (
<UIToast
ref={ref}
{...props}
- className={toastStyle({ variant, size, action, class: className })}
- context={{ variant, size, action }}
+ className={toastStyle({ variant, action, class: className })}
/>
);
}
);
export const ToastTitle = React.forwardRef(
- ({ className, variant, size, action, ...props }: any, ref) => {
- const {
- variant: parentVariant,
- size: parentSize,
- action: parentAction,
- } = useStyleContext();
-
+ ({ className, size = 'md', ...props }: any, ref?: any) => {
return (
<UIToast.Title
ref={ref}
{...props}
className={toastTitleStyle({
- parentVariants: {
- variant: parentVariant,
- size: parentSize,
- action: parentAction,
- },
- variant,
size,
- action,
class: className,
})}
/>
@@ -193,26 +134,13 @@ export const ToastTitle = React.forwardRef(
}
);
export const ToastDescription = React.forwardRef(
- ({ className, variant, size, action, ...props }: any, ref) => {
- const {
- variant: parentVariant,
- size: parentSize,
- action: parentAction,
- } = useStyleContext();
-
+ ({ className, size, ...props }: any, ref?: any) => {
return (
<UIToast.Description
ref={ref}
{...props}
className={toastDescriptionStyle({
- parentVariants: {
- variant: parentVariant,
- size: parentSize,
- action: parentAction,
- },
- variant,
size,
- action,
class: className,
})}
/>
diff --git a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
index 6eaf7e6d11..b15652a994 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
@@ -1,94 +1,34 @@
+import React from 'react';
import { createTooltip } from '@gluestack-ui/tooltip';
-import {
- AnimatePresence,
- AnimatedView,
-} from '@gluestack-style/animation-resolver';
-import { View, Text } from 'react-native';
+import { View, Text, Platform } from 'react-native';
+import { VariantProps } from '@gluestack-ui/nativewind-utils';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import React from 'react';
+import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+
+import { Motion, AnimatePresence } from '@legendapp/motion';
export const UITooltip = createTooltip({
- Root: withStyleContext(View),
- Content: AnimatedView,
+ Root:
+ Platform.OS === 'web'
+ ? withStyleContext(View)
+ : withStyleContextAndStates(View),
+ Content: Motion.View,
Text: Text,
- //@ts-ignore
- AnimatePresence: AnimatePresence,
+ AnimatePresence: AnimatePresence, // TODO: Add support for this
});
const tooltipStyle = tva({
base: 'w-full h-full web:pointer-events-none',
});
-// const StyledRoot = styled(
-// View,
-// {
-// width: '$full',
-// height: '$full',
-// _web: {
-// pointerEvents: 'none',
-// },
-// },
-// {}
-// );
-
const tooltipContentStyle = tva({
- base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto shadow',
+ base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto',
});
-// const StyledContent = styled(
-// AnimatedView,
-// {
-// ':initial': {
-// opacity: 0,
-// scale: 0.5,
-// },
-
-// ':animate': {
-// opacity: 1,
-// scale: 1,
-// },
-
-// ':exit': {
-// opacity: 0,
-// scale: 0.5,
-// },
-
-// ':transition': {
-// type: 'spring',
-// damping: 18,
-// stiffness: 250,
-// opacity: {
-// type: 'timing',
-// duration: 250,
-// },
-// },
-
-// 'py': '$1',
-// 'px': '$3',
-// 'borderRadius': '$sm',
-// 'bg': '$background900',
-
-// '_text': {
-// fontSize: '$xs',
-// color: '$text50',
-// },
-
-// '_web': {
-// pointerEvents: 'auto',
-// },
-
-// 'defaultProps': {
-// hardShadow: '2',
-// },
-// },
-// {
-// descendantStyle: ['_text'],
-// }
-// );
-
const tooltipTextStyle = tva({
- base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-text-50',
+ base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-typography-50',
variants: {
isTruncated: {
@@ -96,179 +36,119 @@ const tooltipTextStyle = tva({
props: 'line-clamp-1 truncate',
},
},
- },
- bold: {
- true: 'font-bold',
- },
- underline: {
- true: 'underline',
- },
- strikeThrough: {
- true: 'line-through',
- },
- size: {
- '2xs': 'text-2xs',
- 'xs': 'text-xs',
- 'sm': 'text-sm',
- 'md': 'text-base',
- 'lg': 'text-lg',
- 'xl': 'text-xl',
- '2xl': 'text-2xl',
- '3xl': 'text-3xl',
- '4xl': 'text-4xl',
- '5xl': 'text-5xl',
- '6xl': 'text-6xl',
- },
- sub: {
- true: 'text-xs',
- },
- italic: {
- true: 'italic',
- },
- highlight: {
- true: 'bg-yellow-500',
+ bold: {
+ true: 'font-bold',
+ },
+ underline: {
+ true: 'underline',
+ },
+ strikeThrough: {
+ true: 'line-through',
+ },
+ size: {
+ '2xs': 'text-2xs',
+ 'xs': 'text-xs',
+ 'sm': 'text-sm',
+ 'md': 'text-base',
+ 'lg': 'text-lg',
+ 'xl': 'text-xl',
+ '2xl': 'text-2xl',
+ '3xl': 'text-3xl',
+ '4xl': 'text-4xl',
+ '5xl': 'text-5xl',
+ '6xl': 'text-6xl',
+ },
+ sub: {
+ true: 'text-xs',
+ },
+ italic: {
+ true: 'italic',
+ },
+ highlight: {
+ true: 'bg-yellow-500',
+ },
},
});
-// const StyledText = styled(
-// Text,
-// {
-// fontWeight: '$normal',
-// fontStyle: 'normal',
-// letterSpacing: '$md',
-
-// variants: {
-// isTruncated: {
-// true: {
-// props: {
-// // @ts-ignore
-// numberOfLines: 1,
-// ellipsizeMode: 'tail',
-// },
-// },
-// },
-// bold: {
-// true: {
-// fontWeight: '$bold',
-// },
-// },
-// underline: {
-// true: {
-// textDecorationLine: 'underline',
-// },
-// },
-// strikeThrough: {
-// true: {
-// textDecorationLine: 'line-through',
-// },
-// },
-// size: {
-// '2xs': {
-// fontSize: '$2xs',
-// },
-// 'xs': {
-// fontSize: '$xs',
-// },
-
-// 'sm': {
-// fontSize: '$sm',
-// },
-
-// 'md': {
-// fontSize: '$md',
-// },
-
-// 'lg': {
-// fontSize: '$lg',
-// },
-
-// 'xl': {
-// fontSize: '$xl',
-// },
-
-// '2xl': {
-// fontSize: '$2xl',
-// },
-
-// '3xl': {
-// fontSize: '$3xl',
-// },
-
-// '4xl': {
-// fontSize: '$4xl',
-// },
-
-// '5xl': {
-// fontSize: '$5xl',
-// },
-
-// '6xl': {
-// fontSize: '$6xl',
-// },
-// },
-// sub: {
-// true: {
-// fontSize: '$xs',
-// },
-// },
-// italic: {
-// true: {
-// fontStyle: 'italic',
-// },
-// },
-// highlight: {
-// true: {
-// bg: '$yellow500',
-// },
-// },
-// },
-
-// defaultProps: {
-// size: 'md',
-// },
-// color: '$red400',
-// fontFamily: '$body',
-// _web: {
-// userSelect: 'none',
-// },
-// },
-// {
-// ancestorStyle: ['_text'],
-// }
-// );
-
-export const Tooltip = React.forwardRef(({ className, ...props }: any, ref) => {
- return (
- <UITooltip
- ref={ref}
- {...props}
- className={tooltipStyle({ class: className })}
- />
- );
-});
+cssInterop(UITooltip, { className: 'style' });
+cssInterop(UITooltip.Content, { className: 'style' });
+cssInterop(UITooltip.Text, { className: 'style' });
+
+type ITooltipProps = React.ComponentProps<typeof UITooltip> &
+ VariantProps<typeof tooltipStyle>;
+type ITooltipContentProps = React.ComponentProps<typeof UITooltip.Content> &
+ VariantProps<typeof tooltipContentStyle>;
+type ITooltipTextProps = React.ComponentProps<typeof UITooltip.Text> &
+ VariantProps<typeof tooltipTextStyle>;
+
+export const Tooltip = React.forwardRef(
+ (
+ { className, ...props }: { className?: string } & ITooltipProps,
+ ref?: any
+ ) => {
+ return (
+ <UITooltip
+ ref={ref}
+ className={tooltipStyle({ class: className })}
+ {...props}
+ />
+ );
+ }
+);
export const TooltipContent = React.forwardRef(
- ({ className, ...props }: any, ref) => {
+ (
+ { className, ...props }: { className?: string } & ITooltipContentProps,
+ ref
+ ) => {
return (
<UITooltip.Content
ref={ref}
+ initial={{
+ opacity: 0,
+ scale: 0.5,
+ }}
+ animate={{
+ opacity: 1,
+ scale: 1,
+ }}
+ exit={{
+ opacity: 0,
+ scale: 0.5,
+ }}
+ transition={{
+ type: 'spring',
+ damping: 18,
+ stiffness: 50,
+ opacity: {
+ type: 'timing',
+ duration: 250,
+ },
+ }}
{...props}
className={tooltipContentStyle({
class: className,
})}
+ pointerEvents="auto"
/>
);
}
);
export const TooltipText = React.forwardRef(
- ({ className, size = 'md', ...props }: any, ref) => {
+ (
+ {
+ className,
+ size = 'md',
+ ...props
+ }: { className?: string } & ITooltipTextProps,
+ ref?: any
+ ) => {
return (
<UITooltip.Text
ref={ref}
- {...props}
className={tooltipTextStyle({ size, class: className })}
- context={{ size }}
+ {...props}
/>
);
}
diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx
index 2f3e65da37..a61583ed31 100644
--- a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx
@@ -178,6 +178,9 @@ module.exports = {
800: 'var(--color-typography-800)',
900: 'var(--color-typography-900)',
950: 'var(--color-typography-950)',
+ white: '#FFFFFF',
+ gray: '#D4D4D4',
+ black: '#181718',
},
outline: {
0: 'var(--color-outline-0)',
@@ -210,6 +213,8 @@ module.exports = {
warning: 'var(--color-background-warning)',
muted: 'var(--color-background-muted)',
success: 'var(--color-background-success)',
+ light: '#FBFBFB',
+ dark: '#181719',
},
},
fontFamily: {
@@ -259,7 +264,8 @@ To add config, create a `gluestack-ui-provider/config.ts` file in your `componen
</CollapsibleCode>
-To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/ui` folder and paste the following code.
+#### For Native
+To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/` folder and paste the following code.
<CollapsibleCode>
@@ -269,6 +275,17 @@ To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file in
</CollapsibleCode>
+#### For Web
+To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.web.tsx` file inside `components/` folder and paste the following code.
+
+<CollapsibleCode>
+
+```jsx
+%%-- File: core-components/nativewind/gluestack-ui-provider/index.web.tsx --%%
+```
+
+</CollapsibleCode>
+
### Step 6: Usage
Wrap your app with `GluestackUIProvider` in `App.tsx`.
diff --git a/example/storybook-nativewind/tailwind.config.js b/example/storybook-nativewind/tailwind.config.js
index 81b64e19a1..54a93ef22f 100644
--- a/example/storybook-nativewind/tailwind.config.js
+++ b/example/storybook-nativewind/tailwind.config.js
@@ -120,6 +120,9 @@ module.exports = {
800: 'var(--color-typography-800)',
900: 'var(--color-typography-900)',
950: 'var(--color-typography-950)',
+ white: '#FFFFFF',
+ gray: '#D4D4D4',
+ black: '#181718',
},
outline: {
0: 'var(--color-outline-0)',
@@ -153,6 +156,8 @@ module.exports = {
muted: 'var(--color-background-muted)',
success: 'var(--color-background-success)',
info: 'var(--color-background-info)',
+ light: '#FBFBFB',
+ dark: '#181719',
},
},
fontFamily: {
diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json
index e57f3140be..53e2797e03 100644
--- a/example/storybook-nativewind/tsconfig.json
+++ b/example/storybook-nativewind/tsconfig.json
@@ -6,20 +6,20 @@
"@/components/ui/*": ["src/core-components/nativewind/*"],
"@gluestack-style/react": ["../../packages/styled/react/src"],
"@gluestack-ui/popover": ["../../packages/unstyled/popover/src"],
- "@gluestack-ui/nativewind-utils": [
- "../../packages/nativewind/utils/src/types.ts"
- ],
"@gluestack-ui/nativewind-utils/tva": [
- "../../packages/nativewind/utils/src/tva.ts"
+ "../../packages/nativewind/utils/src/tva"
],
"@gluestack-ui/nativewind-utils/withStyleContext": [
- "../../packages/nativewind/utils/src/withStyleContext.ts"
+ "../../packages/nativewind/utils/src/withStyleContext"
],
"@gluestack-ui/nativewind-utils/withStyleContextAndStates": [
- "../../packages/nativewind/utils/src/withStyleContextAndStates.ts"
+ "../../packages/nativewind/utils/src/withStyleContextAndStates"
],
"@gluestack-ui/nativewind-utils/withStates": [
- "../../packages/nativewind/utils/src/withStates.ts"
+ "../../packages/nativewind/utils/src/withStates"
+ ],
+ "@gluestack-ui/nativewind-utils/cssInterop": [
+ "../../packages/nativewind/utils/src/cssInterop"
]
},
"emitDeclarationOnly": true,
diff --git a/packages/nativewind/utils/cn/index.d.ts b/packages/nativewind/utils/cn/index.d.ts
new file mode 100644
index 0000000000..b0e87e6f57
--- /dev/null
+++ b/packages/nativewind/utils/cn/index.d.ts
@@ -0,0 +1,2 @@
+import type { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
diff --git a/packages/nativewind/utils/cn/index.js b/packages/nativewind/utils/cn/index.js
new file mode 100644
index 0000000000..2861741ab5
--- /dev/null
+++ b/packages/nativewind/utils/cn/index.js
@@ -0,0 +1,5 @@
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/packages/nativewind/utils/src/cn.ts b/packages/nativewind/utils/cn/index.ts
similarity index 100%
rename from packages/nativewind/utils/src/cn.ts
rename to packages/nativewind/utils/cn/index.ts
diff --git a/packages/nativewind/utils/context/index.d.ts b/packages/nativewind/utils/context/index.d.ts
new file mode 100644
index 0000000000..2416ea120c
--- /dev/null
+++ b/packages/nativewind/utils/context/index.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ParentContext: import('react').Context<{}>;
+export declare const useStyleContext: () => any;
diff --git a/packages/nativewind/utils/context/index.js b/packages/nativewind/utils/context/index.js
new file mode 100644
index 0000000000..65b06ca90e
--- /dev/null
+++ b/packages/nativewind/utils/context/index.js
@@ -0,0 +1,6 @@
+'use client';
+import { createContext, useContext } from 'react';
+export const ParentContext = createContext({});
+export const useStyleContext = () => {
+ return useContext(ParentContext);
+};
diff --git a/packages/nativewind/utils/src/context.ts b/packages/nativewind/utils/context/index.ts
similarity index 100%
rename from packages/nativewind/utils/src/context.ts
rename to packages/nativewind/utils/context/index.ts
diff --git a/packages/nativewind/utils/cssInterop/index.d.ts b/packages/nativewind/utils/cssInterop/index.d.ts
new file mode 100644
index 0000000000..e85573073a
--- /dev/null
+++ b/packages/nativewind/utils/cssInterop/index.d.ts
@@ -0,0 +1,2 @@
+declare const cssInterop: (_A: any, _B: any) => void;
+export { cssInterop };
diff --git a/packages/nativewind/utils/cssInterop/index.js b/packages/nativewind/utils/cssInterop/index.js
new file mode 100644
index 0000000000..44b0cd8f3e
--- /dev/null
+++ b/packages/nativewind/utils/cssInterop/index.js
@@ -0,0 +1,2 @@
+const cssInterop = (_A, _B) => {};
+export { cssInterop };
diff --git a/packages/nativewind/utils/src/cssInterop/index.ts b/packages/nativewind/utils/cssInterop/index.ts
similarity index 100%
rename from packages/nativewind/utils/src/cssInterop/index.ts
rename to packages/nativewind/utils/cssInterop/index.ts
diff --git a/packages/nativewind/utils/cssInterop/index.web.d.ts b/packages/nativewind/utils/cssInterop/index.web.d.ts
new file mode 100644
index 0000000000..77ec595a88
--- /dev/null
+++ b/packages/nativewind/utils/cssInterop/index.web.d.ts
@@ -0,0 +1 @@
+export { cssInterop } from 'nativewind';
diff --git a/packages/nativewind/utils/cssInterop/index.web.js b/packages/nativewind/utils/cssInterop/index.web.js
new file mode 100644
index 0000000000..2b17ae680d
--- /dev/null
+++ b/packages/nativewind/utils/cssInterop/index.web.js
@@ -0,0 +1,3 @@
+// @ts-nocheck
+'use client';
+export { cssInterop } from 'nativewind';
diff --git a/packages/nativewind/utils/src/cssInterop/index.web.ts b/packages/nativewind/utils/cssInterop/index.web.ts
similarity index 78%
rename from packages/nativewind/utils/src/cssInterop/index.web.ts
rename to packages/nativewind/utils/cssInterop/index.web.ts
index e427c48fb6..2b17ae680d 100644
--- a/packages/nativewind/utils/src/cssInterop/index.web.ts
+++ b/packages/nativewind/utils/cssInterop/index.web.ts
@@ -1,2 +1,3 @@
+// @ts-nocheck
'use client';
export { cssInterop } from 'nativewind';
diff --git a/packages/nativewind/utils/index.d.ts b/packages/nativewind/utils/index.d.ts
new file mode 100644
index 0000000000..13bb6463e1
--- /dev/null
+++ b/packages/nativewind/utils/index.d.ts
@@ -0,0 +1,2 @@
+export { tva } from './tva';
+export type { VariantProps } from './types';
diff --git a/packages/nativewind/utils/index.js b/packages/nativewind/utils/index.js
new file mode 100644
index 0000000000..f760f4dc04
--- /dev/null
+++ b/packages/nativewind/utils/index.js
@@ -0,0 +1 @@
+export { tva } from './tva';
diff --git a/packages/nativewind/utils/index.ts b/packages/nativewind/utils/index.ts
new file mode 100644
index 0000000000..13bb6463e1
--- /dev/null
+++ b/packages/nativewind/utils/index.ts
@@ -0,0 +1,2 @@
+export { tva } from './tva';
+export type { VariantProps } from './types';
diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json
index 91f7a65106..62288eb823 100644
--- a/packages/nativewind/utils/package.json
+++ b/packages/nativewind/utils/package.json
@@ -14,45 +14,15 @@
"ios",
"nextjs"
],
- "version": "0.0.11-alpha.2",
+ "main": "index.js",
+ "module": "index.js",
+ "types": "index.d.ts",
+ "version": "1.0.2",
"react-native": "src/index",
"source": "src/index",
- "typings": "lib/typescript/types.d.ts",
- "exports": {
- "./tva": {
- "require": "./lib/commonjs/tva.js",
- "import": "./lib/module/tva.js",
- "types": "./lib/typescript/tva.d.ts"
- },
- "./cssInterop": {
- "require": "./lib/commonjs/cssInterop",
- "import": "./lib/module/cssInterop",
- "types": "./lib/typescript/cssInterop/index.d.ts"
- },
- "./cn": {
- "require": "./lib/commonjs/cn.js",
- "import": "./lib/module/cn.js",
- "types": "./lib/typescript/cn.d.ts"
- },
- "./withStates": {
- "require": "./lib/commonjs/withStates.js",
- "import": "./lib/module/withStates.js",
- "types": "./lib/typescript/withStates.d.ts"
- },
- "./withStyleContext": {
- "require": "./lib/commonjs/withStyleContext.js",
- "import": "./lib/module/withStyleContext.js",
- "types": "./lib/typescript/withStyleContext.d.ts"
- },
- "./withStyleContextAndStates": {
- "require": "./lib/commonjs/withStyleContextAndStates.js",
- "import": "./lib/module/withStyleContextAndStates.js",
- "types": "./lib/typescript/withStyleContextAndStates.d.ts"
- }
- },
"scripts": {
- "prepare": "bob build",
- "build": "bob build",
+ "prepare": "tsc",
+ "build": "tsc",
"clean": "rm -rf lib",
"dev:web": "cd example/native && yarn web --clear",
"storybook": "cd example/native/storybook && yarn web"
@@ -66,6 +36,7 @@
"typescript": "^4.9.4"
},
"dependencies": {
+ "nativewind": "^4.0.1",
"tailwind-variants": "^0.1.20"
},
"peerDependencies": {
@@ -83,8 +54,19 @@
]
},
"files": [
- "lib/",
- "src/"
+ "cn",
+ "context",
+ "utils",
+ "index.js",
+ "index.d.ts",
+ "tva",
+ "types.js",
+ "types.d.ts",
+ "utils",
+ "withStates",
+ "withStyleContext",
+ "withStyleContextAndStates",
+ "cssInterop"
],
"jest": {
"preset": "jest-expo",
diff --git a/packages/nativewind/utils/tsconfig.json b/packages/nativewind/utils/tsconfig.json
index 361839f952..5fa966fcc0 100644
--- a/packages/nativewind/utils/tsconfig.json
+++ b/packages/nativewind/utils/tsconfig.json
@@ -1,14 +1,28 @@
{
- "include": ["src"],
+ "include": [
+ "cn.ts",
+ "context",
+ "utils",
+ "index.ts",
+ "tva",
+ "types.ts",
+ "utils",
+ "withStates",
+ "withStyleContext",
+ "withStyleContextAndStates",
+ "cssInterop"
+ ],
"exclude": ["node_modules", "example"],
+ "path": {},
"compilerOptions": {
- "emitDeclarationOnly": true,
+ "ignoreDeprecations": "5.0",
"noEmit": false,
- "baseUrl": ".",
"declaration": true,
+ "allowJs": true,
"allowUnreachableCode": false,
"allowUnusedLabels": true,
"esModuleInterop": true,
+ "importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["esnext", "dom"],
@@ -23,6 +37,7 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
- "target": "esnext"
+ "target": "esnext",
+ "outDir": "."
}
}
diff --git a/packages/nativewind/utils/tva/index.d.ts b/packages/nativewind/utils/tva/index.d.ts
new file mode 100644
index 0000000000..68e6f32135
--- /dev/null
+++ b/packages/nativewind/utils/tva/index.d.ts
@@ -0,0 +1,2 @@
+import type { TVA } from '../types';
+export declare const tva: TVA;
diff --git a/packages/nativewind/utils/tva/index.js b/packages/nativewind/utils/tva/index.js
new file mode 100644
index 0000000000..903fccb530
--- /dev/null
+++ b/packages/nativewind/utils/tva/index.js
@@ -0,0 +1,30 @@
+// @ts-ignore
+import { tv } from 'tailwind-variants';
+import { deepMergeObjects } from '../utils/deepMerge';
+const tvatemp = (options) => {
+ const parentVariants = options?.parentVariants;
+ const parentCompoundVariants = options?.parentCompoundVariants;
+ delete options.parentVariants;
+ delete options.parentCompoundVariants;
+ options.variants = deepMergeObjects(parentVariants, options.variants);
+ if (
+ Array.isArray(parentCompoundVariants) &&
+ parentCompoundVariants.length > 0
+ ) {
+ if (!options.compoundVariants) {
+ options.compoundVariants = [];
+ }
+ options.compoundVariants = [
+ ...parentCompoundVariants,
+ ...options.compoundVariants,
+ ];
+ }
+ const callback = tv(options);
+ return (inlineProps) => {
+ const { parentVariants: inlineParentVariants = {}, ...variant } =
+ inlineProps;
+ const mergedVariants = deepMergeObjects(inlineParentVariants, variant);
+ return callback({ ...mergedVariants });
+ };
+};
+export const tva = tvatemp;
diff --git a/packages/nativewind/utils/src/tva.ts b/packages/nativewind/utils/tva/index.ts
similarity index 95%
rename from packages/nativewind/utils/src/tva.ts
rename to packages/nativewind/utils/tva/index.ts
index 821913e0f1..589f23bca9 100644
--- a/packages/nativewind/utils/src/tva.ts
+++ b/packages/nativewind/utils/tva/index.ts
@@ -1,7 +1,8 @@
+// @ts-ignore
import { tv } from 'tailwind-variants';
-import type { TVA } from './types';
+import type { TVA } from '../types';
-import { deepMergeObjects } from './deepMerge';
+import { deepMergeObjects } from '../utils/deepMerge';
const tvatemp = (options: {
/**
diff --git a/packages/nativewind/utils/types.d.ts b/packages/nativewind/utils/types.d.ts
new file mode 100644
index 0000000000..7bad7f51b5
--- /dev/null
+++ b/packages/nativewind/utils/types.d.ts
@@ -0,0 +1,122 @@
+import type {
+ TVVariants,
+ TVDefaultVariants,
+ ClassValue,
+ TVCompoundSlots,
+ TVCompoundVariants,
+ TVProps,
+ TVReturnProps,
+ VariantProps as TVVariantProps,
+} from 'tailwind-variants';
+import type { TVConfig } from 'tailwind-variants/dist/config';
+type TVSlots = Record<string, ClassValue> | undefined;
+export type TVA = {
+ <
+ V extends TVVariants<S, B, EV>,
+ CV extends TVCompoundVariants<V, S, B, EV, ES>,
+ DV extends TVDefaultVariants<V, S, EV, ES>,
+ C extends TVConfig<V, EV>,
+ PV extends TVVariants<S, B, EV>,
+ PCV extends TVCompoundVariants<V, S, B, EV, ES>,
+ B extends ClassValue = undefined,
+ S extends TVSlots = undefined,
+ E extends TVReturnType = TVReturnType<
+ V,
+ S,
+ B,
+ C,
+ EV extends undefined ? {} : EV,
+ ES extends undefined ? {} : ES
+ >,
+ EV extends TVVariants<ES, B, E['variants'], ES> = E['variants'],
+ ES extends TVSlots = E['slots'] extends TVSlots ? E['slots'] : undefined
+ >(
+ options: {
+ /**
+ * Extend allows for easy composition of components.
+ * @see https://www.tailwind-variants.org/docs/composing-components
+ */
+ extend?: E;
+ /**
+ * Base allows you to set a base class for a component.
+ */
+ base?: B;
+ /**
+ * Slots allow you to separate a component into multiple parts.
+ * @see https://www.tailwind-variants.org/docs/slots
+ */
+ slots?: S;
+ /**
+ * Variants allow you to create multiple versions of the same component.
+ * @see https://www.tailwind-variants.org/docs/variants#adding-variants
+ */
+ variants?: V;
+ /**
+ * Compound variants allow you to apply classes to multiple variants at once.
+ * @see https://www.tailwind-variants.org/docs/variants#compound-variants
+ */
+ compoundVariants?: CV;
+ /**
+ * Compound slots allow you to apply classes to multiple slots at once.
+ */
+ compoundSlots?: TVCompoundSlots<V, S, B>;
+ /**
+ * Default variants allow you to set default variants for a component.
+ * @see https://www.tailwind-variants.org/docs/variants#default-variants
+ */
+ defaultVariants?: DV;
+ parentVariants?: PV;
+ parentCompoundVariants?: PCV;
+ },
+ /**
+ * The config object allows you to modify the default configuration.
+ * @see https://www.tailwind-variants.org/docs/api-reference#config-optional
+ */
+ config?: C
+ ): TVReturnType<UNION<V, PV>, S, B, C, EV, ES, E>;
+};
+type UNION<A, B> = A & B;
+export type TVReturnType<
+ V extends TVVariants<S>,
+ S extends TVSlots,
+ B extends ClassValue,
+ C extends TVConfig<V, EV>,
+ EV extends TVVariants<ES>,
+ ES extends TVSlots,
+ E extends TVReturnType = undefined
+> = {
+ (
+ props?: TVProps<V, S, C, EV, ES> & {
+ parentVariants?: Omit<TVProps<V, S, C, EV, ES>, 'class' | 'className'>;
+ }
+ ): HasSlots<S, ES> extends true
+ ? {
+ [K in keyof (ES extends undefined ? {} : ES)]: (
+ slotProps?: TVProps<V, S, C, EV, ES>
+ ) => string;
+ } & {
+ [K in keyof (S extends undefined ? {} : S)]: (
+ slotProps?: TVProps<V, S, C, EV, ES>
+ ) => string;
+ } & {
+ [K in TVSlotsWithBase<{}, B>]: (
+ slotProps?: TVProps<V, S, C, EV, ES>
+ ) => string;
+ }
+ : string;
+} & TVReturnProps<V, S, B, EV, ES, E>;
+type HasSlots<S extends TVSlots, ES extends TVSlots> = S extends undefined
+ ? ES extends undefined
+ ? false
+ : true
+ : true;
+type TVSlotsWithBase<
+ S extends TVSlots,
+ B extends ClassValue
+> = B extends undefined ? keyof S : keyof S | TVBaseName;
+type TVBaseName = 'base';
+export type VariantProps<T extends (...args: any) => any> = Omit<
+ TVVariantProps<T>,
+ 'parentVariants'
+>;
+export {};
diff --git a/packages/nativewind/utils/types.js b/packages/nativewind/utils/types.js
new file mode 100644
index 0000000000..cb0ff5c3b5
--- /dev/null
+++ b/packages/nativewind/utils/types.js
@@ -0,0 +1 @@
+export {};
diff --git a/packages/nativewind/utils/src/types.ts b/packages/nativewind/utils/types.ts
similarity index 100%
rename from packages/nativewind/utils/src/types.ts
rename to packages/nativewind/utils/types.ts
diff --git a/packages/nativewind/utils/utils/deepMerge.d.ts b/packages/nativewind/utils/utils/deepMerge.d.ts
new file mode 100644
index 0000000000..e1dce302e1
--- /dev/null
+++ b/packages/nativewind/utils/utils/deepMerge.d.ts
@@ -0,0 +1 @@
+export declare function deepMergeObjects(...objects: any): any;
diff --git a/packages/nativewind/utils/utils/deepMerge.js b/packages/nativewind/utils/utils/deepMerge.js
new file mode 100644
index 0000000000..7978ffc5b3
--- /dev/null
+++ b/packages/nativewind/utils/utils/deepMerge.js
@@ -0,0 +1,23 @@
+export function deepMergeObjects(...objects) {
+ const isObject = (obj) =>
+ obj && typeof obj === 'object' && !Array.isArray(obj);
+ return objects.reduce((prev, obj) => {
+ if (isObject(prev) && isObject(obj)) {
+ Object.keys(obj).forEach((key) => {
+ if (isObject(obj[key])) {
+ if (!prev[key] || !isObject(prev[key])) {
+ prev[key] = {};
+ }
+ prev[key] = deepMergeObjects(prev[key], obj[key]);
+ } else {
+ if (Array.isArray(obj[key]) && Array.isArray(prev[key])) {
+ prev[key] = prev[key].concat(obj[key]); // Merge arrays without converting to an object
+ } else {
+ if (obj[key] !== undefined) prev[key] = obj[key];
+ }
+ }
+ });
+ }
+ return prev;
+ }, {});
+}
diff --git a/packages/nativewind/utils/src/deepMerge.ts b/packages/nativewind/utils/utils/deepMerge.ts
similarity index 100%
rename from packages/nativewind/utils/src/deepMerge.ts
rename to packages/nativewind/utils/utils/deepMerge.ts
diff --git a/packages/nativewind/utils/utils/index.d.ts b/packages/nativewind/utils/utils/index.d.ts
new file mode 100644
index 0000000000..2346a3b8c5
--- /dev/null
+++ b/packages/nativewind/utils/utils/index.d.ts
@@ -0,0 +1,16 @@
+export declare function parseDataAttribute(inputString: string):
+ | {
+ state: string;
+ value: string;
+ className: string;
+ }
+ | {
+ state: null;
+ value: null;
+ className: null;
+ };
+export declare function stringToBoolean(str: string): boolean;
+export declare function extractDataClassName(
+ className: string,
+ states: any
+): string | undefined;
diff --git a/packages/nativewind/utils/utils/index.js b/packages/nativewind/utils/utils/index.js
new file mode 100644
index 0000000000..1445a3abd3
--- /dev/null
+++ b/packages/nativewind/utils/utils/index.js
@@ -0,0 +1,57 @@
+import { cn } from '../cn';
+export function parseDataAttribute(inputString) {
+ const regex = /^data-\[(\w+)=(\w+)\]:(.+)$/;
+ const match = inputString.match(regex);
+ if (match) {
+ return {
+ state: match[1],
+ value: match[2],
+ className: match[3],
+ };
+ } else {
+ return {
+ state: null,
+ value: null,
+ className: null,
+ };
+ }
+}
+export function stringToBoolean(str) {
+ if (str === 'true') return true;
+ else return false;
+}
+const resolveDataAttribute = (className, states) => {
+ if (className.includes('data-')) {
+ // parse data- attribute
+ const {
+ state,
+ value,
+ className: stateClassName,
+ } = parseDataAttribute(className);
+ // check if state is present and value is true
+ if (state && value && states[state] === stringToBoolean(value)) {
+ // append state class name
+ if (stateClassName.includes('data-')) {
+ return resolveDataAttribute(stateClassName, states);
+ }
+ return stateClassName;
+ }
+ }
+};
+export function extractDataClassName(className, states) {
+ const classNamesArray =
+ typeof className === 'string' ? className.split(' ') : className;
+ if (classNamesArray === undefined) return;
+ let classNamesFinal = '';
+ classNamesArray.forEach((classNameItem) => {
+ // check for data- attribute
+ if (classNameItem.includes('data-')) {
+ // parse data- attribute
+ const resolvedClassName = resolveDataAttribute(classNameItem, states);
+ classNamesFinal = cn(classNamesFinal, resolvedClassName);
+ } else {
+ classNamesFinal += ` ${classNameItem}`;
+ }
+ });
+ return classNamesFinal;
+}
diff --git a/packages/nativewind/utils/src/utils.ts b/packages/nativewind/utils/utils/index.ts
similarity index 98%
rename from packages/nativewind/utils/src/utils.ts
rename to packages/nativewind/utils/utils/index.ts
index 27055e6785..721d9581db 100644
--- a/packages/nativewind/utils/src/utils.ts
+++ b/packages/nativewind/utils/utils/index.ts
@@ -1,4 +1,4 @@
-import { cn } from './cn';
+import { cn } from '../cn';
export function parseDataAttribute(inputString: string) {
const regex = /^data-\[(\w+)=(\w+)\]:(.+)$/;
const match = inputString.match(regex);
diff --git a/packages/nativewind/utils/withStates/index.d.ts b/packages/nativewind/utils/withStates/index.d.ts
new file mode 100644
index 0000000000..6f5812c966
--- /dev/null
+++ b/packages/nativewind/utils/withStates/index.d.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+export { useStyleContext } from '../context';
+type WithStatesProps = {
+ className?: string;
+ states?: any;
+};
+export declare const withStates: <T>(
+ Component: React.ComponentType<T>
+) => React.ForwardRefExoticComponent<
+ React.PropsWithoutRef<T & WithStatesProps> & React.RefAttributes<unknown>
+>;
diff --git a/packages/nativewind/utils/withStates/index.js b/packages/nativewind/utils/withStates/index.js
new file mode 100644
index 0000000000..a7970d534f
--- /dev/null
+++ b/packages/nativewind/utils/withStates/index.js
@@ -0,0 +1,16 @@
+'use client';
+import React from 'react';
+import { extractDataClassName } from '../utils';
+export { useStyleContext } from '../context';
+export const withStates = (Component) =>
+ React.forwardRef(({ states, className, ...props }, ref) => {
+ const classNamesFinal = React.useMemo(() => {
+ if (!className) return;
+ extractDataClassName(className, states);
+ }, [className, states]);
+ return React.createElement(Component, {
+ className: classNamesFinal,
+ ...props,
+ ref: ref,
+ });
+ });
diff --git a/packages/nativewind/utils/src/withStates.tsx b/packages/nativewind/utils/withStates/index.tsx
similarity index 85%
rename from packages/nativewind/utils/src/withStates.tsx
rename to packages/nativewind/utils/withStates/index.tsx
index b06d2e938f..7d3ead0bc2 100644
--- a/packages/nativewind/utils/src/withStates.tsx
+++ b/packages/nativewind/utils/withStates/index.tsx
@@ -1,7 +1,7 @@
'use client';
import React from 'react';
-import { extractDataClassName } from './utils';
-export { useStyleContext } from './context';
+import { extractDataClassName } from '../utils';
+export { useStyleContext } from '../context';
type WithStatesProps = {
className?: string;
states?: any;
diff --git a/packages/nativewind/utils/withStyleContext/index.d.ts b/packages/nativewind/utils/withStyleContext/index.d.ts
new file mode 100644
index 0000000000..e2ea322ab3
--- /dev/null
+++ b/packages/nativewind/utils/withStyleContext/index.d.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+export { useStyleContext } from '../context';
+type WithStyleContextProps = {
+ context?: any;
+};
+export declare const withStyleContext: <T>(
+ Component: React.ComponentType<T & WithStyleContextProps>
+) => React.ForwardRefExoticComponent<
+ React.PropsWithoutRef<T & WithStyleContextProps> &
+ React.RefAttributes<unknown>
+>;
diff --git a/packages/nativewind/utils/withStyleContext/index.js b/packages/nativewind/utils/withStyleContext/index.js
new file mode 100644
index 0000000000..0b6b9b6b06
--- /dev/null
+++ b/packages/nativewind/utils/withStyleContext/index.js
@@ -0,0 +1,13 @@
+'use client';
+import React from 'react';
+import { ParentContext } from '../context';
+export { useStyleContext } from '../context';
+export const withStyleContext = (Component) => {
+ return React.forwardRef(({ context, ...props }, ref) => {
+ return React.createElement(
+ ParentContext.Provider,
+ { value: context },
+ React.createElement(Component, { ...props, ref: ref })
+ );
+ });
+};
diff --git a/packages/nativewind/utils/src/withStyleContext.tsx b/packages/nativewind/utils/withStyleContext/index.tsx
similarity index 83%
rename from packages/nativewind/utils/src/withStyleContext.tsx
rename to packages/nativewind/utils/withStyleContext/index.tsx
index 18d5fb76c9..6f99c63466 100644
--- a/packages/nativewind/utils/src/withStyleContext.tsx
+++ b/packages/nativewind/utils/withStyleContext/index.tsx
@@ -1,7 +1,7 @@
'use client';
import React from 'react';
-import { ParentContext } from './context';
-export { useStyleContext } from './context';
+import { ParentContext } from '../context';
+export { useStyleContext } from '../context';
type WithStyleContextProps = {
context?: any;
diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts
new file mode 100644
index 0000000000..57aa5a2a7d
--- /dev/null
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts
@@ -0,0 +1,13 @@
+import React from 'react';
+export { useStyleContext } from '../context';
+type WithStyleContextProps = {
+ context?: any;
+ className?: string;
+ states?: any;
+};
+export declare const withStyleContextAndStates: <T>(
+ Component: React.ComponentType<T & WithStyleContextProps>
+) => React.ForwardRefExoticComponent<
+ React.PropsWithoutRef<T & WithStyleContextProps> &
+ React.RefAttributes<unknown>
+>;
diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.js b/packages/nativewind/utils/withStyleContextAndStates/index.js
new file mode 100644
index 0000000000..6acde5282f
--- /dev/null
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.js
@@ -0,0 +1,22 @@
+'use client';
+import React from 'react';
+import { extractDataClassName } from '../utils';
+import { ParentContext } from '../context';
+export { useStyleContext } from '../context';
+export const withStyleContextAndStates = (Component) => {
+ return React.forwardRef(({ context, className, states, ...props }, ref) => {
+ const classNamesFinal = React.useMemo(() => {
+ if (!className) return;
+ return extractDataClassName(className, states);
+ }, [className, states]);
+ return React.createElement(
+ ParentContext.Provider,
+ { value: context },
+ React.createElement(Component, {
+ className: classNamesFinal,
+ ...props,
+ ref: ref,
+ })
+ );
+ });
+};
diff --git a/packages/nativewind/utils/src/withStyleContextAndStates.tsx b/packages/nativewind/utils/withStyleContextAndStates/index.tsx
similarity index 85%
rename from packages/nativewind/utils/src/withStyleContextAndStates.tsx
rename to packages/nativewind/utils/withStyleContextAndStates/index.tsx
index cc68cf4662..91838c64d5 100644
--- a/packages/nativewind/utils/src/withStyleContextAndStates.tsx
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.tsx
@@ -1,8 +1,8 @@
'use client';
import React from 'react';
-import { extractDataClassName } from './utils';
-import { ParentContext } from './context';
-export { useStyleContext } from './context';
+import { extractDataClassName } from '../utils';
+import { ParentContext } from '../context';
+export { useStyleContext } from '../context';
type WithStyleContextProps = {
context?: any;