diff --git a/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx b/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx
index de84f1d04b..c2991f5d8d 100644
--- a/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx
+++ b/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx
@@ -53,7 +53,7 @@ const SelectWithScrollView = ({ isDisabled, isInvalid, ...props }: any) => {
);
};
-SelectWithScrollView.displayName =
+SelectWithScrollView.description =
'SelectWithScrollView is an example of how to use Select with list that uses ScrollView on native';
export default SelectWithScrollView;
diff --git a/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx b/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx
index 7aca6bb3a7..1b4b1217c3 100644
--- a/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx
+++ b/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx
@@ -72,7 +72,7 @@ const SelectWithSectionList = ({ isDisabled, isInvalid, ...props }: any) => {
);
};
-SelectWithSectionList.displayName =
+SelectWithSectionList.description =
'SelectWithSectionList is an example of how to use Select with list that uses SectionList on native';
export default SelectWithSectionList;
diff --git a/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx b/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx
index 9dd64f09fb..ff3d539cab 100644
--- a/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx
+++ b/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx
@@ -70,7 +70,7 @@ const SelectWithVirtualizedList = ({
);
};
-SelectWithVirtualizedList.displayName =
+SelectWithVirtualizedList.description =
'SelectWithVirtualizedList is an example of how to use Select with list that uses VirtualizedList on native';
export default SelectWithVirtualizedList;
diff --git a/example/storybook-v7/.ondevice/main.ts b/example/storybook-v7/.ondevice/main.ts
index 4605f453c6..4677195a04 100644
--- a/example/storybook-v7/.ondevice/main.ts
+++ b/example/storybook-v7/.ondevice/main.ts
@@ -1,7 +1,9 @@
import { StorybookConfig } from '@storybook/react-native';
const main: StorybookConfig = {
- stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
+ stories: [
+ '../../storybook-nativewind/src/components/**/*.stories.?(ts|tsx|js|jsx)',
+ ],
addons: [
'@storybook/addon-ondevice-notes',
'@storybook/addon-ondevice-controls',
diff --git a/example/storybook-v7/.ondevice/preview.tsx b/example/storybook-v7/.ondevice/preview.tsx
index d26420a992..dde43541e2 100644
--- a/example/storybook-v7/.ondevice/preview.tsx
+++ b/example/storybook-v7/.ondevice/preview.tsx
@@ -1,12 +1,12 @@
import React from 'react';
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
// import { addParameters } from '@storybook/client-api';
-import { GluestackUIProvider } from '../src/core-components/nativewind';
+import { GluestackUIProvider } from '../../storybook-nativewind/src/core-components/nativewind';
import { View } from 'react-native';
import { useState } from 'react';
import type { Preview } from '@storybook/react';
-import { useDarkMode } from '../src/components/hooks/useDarkMode';
+import { useDarkMode } from '../../storybook-nativewind/src/components/hooks/useDarkMode';
import { Platform } from 'react-native';
const preview: Preview = {
diff --git a/example/storybook-v7/.ondevice/storybook.requires.js b/example/storybook-v7/.ondevice/storybook.requires.js
index e26cefad97..938500df59 100644
--- a/example/storybook-v7/.ondevice/storybook.requires.js
+++ b/example/storybook-v7/.ondevice/storybook.requires.js
@@ -14,13 +14,13 @@ import "@storybook/addon-ondevice-actions/register";
const normalizedStories = [
{
titlePrefix: "",
- directory: "./src/components",
+ directory: "../storybook-nativewind/src/components",
files: "**/*.stories.?(ts|tsx|js|jsx)",
importPathMatcher:
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
req: require.context(
- "../src/components",
+ "../../storybook-nativewind/src/components",
true,
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
),
diff --git a/example/storybook-v7/App.tsx b/example/storybook-v7/App.tsx
index 366c3edfd8..ecaf8f2c7c 100644
--- a/example/storybook-v7/App.tsx
+++ b/example/storybook-v7/App.tsx
@@ -1,17 +1,14 @@
import { StyleSheet, Text, View } from 'react-native';
import Constants from 'expo-constants';
-import { GluestackUIProvider } from './src/core-components/nativewind/gluestack-ui-provider';
import './global.css';
function App() {
return (
-
-
-
- Open up App.tsx to start working on your app! 22
-
+
+
+ Open up App.tsx to start working on your app! 22
-
+
);
}
diff --git a/example/storybook-v7/babel.config.js b/example/storybook-v7/babel.config.js
index eb794f2925..11c8afb87a 100644
--- a/example/storybook-v7/babel.config.js
+++ b/example/storybook-v7/babel.config.js
@@ -15,13 +15,25 @@ module.exports = function (api) {
alias: {
'@/components/ui':
process.env.STYLE_ENGINE === 'gluestack'
- ? path.resolve(__dirname, './src/core-components/themed')
- : path.resolve(__dirname, './src/core-components/nativewind'),
+ ? path.resolve(
+ __dirname,
+ './../storybook-nativewind/src/core-components/themed'
+ )
+ : path.resolve(
+ __dirname,
+ './../storybook-nativewind/src/core-components/nativewind'
+ ),
'global.css':
process.env.STYLE_ENGINE === 'gluestack'
- ? path.resolve(__dirname, './global-gluestack.css')
- : path.resolve(__dirname, './global.css'),
+ ? path.resolve(
+ __dirname,
+ './../storybook-nativewind/global-gluestack.css'
+ )
+ : path.resolve(
+ __dirname,
+ './../storybook-nativewind/global.css'
+ ),
'@gluestack-ui/checkbox': path.resolve(
__dirname,
@@ -110,7 +122,7 @@ module.exports = function (api) {
),
'@/extra-components/nativewind': path.resolve(
__dirname,
- './src/core-components/nativewind'
+ './../storybook-nativewind/src/core-components/nativewind'
),
'tailwind.config': path.join(__dirname, './tailwind.config.js'),
},
diff --git a/example/storybook-v7/metro.config.js b/example/storybook-v7/metro.config.js
index e11704eeb5..5729be8b67 100644
--- a/example/storybook-v7/metro.config.js
+++ b/example/storybook-v7/metro.config.js
@@ -18,6 +18,7 @@ defaultConfig.watchFolders = [
path.join(workspaceRoot, 'packages', 'unstyled'),
path.join(workspaceRoot, 'packages', 'nativewind'),
path.join(workspaceRoot, 'packages', 'styled'),
+ path.join(projectRoot, '..', 'storybook-nativewind'),
];
// defaultConfig.resolver.disableHierarchicalLookup = true;
defaultConfig.resolver.nodeModulesPaths = [
@@ -25,6 +26,7 @@ defaultConfig.resolver.nodeModulesPaths = [
// path.resolve(workspaceRoot, 'node_modules'),
];
+defaultConfig.projectRoot = path.resolve(__dirname, '../storybook-nativewind'); // path to the external module
// defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
// const defaultResolveResult = context.resolveRequest(
// context,
diff --git a/example/storybook-v7/src/components/Accordion/Accordion.stories.tsx b/example/storybook-v7/src/components/Accordion/Accordion.stories.tsx
deleted file mode 100644
index c6718a5b0f..0000000000
--- a/example/storybook-v7/src/components/Accordion/Accordion.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Accordion from './Accordion';
-// import AccordionCustomisedBackground from './AccordionCustomisedBackground';
-// import AccordionRoundedCorners from './AccordionRoundedCorner';
-// import AccordionCustomisedComponent from './AccordionCustomisedComponent';
-// import AccordionNested from './AccordionNested';
-
-const AccordionMeta: ComponentMeta = {
- title: 'stories/Accordion',
- component: Accordion,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- },
- variant: {
- control: 'select',
- options: ['filled', 'unfilled'],
- },
- type: {
- control: 'select',
- options: ['single', 'multiple'],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- },
-};
-
-export default AccordionMeta;
-
-export {
- Accordion,
- // AccordionCustomisedBackground,
- // AccordionRoundedCorners,
- // AccordionCustomisedComponent,
- // AccordionNested,
-};
diff --git a/example/storybook-v7/src/components/Accordion/Accordion.tsx b/example/storybook-v7/src/components/Accordion/Accordion.tsx
deleted file mode 100644
index a22452fb6f..0000000000
--- a/example/storybook-v7/src/components/Accordion/Accordion.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
-} from '@/components/ui/accordion';
-import {
- ChevronDownIcon,
- ChevronUpIcon,
- MinusIcon,
- PlusIcon,
-} from 'lucide-react-native';
-
-const AccordionBasic = ({ ...props }: any) => {
- const accRef = React.useRef(null);
-
- return (
-
-
-
-
- {(states: any) => (
- <>
-
- How do I place an order?
-
- {states.isExpanded ? (
-
- ) : (
-
- )}
- >
- )}
-
-
-
-
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed
- laudantium eligendi maxime rerum, saepe vitae unde voluptas hic,
- culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis recusandae
- incidunt.
-
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
- maxime modi quaerat temporibus quos, omnis, vel ullam debitis labore
- error fugit, blanditiis dolore illum consequuntur laboriosam.
- Voluptates est obcaecati nemo!
-
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- Can I cancel my subscription at any time?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolorem
- eos ex officia ratione omnis similique delectus aliquam culpa. Minus
- quis numquam laboriosam non natus, distinctio facilis aspernatur
- beatae earum.
-
-
-
-
- );
-};
-
-AccordionBasic.description =
- 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.';
-
-export default AccordionBasic;
-
-export {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- // Divider,
- ChevronDownIcon,
- ChevronUpIcon,
- PlusIcon,
- MinusIcon,
-};
diff --git a/example/storybook-v7/src/components/Accordion/AccordionCustomisedBackground.tsx b/example/storybook-v7/src/components/Accordion/AccordionCustomisedBackground.tsx
deleted file mode 100644
index 7788715ebb..0000000000
--- a/example/storybook-v7/src/components/Accordion/AccordionCustomisedBackground.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
- Accordion,
- AccordionHeader,
- AccordionItem,
- AccordionTrigger,
- AccordionContent,
- AccordionContentText,
- AccordionTitleText,
- AccordionIcon,
-} from '@gluestack-ui/themed';
-import { MinusIcon, PlusIcon } from 'lucide-react-native';
-import React from 'react';
-
-const AccordionCustomisedBackground = ({ ...props }: any) => {
- return (
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- How do I place an order?
-
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- How do I place an order?
-
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
- );
-};
-
-AccordionCustomisedBackground.description =
- 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.';
-
-export default AccordionCustomisedBackground;
diff --git a/example/storybook-v7/src/components/Accordion/AccordionCustomisedComponent.tsx b/example/storybook-v7/src/components/Accordion/AccordionCustomisedComponent.tsx
deleted file mode 100644
index f5d7ba6ae1..0000000000
--- a/example/storybook-v7/src/components/Accordion/AccordionCustomisedComponent.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import {
- Accordion,
- AccordionHeader,
- AccordionItem,
- AccordionTrigger,
- AccordionContent,
- AccordionContentText,
- AccordionTitleText,
- AccordionIcon,
-} from '@gluestack-ui/themed';
-import { ChevronDownIcon } from 'lucide-react-native';
-import { ChevronUpIcon } from 'lucide-react-native';
-import React from 'react';
-
-const AccordionCustomisedComponent = ({ ...props }: any) => {
- return (
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed
- laudantium eligendi maxime rerum, saepe vitae unde voluptas hic,
- culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis recusandae
- incidunt.
-
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
- maxime modi quaerat temporibus quos, omnis, vel ullam debitis labore
- error fugit, blanditiis dolore illum consequuntur laboriosam.
- Voluptates est obcaecati nemo!
-
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
- );
-};
-
-AccordionCustomisedComponent.description =
- 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.';
-
-export default AccordionCustomisedComponent;
diff --git a/example/storybook-v7/src/components/Accordion/AccordionNested.tsx b/example/storybook-v7/src/components/Accordion/AccordionNested.tsx
deleted file mode 100644
index 1ff5d3c33f..0000000000
--- a/example/storybook-v7/src/components/Accordion/AccordionNested.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
-} from '@gluestack-ui/themed';
-import { MinusIcon, PlusIcon } from 'lucide-react-native';
-import React from 'react';
-
-const AccordionNested = () => {
- return (
-
-
-
-
- {(states: any) => (
- <>
- {states.isExpanded ? (
-
- ) : (
-
- )}
- USA
- >
- )}
-
-
-
-
-
-
-
- {(states: any) => (
- <>
- {states.isExpanded ? (
-
- ) : (
-
- )}
-
- California
-
- >
- )}
-
-
-
-
- Capital city of California is Sacramento. California has a GDP
- of 2.89 trillion dollars and follows Pacific Standard Time
- zone.
-
-
-
-
-
-
-
-
- {(states: any) => (
- <>
- {states.isExpanded ? (
-
- ) : (
-
- )}
- Nevada
- >
- )}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- );
-};
-
-AccordionNested.description =
- 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.';
-
-export default AccordionNested;
diff --git a/example/storybook-v7/src/components/Accordion/AccordionRoundedCorner.tsx b/example/storybook-v7/src/components/Accordion/AccordionRoundedCorner.tsx
deleted file mode 100644
index 4caba87d96..0000000000
--- a/example/storybook-v7/src/components/Accordion/AccordionRoundedCorner.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
- Accordion,
- AccordionHeader,
- AccordionItem,
- AccordionTrigger,
- AccordionContent,
- AccordionContentText,
- AccordionTitleText,
- AccordionIcon,
-} from '@gluestack-ui/themed';
-import { MinusIcon, PlusIcon } from 'lucide-react-native';
-import React from 'react';
-
-const AccordionRoundedCorners = ({ ...props }: any) => {
- return (
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- How do I place an order?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }: { isExpanded: boolean }) => {
- return (
- <>
-
- How do I place an order?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
- );
-};
-
-AccordionRoundedCorners.description =
- 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.';
-
-export default AccordionRoundedCorners;
diff --git a/example/storybook-v7/src/components/Accordion/index.nw.stories.mdx b/example/storybook-v7/src/components/Accordion/index.nw.stories.mdx
deleted file mode 100644
index 4f86a2a497..0000000000
--- a/example/storybook-v7/src/components/Accordion/index.nw.stories.mdx
+++ /dev/null
@@ -1,1199 +0,0 @@
----
-title: Accordion | gluestack-ui | Installation, Usage, and API
-
-description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
-
-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: 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,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import { CollapsibleCode } from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-
-
-This is an illustration of **Accordion** component.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- How do I place an order?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
- `,
- 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',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add accordion
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/accordion @expo/html-elements
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/accordion/index.tsx --%%
-```
-
-
-
-### 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 () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- type
-
-
-
- "single" | "multiple"
-
-
- "single"
-
-
- {`Determines whether one or multiple items can be opened at the same time.`}
-
-
-
-
-
- isCollapsible
-
-
-
- boolean
-
-
- true
-
-
- {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`}
-
-
-
-
-
- defaultValue
-
-
-
- string[]
-
-
- []
-
-
- {`The value of the item to expand when initially rendered when type is "single" or "multiple".`}
-
-
-
-
-
- value
-
-
-
- string[]
-
-
- []
-
-
- {`The controlled value of the item to expand when type is "single" or "multiple".`}
-
-
-
-
-
- onValueChange
-
-
-
- function
-
-
- -
-
-
- {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the accordion and all its items.`}
-
-
-
-
-
->
-
-#### AccordionItem
-
-Contains all the parts of a collapsible section.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the accordion and all its items.`}
-
-
-
-
-
->
-
-#### 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What does the "type" prop of the Accordion component do?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Can I disable the whole accordion?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Yes, you can disable the whole accordion by setting the isDisabled
- prop to true on the Accordion component.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What is a controlled accordion? How can I make it controlled?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-ChevronDownIcon,
-ChevronUpIcon,
-Wrapper,
-},
-}}
-/>
-
-
-
-### Rounded corners
-
-The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- How do I place an order?
-
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- What payment methods do you accept?
-
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Disabled Item
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- This is a Disabled Item.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Is this accordion accessible?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### Default value
-
-Use the defaultValue prop to define the open item by default.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What is the defaultValue prop of the Accordion component?
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- How many size variants does the Accordion component have?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- The Accordion component has three size variants - sm, md and lg.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Can I nest my accordions?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Yes, you can nest your accordions. Refer to the nested accordion example in the docs.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### 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.
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
- USA
- >
- )}
-
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- California
-
- >
- )}
-
-
-
-
- Capital city of California is Sacramento. California has a GDP
- of 2.89 trillion dollars and follows Pacific Standard Time
- zone.
-
-
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
- Nevada
- >
- )}
-
-
-
-
- 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.
-
-
-
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### 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.
-
-
- setSelectedValues(item)} className="m-5 w-[95%]">
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Exploring Nature's Wonders
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- The Art of Culinary Delights
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Mastering the Creative Process
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
diff --git a/example/storybook-v7/src/components/Accordion/index.stories.mdx b/example/storybook-v7/src/components/Accordion/index.stories.mdx
deleted file mode 100644
index e52f1eb2da..0000000000
--- a/example/storybook-v7/src/components/Accordion/index.stories.mdx
+++ /dev/null
@@ -1,1293 +0,0 @@
----
-title: Accordion | gluestack-ui | Installation, Usage, and API
-
-description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
-
-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: true
----
-
-import { Meta } from '@storybook/addon-docs';
-import {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
-} from './Accordion';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
-} from '@gluestack/design-system';
-import {
- Divider,
- ChevronDownIcon,
- ChevronUpIcon,
- PlusIcon,
- MinusIcon,
-} from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-
-
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Accordion** component.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- How do I place an order?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
- `,
- 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',
- },
- },
- }}
- />
->
-
-
-
-## API Reference
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { Accordion } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand Accordion component's various parts.
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- type
-
-
-
- "single" | "multiple"
-
-
- "single"
-
-
- {`Determines whether one or multiple items can be opened at the same time.`}
-
-
-
-
-
- isCollapsible
-
-
-
- boolean
-
-
- true
-
-
- {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`}
-
-
-
-
-
- defaultValue
-
-
-
- string[]
-
-
- []
-
-
- {`The value of the item to expand when initially rendered when type is "single" or "multiple".`}
-
-
-
-
-
- value
-
-
-
- string[]
-
-
- []
-
-
- {`The controlled value of the item to expand when type is "single" or "multiple".`}
-
-
-
-
-
- onValueChange
-
-
-
- function
-
-
- -
-
-
- {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the accordion and all its items.`}
-
-
-
-
-
->
-
-#### AccordionItem
-
-Contains all the parts of a collapsible section.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the accordion and all its items.`}
-
-
-
-
-
->
-
-#### 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).
-
-## Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-## 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.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What does the "type" prop of the Accordion component do?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Can I disable the whole accordion?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Yes, you can disable the whole accordion by setting the isDisabled
- prop to true on the Accordion component.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What is a controlled accordion? How can I make it controlled?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-ChevronDownIcon,
-ChevronUpIcon,
-Wrapper,
-},
-}}
-/>
-
->
-
-### Rounded corners
-
-The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- How do I place an order?
-
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- What payment methods do you accept?
-
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-MinusIcon,
-PlusIcon,
-Wrapper,
-},
-}}
-/>
-
->
-
-### 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.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Disabled Item
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- This is a Disabled Item.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Is this accordion accessible?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-Divider,
-MinusIcon,
-PlusIcon,
-Wrapper,
-},
-}}
-/>
-
->
-
-### Default value
-
-Use the defaultValue prop to define the open item by default.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What is the defaultValue prop of the Accordion component?
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- How many size variants does the Accordion component have?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- The Accordion component has three size variants - sm, md and lg.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Can I nest my accordions?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Yes, you can nest your accordions. Refer to the nested accordion example in the docs.
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-Divider,
-MinusIcon,
-PlusIcon,
-Wrapper,
-},
-}}
-/>
-
->
-
-### 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.
-
-<>
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
- USA
- >
- )}
-
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- California
-
- >
- )}
-
-
-
-
- Capital city of California is Sacramento. California has a GDP
- of 2.89 trillion dollars and follows Pacific Standard Time
- zone.
-
-
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
- Nevada
- >
- )}
-
-
-
-
- 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.
-
-
-
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-Divider,
-MinusIcon,
-PlusIcon,
-Wrapper,
-},
-}}
-/>
-
->
-
-### 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.
-
-<>
- setSelectedValues(item)}>
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Exploring Nature's Wonders
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- The Art of Culinary Delights
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Mastering the Creative Process
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression.
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Accordion,
-AccordionItem,
-AccordionHeader,
-AccordionTrigger,
-AccordionTitleText,
-AccordionIcon,
-AccordionContent,
-AccordionContentText,
-Divider,
-MinusIcon,
-PlusIcon,
-PlusIcon,
-Wrapper,
-},
-}}
-/>
-
->
-
-## Unstyled
-
-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.
diff --git a/example/storybook-v7/src/components/Accordion/index.themed.stories.mdx b/example/storybook-v7/src/components/Accordion/index.themed.stories.mdx
deleted file mode 100644
index cdcba405d1..0000000000
--- a/example/storybook-v7/src/components/Accordion/index.themed.stories.mdx
+++ /dev/null
@@ -1,1294 +0,0 @@
----
-title: gluestack-ui Accordion Component | Installation, Usage, and API
-
-description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
-
-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: true
----
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Divider,
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- ChevronDownIcon,
- ChevronUpIcon,
-} from '../../core-components/themed';
-import {
- PlusIcon,
- MinusIcon,
-} from 'lucide-react-native';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
- CollapsibleCode,
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Accordion** component.
-
-<>
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- How do I place an order?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What payment methods do you accept?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
- `,
- 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',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/accordion
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/accordion/index.tsx --%%
-```
-
-
-
-### 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, AccordionIcon, AccordionContent, AccordionContentText } from '@/components/ui/accordion';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- type
-
-
-
- "single" | "multiple"
-
-
- "single"
-
-
- {`Determines whether one or multiple items can be opened at the same time.`}
-
-
-
-
-
- isCollapsible
-
-
-
- boolean
-
-
- true
-
-
- {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`}
-
-
-
-
-
- defaultValue
-
-
-
- string[]
-
-
- []
-
-
- {`The value of the item to expand when initially rendered when type is "single" or "multiple".`}
-
-
-
-
-
- value
-
-
-
- string[]
-
-
- []
-
-
- {`The controlled value of the item to expand when type is "single" or "multiple".`}
-
-
-
-
-
- onValueChange
-
-
-
- function
-
-
- -
-
-
- {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the accordion and all its items.`}
-
-
-
-
-
->
-
-#### AccordionItem
-
-Contains all the parts of a collapsible section.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the accordion and all its items.`}
-
-
-
-
-
->
-
-#### 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What does the "type" prop of the Accordion component do?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Can I disable the whole accordion?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Yes, you can disable the whole accordion by setting the isDisabled
- prop to true on the Accordion component.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What is a controlled accordion? How can I make it controlled?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- ChevronDownIcon,
- ChevronUpIcon,
- Wrapper,
- },
- }}
- />
-
-
-### Rounded corners
-
-The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- How do I place an order?
-
- >
- );
- }}
-
-
-
-
- To place an order, simply select the products you want, proceed to
- checkout, provide shipping and payment information, and finalize
- your purchase.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- What payment methods do you accept?
-
- >
- );
- }}
-
-
-
-
- We accept all major credit cards, including Visa, Mastercard, and
- American Express. We also support payments through PayPal.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### 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.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Disabled Item
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- This is a Disabled Item.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Is this accordion accessible?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### Default value
-
-Use the defaultValue prop to define the open item by default.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- What is the defaultValue prop of the Accordion component?
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- How many size variants does the Accordion component have?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- The Accordion component has three size variants - sm, md and lg.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Can I nest my accordions?
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Yes, you can nest your accordions. Refer to the nested accordion example in the docs.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### 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.
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
- USA
- >
- )}
-
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
-
- California
-
- >
- )}
-
-
-
-
- Capital city of California is Sacramento. California has a GDP
- of 2.89 trillion dollars and follows Pacific Standard Time
- zone.
-
-
-
-
-
-
-
-
- {({isExpanded}) => (
- <>
- {isExpanded ? (
-
- ) : (
-
- )}
- Nevada
- >
- )}
-
-
-
-
- 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.
-
-
-
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
-
-### 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.
-
-
- setSelectedValues(item)}>
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Exploring Nature's Wonders
-
- {isExpanded ? (
-
- ) : (
-
- )}
-
- >
- );
- }}
-
-
-
-
- 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.
-
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- The Art of Culinary Delights
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking.
-
-
-
-
-
-
- {({ isExpanded }) => {
- return (
- <>
-
- Mastering the Creative Process
-
- {isExpanded ? (
-
- ) : (
-
- )}
- >
- );
- }}
-
-
-
-
- Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression.
-
-
-
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionTrigger,
- AccordionTitleText,
- AccordionIcon,
- AccordionContent,
- AccordionContentText,
- Divider,
- MinusIcon,
- PlusIcon,
- PlusIcon,
- Wrapper,
- },
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Actionsheet/Actionsheet.png b/example/storybook-v7/src/components/Actionsheet/Actionsheet.png
deleted file mode 100644
index 4b7a2e5fc8..0000000000
Binary files a/example/storybook-v7/src/components/Actionsheet/Actionsheet.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Actionsheet/Actionsheet.stories.tsx b/example/storybook-v7/src/components/Actionsheet/Actionsheet.stories.tsx
deleted file mode 100644
index 9fe2a9b753..0000000000
--- a/example/storybook-v7/src/components/Actionsheet/Actionsheet.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Actionsheet from './Actionsheet';
-import ActionsheetScrollView from './ActionsheetScrollView';
-import ActionsheetFlatList from './ActionsheetFlatList';
-import ActionsheetVirtualizedList from './ActionsheetVirtualizedList';
-import ActionsheetSectionList from './ActionsheetSectionList';
-import ActionsheetIcon from './ActionsheetIcon';
-import ActionsheetAvoidKeyboard from './ActionsheetAvoidKeyboard';
-import ActionsheetWithKeyboardAvoidingViewWithSnapPoints from './ActionsheetAvoidKeyboardWithSnapPoints';
-
-const ActionsheetMeta: ComponentMeta = {
- title: 'stories/Actionsheet',
- component: Actionsheet,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.`,
- },
-};
-
-export default ActionsheetMeta;
-
-export {
- Actionsheet,
- ActionsheetIcon,
- ActionsheetScrollView,
- ActionsheetFlatList,
- ActionsheetVirtualizedList,
- ActionsheetSectionList,
- ActionsheetAvoidKeyboard,
- ActionsheetWithKeyboardAvoidingViewWithSnapPoints,
-};
diff --git a/example/storybook-v7/src/components/Actionsheet/Actionsheet.tsx b/example/storybook-v7/src/components/Actionsheet/Actionsheet.tsx
deleted file mode 100644
index ee9f35c5b9..0000000000
--- a/example/storybook-v7/src/components/Actionsheet/Actionsheet.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { useState } from 'react';
-import {
- Button,
- ButtonText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- Input,
- InputField,
- InputIcon,
- InputSlot,
- AddIcon,
- Image,
- Text,
- Center,
-} from '@/components/ui';
-import { config } from '@gluestack-ui/config';
-
-import {
- Actionsheet,
- ActionsheetIcon,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetFlatList,
- ActionsheetScrollView,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- ActionsheetVirtualizedList,
-} from '@/components/ui/actionsheet';
-
-const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
- const [showActionsheet, setShowActionsheet] = React.useState(false);
-
- const handleClose = () => setShowActionsheet(false);
-
- return (
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Actionsheet will open. Useful for controllable state behavior.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
-
- {`Callback invoked when the Actionsheet is closed.`}
-
-
-
-
-
-
- onOpen
-
-
-
- {`() => any`}
-
-
- -
-
-
-
- {`Callback invoked when the Actionsheet is opened.`}
-
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, renders react-native native modal.`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- -
-
-
- {`Specifies the default open state of the Actionsheet`}
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet closes`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Actionsheet will close when the overlay is clicked.`}
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the keyboard can dismiss the Actionsheet`}
-
-
-
-
-
- trapFocus
-
-
-
- boolean
-
-
- {`true`}
-
-
- {`If true, creates a focus scope containing all elements within the Actionsheet content.`}
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
- {`The content to display inside the Actionsheet`}
-
-
-
-
-
- snapPoints
-
-
-
- {`Array`}
-
-
- {`[50]`}
-
-
-
- {`The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future.`}
-
-
-
-
-
-
->
-
-#### ActionsheetBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### ActionsheetContent
-
-It inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-#### ActionsheetDragIndicatorWrapper
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ActionsheetDragIndicator
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ActionsheetItem
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-#### ActionsheetItemText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### ActionsheetIcon
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ActionsheetScrollView
-
-It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component.
-
-#### ActionsheetVirtualizedList
-
-It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component.
-
-#### ActionsheetFlatList
-
-It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component.
-
-#### ActionsheetSectionList
-
-It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component.
-
-#### ActionsheetSectionHeaderText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-> Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items.
-
-### Features
-
-- Actionsheet has aria-modal set to true.
-- Actionsheet has role set to dialog.
-- When the Actionsheet opens, focus is trapped within it.
-- Pressing Esc closes the Actionsheet
-- Clicking on the overlay closes the Actionsheet
-- Scrolling is blocked on the elements behind the Actionsheet
-
-### Accessibility
-
-We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- `Tab + Enter`: Triggers the actionsheet action.
-
-### Screen Reader
-
-- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
-
-## 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.
-
-### Keyboard handling
-
-Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.
-
-**Without SnapPoints**
-
-
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Button,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- HStack,
- Image,
- Text,
- Box,
- Icon,
- KeyboardAvoidingView,
- Platform,
- CreditCardIcon,
- },
- argsType: {},
- }}
- />
-
-
-**With SnapPoints**
-
-
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
-);}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Button,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- HStack,
- Image,
- Text,
- Box,
- Icon,
- CreditCardIcon,
- KeyboardAvoidingView,
- Platform,
- },
- argsType: {},
- }}
- />
-
-
-### Icons
-
-The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.
-
-
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- Delete
-
-
-
-
-
- Share
-
-
-
-
-
- Play
-
-
-
-
-
- Favourite
-
-
-
-
-
- Cancel
-
-
-
- >
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- Icon,
- Wrapper,
- TrashIcon,
- ShareIcon,
- PlayIcon,
- FavouriteIcon,
- CloseIcon,
- Button,
- ButtonText,
- },
- argsType: {},
- }}
- />
-
-
-### VirtualizedList
-
-The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.
-
-
- setShowActionsheet(!showActionsheet);
- const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]);
- const getItem = (_data, index) => ({
- id: Math.random().toString(12).substring(0),
- title: _data[index],
- });
- const getItemCount = (_data) => _data.length;
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- getItemCount={getItemCount}
- getItem={getItem}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetVirtualizedList,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-### FlatList
-
-The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.
-
-
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'First Item'
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Second Item'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d72',
- title: 'Third Item'
- },
- ];
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetFlatList,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-### SectionList
-
-The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.
-
-
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- {
- title: 'Drinks',
- data: ['Water', 'Coke', 'Beer'],
- },
- {
- title: 'Desserts',
- data: ['Cheese Cake', 'Ice Cream'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Actionsheet/index.stories.mdx b/example/storybook-v7/src/components/Actionsheet/index.stories.mdx
deleted file mode 100644
index 61f0aa55f7..0000000000
--- a/example/storybook-v7/src/components/Actionsheet/index.stories.mdx
+++ /dev/null
@@ -1,1840 +0,0 @@
----
-title: Actionsheet | gluestack-ui | Installation, Usage, and API
-
-description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-pageTitle: Actionsheet
-
-pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-showHeader: true
-
-tag: beta
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- ActionsheetScrollView,
- ActionsheetVirtualizedList,
- ActionsheetFlatList,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
-} from './Actionsheet';
-import {
- Button,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- HStack,
- KeyboardAvoidingView,
- Platform,
-} from '@gluestack-ui/themed';
-import { LeadingIcon, IconRoot } from '@gluestack-ui/themed';
-import { Image, Text, Box } from '@gluestack-ui/themed';
-import { Icon, TrashIcon, ShareIcon } from '@gluestack-ui/themed';
-import { PlayIcon, FavouriteIcon, CloseIcon } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
-} from '@gluestack/design-system';
-import { config } from '@gluestack-ui/config';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Actionsheet** component.
-
-
- setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Delete
-
-
- Share
-
-
- Play
-
-
- Favourite
-
-
- Cancel
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Wrapper,
- Box,
- },
- }}
- />
->
-
-
-
-## API Reference
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { Actionsheet } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a actionsheet component's various parts.
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Actionsheet
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Actionsheet will open. Useful for controllable state behavior.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
-
- {`Callback invoked when the Actionsheet is closed.`}
-
-
-
-
-
-
- onOpen
-
-
-
- {`() => any`}
-
-
- -
-
-
-
- {`Callback invoked when the Actionsheet is opened.`}
-
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, renders react-native native modal.`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- -
-
-
- {`Specifies the default open state of the Actionsheet`}
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the Actionsheet closes`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Actionsheet will close when the overlay is clicked.`}
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the keyboard can dismiss the Actionsheet`}
-
-
-
-
-
- trapFocus
-
-
-
- boolean
-
-
- {`true`}
-
-
- {`If true, creates a focus scope containing all elements within the Actionsheet content.`}
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
- {`The content to display inside the Actionsheet`}
-
-
-
-
-
- snapPoints
-
-
-
- {`Array`}
-
-
- {`[50]`}
-
-
-
- {`The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future.`}
-
-
-
-
-
-
->
-
-#### ActionsheetBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### ActionsheetContent
-
-It inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### ActionsheetItemText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### ActionsheetIcon
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ActionsheetScrollView
-
-It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component.
-
-#### ActionsheetVirtualizedList
-
-It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component.
-
-#### ActionsheetFlatList
-
-It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component.
-
-#### ActionsheetSectionList
-
-It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component.
-
-#### ActionsheetSectionHeaderText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-> Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items.
-
-### Features
-
-- Actionsheet has aria-modal set to true.
-- Actionsheet has role set to dialog.
-- When the Actionsheet opens, focus is trapped within it.
-- Pressing Esc closes the Actionsheet
-- Clicking on the overlay closes the Actionsheet
-- Scrolling is blocked on the elements behind the Actionsheet
-
-### Accessibility
-
-We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- `Tab + Enter`: Triggers the actionsheet action.
-
-### Screen Reader
-
-- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
-
-## Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-## 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.
-
-### Keyboard handling
-
-Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.
-
-**Without SnapPoints**
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Button,
- ButtonText,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- HStack,
- Image,
- Text,
- Box,
- Icon,
- LeadingIcon,
- IconRoot,
- KeyboardAvoidingView,
- Platform,
- },
- argsType: {},
- }}
- />
->
-
-**With SnapPoints**
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
-);}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Button,
- ButtonText,
- ButtonText,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- HStack,
- Image,
- Text,
- Box,
- Icon,
- LeadingIcon,
- IconRoot,
- KeyboardAvoidingView,
- Platform,
- },
- argsType: {},
- }}
- />
->
-
-### Icons
-
-The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- Delete
-
-
-
-
-
- Share
-
-
-
-
-
- Play
-
-
-
-
-
- Favourite
-
-
-
-
-
- Cancel
-
-
-
- >
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- Icon,
- Wrapper,
- TrashIcon,
- ShareIcon,
- PlayIcon,
- FavouriteIcon,
- CloseIcon,
- Button,
- ButtonText,
- },
- argsType: {},
- }}
- />
->
-
-### VirtualizedList
-
-The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.
-
-<>
- setShowActionsheet(!showActionsheet);
- const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]);
- const getItem = (_data, index) => ({
- id: Math.random().toString(12).substring(0),
- title: _data[index],
- });
- const getItemCount = (_data) => _data.length;
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- getItemCount={getItemCount}
- getItem={getItem}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetVirtualizedList,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
->
-
-### FlatList
-
-The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'First Item'
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Second Item'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d72',
- title: 'Third Item'
- },
- ];
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetFlatList,
- Button,
- ButtonText,
- Wrapper,
- },
- argsType: {},
- }}
- />
->
-
-### SectionList
-
-The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.
-
-Default styling of the component can be found in the `components/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` component.
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- {
- title: 'Drinks',
- data: ['Water', 'Coke', 'Beer'],
- },
- {
- title: 'Desserts',
- data: ['Cheese Cake', 'Ice Cream'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- Button,
- ButtonText,
- Wrapper,
- },
- 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/eject-library). The import names of components serve as keys to customize each component.
-
-### 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.
-
-#### Themed
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
-
-
-
-
-
-
-
-
-
- Edit Profile
-
-
- View Followers
-
-
- Add a Post
-
-
- Delete Account
-
-
- Settings
-
-
- Sign Out
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Box,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- Wrapper,
- },
- argsType: {},
- }}
- />
->
-
-#### VirtualizedList
-
-<>
- setShowActionsheet(!showActionsheet);
- const data = React.useMemo(() => Array(5).fill(0).map((_, index) => 'Item' + index),[]);
- const getItem = (_data, index) => ({
- id: Math.random().toString(12).substring(0),
- title: _data[index],
- });
- const getItemCount = (_data) => _data.length;
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- getItemCount={getItemCount}
- getItem={getItem}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- },
- argsType: {},
- }}
- />
->
-
-#### Keyboard handling
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
- >
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-<>
- setShowActionsheet(!showActionsheet);
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mastercard
- Card ending in 2345
-
-
-
-
-
- Confirm security code
-
-
-
-
-
-
-
-
-
-
- >
- );
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-#### FlatList
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'Pizza'
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Burger'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d73',
- title: 'Risotto'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d74',
- title: 'French Fries'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d75',
- title: 'Onion Rings'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d76',
- title: 'Fried Shrimps'
- },
- ];
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'Pizza'
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Burger'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d73',
- title: 'Risotto'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d74',
- title: 'French Fries'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d75',
- title: 'Onion Rings'
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d76',
- title: 'Fried Shrimps'
- },
- ];
- const Item = React.useCallback(
- ({ title }) => (
-
- {title}
-
- ),
- [handleClose]
- );
- return (
- <>
-
-
-
-
-
-
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-#### SectionList
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-<>
- setShowActionsheet(!showActionsheet);
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- ];
- return (
- <>
-
-
-
-
-
-
-
- item + index}
- renderItem={({ item }) => (
-
- {item}
-
- )}
- renderSectionHeader={({ section: { title, data } }) => (
-
- {title} ({data.length})
-
- )}
- />
-
-
- >
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- VStack,
- HStack,
- Icon,
- Box,
- FormControl,
- Input,
- AddIcon,
- Image,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-### Customizing the Actionsheet
-
-We have a function called `createActionsheet` which can be used to create a custom actionsheet component. This function takes in a configuration object which contains the styled components that you want to use for the Actionsheet You can refer [gluestack.io/style](/style) for more information on how to use styled components.
-
-You can read more on how to animate components [here](/ui/docs/advanced/animations).
-
-#### Usage
-
-Default styling of all these components can be found in the `components/core/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` components.
-
-```jsx
-// import the styles
-import {
- Root,
- Content,
- Item,
- ItemText,
- DragIndicator,
- IndicatorWrapper,
- Backdrop,
-} from 'components/core/actionsheet/styled-components';
-
-// import the createActionsheet function
-import { createActionsheet } from '@gluestack-ui/actionsheet';
-
-// Understanding the API
-const Actionsheet = createActionsheet({
- Root,
- Content,
- Item,
- ItemText,
- DragIndicator,
- IndicatorWrapper,
- Backdrop,
-});
-
-// Using the actionsheet component
-export default () => (
-
-
-
-
-
-
-
- Community
-
-
-
-);
-```
-
--->
-
-## Spec Doc
-
-Explore the comprehensive details of the Actionsheet 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.
-
-
diff --git a/example/storybook-v7/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-v7/src/components/Actionsheet/index.themed.stories.mdx
deleted file mode 100644
index 4d3e5d2a67..0000000000
--- a/example/storybook-v7/src/components/Actionsheet/index.themed.stories.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: gluestack-ui Actionsheet Component | Installation, Usage, and API
-
-description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-pageTitle: Actionsheet
-
-pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
-
-showHeader: true
-
-tag: beta
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Actionsheet,
- ActionsheetBackdrop,
- ActionsheetContent,
- ActionsheetDragIndicator,
- ActionsheetDragIndicatorWrapper,
- ActionsheetItem,
- ActionsheetItemText,
- ActionsheetIcon,
- ActionsheetScrollView,
- ActionsheetVirtualizedList,
- ActionsheetFlatList,
- ActionsheetSectionList,
- ActionsheetSectionHeaderText,
- Button,
- ButtonText,
- Box,
- VStack,
- Input,
- InputIcon,
- InputSlot,
- InputField,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- HStack,
- Image,
- Text,
- PlayIcon,
- FavouriteIcon,
- CloseIcon,
- Icon,
- TrashIcon,
- ShareIcon
-} from '../../core-components/themed';
-import {
- KeyboardAvoidingView,
-} from '@gluestack-ui/themed';
-import { CreditCardIcon } from 'lucide-react-native';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
- Tabs,
-} from '@gluestack/design-system';
-import { config } from '@gluestack-ui/config';
-import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-import { Platform } from 'react-native';
-
-### Actionsheet
-
-Coming soon!
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Alert/Alert.png b/example/storybook-v7/src/components/Alert/Alert.png
deleted file mode 100644
index 919af23ffe..0000000000
Binary files a/example/storybook-v7/src/components/Alert/Alert.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Alert/Alert.stories.tsx b/example/storybook-v7/src/components/Alert/Alert.stories.tsx
deleted file mode 100644
index b70c8d7538..0000000000
--- a/example/storybook-v7/src/components/Alert/Alert.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Alert from './Alert';
-import AlertVariants from './Variants';
-
-const AlertMeta: ComponentMeta = {
- title: 'stories/Alert',
- component: Alert,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.`,
- },
- argTypes: {
- variant: {
- control: 'select',
- options: ['solid', 'accent', 'outline'],
- },
- action: {
- control: 'select',
- options: ['info', 'error', 'warning', 'muted', 'success'],
- },
- },
- args: {
- action: 'success',
- variant: 'solid',
- },
-};
-
-export default AlertMeta;
-
-export { Alert, AlertVariants };
diff --git a/example/storybook-v7/src/components/Alert/Alert.tsx b/example/storybook-v7/src/components/Alert/Alert.tsx
deleted file mode 100644
index 8d8072a11b..0000000000
--- a/example/storybook-v7/src/components/Alert/Alert.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
-import { InfoIcon } from '@/components/ui/icon';
-
-const AlertBasic = ({ ...props }: any) => {
- return (
-
-
- Selection successfully moved!
-
- );
-};
-
-AlertBasic.description =
- 'This is a basic Alert component example. Alerts are used to communicate a state that affects a system, feature or page';
-
-export default AlertBasic;
-
-export { Alert, AlertIcon, AlertText, InfoIcon };
diff --git a/example/storybook-v7/src/components/Alert/Variants.tsx b/example/storybook-v7/src/components/Alert/Variants.tsx
deleted file mode 100644
index 9908467d89..0000000000
--- a/example/storybook-v7/src/components/Alert/Variants.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { BellIcon, Center } from '@gluestack-ui/themed';
-
-import { Alert, AlertIcon, AlertText, InfoIcon } from '@gluestack-ui/themed';
-import {
- AlertCircleIcon,
- CheckCircle2Icon,
- XCircle,
-} from 'lucide-react-native';
-
-const AlertVariants = ({ variant }: any) => {
- return (
-
-
-
-
- Unlock the power of knowledge with the following information.
-
-
-
-
-
- Boom! You did it! Please take a moment to pat yourself on the back.
- You've earned it! Boom! You did it! Please take a moment to pat
- yourself on the back. You've earned it!
-
-
-
-
-
- Uh-oh! It looks like the matrix has glitched. Our team of tech ninjas
- are already on the case. Please hold tight while we fix the issue
-
-
-
-
-
-
- Warning: Reading the following content may cause spontaneous outbursts
- of 'aha!' moments
-
-
-
-
-
- Need a helping hand? Your help alert has just been activated, and
- we're here to lend you our expertise, our experience, and our
- enthusiasm. Let's do this!
-
-
-
- );
-};
-
-export default AlertVariants;
-export { Alert };
diff --git a/example/storybook-v7/src/components/Alert/index.nw.stories.mdx b/example/storybook-v7/src/components/Alert/index.nw.stories.mdx
deleted file mode 100644
index edb33ef82e..0000000000
--- a/example/storybook-v7/src/components/Alert/index.nw.stories.mdx
+++ /dev/null
@@ -1,266 +0,0 @@
----
-title: gluestack-ui Alert Component | Installation, Usage, and API
-
-description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
-
-pageTitle: Alert
-
-pageDescription: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Alert,
- AlertIcon,
- AlertText,
- InfoIcon,
- CheckCircleIcon,
- CloseCircleIcon,
- BellIcon,
- AlertCircleIcon,
- Icon,
- VStack,
- Center,
- HStack,
-} from '../../core-components/nativewind';
-
-
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- InlineCode,
- TableContainer,
- Tabs
-} from '@gluestack/design-system';
-import { CollapsibleCode } from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of **Alert** component.
-
-
-
-
-
- We have updated our terms of service. Please review and accept to continue using our service.
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Alert,
- AlertIcon,
- AlertText,
- Wrapper,
- InfoIcon,
- },
- argsType: {
- action: {
- control: 'select',
- options: ['success', 'info', 'error', 'warning', 'muted'],
- default: 'info',
- },
- variant: {
- control: 'select',
- options: ['accent', 'solid', 'outline'],
- default: 'solid',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add alert
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/alert
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/alert/index.tsx --%%
-```
-
-
-
-### 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 { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
-```
-
-```jsx
-export default () => (
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Alert
-
-Contains all alert related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/pressable) component.
-
-#### AlertIcon
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### AlertText
-
-Contains all spinner related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-### Props
-
-Alert 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).
-
-#### Alert
-
-<>
-
-
-
->
-
-### 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.
-
-#### Alert with Heading
-
-An example of an alert component with a heading, which further contains another alert component for displaying supplementary information.
-
-
-
-
-
-
- Congratulations!
-
-
- Thank you for your submission. You will receive a confirmation email shortly.
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Alert,
- AlertIcon,
- AlertText,
- Wrapper,
- CheckCircleIcon,
- VStack,
- Icon,
- },
- argsType: {},
- }}
-/>
-
-
diff --git a/example/storybook-v7/src/components/Alert/index.themed.stories.mdx b/example/storybook-v7/src/components/Alert/index.themed.stories.mdx
deleted file mode 100644
index 4881eff7fe..0000000000
--- a/example/storybook-v7/src/components/Alert/index.themed.stories.mdx
+++ /dev/null
@@ -1,307 +0,0 @@
----
-title: gluestack-ui Alert Component | Installation, Usage, and API
-
-description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
-
-pageTitle: Alert
-
-pageDescription: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- BellIcon,
- AlertCircleIcon,
- Center,
- VStack,
- InfoIcon,
- HStack,
- Alert,
- AlertIcon,
- AlertText,
- CheckCircleIcon,
- CloseCircleIcon,
- Icon,
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- InlineCode,
- TableContainer,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Alert** component.
-
-<>
-
-
-
- We have updated our terms of service. Please review and accept to continue using our service.
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Alert,
- AlertIcon,
- AlertText,
- Wrapper,
- InfoIcon,
- },
- argsType: {
- action: {
- control: 'select',
- options: ['success', 'info', 'error', 'warning', 'muted'],
- default: 'info',
- },
- variant: {
- control: 'select',
- options: ['accent', 'solid', 'outline'],
- default: 'solid',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add alert
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/alert
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/alert/index.tsx --%%
-```
-
-
-
-### 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 { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
-```
-
-```jsx
-export default () => (
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Alert
-
-Contains all alert related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/pressable) component.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### AlertIcon
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### AlertText
-
-Contains all spinner related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-### Props
-
-Alert 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Alert
-
-<>
-
-
-
->
-
-### 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.
-
-#### Alert with Heading
-
-An example of an alert component with a heading, which further contains another alert component for displaying supplementary information.
-
-
-
-
-
-
- Congratulations!
-
-
- Thank you for your submission. You will receive a confirmation email shortly.
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Alert,
- AlertIcon,
- AlertText,
- Wrapper,
- CheckCircleIcon,
- VStack,
- Icon,
- },
- argsType: {},
- }}
-/>
-
-
diff --git a/example/storybook-v7/src/components/AlertDialog/AlertDialog.png b/example/storybook-v7/src/components/AlertDialog/AlertDialog.png
deleted file mode 100644
index 00b14b18c9..0000000000
Binary files a/example/storybook-v7/src/components/AlertDialog/AlertDialog.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/AlertDialog/AlertDialog.stories.tsx b/example/storybook-v7/src/components/AlertDialog/AlertDialog.stories.tsx
deleted file mode 100644
index 911213de3b..0000000000
--- a/example/storybook-v7/src/components/AlertDialog/AlertDialog.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import AlertDialog from './AlertDialog';
-
-const AlertDialogMeta: ComponentMeta = {
- title: 'stories/AlertDialog',
- component: AlertDialog,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `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.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- description: 'The size of the button.',
- table: {
- defaultValue: { summary: 'md' },
- },
- },
- showAlertDialog: {
- control: 'boolean',
- },
- },
- args: {
- size: 'md',
- showAlertDialog: true,
- },
-};
-
-export default AlertDialogMeta;
-
-export { AlertDialog };
diff --git a/example/storybook-v7/src/components/AlertDialog/AlertDialog.tsx b/example/storybook-v7/src/components/AlertDialog/AlertDialog.tsx
deleted file mode 100644
index 6b3259b546..0000000000
--- a/example/storybook-v7/src/components/AlertDialog/AlertDialog.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import { Button, ButtonText } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { Heading } from '@/components/ui/heading';
-import { X } from 'lucide-react-native';
-
-import {
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
-} from '@/components/ui/alert-dialog';
-
-const AlertDialogBasic = ({ ...props }) => {
- const [showAlertDialog, setShowAlertDialog] = useState(false);
- const handleClose = () => setShowAlertDialog(!showAlertDialog);
- return (
- <>
-
-
-
-
-
- Return Policy
-
-
-
-
-
-
- Whoa, slow down there! This modal is like a red light at an
- intersection, reminding you to stop and think before you proceed.
- Is deleting this folder the right choice?
-
-
-
-
-
-
-
-
- >
- );
-};
-
-AlertDialogBasic.description =
- 'This is a basic AlertDialog component example. Alerts are used to communicate a state that affects a system, feature or page';
-
-export default AlertDialogBasic;
-
-export {
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
- Button,
- ButtonText,
- Text,
- Heading,
-};
diff --git a/example/storybook-v7/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-v7/src/components/AlertDialog/index.nw.stories.mdx
deleted file mode 100644
index d11e3f3446..0000000000
--- a/example/storybook-v7/src/components/AlertDialog/index.nw.stories.mdx
+++ /dev/null
@@ -1,648 +0,0 @@
----
-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.
-
-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: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-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,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-
-This is an illustration of **AlertDialog** component.
-
-
-
-
- {
- setShowAlertDialog(false);
- }}
- >
-
-
-
- Deactivate account
-
-
-
-
-
-
- Are you sure you want to deactivate your account? Your data will be permanently removed and cannot be undone.
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'Example');
- },
- scope: {
- Wrapper,
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
- CloseIcon,
- Button,
- ButtonText,
- Center,
- Text,
- Heading,
- Icon,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add alert-dialog
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/alert-dialog @legendapp/motion
-```
-> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/alert-dialog/index.tsx --%%
-```
-
-
-
-### 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 () => (
-
-
-
-
-
-
-
-
-
-
-);
-```
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- false
-
-
- {`If true, the alert-dialog will open. Useful for controllable state behavior.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback invoked when the alert-dialog is closed.`}
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, renders react-native native modal. (Only works in react-native)`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- false
-
-
- {`Specifies the default open state of the AlertDialog`}
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the alert-dialog opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the alert-dialog closes.`}
-
-
-
-
-
- avoidKeyboard
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the AlertDialog will avoid the keyboard.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- true
-
-
- {`If true, the AlertDialog will close when the overlay is clicked.`}
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- true
-
-
- {`If true, the keyboard can dismiss the AlertDialog`}
-
-
-
-
-
->
-
-#### 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
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- xs | sm | md | lg | full
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-
-
-
-
-
- {
- setShowAlertDialog(false);
- }}
- >
-
-
-
-
-
- Order placed
-
-
-
-
- Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us.
-
-
-
-
-
-
-
- >
- );
- }
- `,
- 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: {},
- }}
- />
-
-
-
-#### AlertDialog Sizes
-
-An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users.
-
-
-
-
-
-
-
- {
- setShowAlertDialog(false);
- }}
- {...props}
- >
-
-
-
-
-
- Order placed
-
-
-
-
- You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading.
-
-
-
-
-
-
-
-
- >
- );
- }
- `,
- 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',
- },
- },
- }}
- />
-
diff --git a/example/storybook-v7/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-v7/src/components/AlertDialog/index.themed.stories.mdx
deleted file mode 100644
index fb45dc9728..0000000000
--- a/example/storybook-v7/src/components/AlertDialog/index.themed.stories.mdx
+++ /dev/null
@@ -1,741 +0,0 @@
----
-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.
-
-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: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
-} from '../../core-components/themed';
-import {
- CloseIcon,
- Button,
- ButtonText,
- ButtonGroup,
- Center,
- HStack,
- Text,
- CheckCircleIcon,
- Heading,
- Icon,
- AlertCircleIcon
-} from '../../core-components/themed';
-import { AlertTriangleIcon } from 'lucide-react-native';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **AlertDialog** component.
-
-
-
-
- {
- setShowAlertDialog(false);
- }}
- >
-
-
-
- Deactivate account
-
-
-
-
-
-
- Are you sure you want to deactivate your account? Your data will be permanently removed and cannot be undone.
-
-
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'Example');
- },
- scope: {
- Wrapper,
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
- CloseIcon,
- Button,
- ButtonText,
- ButtonGroup,
- Center,
- Text,
- Heading,
- Icon,
- AlertCircleIcon,
- },
- argsType: { },
- }
-}
-/>
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add alert-dialog
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/alert-dialog
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/alert-dialog/index.tsx --%%
-```
-
-
-
-### 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 '@gluestack-ui/themed';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- false
-
-
- {`If true, the alert-dialog will open. Useful for controllable state behavior.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback invoked when the alert-dialog is closed.`}
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, renders react-native native modal. (Only works in react-native)`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- false
-
-
- {`Specifies the default open state of the AlertDialog`}
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the alert-dialog opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the alert-dialog closes.`}
-
-
-
-
-
- avoidKeyboard
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the AlertDialog will avoid the keyboard.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- true
-
-
- {`If true, the AlertDialog will close when the overlay is clicked.`}
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- true
-
-
- {`If true, the keyboard can dismiss the AlertDialog`}
-
-
-
-
-
->
-
-#### 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.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### AlertDialog
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- xs | sm | md | lg | full
-
-
- md
-
-
-
-
-
->
-
-
-### 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.
-
-
-
-
-
-
- {
- setShowAlertDialog(false);
- }}
- >
-
-
-
-
-
- Order placed
-
-
-
-
- Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us.
-
-
-
-
-
-
-
- >
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- Center,
- Wrapper,
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
- Icon,
- Text,
- HStack,
- AlertTriangleIcon,
- CheckCircleIcon,
- Heading,
- },
- argsType: {},
- }}
- />
-
-
-#### AlertDialog Sizes
-
-An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users.
-
-
-
-
-
-
- {
- setShowAlertDialog(false);
- }}
- {...props}
- >
-
-
-
-
-
- Order placed
-
-
-
-
- You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading.
-
-
-
-
-
-
-
-
-
-
- >
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Button,
- ButtonText,
- ButtonGroup,
- Center,
- Wrapper,
- AlertDialog,
- AlertDialogBackdrop,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogCloseButton,
- AlertDialogFooter,
- AlertDialogBody,
- Icon,
- Text,
- HStack,
- AlertTriangleIcon,
- CheckCircleIcon,
- Heading,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- default: 'md',
- },
- },
- }}
- />
-
-
diff --git a/example/storybook-v7/src/components/Avatar/Avatar.png b/example/storybook-v7/src/components/Avatar/Avatar.png
deleted file mode 100644
index 46e1adf6a1..0000000000
Binary files a/example/storybook-v7/src/components/Avatar/Avatar.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Avatar/Avatar.stories.tsx b/example/storybook-v7/src/components/Avatar/Avatar.stories.tsx
deleted file mode 100644
index e119e0d98d..0000000000
--- a/example/storybook-v7/src/components/Avatar/Avatar.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Avatar from './Avatar';
-import AvatarGroupExample from './AvatarGroup';
-import AvatarSizeExample from './AvatarSizes';
-
-const AvatarMeta: ComponentMeta = {
- title: 'stories/Avatar',
- component: Avatar,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.`,
- },
- args: {
- size: 'md',
- uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
- fallbackText: 'John Doe',
- badge: true,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
- },
- badge: {
- control: 'boolean',
- options: [true, false],
- },
- uri: {
- control: 'select',
- options: [
- 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
- 'https://broken.link',
- ],
- },
- },
-};
-
-export default AvatarMeta;
-export { Avatar };
-export { AvatarSizeExample as AvatarSizes };
-export { AvatarGroupExample as AvatarGroup };
diff --git a/example/storybook-v7/src/components/Avatar/Avatar.tsx b/example/storybook-v7/src/components/Avatar/Avatar.tsx
deleted file mode 100644
index f2a005f0d8..0000000000
--- a/example/storybook-v7/src/components/Avatar/Avatar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import {
- Avatar,
- AvatarGroup,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
-} from '@/components/ui/avatar';
-import { User } from 'lucide-react-native';
-import { HStack } from '@/components/ui/hstack';
-import { VStack } from '@/components/ui/vstack';
-import { Icon } from '@/components/ui/icon';
-import { Heading } from '@/components/ui/heading';
-import { Text } from '@/components/ui/text';
-
-const AvatarBasic = (props: any) => {
- return (
-
- {props.fallbackText}
-
- {props.badge && }
-
- );
-};
-
-AvatarBasic.description =
- 'This is a basic Avatar component example. An avatar is a graphical representation of a user.';
-
-export default AvatarBasic;
-
-export {
- HStack,
- VStack,
- Avatar,
- AvatarGroup,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
- Icon,
- Heading,
- User,
- Text,
-};
diff --git a/example/storybook-v7/src/components/Avatar/AvatarGroup.tsx b/example/storybook-v7/src/components/Avatar/AvatarGroup.tsx
deleted file mode 100644
index f50ce40498..0000000000
--- a/example/storybook-v7/src/components/Avatar/AvatarGroup.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
- // HStack,
- Avatar,
- AvatarGroup,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
-} from '@/components/ui/avatar';
-import React from 'react';
-import { HStack } from '@gluestack-ui/themed';
-
-const AvatarGroupBasic = ({ size = 'md', badge }: any) => {
- return (
-
-
-
- John Doe
-
- {badge && }
-
-
- John Doe
-
- {badge && }
-
-
- John Doe
-
- {badge && }
-
-
- John Doe
-
- {badge && }
-
-
-
- );
-};
-
-AvatarGroupBasic.description =
- 'This is a basic AvatarGroup component example. AvatarGroup is a wrapper component that renders a group of avatars.';
-
-export default AvatarGroupBasic;
diff --git a/example/storybook-v7/src/components/Avatar/AvatarSizes.tsx b/example/storybook-v7/src/components/Avatar/AvatarSizes.tsx
deleted file mode 100644
index bc62e62378..0000000000
--- a/example/storybook-v7/src/components/Avatar/AvatarSizes.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
- // VStack,
- Avatar,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
-} from '@/components/ui/avatar';
-import { VStack } from '@gluestack-ui/themed';
-import React from 'react';
-
-const AvatarSizes = () => {
- return (
-
- {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => (
-
- John Doe
-
-
-
- ))}
-
- );
-};
-
-AvatarSizes.description =
- 'This is a basic Avatar component example. An avatar is a graphical representation of a user with different sizes.';
-
-export default AvatarSizes;
diff --git a/example/storybook-v7/src/components/Avatar/index.nw.stories.mdx b/example/storybook-v7/src/components/Avatar/index.nw.stories.mdx
deleted file mode 100644
index 6bad42ac98..0000000000
--- a/example/storybook-v7/src/components/Avatar/index.nw.stories.mdx
+++ /dev/null
@@ -1,664 +0,0 @@
----
-title: gluestack-ui Avatar Component | Installation, Usage, and API
-
-description: The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
-
-pageTitle: Avatar
-
-pageDescription: The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Avatar,
- AvatarGroup,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
- HStack,
- VStack,
- Text,
- Icon,
- Heading,
-} from '../../core-components/nativewind';
-import { User } from "lucide-react-native";
-import colors from 'tailwindcss/colors';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of **Avatar** component.
-
-
-
- Sandeep Srivastava
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Avatar,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
- default: 'md',
- },
- },
- }
- }
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add avatar
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/avatar
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/avatar/index.tsx --%%
-```
-
-
-
-### 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 {
- Avatar,
- AvatarBadge,
- AvatarFallbackText,
- AvatarImage,
-} from '@/components/ui/avatar';
-```
-
-> IOS: It is highly recommended to use `` before `` to avoid indexing issues in IOS.
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Avatar
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### AvatarGroup
-
-It also inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### AvatarImage
-
-It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component.
-
-#### AvatarFallbackText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### AvatarBadge
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Features
-
-- Returns a fallback to FallbackText if given an invalid image source.
-
-### Props
-
-Avatar 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Avatar
-
-<>
-
-
-
->
-
-#### AvatarImage
-
-It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component.
-
-#### AvatarFallbackText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### AvatarBadge
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Features
-
-- Returns a fallback to FallbackText if given an invalid image source.
-
-### Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-### Props
-
-Avatar 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Avatar
-
-<>
-
-
-
->
-
-#### BadgeText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### BadgeIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-### Props
-
-Badge 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Badge
-
-<>
-
-
-
->
-
-### 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.
-
-#### Badge with Avatar
-
-An example of the Badge component being used with the Avatar component to display badges alongside user avatars for enhanced visual representation or identification.
-
-
-
-
-
- SS
-
-
-
-
- Ronald Richards
-
- Verified
-
-
-
- Nursing Assistant
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Avatar,
- AvatarFallbackText,
- AvatarImage,
- Heading,
- Text,
- HStack,
- VStack,
- Badge,
- BadgeText,
- BadgeIcon,
- GlobeIcon,
- BadgeCheckIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Badge in Menu
-
-A Badge component used with a menu adds a visual indicator, such as a badge, to highlight specific items or provide additional information within the menu, enhancing user interaction and improving the visibility of important elements.
-
-
- {
- return (
-
- );
- }}
- >
-
-
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Button,
- ButtonText,
- Menu,
- MenuIcon,
- MenuItem,
- MenuItemLabel,
- Text,
- Box,
- HStack,
- Icon,
- GlobeIcon,
- PuzzleIcon,
- PaintBucket,
- SettingsIcon,
- AddIcon,
- Badge,
- BadgeText,
- BadgeIcon,
- BadgePlusIcon,
- },
- argsType: {},
- }}
- />
-
-
-### Badge Composition
-
-An example of the Badge component being used with the Composition component, allowing for the display of badges within a composition of other UI elements.
-
-
-
-
-
- 2
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Badge,
- BadgeText,
- BadgeIcon,
- GlobeIcon,
- Box,
- Text,
- HStack,
- VStack,
- Heading,
- Button,
- ButtonText,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Box/Box.png b/example/storybook-v7/src/components/Box/Box.png
deleted file mode 100644
index 7467ae60b7..0000000000
Binary files a/example/storybook-v7/src/components/Box/Box.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Box/Box.stories.tsx b/example/storybook-v7/src/components/Box/Box.stories.tsx
deleted file mode 100644
index 5edb0e83f5..0000000000
--- a/example/storybook-v7/src/components/Box/Box.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Box from './Box';
-import BoxWithRef from './BoxWithRef';
-
-const BoxMeta: ComponentMeta = {
- title: 'stories/Box',
- component: Box,
-
- args: {
- w: 100,
- h: 100,
- },
-};
-
-export default BoxMeta;
-
-export { Box, BoxWithRef };
diff --git a/example/storybook-v7/src/components/Box/Box.tsx b/example/storybook-v7/src/components/Box/Box.tsx
deleted file mode 100644
index 490df7a02b..0000000000
--- a/example/storybook-v7/src/components/Box/Box.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Text } from '@/components/ui/text';
-import { Box } from '@/components/ui/box';
-import React from 'react';
-
-const BoxBasic: any = ({
- bg = 'blue500',
- w = '100',
- h = '100',
- className = '',
- ...props
-}: any) => {
- return (
-
-
- BOX
-
-
- );
-};
-
-BoxBasic.description = 'This is a basic Box component example.';
-
-export default BoxBasic;
-
-export { Text, Box };
diff --git a/example/storybook-v7/src/components/Box/BoxWithRef.tsx b/example/storybook-v7/src/components/Box/BoxWithRef.tsx
deleted file mode 100644
index 2456aefac2..0000000000
--- a/example/storybook-v7/src/components/Box/BoxWithRef.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Box } from '@gluestack-ui/themed';
-import React from 'react';
-
-const BoxWithRef = ({ ...props }: any) => {
- const myRef = React.useRef({});
- React.useEffect(() => {
- const styleObj = {
- borderWidth: 8,
- borderRadius: 4,
- borderColor: '#22D3EE',
- };
-
- myRef.current.setNativeProps({
- style: styleObj,
- });
- }, [myRef]);
-
- return ;
-};
-
-BoxWithRef.description =
- 'This is a basic Box component example with styling using ref. Box is a primitive component.';
-
-export default BoxWithRef;
diff --git a/example/storybook-v7/src/components/Box/index.nw.stories.mdx b/example/storybook-v7/src/components/Box/index.nw.stories.mdx
deleted file mode 100644
index 0a4d6422b7..0000000000
--- a/example/storybook-v7/src/components/Box/index.nw.stories.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: gluestack-ui Box Component | Installation, Usage, and API
-
-description: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
-
-pageTitle: Box
-
-pageDescription: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-import { useRef, useEffect, useState } from 'react';
-
-
-
-import { Box } from '../../core-components/nativewind';
-import { Text } from '../../core-components/nativewind/text';
-
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Tabs } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Box** component.
-
-
-
-
- This is the Box
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Box,
- Text,
- },
- argsType: { },
- }
- }
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add box
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/box/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/box/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/box/styles.tsx --%%
-```
-
-
-### Step 4: 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 { Box } from '@/components/ui/box';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Box
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
diff --git a/example/storybook-v7/src/components/Box/index.themed.stories.mdx b/example/storybook-v7/src/components/Box/index.themed.stories.mdx
deleted file mode 100644
index 2607f490e4..0000000000
--- a/example/storybook-v7/src/components/Box/index.themed.stories.mdx
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: gluestack-ui Box Component | Installation, Usage, and API
-
-description: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
-
-pageTitle: Box
-
-pageDescription: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { useRef, useEffect, useState } from 'react';
-import { Box } from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Text, CollapsibleCode, Tabs } from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Box** component.
-
-<>
-
-
- This is the Box
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Box,
- Text,
- },
- argsType: { },
- }
-}
-/>
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add box
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/box/index.tsx --%%
-```
-
-
-### Step 2: 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 { Box } from '@/components/ui/box';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Box
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-
-
-
-
-
-
-### 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.
-
-#### Box with ref
-
-A Box component with a ref property enables the direct reference and manipulation of the underlying DOM element, offering greater control and flexibility in modifying the box's appearance and behavior within a user interface.
-
-
- {
- const styleObj = {
- borderWidth: 2,
- borderRadius: 4,
- borderColor: '#1A91FF',
- };
- if(myRef.current && myRef.current.setNativeProps){
- myRef.current.setNativeProps({
- style: styleObj,
- });
- }
- }, [myRef]);
- return (
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: { Box, Wrapper, useRef, useEffect },
- argsType: {},
- }}
- />
-
-
diff --git a/example/storybook-v7/src/components/Button/Button.png b/example/storybook-v7/src/components/Button/Button.png
deleted file mode 100644
index d609730e83..0000000000
Binary files a/example/storybook-v7/src/components/Button/Button.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Button/Button.stories.tsx b/example/storybook-v7/src/components/Button/Button.stories.tsx
deleted file mode 100644
index f31a56a7d8..0000000000
--- a/example/storybook-v7/src/components/Button/Button.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Button from './Button';
-// import ButtonIsLoadingExample from './ButtonLoading';
-// import ButtonSizesExample from './ButtonSizes';
-// import ButtonStylesExample from './ButtonStyles';
-// import ButtonWithIconsTemp from './ButtonWithIcon';
-
-const ButtonMeta: ComponentMeta = {
- title: 'stories/Button',
- component: Button,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `A button component is a graphical user interface element that enables users to act by clicking or tapping.`,
- },
- args: {
- action: 'primary',
- variant: 'solid',
- size: 'md',
- isHovered: false,
- isPressed: false,
- isFocusVisible: false,
- isDisabled: false,
- },
- argTypes: {
- action: {
- control: 'select',
- options: ['primary', 'secondary', 'positive', 'negative'],
- },
- variant: {
- control: 'select',
- options: ['solid', 'outline', 'link'],
- },
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl'],
- },
- isHovered: {
- control: 'boolean',
- options: [true, false],
- },
- isPressed: {
- control: 'boolean',
- options: [true, false],
- },
- isFocusVisible: {
- control: 'boolean',
- options: [true, false],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- },
-};
-
-export default ButtonMeta;
-
-export {
- Button,
- // ButtonIsLoadingExample,
- // ButtonSizesExample,
- // ButtonStylesExample,
- // ButtonWithIconsTemp,
-};
diff --git a/example/storybook-v7/src/components/Button/Button.tsx b/example/storybook-v7/src/components/Button/Button.tsx
deleted file mode 100644
index 62c53c02f3..0000000000
--- a/example/storybook-v7/src/components/Button/Button.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { AddIcon } from '@/components/ui/icon';
-import {
- Button,
- ButtonText,
- ButtonSpinner,
- ButtonIcon,
-} from '@/components/ui/button';
-
-export const ButtonBasic = (props: any) => {
- return (
- <>
-
- >
- );
-};
-
-ButtonBasic.description =
- 'This is a basic Button component example. A button is a component that users can tap to trigger an action.';
-
-export default ButtonBasic;
-
-export { Button, ButtonText, ButtonSpinner, ButtonIcon };
diff --git a/example/storybook-v7/src/components/Button/ButtonGroup.stories.tsx b/example/storybook-v7/src/components/Button/ButtonGroup.stories.tsx
deleted file mode 100644
index de8168235e..0000000000
--- a/example/storybook-v7/src/components/Button/ButtonGroup.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// import type { ComponentMeta } from '@storybook/react-native';
-// import ButtonGroup from './ButtonGroup';
-
-// const ButtonGroupMeta: ComponentMeta = {
-// title: 'components/PRIMITIVES/Button',
-// component: ButtonGroup,
-// // metaInfo is required for figma generation
-// // @ts-ignore
-// metaInfo: {
-// componentDescription: `Buttons can be grouped together as individual segments of related actions.`,
-// },
-// args: {
-// space: 'md',
-// isAttached: true,
-// direction: 'row',
-// },
-// argTypes: {
-// space: {
-// control: 'select',
-// options: ['xs', 'sm', 'md', 'lg', 'xl'],
-// },
-// direction: {
-// control: 'select',
-// options: ['row', 'column'],
-// },
-// isAttached: {
-// control: 'boolean',
-// options: [true, false],
-// },
-// isDisabled: {
-// control: 'boolean',
-// options: [true, false],
-// },
-// isReversed: {
-// control: 'boolean',
-// options: [true, false],
-// },
-// },
-// };
-
-// export default ButtonGroupMeta;
-// export { ButtonGroup };
diff --git a/example/storybook-v7/src/components/Button/ButtonGroup.tsx b/example/storybook-v7/src/components/Button/ButtonGroup.tsx
deleted file mode 100644
index 684a70f578..0000000000
--- a/example/storybook-v7/src/components/Button/ButtonGroup.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// import { Button, ButtonGroup, ButtonText } from '@custom-ui/themed';
-// import React from 'react';
-
-// const ButtonGroupBasic = ({ ...props }) => {
-// return (
-// // @ts-ignore
-//
-//
-//
-//
-//
-// );
-// };
-
-// ButtonGroupBasic.description =
-// 'This is a basic ButtonGroup component example. ButtonGroups are used to group related buttons together.';
-
-// export default ButtonGroupBasic;
diff --git a/example/storybook-v7/src/components/Button/ButtonLoading.tsx b/example/storybook-v7/src/components/Button/ButtonLoading.tsx
deleted file mode 100644
index b8b9aceb5f..0000000000
--- a/example/storybook-v7/src/components/Button/ButtonLoading.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// import React from 'react';
-
-// import { HStack } from '@custom-ui/themed';
-// import { Button, ButtonSpinner, ButtonText } from '@custom-ui/themed';
-
-// const ButtonIsLoading = ({}) => {
-// const [isLoading] = React.useState(true);
-// return (
-//
-//
-//
-//
-//
-// );
-// };
-
-// ButtonIsLoading.description =
-// 'This is an example of a Button with a loading state. A button is a component that users can tap to trigger an action.';
-
-// export default ButtonIsLoading;
diff --git a/example/storybook-v7/src/components/Button/ButtonSizes.tsx b/example/storybook-v7/src/components/Button/ButtonSizes.tsx
deleted file mode 100644
index c6040740f1..0000000000
--- a/example/storybook-v7/src/components/Button/ButtonSizes.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// import React from 'react';
-// import {
-// Button,
-// ButtonText,
-// ButtonIcon,
-// VStack,
-// AddIcon,
-// } from '@custom-ui/themed';
-
-// const ButtonAllSizes = ({}) => {
-// const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-// return (
-//
-// {sizes.map((size: any) => {
-// return (
-//
-// );
-// })}
-//
-// );
-// };
-
-// export default ButtonAllSizes;
diff --git a/example/storybook-v7/src/components/Button/ButtonStyles.tsx b/example/storybook-v7/src/components/Button/ButtonStyles.tsx
deleted file mode 100644
index d25e57e612..0000000000
--- a/example/storybook-v7/src/components/Button/ButtonStyles.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// import { Button, ButtonText } from '@custom-ui/themed';
-// import { VStack } from '@custom-ui/themed';
-
-// import React from 'react';
-
-// const ButtonAllVariants = ({}) => {
-// const variants = ['solid', 'outline', 'link'];
-// return (
-//
-// {variants.map((variant: any) => {
-// return (
-//
-// );
-// })}
-//
-// );
-// };
-
-// export default ButtonAllVariants;
diff --git a/example/storybook-v7/src/components/Button/ButtonWithIcon.tsx b/example/storybook-v7/src/components/Button/ButtonWithIcon.tsx
deleted file mode 100644
index 255e512629..0000000000
--- a/example/storybook-v7/src/components/Button/ButtonWithIcon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// import React from 'react';
-// import { AddIcon, InfoIcon, HStack } from '@custom-ui/themed';
-// import { Button, ButtonIcon, ButtonText } from '@custom-ui/themed';
-
-// const ButtonWithIcons = ({}) => {
-// return (
-//
-//
-//
-//
-// );
-// };
-
-// ButtonWithIcons.description =
-// 'This is an example of a Button with icons. A button is a component that users can tap to trigger an action.';
-
-// export default ButtonWithIcons;
diff --git a/example/storybook-v7/src/components/Button/index.nw.stories.mdx b/example/storybook-v7/src/components/Button/index.nw.stories.mdx
deleted file mode 100644
index 7f8711ae74..0000000000
--- a/example/storybook-v7/src/components/Button/index.nw.stories.mdx
+++ /dev/null
@@ -1,672 +0,0 @@
----
-title: gluestack-ui Button Component | Installation, Usage, and API
-
-description: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
-
-pageTitle: Button
-
-pageDescription: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Button,
- ButtonText,
- ButtonSpinner,
- ButtonIcon,
- Icon,
- ArrowUpIcon,
- InfoIcon,
- AddIcon,
- Box,
- VStack,
- Heading,
- Text,
- Input,
- InputField,
- Center,
- ArrowLeftIcon,
- EditIcon
-} from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-import colors from 'tailwindcss/colors';
-
-This is an illustration of **Button** component.
-
-
-
- Hello World!
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg'],
- default: 'md',
- },
- variant: {
- control: 'select',
- options: ['solid', 'outline', 'link'],
- default: 'solid',
- },
- action: {
- control: 'select',
- options: ['primary', 'secondary', 'positive', 'negative'],
- default: 'primary',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add button
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/button
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/button/index.tsx --%%
-```
-
-
-### 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 {
- Button,
- ButtonText,
- ButtonSpinner,
- ButtonIcon,
- ButtonGroup,
-} from '@/components/ui/button';
-```
-
-```jsx
-export default () => (
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Button
-
-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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the button.`}
-
-
-
-
-
- isPressed
-
-
-
- bool
-
-
- false
-
-
- {`To manually set pressable state to the button.`}
-
-
-
-
-
- isFocused
-
-
-
- bool
-
-
- false
-
-
- {`To manually set focused state to the button.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the button.`}
-
-
-
-
-
->
-
-#### ButtonText
-
-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.
-
-#### ButtonGroup
-
-Contains all group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- flexDirection
-
-
-
-
- 'row' | 'column' | 'row-reverse' | 'column-reverse'
-
-
-
- 'row'
-
-
-
- Set the direction of Button group to vertical or horizontal
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`When true, this will disable all the buttons in a ButtonGroup.`}
-
-
-
-
-
- isAttached
-
-
-
- bool
-
-
- false
-
-
- {`When attached, all buttons will be attached to each other.`}
-
-
-
-
-
- reversed
-
-
-
- bool
-
-
- false
-
-
- {`To reverse the order of components.`}
-
-
-
-
-
- space
-
-
-
- string
-
-
- md
-
-
-
- It sets the space between different buttons.
-
-
-
-
-
-
->
-
-#### ButtonSpinner
-
-Contains all spinner related layout style props and actions.
-It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator) component.
-
-#### ButtonIcon
-
-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.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Button 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Enter`: Triggers the button's action.
-
-### Screen Reader
-
-- VoiceOver: When the button is focused, the screen reader will announce the button's label and its current state.
-
-### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-### Props
-
-Button component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Button
-
-<>
-
-
-
->
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
-
-#### Button with Loading State
-
-A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.
-
-
-
- {/* colors is imported from tailwindcss/colors */}
-
- Please wait...
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, Wrapper, ButtonSpinner, colors },
- argsType: {},
- }}
- />
-
-
-#### Icon Button
-
-A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.
-
-
-
- {\/* EditIcon is imported from 'lucide-react-native' *\/}
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonIcon, Wrapper, EditIcon },
- argsType: {},
- }}
- />
-
-
-#### Link Button
-
-A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.
-
-
-
-
- Back to top
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, ArrowUpIcon },
- argsType: {},
- }}
- />
-
-
-#### Button With Icon
-
-The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction.
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, InfoIcon, AddIcon, Box },
- argsType: {},
- }}
- />
-
-
-#### Button with Full Width
-
-The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.
-
-
-
-
-
-
- Set new password
-
-
- Almost done. Enter your new password and you are all set.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- Wrapper,
- VStack,
- Box,
- Heading,
- Text,
- Input,
- InputField,
- Icon,
- Center,
- ArrowLeftIcon,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Button/index.stories.mdx b/example/storybook-v7/src/components/Button/index.stories.mdx
deleted file mode 100644
index 5f7fb4b21d..0000000000
--- a/example/storybook-v7/src/components/Button/index.stories.mdx
+++ /dev/null
@@ -1,694 +0,0 @@
----
-title: gluestack-ui Button Component | Installation, Usage, and API
-
-description: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
-
-pageTitle: Button
-
-pageDescription: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Button, ButtonText, ButtonIcon } from './Button';
-
-import { transformedCode } from '../../utils';
-import { CodePreview } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Button** component.
-
-<>
-
- Hello World!
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg'],
- default: 'md',
- },
- variant: {
- control: 'select',
- options: ['solid', 'outline', 'link'],
- default: 'solid',
- },
- action: {
- control: 'select',
- options: ['primary', 'secondary', 'positive', 'negative'],
- default: 'primary',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm install @gluestack-ui/button
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/button/index.tsx --%%
-```
-
-
-
-### 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 {
- Button,
- ButtonText,
- ButtonSpinner,
- ButtonIcon,
- ButtonGroup,
-} from '@/components/ui/button';
-```
-
-```jsx
-export default () => (
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Button
-
-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.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the button.`}
-
-
-
-
-
- isPressed
-
-
-
- bool
-
-
- false
-
-
- {`To manually set pressable state to the button.`}
-
-
-
-
-
- isFocused
-
-
-
- bool
-
-
- false
-
-
- {`To manually set focused state to the button.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the button.`}
-
-
-
-
-
-
-
-#### ButtonText
-
-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.
-
-#### ButtonGroup
-
-Contains all group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- flexDirection
-
-
-
-
- 'row' | 'column' | 'row-reverse' | 'column-reverse'
-
-
-
- 'row'
-
-
-
- Set the direction of Button group to vertical or horizontal
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`When true, this will disable all the buttons in a ButtonGroup.`}
-
-
-
-
-
- isAttached
-
-
-
- bool
-
-
- false
-
-
- {`When attached, all buttons will be attached to each other.`}
-
-
-
-
-
- reversed
-
-
-
- bool
-
-
- false
-
-
- {`To reverse the order of components.`}
-
-
-
-
-
- space
-
-
-
- string
-
-
- md
-
-
-
- It sets the space between different buttons.
-
-
-
-
-
-
-
-
-#### ButtonSpinner
-
-Contains all spinner related layout style props and actions.
-It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator) component.
-
-#### ButtonIcon
-
-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.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Button 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Enter`: Triggers the button's action.
-
-### Screen Reader
-
-- VoiceOver: When the button is focused, the screen reader will announce the button's label and its current state.
-
-### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-## 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.
-
-#### Button with Loading State
-
-A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.
-
-
-
-
- Please wait...
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, ButtonSpinner },
- argsType: {},
- }}
- />
-
-
-#### Icon Button
-
-A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.
-
-
-
- {\/* EditIcon is imported from 'lucide-react-native' *\/}
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, EditIcon },
- argsType: {},
- }}
- />
-
-
-#### Link Button
-
-A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.
-
-
-
-
- Back to top
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon },
- argsType: {},
- }}
- />
-
-
-#### Button Group in a Card
-
-A button group within a card component incorporates multiple button components, providing a cohesive and organized interface for selecting various actions or options within the context of the card.
-
-
-
-
-
- Was this page helpful?
-
-
- We use this feedback to improve the quality of our documentation.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- ButtonGroup,
- Wrapper,
- Box,
- Heading,
- Text,
- HStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Button With Icon
-
-The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction.
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- Wrapper,
- Icon,
- InfoIcon,
- AddIcon,
- Box,
- },
- argsType: {},
- }}
-/>
-
-
-
-#### Button with Full Width
-
-The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.
-
-
-
-
-
-
- Set new password
-
-
- Almost done. Enter your new password and you are all set.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- Wrapper,
- VStack,
- Box,
- Heading,
- Text,
- Input,
- InputField,
- Icon,
- Center,
- ArrowLeftIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom Button
-
-The custom button component leverages the functionality of a button component while offering additional customization options to tailor its appearance and behavior according to specific design requirements.
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- ButtonGroup,
- Wrapper,
- ThreeDotsIcon,
- },
- argsType: {},
- }}
- />
-
-
-## gluestack-style
-
-Step 1: Install the following dependencies:
-
-```bash
-
-npm install @gluestack-ui/button
-npm install @gluestack-style/react
-
-```
-
-Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
- %%-- File: core-components/themed/button/index.tsx --%%
- ```
-
-
-
-Step 3: Update the import paths to match your project setup.
-
-# Usage
-
-```jsx
-import { Button } from '@/components/ui/ui/button';
-```
-
-```jsx
-
-```
diff --git a/example/storybook-v7/src/components/Button/index.themed.stories.mdx b/example/storybook-v7/src/components/Button/index.themed.stories.mdx
deleted file mode 100644
index d7d16e9333..0000000000
--- a/example/storybook-v7/src/components/Button/index.themed.stories.mdx
+++ /dev/null
@@ -1,1024 +0,0 @@
----
-title: gluestack-ui Button Component | Installation, Usage, and API
-
-description: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
-
-pageTitle: Button
-
-pageDescription: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Button,
- ButtonText,
- ButtonIcon,
- ButtonSpinner,
- ButtonGroup,
- AddIcon,
- InfoIcon,
- Icon,
- EditIcon,
- ArrowUpIcon,
- Heading,
- Text,
- Input,
- InputField,
- Box,
- HStack,
- VStack,
- ThreeDotsIcon,
- ArrowLeftIcon,
- Center
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Button** component.
-
-<>
-
- Hello World!
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg'],
- default: 'md',
- },
- variant: {
- control: 'select',
- options: ['solid', 'outline', 'link'],
- default: 'solid',
- },
- action: {
- control: 'select',
- options: ['primary', 'secondary', 'positive', 'negative'],
- default: 'primary',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add button
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/button
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/button/index.tsx --%%
-```
-
-
-### 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 {
- Button,
- ButtonText,
- ButtonSpinner,
- ButtonIcon,
- ButtonGroup,
-} from '@/components/ui/button';
-```
-
-```jsx
-export default () => (
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Button
-
-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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the button.`}
-
-
-
-
-
- isPressed
-
-
-
- bool
-
-
- false
-
-
- {`To manually set pressable state to the button.`}
-
-
-
-
-
- isFocused
-
-
-
- bool
-
-
- false
-
-
- {`To manually set focused state to the button.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the button.`}
-
-
-
-
-
->
-
-#### ButtonText
-
-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.
-
-#### ButtonGroup
-
-Contains all group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- flexDirection
-
-
-
-
- 'row' | 'column' | 'row-reverse' | 'column-reverse'
-
-
-
- 'row'
-
-
-
- Set the direction of Button group to vertical or horizontal
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`When true, this will disable all the buttons in a ButtonGroup.`}
-
-
-
-
-
- isAttached
-
-
-
- bool
-
-
- false
-
-
- {`When attached, all buttons will be attached to each other.`}
-
-
-
-
-
- reversed
-
-
-
- bool
-
-
- false
-
-
- {`To reverse the order of components.`}
-
-
-
-
-
- space
-
-
-
- string
-
-
- md
-
-
-
- It sets the space between different buttons.
-
-
-
-
-
-
->
-
-#### ButtonSpinner
-
-Contains all spinner related layout style props and actions.
-It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator) component.
-
-#### ButtonIcon
-
-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.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Button 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Enter`: Triggers the button's action.
-
-### Screen Reader
-
-- VoiceOver: When the button is focused, the screen reader will announce the button's label and its current state.
-
-### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-
-
-
-
-
-
-### 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.
-
-#### Button with Loading State
-
-A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.
-
-
-
-
- Please wait...
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, ButtonSpinner },
- argsType: {},
- }}
- />
-
-
-#### Icon Button
-
-A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.
-
-
-
- {\/* EditIcon is imported from 'lucide-react-native' *\/}
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, EditIcon },
- argsType: {},
- }}
- />
-
-
-#### Link Button
-
-A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.
-
-
-
-
- Back to top
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon },
- argsType: {},
- }}
- />
-
-
-#### Button Group in a Card
-
-A button group within a card component incorporates multiple button components, providing a cohesive and organized interface for selecting various actions or options within the context of the card.
-
-
-
-
-
- Was this page helpful?
-
-
- We use this feedback to improve the quality of our documentation.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- ButtonGroup,
- Wrapper,
- Box,
- Heading,
- Text,
- HStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Button With Icon
-
-The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction.
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- Wrapper,
- Icon,
- InfoIcon,
- AddIcon,
- Box,
- },
- argsType: {},
- }}
-/>
-
-
-
-#### Button with Full Width
-
-The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.
-
-
-
-
-
-
- Set new password
-
-
- Almost done. Enter your new password and you are all set.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- Wrapper,
- VStack,
- Box,
- Heading,
- Text,
- Input,
- InputField,
- Icon,
- Center,
- ArrowLeftIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom Button
-
-The custom button component leverages the functionality of a button component while offering additional customization options to tailor its appearance and behavior according to specific design requirements.
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Button,
- ButtonText,
- ButtonIcon,
- ButtonGroup,
- Wrapper,
- ThreeDotsIcon,
- },
- argsType: {},
- }}
- />
-
-
diff --git a/example/storybook-v7/src/components/Card/BlogCard.tsx b/example/storybook-v7/src/components/Card/BlogCard.tsx
deleted file mode 100644
index 04408a5780..0000000000
--- a/example/storybook-v7/src/components/Card/BlogCard.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// import React from 'react';
-// import {
-// Card,
-// Text,
-// Box,
-// VStack,
-// Heading,
-// Avatar,
-// AvatarFallbackText,
-// AvatarImage,
-// } from '@gluestack-ui/themed';
-
-// const BlogCard = () => {
-// return (
-//
-//
-// May 15, 2023
-//
-//
-//
-// The Power of Positive Thinking
-//
-//
-// Discover how the power of positive thinking can transform your life,
-// boost your confidence, and help you overcome challenges. Explore
-// practical tips and techniques to cultivate a positive mindset for
-// greater happiness and success.
-//
-//
-//
-//
-// RR
-//
-//
-//
-//
-// John Smith
-//
-//
-// Motivational Speaker
-//
-//
-//
-//
-// );
-// };
-
-// export default BlogCard;
diff --git a/example/storybook-v7/src/components/Card/Card.stories.tsx b/example/storybook-v7/src/components/Card/Card.stories.tsx
deleted file mode 100644
index 2bdae7d1ab..0000000000
--- a/example/storybook-v7/src/components/Card/Card.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Card from './Card';
-// import BlogCard from './BlogCard';
-// import ProductCard from './ProductCard';
-// import ImageCard from './ImageCard';
-// import ProfileCard from './ProfileCard';
-
-const CardMeta: ComponentMeta = {
- title: 'stories/Card',
- component: Card,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `A Card component serves as a visual container that groups related content and actions.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- defaultValue: 'md',
- },
- variant: {
- control: 'select',
- options: ['elevated', 'outline', 'ghost', 'filled'],
- defaultValue: 'elevated',
- },
- },
-};
-
-export default CardMeta;
-
-export {
- Card,
- // BlogCard,
- // ProductCard,
- // ImageCard,
- // ProfileCard
-};
diff --git a/example/storybook-v7/src/components/Card/Card.tsx b/example/storybook-v7/src/components/Card/Card.tsx
deleted file mode 100644
index 34e9821a4d..0000000000
--- a/example/storybook-v7/src/components/Card/Card.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Card } from '@/components/ui/card';
-import { Text } from '@/components/ui/text';
-import { Heading } from '@/components/ui/heading';
-
-const CardBasic = ({ ...props }: any) => {
- return (
-
-
- Quick Start
-
- Start building your next project in minutes
-
- );
-};
-
-CardBasic.description =
- 'This is a basic Card component example. A Card component serves as a visual container that groups related content and actions.';
-
-export default CardBasic;
-export { Card, Heading, Text };
diff --git a/example/storybook-v7/src/components/Card/ImageCard.tsx b/example/storybook-v7/src/components/Card/ImageCard.tsx
deleted file mode 100644
index 7613b05619..0000000000
--- a/example/storybook-v7/src/components/Card/ImageCard.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// import React from 'react';
-// import {
-// Card,
-// Text,
-// Heading,
-// Image,
-// Link,
-// HStack,
-// LinkText,
-// Icon,
-// ArrowRightIcon,
-// } from '@gluestack-ui/themed';
-
-// const ImageCard = () => {
-// return (
-//
-//
-
-//
-// May 15, 2023
-//
-//
-// The Power of Positive Thinking
-//
-//
-//
-//
-// Read Blog
-//
-//
-//
-//
-//
-// );
-// };
-
-// export default ImageCard;
diff --git a/example/storybook-v7/src/components/Card/ProductCard.tsx b/example/storybook-v7/src/components/Card/ProductCard.tsx
deleted file mode 100644
index 6a45128f92..0000000000
--- a/example/storybook-v7/src/components/Card/ProductCard.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// import React from 'react';
-// import {
-// Card,
-// Text,
-// VStack,
-// Heading,
-// Button,
-// ButtonText,
-// Box,
-// Image,
-// } from '@gluestack-ui/themed';
-
-// const ProductCard = () => {
-// return (
-//
-//
-
-//
-// Fashion Clothing
-//
-//
-//
-// Cotton Kurta
-//
-//
-// Floral embroidered notch neck thread work cotton kurta in white and
-// black.
-//
-//
-//
-//
-//
-//
-//
-// );
-// };
-
-// export default ProductCard;
diff --git a/example/storybook-v7/src/components/Card/ProfileCard.tsx b/example/storybook-v7/src/components/Card/ProfileCard.tsx
deleted file mode 100644
index 32c688433a..0000000000
--- a/example/storybook-v7/src/components/Card/ProfileCard.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-// import React from 'react';
-// import {
-// Card,
-// Text,
-// Box,
-// VStack,
-// Heading,
-// Avatar,
-// AvatarFallbackText,
-// AvatarImage,
-// Image,
-// Button,
-// ButtonText,
-// Divider,
-// } from '@gluestack-ui/themed';
-
-// const ProfileCard = () => {
-// return (
-//
-//
-//
-// JD
-//
-//
-//
-//
-// Jane Doe
-//
-//
-// janedoe@sample.com
-//
-//
-//
-//
-//
-//
-// 81
-//
-// posts
-//
-//
-//
-//
-// 5,281
-//
-// followers
-//
-//
-//
-//
-// 281
-//
-// following
-//
-//
-//
-//
-//
-//
-//
-//
-// );
-// };
-
-// export default ProfileCard;
diff --git a/example/storybook-v7/src/components/Card/index.nw.stories.mdx b/example/storybook-v7/src/components/Card/index.nw.stories.mdx
deleted file mode 100644
index e8e37c7f60..0000000000
--- a/example/storybook-v7/src/components/Card/index.nw.stories.mdx
+++ /dev/null
@@ -1,545 +0,0 @@
----
-title: gluestack-ui Card Component | Installation, Usage, and API
-
-description: A Card component serves as a visual container that groups related content and actions.
-
-pageTitle: Card
-
-pageDescription: A Card component serves as a visual container that groups related content and actions.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Card,
- Heading,
- Text,
- Image,
- Link,
- LinkText,
- HStack,
- Icon,
- ArrowRightIcon,
- Avatar,
- Box,
- VStack,
- AvatarFallbackText,
- AvatarImage,
- Button,
- ButtonText,
- Divider,
-} from '../../core-components/nativewind';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of a **Card** component.
-
-
-
-
- Quick Start
-
- Start building your next project in minutes
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Card,
- Heading,
- Text,
- Wrapper,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- variant: {
- control: 'select',
- options: ['elevated', 'outline', 'ghost', 'filled'],
- default: 'elevated',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add card
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/card/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/card/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/card/styles.tsx --%%
-```
-
-
-### Step 4: 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 { Card } from '@/components/ui/card';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-### Card
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
->
-
-
-
-## 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.
-
-### Card with Image
-
-This is an example of a Card component with an image.
-
-
-
-
-
- May 15, 2023
-
-
- The Power of Positive Thinking
-
-
-
-
- Read Blog
-
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Card,
-Text,
-Image,
-Heading,
-Link,
-LinkText,
-HStack,
-Icon,
-ArrowRightIcon,
-Wrapper,
-},
-}}
-/>
-
-
-
-### Advanced Composition
-
-This is an example of a Card component with other components like Avatar, Image and Button.
-
-
-
-
-
- JD
-
-
-
-
- Jane Doe
-
-
- janedoe@sample.com
-
-
-
-
-
-
- 81
-
- posts
-
-
-
-
- 5,281
-
- followers
-
-
-
-
- 281
-
- following
-
-
-
-
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Card,
-Box,
-Avatar,
-AvatarFallbackText,
-AvatarImage,
-VStack,
-Divider,
-Button,
-ButtonText,
-Text,
-Image,
-Heading,
-Wrapper,
-},
-}}
-/>
-
-
-
-### Product Card
-
-This example illustrates a card showcasing a product.
-
-
-
-
-
- Fashion Clothing
-
-
-
- Cotton Kurta
-
-
- Floral embroidered notch neck thread work cotton kurta in white and
- black.
-
-
-
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Card,
-Box,
-VStack,
-Button,
-ButtonText,
-Text,
-Image,
-Heading,
-Wrapper,
-},
-}}
-/>
-
-
-
-### Blog Card
-
-This is an example of a Card component with a blog post.
-
-
-
-
- May 15, 2023
-
-
-
- The Power of Positive Thinking
-
-
- Discover how the power of positive thinking can transform your life,
- boost your confidence, and help you overcome challenges. Explore
- practical tips and techniques to cultivate a positive mindset for
- greater happiness and success.
-
-
-
-
- RR
-
-
-
-
- John Smith
-
-
- Motivational Speaker
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
-Card,
-Box,
-Avatar,
-AvatarFallbackText,
-AvatarImage,
-VStack,
-Button,
-ButtonText,
-Text,
-Image,
-Heading,
-Wrapper,
-},
-}}
-/>
-
-
diff --git a/example/storybook-v7/src/components/Center/Center.png b/example/storybook-v7/src/components/Center/Center.png
deleted file mode 100644
index 701bb2ddea..0000000000
Binary files a/example/storybook-v7/src/components/Center/Center.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Center/Center.stories.tsx b/example/storybook-v7/src/components/Center/Center.stories.tsx
deleted file mode 100644
index 1ae13c2dbf..0000000000
--- a/example/storybook-v7/src/components/Center/Center.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Center from './Center';
-
-const CenterMeta: ComponentMeta = {
- title: 'stories/Center',
- component: Center,
- argTypes: {},
- args: {},
-};
-
-export default CenterMeta;
-
-export { Center };
diff --git a/example/storybook-v7/src/components/Center/Center.tsx b/example/storybook-v7/src/components/Center/Center.tsx
deleted file mode 100644
index d61ff5a691..0000000000
--- a/example/storybook-v7/src/components/Center/Center.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Text } from '@/components/ui/text';
-import { Center } from '@/components/ui/center';
-import React from 'react';
-
-const CenterBasic = () => {
- return (
-
- This is the center.
-
- );
-};
-
-CenterBasic.description =
- 'This is a basic Center component example. A center is a layout component that centers its children.';
-
-export default CenterBasic;
-
-export { Text, Center };
diff --git a/example/storybook-v7/src/components/Center/index.nw.stories.mdx b/example/storybook-v7/src/components/Center/index.nw.stories.mdx
deleted file mode 100644
index 0b5a4493e2..0000000000
--- a/example/storybook-v7/src/components/Center/index.nw.stories.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: gluestack-ui Center Component | Installation, Usage, and API
-
-description: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
-
-pageTitle: Center
-
-pageDescription: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Center } from '../../core-components/nativewind';
-import { Text } from '../../core-components/nativewind/text';
-
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Center** component.
-
-
-
-
- This is the center.
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Center,
- Text,
- },
- argsType: { },
- }
-}
-/>
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add center
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/center/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/center/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/center/styles.tsx --%%
-```
-
-
-### Step 4: 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 { Center } from '@/components/ui/center';
-```
-
-```jsx
-export default () =>
;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Center
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Center/index.themed.stories.mdx b/example/storybook-v7/src/components/Center/index.themed.stories.mdx
deleted file mode 100644
index e45318681c..0000000000
--- a/example/storybook-v7/src/components/Center/index.themed.stories.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: gluestack-ui Center Component | Installation, Usage, and API
-
-description: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
-
-pageTitle: Center
-
-pageDescription: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Center } from '../../core-components/themed';
-import { Text } from '../../core-components/themed';
-
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Center** component.
-
-<>
-
-
- This is the center.
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Center,
- Text,
- },
- argsType: { },
- }
-}
-/>
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add center
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/center/index.tsx --%%
-```
-
-
-### Step 2: 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 { Center } from '@/components/ui/center';
-```
-
-```jsx
-export default () =>
;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Center
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
diff --git a/example/storybook-v7/src/components/Checkbox/Checkbox.png b/example/storybook-v7/src/components/Checkbox/Checkbox.png
deleted file mode 100644
index f23b6263d3..0000000000
Binary files a/example/storybook-v7/src/components/Checkbox/Checkbox.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Checkbox/Checkbox.stories.tsx b/example/storybook-v7/src/components/Checkbox/Checkbox.stories.tsx
deleted file mode 100644
index 616a59c5ec..0000000000
--- a/example/storybook-v7/src/components/Checkbox/Checkbox.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Checkbox from './Checkbox';
-
-const CheckboxMeta: ComponentMeta = {
- title: 'stories/Checkbox',
- component: Checkbox,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- },
- isFocusVisible: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- size: 'md',
- isDisabled: false,
- isInvalid: false,
- isFocusVisible: false,
- },
-};
-
-export default CheckboxMeta;
-export { Checkbox };
diff --git a/example/storybook-v7/src/components/Checkbox/Checkbox.tsx b/example/storybook-v7/src/components/Checkbox/Checkbox.tsx
deleted file mode 100644
index fdf1cff838..0000000000
--- a/example/storybook-v7/src/components/Checkbox/Checkbox.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import {
- Checkbox,
- CheckboxIcon,
- CheckboxIndicator,
- CheckboxLabel,
- CheckboxGroup,
-} from '@/components/ui/checkbox';
-import { Text } from '@/components/ui/text';
-import { RemoveIcon, Icon, CheckIcon } from '@/components/ui/icon';
-import { FormControl } from '@/components/ui/form-control';
-import { Center } from '@/components/ui/center';
-import { VStack } from '@/components/ui/vstack';
-import { HStack } from '@/components/ui/hstack';
-import { Heading } from '@/components/ui/heading';
-import { Box } from '@/components/ui/box';
-
-const CheckboxGroupBasic = ({ ...props }: any) => {
- return (
-
-
-
-
- Label
-
- );
-};
-
-CheckboxGroupBasic.description = 'This is a basic Checkbox component example';
-
-export default CheckboxGroupBasic;
-
-export {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Text,
- RemoveIcon,
- Icon,
- CheckIcon,
- FormControl,
- Center,
- VStack,
- HStack,
- Heading,
- Box,
-};
diff --git a/example/storybook-v7/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-v7/src/components/Checkbox/index.nw.stories.mdx
deleted file mode 100644
index 83ec6edbb7..0000000000
--- a/example/storybook-v7/src/components/Checkbox/index.nw.stories.mdx
+++ /dev/null
@@ -1,1028 +0,0 @@
----
-title: gluestack-ui Checkbox Component | Installation, Usage, and API
-
-description: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
-
-pageTitle: Checkbox
-
-pageDescription: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Text,
- RemoveIcon,
- Icon,
- CheckIcon,
- FormControl,
- Center,
- VStack,
- HStack,
- Heading,
- Box,
-} from '../../core-components/nativewind';
-import { useState, useRef } from 'react';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Checkbox** component.
-
-
-
-
-
-
- Label
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- isInvalid: {
- control: 'boolean',
- },
- isDisabled: {
- control: 'boolean',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add checkbox
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/checkbox lucide-react-native
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/checkbox/index.tsx --%%
-```
-
-
-### 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 { Checkbox } from '@/components/ui/checkbox';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Checkbox
-
-Contains all Checkbox related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used in the checkbox input. This is the value that will be returned on form submission.`}
-
-
-
-
-
- onChange
-
-
-
- `(value: boolean) => void`
-
-
- -
-
-
- {`Function called when the state of the checkbox changes.`}
-
-
-
-
-
- defaultIsChecked
-
-
-
- bool
-
-
- false
-
-
- {`If true, the checkbox will be initially checked.`}
-
-
-
-
-
- isChecked
-
-
-
- bool
-
-
- false
-
-
- {`When true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the checkbox.`}
-
-
-
-
-
- isInvalid
-
-
-
- bool
-
-
- false
-
-
- {`To manually set invalid to the checkbox.`}
-
-
-
-
-
- isReadOnly
-
-
-
- bool
-
-
- false
-
-
- {`To manually set read-only to the checkbox.`}
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the checkbox.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- bool
-
-
- false
-
-
-
- {`To manually set focus visible state to the checkbox.`}
-
-
-
-
-
-
- isIndeterminate
-
-
-
- bool
-
-
- false
-
-
-
- {`To manually set indeterminate to the checkbox.`}
-
-
-
-
-
-
->
-
-#### CheckboxIndicator
-
-Contains all indicators related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### CheckboxIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-#### CheckboxLabel
-
-Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### CheckboxGroup
-
-Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string[]
-
-
- -
-
-
- {`The value of the checkbox group.`}
-
-
-
-
-
- onChange
-
-
-
- {`(values: Array) => void`}
-
-
- -
-
-
- {`The callback fired when any children Checkbox is checked or unchecked.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the checkbox.`}
-
-
-
-
-
- isInvalid
-
-
-
- bool
-
-
- false
-
-
- {`To manually set invalid to the checkbox.`}
-
-
-
-
-
- isReadOnly
-
-
-
- bool
-
-
- false
-
-
- {`To manually set read-only to the checkbox.`}
-
-
-
-
-
->
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-
-### Accessibility
-
-We have outlined the various features that ensure the Checkbox 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Space`: To check or uncheck focused checkbox.
-
-#### Screen Reader
-
-- VoiceOver: When the checkbox is focused, the screen reader will announce it's a checkbox and it's current state (check or uncheck) and it's label.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-#### States
-
-- In error state, `aria-invalid` will be passed to indicate that the radio input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
-- In disabled state, `aria-hidden` will be passed to make radio input not focusable.
-- In required state, `aria-required` will be passed to indicate that the radio input is required.
-
-### Props
-
-Checkbox component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
-
-#### Checkbox
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- lg | md | sm
-
-
- md
-
-
-
-
-
->
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
-
-#### Multiple Checkbox
-
-Checkbox provide a mutually exclusive selection mechanism, allowing users to choose a multiple option from a set of related choices.
-
-
- {
- setValues(keys)
- }}>
-
-
-
-
-
- Framer
-
-
-
-
-
- Invision Studio
-
-
-
-
-
- Adobe XD
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- VStack,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Horizontal
-
-A horizontal component incorporating a checkbox allows for intuitive and space-efficient selection of multiple options within a linear layout.
-
-
- {
- setValues(keys)
- }}>
-
-
-
-
-
- Illustration
-
-
-
-
-
- Animation
-
-
-
-
-
- Typography
-
-
-
- )
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- HStack,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### With help text
-
-A checkbox component with help text provides informative guidance alongside selectable options, ensuring clarity and ease of use.
-
-
- {
- setValues(keys)
- }}>
-
-
-
-
-
-
- Design
-
- Subscribe to updates from the Design Feed
-
-
-
-
-
-
- Marketing
-
- Subscribe to updates from the Marketing Feed
-
-
-
- )
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- HStack,
- VStack,
- Text,
- Box,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control
-
-A checkbox component integrated with form control enhances the user experience by enabling easy selection and submission of options within a structured input context.
-
-
-
-
- Sign up for newsletters
-
-
-
-
- Daily Bits
-
-
-
-
-
- Event Updates
-
-
-
-
-
- Sponsorship
-
- Subscribe to newsletters for updates
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- Text,
- VStack,
- Heading,
- FormControl,
- },
- argsType: {},
- }}
- />
-
-
-#### Label left
-
-A checkbox component with Label left configuration aligns the label to the left, facilitating clear association between the option and its corresponding checkbox.
-
-
- {
- setValues(keys)
- }}>
-
-
- Jane Cooper
-
-
-
-
-
- Wade Warren
-
-
-
-
-
- Robert Fox
-
-
-
-
-
-
- )
- }`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- VStack,
- HStack,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Controlled
-
-A controlled component architecture incorporates a checkbox component, allowing for precise management of its state and behavior through explicit control mechanisms.
-
-
- {
- setValues(keys);
- }}>
-
-
-
-
-
- UX Research
-
-
-
-
-
- Software Development
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- useState,
- Center,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Uncontrolled
-
-An uncontrolled component utilizes a checkbox component, providing a simpler implementation where the checkbox state is managed internally, without explicit control from external sources.
-
-
- {
- e.preventDefault();
- const checkboxValue = radioRef.current.checked;
- };
- return (
-
-
-
-
-
-
- Apartments
-
-
-
-
-
- Residents
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- useRef,
- Center,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Checkbox group
-
-The checkbox group component allows users to group checkbox and display them in a horizontal or vertical row for better visual representation and functionality.
-
-
-
-
-
-
-
-
-
- Label 1
-
-
-
-
-
- Label 2
-
-
-
-
- );
-};
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'CheckboxExample');
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- VStack,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-v7/src/components/Checkbox/index.themed.stories.mdx
deleted file mode 100644
index d0dec8696a..0000000000
--- a/example/storybook-v7/src/components/Checkbox/index.themed.stories.mdx
+++ /dev/null
@@ -1,1077 +0,0 @@
----
-title: gluestack-ui Checkbox Component | Installation, Usage, and API
-
-description: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
-
-pageTitle: Checkbox
-
-pageDescription: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-
-import {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Text,
- FormControl,
- Icon,
- CheckIcon,
- Center,
- VStack,
- HStack,
- Heading,
- Box
-} from '../../core-components/themed';
-import { useState, useRef } from 'react';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Checkbox** component.
-
-
-
-
-
-
- Label
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- isInvalid: {
- control: 'boolean',
- },
- isDisabled: {
- control: 'boolean',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add checkbox
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/checkbox lucide-react-native
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/checkbox/index.tsx --%%
-```
-
-
-### 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 { Checkbox } from '@/components/ui/checkbox';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Checkbox
-
-Contains all Checkbox related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used in the checkbox input. This is the value that will be returned on form submission.`}
-
-
-
-
-
- onChange
-
-
-
- `(value: boolean) => void`
-
-
- -
-
-
- {`Function called when the state of the checkbox changes.`}
-
-
-
-
-
- defaultIsChecked
-
-
-
- bool
-
-
- false
-
-
- {`If true, the checkbox will be initially checked.`}
-
-
-
-
-
- isChecked
-
-
-
- bool
-
-
- false
-
-
- {`When true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the checkbox.`}
-
-
-
-
-
- isInvalid
-
-
-
- bool
-
-
- false
-
-
- {`To manually set invalid to the checkbox.`}
-
-
-
-
-
- isReadOnly
-
-
-
- bool
-
-
- false
-
-
- {`To manually set read-only to the checkbox.`}
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the checkbox.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- bool
-
-
- false
-
-
-
- {`To manually set focus visible state to the checkbox.`}
-
-
-
-
-
-
- isIndeterminate
-
-
-
- bool
-
-
- false
-
-
-
- {`To manually set indeterminate to the checkbox.`}
-
-
-
-
-
-
->
-
-#### CheckboxIndicator
-
-Contains all indicators related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### CheckboxIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-#### CheckboxLabel
-
-Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### CheckboxGroup
-
-Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string[]
-
-
- -
-
-
- {`The value of the checkbox group.`}
-
-
-
-
-
- onChange
-
-
-
- {`(values: Array) => void`}
-
-
- -
-
-
- {`The callback fired when any children Checkbox is checked or unchecked.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the checkbox.`}
-
-
-
-
-
- isInvalid
-
-
-
- bool
-
-
- false
-
-
- {`To manually set invalid to the checkbox.`}
-
-
-
-
-
- isReadOnly
-
-
-
- bool
-
-
- false
-
-
- {`To manually set read-only to the checkbox.`}
-
-
-
-
-
->
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-
-### Accessibility
-
-We have outlined the various features that ensure the Checkbox 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Space`: To check or uncheck focused checkbox.
-
-#### Screen Reader
-
-- VoiceOver: When the checkbox is focused, the screen reader will announce it's a checkbox and it's current state (check or uncheck) and it's label.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-#### States
-
-- In error state, `aria-invalid` will be passed to indicate that the radio input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
-- In disabled state, `aria-hidden` will be passed to make radio input not focusable.
-- In required state, `aria-required` will be passed to indicate that the radio input is required.
-
-### Props
-
-Checkbox component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Checkbox
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- lg | md | sm
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-#### Multiple Checkbox
-
-Checkbox provide a mutually exclusive selection mechanism, allowing users to choose a multiple option from a set of related choices.
-
-
- {
- setValues(keys)
- }}>
-
-
-
-
-
- Framer
-
-
-
-
-
- Invision Studio
-
-
-
-
-
- Adobe XD
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- VStack,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Horizontal
-
-A horizontal component incorporating a checkbox allows for intuitive and space-efficient selection of multiple options within a linear layout.
-
-
- {
- setValues(keys)
- }}>
-
-
-
-
-
- Illustration
-
-
-
-
-
- Animation
-
-
-
-
-
- Typography
-
-
-
- )
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- HStack,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### With help text
-
-A checkbox component with help text provides informative guidance alongside selectable options, ensuring clarity and ease of use.
-
-
- {
- setValues(keys)
- }}>
-
-
-
-
-
-
- Design
-
- Subscribe to updates from the Design Feed
-
-
-
-
-
-
- Marketing
-
- Subscribe to updates from the Marketing Feed
-
-
-
- )
- }
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- HStack,
- VStack,
- Text,
- Box,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control
-
-A checkbox component integrated with form control enhances the user experience by enabling easy selection and submission of options within a structured input context.
-
-
-
-
- Sign up for newsletters
-
-
-
-
- Daily Bits
-
-
-
-
-
- Event Updates
-
-
-
-
-
- Sponsorship
-
- Subscribe to newsletters for updates
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- Text,
- VStack,
- Heading,
- FormControl,
- },
- argsType: {},
- }}
- />
-
-
-#### Label left
-
-A checkbox component with Label left configuration aligns the label to the left, facilitating clear association between the option and its corresponding checkbox.
-
-
- {
- setValues(keys)
- }}>
-
-
- Jane Cooper
-
-
-
-
-
- Wade Warren
-
-
-
-
-
- Robert Fox
-
-
-
-
-
-
- )
- }`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- Icon,
- VStack,
- HStack,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Controlled
-
-A controlled component architecture incorporates a checkbox component, allowing for precise management of its state and behavior through explicit control mechanisms.
-
-
- {
- setValues(keys);
- }}>
-
-
-
-
-
- UX Research
-
-
-
-
-
- Software Development
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- useState,
- Center,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Uncontrolled
-
-An uncontrolled component utilizes a checkbox component, providing a simpler implementation where the checkbox state is managed internally, without explicit control from external sources.
-
-
- {
- e.preventDefault();
- const checkboxValue = radioRef.current.checked;
- };
- return (
-
-
-
-
-
-
- Apartments
-
-
-
-
-
- Residents
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- CheckIcon,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- useRef,
- Center,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Checkbox group
-
-The checkbox group component allows users to group checkbox and display them in a horizontal or vertical row for better visual representation and functionality.
-
-
-
-
-
-
-
-
-
- Label 1
-
-
-
-
-
- Label 2
-
-
-
-
- );
-};
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'CheckboxExample');
- },
- scope: {
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Wrapper,
- Center,
- CheckIcon,
- VStack,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Divider/Divider.png b/example/storybook-v7/src/components/Divider/Divider.png
deleted file mode 100644
index a61902c55b..0000000000
Binary files a/example/storybook-v7/src/components/Divider/Divider.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Divider/Divider.stories.tsx b/example/storybook-v7/src/components/Divider/Divider.stories.tsx
deleted file mode 100644
index 168243bd7a..0000000000
--- a/example/storybook-v7/src/components/Divider/Divider.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Divider from './Divider';
-
-const DividerMeta: ComponentMeta = {
- title: 'stories/Divider',
- component: Divider,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription:
- 'Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.',
- },
- argTypes: {
- orientation: {
- control: 'select',
- options: ['vertical', 'horizontal'],
- },
- },
- args: {
- orientation: 'vertical',
- },
-};
-
-export default DividerMeta;
-
-export { Divider };
diff --git a/example/storybook-v7/src/components/Divider/Divider.tsx b/example/storybook-v7/src/components/Divider/Divider.tsx
deleted file mode 100644
index fd868e1fad..0000000000
--- a/example/storybook-v7/src/components/Divider/Divider.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Divider } from '@/components/ui/divider';
-import { HStack } from '@/components/ui/hstack';
-import { Heading } from '@/components/ui/heading';
-
-const DividerBasic = ({ ...props }) => {
- return (
-
-
- Firefox
-
-
-
- Chrome
-
-
- );
-};
-
-DividerBasic.description =
- 'This is a basic Divider component example. A divider is a thin line that groups content in lists and layouts.';
-
-export default DividerBasic;
-
-export { HStack, Divider, Heading };
diff --git a/example/storybook-v7/src/components/Divider/index.nw.stories.mdx b/example/storybook-v7/src/components/Divider/index.nw.stories.mdx
deleted file mode 100644
index ec4826475d..0000000000
--- a/example/storybook-v7/src/components/Divider/index.nw.stories.mdx
+++ /dev/null
@@ -1,503 +0,0 @@
----
-title: gluestack-ui Divider Component | Installation, Usage, and API
-
-description: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
-
-pageTitle: Divider
-
-pageDescription: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Divider,
- Center,
- Text,
- HStack,
- VStack,
- Box,
- Heading,
- Button,
- ButtonText,
-} from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Divider** component.
-
-
-
-
- Easy
-
-
-
- Difficult
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Divider,
- Text,
- Center,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add divider
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/divider
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/divider/index.tsx --%%
-```
-
-
-### 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 { Divider } from '@/components/ui/divider';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Divider
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Props
-
-Divider 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Divider
-
-<>
-
-
-
->
-
-
-
-
-
-### 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.
-
-#### Variants
-
-A Divider component with different layouts offers versatile options for visually dividing content in various arrangements, such as horizontal or vertical orientations, enabling flexible and visually appealing designs for organizing and structuring elements within a user interface.
-
-
-
-
- Simple
-
- Easy
-
- Beautiful
-
-
- Firefox
-
- Chrome
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Divider,
- VStack,
- HStack,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Orientation
-
-A Divider component with a specified divider orientation allows for clear visual separation of content, either horizontally or vertically, providing a structured and organized layout within a user interface.
-
-
-
-
-
- HEALTH
-
-
- Benefits of Oranges
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
-
- TECHNOLOGY
-
-
- How AI can benefit your business
-
-
- AI can automate tasks and processes, allowing for increasing efficiency and productivity.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Divider,
- Box,
- Text,
- VStack,
- Heading,
- HStack,
- },
- argsType: {},
- }}
- />
-
-
-#### With & Without Inset
-
-A Divider component used with or without inset adds visual hierarchy and distinction by creating a dividing line either with or without indentation, providing options for organizing and structuring content within a user interface.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- HStack,
- Divider,
- Button,
- ButtonText,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Adding content within a Divider
-
-A Divider component with added content allows for the inclusion of additional text or elements alongside the dividing line, enhancing the visual and informational aspects of the divider while providing a seamless integration of content within a user interface.
-
-
-
-
- Search Results
-
-
-
-
- TECHNOLOGY
-
-
- How AI can benefit your business
-
-
- AI can automate tasks and processes, allowing for increasing efficiency and productivity.
-
-
-
-
- 5 mins read
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- HStack,
- Divider,
- Box,
- Heading,
- Text,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Divider/index.themed.stories.mdx b/example/storybook-v7/src/components/Divider/index.themed.stories.mdx
deleted file mode 100644
index 66df84153f..0000000000
--- a/example/storybook-v7/src/components/Divider/index.themed.stories.mdx
+++ /dev/null
@@ -1,506 +0,0 @@
----
-title: gluestack-ui Divider Component | Installation, Usage, and API
-
-description: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
-
-pageTitle: Divider
-
-pageDescription: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Center,
- Heading,
- Box,
- Divider,
- VStack,
- HStack,
- Text,
- Button,
- ButtonText,
-} from '../../core-components/themed';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Divider** component.
-
-<>
-
-
- Easy
-
-
-
- Difficult
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Divider,
- Text,
- Center,
- },
- argsType: {},
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add divider
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/divider
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/divider/index.tsx --%%
-```
-
-
-### 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 { Divider } from '@/components/ui/divider';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Divider
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Props
-
-Divider 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Divider
-
-<>
-
-
-
->
-
-#### FabLabel
-
-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.
-
-#### FabIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of Gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Fab 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Enter`: Triggers the fab's action.
-
-#### Screen Reader
-
-- VoiceOver: When the fab is focused, the screen reader will announce the fab's label and its current state.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-
-### Props
-
-Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
-
-#### Fab
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- sm | md | lg
-
-
- md
-
-
-
-
-
- placement
-
-
-
-
- top right | top left | bottom right | bottom left | top center |
- bottom center
-
-
-
- bottom right
-
-
-
-
-
->
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
-
-#### FAB with Icon
-
-A Fab component with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface.
-
-
-
-
- {data.map((chatData)=>{
- return (
-
-
-
-
-
-
- {chatData.name}
-
-
- {chatData.msg}
-
-
-
- );
- })}
-
-
- {/* EditIcon is imported from 'lucide-react-native' */}
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Fab,
- FabIcon,
- Wrapper,
- EditIcon,
- Box,
- VStack,
- HStack,
- Avatar,
- AvatarImage,
- Heading,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### FAB with Icon and Text
-
-A Fab component with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface.
-
-
-
-
-
- Search
-
-
-
-
- HEALTH
-
-
- Benefits of Oranges
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
-
- TECHNOLOGY
-
-
- How AI can benefit your business
-
-
- AI can automate tasks and processes, allowing for increasing efficiency and productivity.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- SearchIcon,
- Box,
- Divider,
- Heading,
- Text,
- HStack,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Placement
-
-A Fab component with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations.
-
-
-
-
-
-
-
-
-
-
- Prepare any feedback or updates.
-
-
-
-
-
-
-
-
-
- Review progress on goals and projects.
-
-
-
-
-
-
-
-
-
- Ask challenges and discuss.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Box,
- VStack,
- Checkbox,
- CheckboxIndicator,
- CheckboxLabel,
- CheckboxIcon,
- CheckIcon,
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- AddIcon,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom Placement
-
-A Fab component with custom placement allows for flexible positioning of the button according to specific design requirements or user interface preferences, providing tailored and intuitive access to key actions or functionalities.
-
-
-
-
-
-
-
-
- Fresh Orange - Imported (Loose)
-
-
- Rs 146(Rs.24.33/pc)
-
-
- DETAILS
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones.
-
-
-
- READ MORE
-
-
-
-
- {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- Box,
- Heading,
- Text,
- ShoppingCartIcon,
- Image,
- VStack,
- Link,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Fab/index.stories.mdx b/example/storybook-v7/src/components/Fab/index.stories.mdx
deleted file mode 100644
index 016694f752..0000000000
--- a/example/storybook-v7/src/components/Fab/index.stories.mdx
+++ /dev/null
@@ -1,766 +0,0 @@
----
-title: Fab | gluestack-ui | Installation, Usage, and API
-
-description: The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.
-
-pageTitle: Fab
-
-pageDescription: The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Fab, FabIcon, FabLabel } from './Fab';
-import {
- Checkbox,
- CheckboxIndicator,
- CheckboxLabel,
- CheckboxIcon,
- CheckIcon,
- ShoppingCartIcon,
- Image,
- Box,
- Link,
-} from '@gluestack-ui/themed';
-import { HStack, VStack, Avatar, AvatarImage } from '@gluestack-ui/themed';
-import { Heading, Text, Divider } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-import { AddIcon, EditIcon } from '@gluestack-ui/themed';
-import { SearchIcon } from '@gluestack-ui/themed';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Fab** component.
-
-<>
-
-
-
- Quick start
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, Fab, FabIcon, FabLabel, AddIcon },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- placement: {
- control: 'select',
- options: [
- 'top left',
- 'top center',
- 'top right',
- 'bottom left',
- 'bottom center',
- 'bottom right',
- ],
- default: 'bottom right',
- },
- isHovered: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isPressed: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
->
-
-
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```jsx
-import { Fab } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a Fab component's various parts.
-
-```jsx
-export default () => (
-
-
-
-
-);
-```
-
-### API Reference
-
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
-
-#### Fab
-
-Contains all fab related layout style props and actions.
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-<>
-
-
-
->
-
-#### FabLabel
-
-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.
-
-#### FabIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of Gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Fab 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Enter`: Triggers the fab's action.
-
-#### Screen Reader
-
-- VoiceOver: When the fab is focused, the screen reader will announce the fab's label and its current state.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-
-### Props
-
-Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Fab
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- sm | md | lg
-
-
- md
-
-
-
-
-
- placement
-
-
-
-
- top right | top left | bottom right | bottom left | top center |
- bottom center
-
-
-
- bottom right
-
-
-
-
-
->
-
-### 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.
-
-#### FAB with Icon
-
-A Fab component with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface.
-
-<>
-
-
- {data.map((chatData)=>{
- return (
-
-
-
-
-
-
- {chatData.name}
-
-
- {chatData.msg}
-
-
-
- );
- })}
-
-
- {/* EditIcon is imported from 'lucide-react-native' */}
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Fab,
- FabIcon,
- Wrapper,
- EditIcon,
- Box,
- VStack,
- HStack,
- Avatar,
- AvatarImage,
- Heading,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-#### FAB with Icon and Text
-
-A Fab component with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface.
-
-<>
-
-
-
- Search
-
-
-
-
- HEALTH
-
-
- Benefits of Oranges
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
-
- TECHNOLOGY
-
-
- How AI can benefit your business
-
-
- AI can automate tasks and processes, allowing for increasing efficiency and productivity.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- SearchIcon,
- Box,
- Divider,
- Heading,
- Text,
- HStack,
- VStack,
- },
- argsType: {},
- }}
- />
->
-
-#### Placement
-
-A Fab component with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations.
-
-<>
-
-
-
-
-
-
-
-
- Prepare any feedback or updates.
-
-
-
-
-
-
-
-
-
- Review progress on goals and projects.
-
-
-
-
-
-
-
-
-
- Ask challenges and discuss.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Box,
- VStack,
- Checkbox,
- CheckboxIndicator,
- CheckboxLabel,
- CheckboxIcon,
- CheckIcon,
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- AddIcon,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-#### Custom Placement
-
-A Fab component with custom placement allows for flexible positioning of the button according to specific design requirements or user interface preferences, providing tailored and intuitive access to key actions or functionalities.
-
-<>
-
-
-
-
-
-
- Fresh Orange - Imported (Loose)
-
-
- Rs 146(Rs.24.33/pc)
-
-
- DETAILS
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones.
-
-
-
- READ MORE
-
-
-
-
- {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- Box,
- Heading,
- Text,
- ShoppingCartIcon,
- Image,
- VStack,
- Link,
- },
- argsType: {},
- }}
- />
->
-
-## Unstyled
-
-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 Fab
-
-We have a function called `createFab` which can be used to create a custom fab component. This function takes in a configuration object which contains the styled components that you want to use for the fab. 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/fab` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Fab) of the styled `Fab` components.
-
-```jsx
-// import the styles
-import { Root, Label } from 'components/core/fab/styled-components';
-
-// import the createFab function
-import { createFab } from '@gluestack-ui/fab';
-
-// Understanding the API
-const Fab = createFab({
- Root,
- Label,
-});
-
-// Using the fab component
-export default () => (
-
-
-
-
-);
-```
-
-## Spec Doc
-
-Explore the comprehensive details of the Fab 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.
-
-
diff --git a/example/storybook-v7/src/components/Fab/index.themed.stories.mdx b/example/storybook-v7/src/components/Fab/index.themed.stories.mdx
deleted file mode 100644
index 1c10c92bdc..0000000000
--- a/example/storybook-v7/src/components/Fab/index.themed.stories.mdx
+++ /dev/null
@@ -1,756 +0,0 @@
----
-title: gluestack-ui Fab Component | Installation, Usage, and API
-
-description: The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.
-
-pageTitle: Fab
-
-pageDescription: The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Fab, FabIcon, FabLabel } from '../../core-components/themed';
-import {
- Checkbox,
- CheckboxIndicator,
- CheckboxLabel,
- Image,
- Box,
- Link,
- HStack,
- VStack,
- Avatar,
- AvatarImage,
- Heading,
- Text,
- Divider,
- AddIcon,
- CheckboxIcon
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import { EditIcon, SearchIcon, ShoppingCartIcon, CheckIcon } from 'lucide-react-native';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Fab** component.
-
-
-
-
-
- Quick start
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, Fab, FabIcon, FabLabel, AddIcon },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- placement: {
- control: 'select',
- options: [
- 'top left',
- 'top center',
- 'top right',
- 'bottom left',
- 'bottom center',
- 'bottom right',
- ],
- default: 'bottom right',
- },
- isHovered: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isPressed: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add fab
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/fab
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/fab/index.tsx --%%
-```
-
-
-### 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 { Fab } from '@gluestack-ui/themed';
-```
-
-```jsx
-export default () => (
-
-
-
-
-);
-```
-
-#### Fab
-
-Contains all fab related layout style props and actions.
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-
-
-
-
-
-
-#### FabLabel
-
-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.
-
-#### FabIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of Gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Fab 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Enter`: Triggers the fab's action.
-
-#### Screen Reader
-
-- VoiceOver: When the fab is focused, the screen reader will announce the fab's label and its current state.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-
-### Props
-
-Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Fab
-
-
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- sm | md | lg
-
-
- md
-
-
-
-
-
- placement
-
-
-
-
- top right | top left | bottom right | bottom left | top center |
- bottom center
-
-
-
- bottom right
-
-
-
-
-
-
-
-### 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.
-
-#### FAB with Icon
-
-A Fab component with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface.
-
-
-
-
- {data.map((chatData)=>{
- return (
-
-
-
-
-
-
- {chatData.name}
-
-
- {chatData.msg}
-
-
-
- );
- })}
-
-
- {/* EditIcon is imported from 'lucide-react-native' */}
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Fab,
- FabIcon,
- Wrapper,
- EditIcon,
- Box,
- VStack,
- HStack,
- Avatar,
- AvatarImage,
- Heading,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### FAB with Icon and Text
-
-A Fab component with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface.
-
-
-
-
-
- Search
-
-
-
-
- HEALTH
-
-
- Benefits of Oranges
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
-
- TECHNOLOGY
-
-
- How AI can benefit your business
-
-
- AI can automate tasks and processes, allowing for increasing efficiency and productivity.
-
-
-
- Wade Warrem
-
-
-
- 6th Oct, 2019
-
-
-
- 5 mins read
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- SearchIcon,
- Box,
- Divider,
- Heading,
- Text,
- HStack,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Placement
-
-A Fab component with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations.
-
-
-
-
-
-
-
-
-
-
- Prepare any feedback or updates.
-
-
-
-
-
-
-
-
-
- Review progress on goals and projects.
-
-
-
-
-
-
-
-
-
- Ask challenges and discuss.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Box,
- VStack,
- Checkbox,
- CheckboxIndicator,
- CheckboxLabel,
- CheckboxIcon,
- CheckIcon,
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- AddIcon,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom Placement
-
-A Fab component with custom placement allows for flexible positioning of the button according to specific design requirements or user interface preferences, providing tailored and intuitive access to key actions or functionalities.
-
-
-
-
-
-
-
-
- Fresh Orange - Imported (Loose)
-
-
- Rs 146(Rs.24.33/pc)
-
-
- DETAILS
-
-
- Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones.
-
-
-
- READ MORE
-
-
-
-
- {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Fab,
- FabIcon,
- FabLabel,
- Wrapper,
- Box,
- Heading,
- Text,
- ShoppingCartIcon,
- Image,
- VStack,
- Link,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/FormControl/FormControl.png b/example/storybook-v7/src/components/FormControl/FormControl.png
deleted file mode 100644
index 557a3fe76b..0000000000
Binary files a/example/storybook-v7/src/components/FormControl/FormControl.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/FormControl/FormControl.stories.tsx b/example/storybook-v7/src/components/FormControl/FormControl.stories.tsx
deleted file mode 100644
index 77a1bf5a88..0000000000
--- a/example/storybook-v7/src/components/FormControl/FormControl.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import FormControl from './FormControl';
-
-const FormControlMeta: ComponentMeta = {
- title: 'stories/FormControl',
- component: FormControl,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.`,
- },
- argTypes: {
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- },
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- isRequired: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- isInvalid: true,
- isRequired: true,
- isDisabled: false,
- size: 'md',
- },
-};
-
-export default FormControlMeta;
-
-export { FormControl };
diff --git a/example/storybook-v7/src/components/FormControl/FormControl.tsx b/example/storybook-v7/src/components/FormControl/FormControl.tsx
deleted file mode 100644
index dcea6a4323..0000000000
--- a/example/storybook-v7/src/components/FormControl/FormControl.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react';
-import {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- Button,
- ButtonText,
- Box,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Textarea,
- TextareaInput,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Switch,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- HStack,
- VStack,
- Heading,
- Text,
- Center,
- Icon,
- CircleIcon,
- CheckIcon,
- ChevronDownIcon,
-} from '@gluestack-ui/themed';
-import {
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
-} from '@/components/ui/form-control';
-import { AlertCircleIcon } from 'lucide-react-native';
-
-import { Input, InputField } from '@/components/ui/input';
-const FormControlBasic = ({ ...props }: any) => {
- return (
-
-
- Password
-
-
-
-
-
-
-
- Must be atleast 6 characters.
-
-
-
-
-
-
- Atleast 6 characters are required.
-
-
-
- );
-};
-
-FormControlBasic.description =
- 'This is a basic FormControl component example. A form control is a component that users can interact with to enter or select data.';
-
-export default FormControlBasic;
-
-export {
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Box,
- Input,
- InputField,
- Button,
- ButtonText,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Textarea,
- TextareaInput,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Slider,
- SliderFilledTrack,
- SliderThumb,
- SliderTrack,
- Switch,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- HStack,
- VStack,
- Heading,
- Text,
- Center,
- Icon,
- AlertCircleIcon,
- ChevronDownIcon,
- CircleIcon,
- CheckIcon,
-};
diff --git a/example/storybook-v7/src/components/FormControl/index.nw.stories.mdx b/example/storybook-v7/src/components/FormControl/index.nw.stories.mdx
deleted file mode 100644
index 89c5db5a57..0000000000
--- a/example/storybook-v7/src/components/FormControl/index.nw.stories.mdx
+++ /dev/null
@@ -1,816 +0,0 @@
----
-title: gluestack-ui FormControl Component | Installation, Usage, and API
-
-description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
-
-pageTitle: FormControl
-
-pageDescription: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- FormControlHelper,
- FormControlError,
- Input,
- Box,
- Center,
- AlertCircleIcon,
- CircleIcon,
- CheckIcon,
- ChevronDownIcon,
- FormControlLabelText,
- FormControlHelperText,
- FormControlErrorIcon,
- FormControlErrorText,
- InputField,
- Text as FormControlText,
- Heading,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- Textarea,
- TextareaInput,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Switch,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- HStack,
- VStack,
- FormControl,
- FormControlLabel,
- Icon,
- Button,
- ButtonText,
-} from '../../core-components/nativewind';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import { useState } from 'react';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of **FormControl** component.
-
-
-
-
-
- Password
-
-
-
-
-
-
- Must be at least 6 characters.
-
-
-
-
-
- At least 6 characters are required.
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Input,
- InputField,
- AlertCircleIcon,
- Box,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Radio
-
-The Radio Component can be incorporated within the FormControl.
-
-
-
-
-
- Favourite fruit
-
-
-
-
-
-
-
-
-
-
-
- Mango
-
-
-
-
-
-
-
-
-
- Apple
-
-
-
-
-
-
-
-
-
- Orange
-
-
-
-
-
-
- Choose the fruit you like the most
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- AlertCircleIcon,
- VStack,
- CircleIcon,
- Heading,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add form-control
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/form-control
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/form-control/index.tsx --%%
-```
-
-
-### 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 { FormControl } from '@/components/ui/form-control';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### FormControl
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
->
-
-#### FormControlLabelText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### FormControlHelper
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### FormControlHelperText
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### FormControlError
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### FormControlErrorIcon
-
-It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-#### FormControlErrorText
-
-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.
-- Option to add your styles or use the default styles.
-
-### Props
-
-FormControl 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### FormControl
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- sm | md | lg
-
-
- md
-
-
-
-
-
->
-
-
-
-### 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.
-
-#### Form Control with Input
-
-The Input Component can be incorporated within the FormControl.
-
-
-
-
-
- Name
-
-
-
-
-
-
-
- What would you like people to call you?
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Input,
- InputField,
- AlertCircleIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Radio
-
-The Radio Component can be incorporated within the FormControl.
-
-
-
-
-
- Favourite fruit
-
-
-
-
-
-
-
-
-
-
-
- Mango
-
-
-
-
-
-
-
-
-
- Apple
-
-
-
-
-
-
-
-
-
- Orange
-
-
-
-
-
-
- Choose the fruit you like the most
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- AlertCircleIcon,
- VStack,
- CircleIcon,
- Heading,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Checkbox
-
-The Checkbox Component can be incorporated within the FormControl.
-
-
-
-
-
- Sign up for newsletters
-
-
-
-
-
-
-
-
-
-
-
- Daily Bits
-
-
-
-
-
-
-
-
-
- Event Updates
-
-
-
-
-
-
-
-
-
- Sponsorship
-
-
-
-
-
-
- Subscribe to newsletters for updates
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Checkbox,
- CheckboxGroup,
- CheckboxIndicator,
- CheckboxIcon,
- CheckboxLabel,
- AlertCircleIcon,
- VStack,
- CheckIcon,
- Heading,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Textarea
-
-The Textarea Component can be incorporated within the FormControl.
-
-
-
-
-
- Comment
-
-
-
-
-
- Type your comment above
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Textarea,
- TextareaInput,
- AlertCircleIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Inline Form
-
-Inline forms can utilize FormControl for seamless integration and enhanced functionality.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- HStack,
- ChevronDownIcon,
- Input,
- InputField,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Button,
- ButtonText,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Form in Modal
-
-Modal or other Overlay components can utilize FormControl for state management and error control.
-
-
-
-
- {
- setShowModal(false)
- }}
- bg='$white'
- >
-
-
-
-
-
- Change Settings
-
-
- Make modifications to the settings with ease.
-
-
-
-
-
-
- Name
-
-
-
-
-
-
-
-
-
- Email
-
-
-
-
-
-
-
-
-
- Volume
-
-
-
-
-
-
-
-
-
-
-
-
-
- Dark Mode
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- useState,
- Box,
- Center,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Input,
- InputField,
- Button,
- ButtonText,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Switch,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- Text: FormControlText,
- Heading,
- VStack,
- HStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Error
-
-Error messages can be displayed using FormControl.
-
-
-
-
-
- Which time slot works best for you?
-
-
-
-
-
-
-
-
-
-
-
- Monday
-
-
-
-
-
-
-
-
-
- Tuesday
-
-
-
-
-
-
-
-
-
- Wednesday
-
-
-
-
-
-
-
- Choose one time slot for the meeting
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- Icon,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- AlertCircleIcon,
- VStack,
- CircleIcon,
- Heading,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control with Form Actions
-
-Form Action Buttons can also be utilized in conjunction with FormControl.
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- HStack,
- Button,
- ButtonText,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Grid/Grid.stories.tsx b/example/storybook-v7/src/components/Grid/Grid.stories.tsx
deleted file mode 100644
index 63c6c136f5..0000000000
--- a/example/storybook-v7/src/components/Grid/Grid.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Grid from './Grid';
-import GridExampleOne from './GridExampleOne';
-import GridSpacing from './GridSpacing';
-
-const GridMeta: ComponentMeta = {
- title: 'stories/Grid',
- component: Grid,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `This is a Grid component.`,
- },
-};
-
-export default GridMeta;
-export { Grid, GridExampleOne, GridSpacing };
diff --git a/example/storybook-v7/src/components/Grid/Grid.tsx b/example/storybook-v7/src/components/Grid/Grid.tsx
deleted file mode 100644
index 099f5b93c8..0000000000
--- a/example/storybook-v7/src/components/Grid/Grid.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Grid, GridItem } from '@/components/ui/grid';
-import React from 'react';
-import { Text } from 'react-native';
-
-const GridBasic = () => {
- return (
-
-
- 2
-
-
- 4
-
-
- 2
-
-
-
- 8
-
-
-
- 12
-
-
-
- 2
-
-
- 6
-
-
- );
-};
-
-export default GridBasic;
diff --git a/example/storybook-v7/src/components/Grid/GridExampleOne.tsx b/example/storybook-v7/src/components/Grid/GridExampleOne.tsx
deleted file mode 100644
index 053d4e5c1a..0000000000
--- a/example/storybook-v7/src/components/Grid/GridExampleOne.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { Grid, GridItem } from '@/components/ui/grid';
-import { Text } from '@/components/ui/text';
-
-const GridExampleOne = () => {
- return (
-
-
- colSpan = 3
-
-
- colSpan = 5
-
-
- colSpan = 6
-
-
- colSpan = 4
-
-
- colSpan = 4
-
-
- );
-};
-
-export default GridExampleOne;
diff --git a/example/storybook-v7/src/components/Grid/GridSpacing.tsx b/example/storybook-v7/src/components/Grid/GridSpacing.tsx
deleted file mode 100644
index 25053e2d0e..0000000000
--- a/example/storybook-v7/src/components/Grid/GridSpacing.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Grid, GridItem } from '@/components/ui/grid';
-
-const GridSpacing = () => {
- return (
-
-
-
-
-
-
-
- );
-};
-
-export default GridSpacing;
diff --git a/example/storybook-v7/src/components/Grid/index.nw.stories.mdx b/example/storybook-v7/src/components/Grid/index.nw.stories.mdx
deleted file mode 100644
index 5fb671c594..0000000000
--- a/example/storybook-v7/src/components/Grid/index.nw.stories.mdx
+++ /dev/null
@@ -1,439 +0,0 @@
----
-title: gluestack-ui Grid Component | Installation, Usage, and API
-
-description: The Grid component is a versatile layout tool designed to facilitate the creation of grid-based layouts comprising rows and columns. It offers flexibility and robust functionality, enabling the creation of diverse UI elements, ranging from basic containers to intricate layout structures.
-
-pageTitle: Grid
-
-pageDescription: The Grid component is a versatile layout tool designed to facilitate the creation of grid-based layouts comprising rows and columns. It offers flexibility and robust functionality, enabling the creation of diverse UI elements, ranging from basic containers to intricate layout structures.
-
-showHeader: true
-
-tag: alpha
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { transformedCode } from '../../utils';
-import {Grid, GridItem} from '../../core-components/nativewind/grid';
-import {Text} from '../../core-components/nativewind/text';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- AddIcon,
- InfoIcon,
- Alert,
- Tabs,
- CollapsibleCode
-} from '@gluestack/design-system';
-
-
-This is an illustration of **Grid** component.
-
-
-
-
-
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Grid,
- GridItem,
- Text,
- },
- argsType: { },
- }
- }
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add grid
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/grid/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/grid/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/grid/styles.tsx --%%
-```
-
-
-### Step 4: 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 { Grid, GridItem } from '@/components/ui/grid';
-```
-
-```jsx
-export default () => (
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Grid
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- numColumns
-
-
-
- number
-
-
- 12
-
-
- {`This NativeWind Grid component is based on a 12-column grid layout. The value must be between 1 and 12
- `}
-
-
-
-
-
->
-
-#### GridItem
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- colSpan
-
-
-
- number
-
-
- 1
-
-
- {`colSpan are integer values between 1 and 12 that specify the number of columns to span.`}
-
-
-
-
-
->
-
-## 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.
-
-### Setting the gap between grid items
-
-Use the gap-* utilities to change the gap between both rows and columns in grid
-
-
-
-
- A
-
-
- B
-
-
- C
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Grid,
- GridItem,
- Text,
- Wrapper,
- },
- }}
- />
-
-
-### Changing row and column gaps independently
-
-Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows independently.
-
-
-
-
- 01
-
-
- 02
-
-
- 03
-
-
- 04
-
-
- 05
-
-
- 06
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Grid,
- GridItem,
- Text,
- },
- argsType: { },
- }
- }
- />
-
-
-### Nested Grids
-
-The following example depicts how easily you can nest grids to create complex layouts with multiple levels of nesting.
-
-
-
-
- 01
-
-
- 02
-
-
-
- 1
- 4
- 4
-
-
-
-
- 1
- 2
- 3
- 4
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Grid,
- GridItem,
- Text,
- },
- argsType: { },
- }
- }
- />
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Grid/index.themed.stories.mdx b/example/storybook-v7/src/components/Grid/index.themed.stories.mdx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/example/storybook-v7/src/components/HStack/HStack.png b/example/storybook-v7/src/components/HStack/HStack.png
deleted file mode 100644
index c2a6af71c3..0000000000
Binary files a/example/storybook-v7/src/components/HStack/HStack.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/HStack/HStack.stories.tsx b/example/storybook-v7/src/components/HStack/HStack.stories.tsx
deleted file mode 100644
index bd02f632d3..0000000000
--- a/example/storybook-v7/src/components/HStack/HStack.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import HStack from './HStack';
-import HStackReversed from './HStackReversed';
-
-const HStackMeta: ComponentMeta = {
- title: 'stories/HStack',
- component: HStack,
- argTypes: {
- space: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl'],
- },
- reversed: {
- control: 'boolean',
- },
- },
- args: {
- space: 'md',
- reversed: false,
- },
-};
-
-export default HStackMeta;
-
-export { HStack };
-
-export { HStackReversed };
diff --git a/example/storybook-v7/src/components/HStack/HStack.tsx b/example/storybook-v7/src/components/HStack/HStack.tsx
deleted file mode 100644
index 88d16f6d3c..0000000000
--- a/example/storybook-v7/src/components/HStack/HStack.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { HStack } from '@/components/ui/hstack';
-import { Box } from '@gluestack-ui/themed';
-
-const HStackBasic = ({ space, reversed, ...props }: any) => {
- return (
-
-
-
-
-
-
- );
-};
-
-HStackBasic.description =
- 'This is a basic HStack component example. HStack is a primitive component.';
-
-export default HStackBasic;
-
-export { Box, HStack };
diff --git a/example/storybook-v7/src/components/HStack/HStackReversed.tsx b/example/storybook-v7/src/components/HStack/HStackReversed.tsx
deleted file mode 100644
index 0d66152065..0000000000
--- a/example/storybook-v7/src/components/HStack/HStackReversed.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { HStack } from '@gluestack-ui/themed';
-import { Box } from '@gluestack-ui/themed';
-import React from 'react';
-
-const HStackReversed = ({ space, ...props }: any) => {
- return (
-
-
-
-
-
-
- );
-};
-
-HStackReversed.description =
- 'This is a basic HStack component example. HStack is a primitive component to layout its children horizontally.';
-
-export default HStackReversed;
diff --git a/example/storybook-v7/src/components/HStack/index.nw.stories.mdx b/example/storybook-v7/src/components/HStack/index.nw.stories.mdx
deleted file mode 100644
index b7e24d7fab..0000000000
--- a/example/storybook-v7/src/components/HStack/index.nw.stories.mdx
+++ /dev/null
@@ -1,236 +0,0 @@
----
-title: gluestack-ui HStack Component | Installation, Usage, and API
-
-description: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack.
-
-pageTitle: HStack
-
-pageDescription: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { HStack } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-import { Box } from '../../core-components/nativewind/box';
-
-This is an illustration of **HStack** component.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, HStack },
- argsType: {
- space: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
- default: 'md',
- },
- reversed: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add hstack
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/hstack/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/hstack/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/hstack/styles.tsx --%%
-```
-
-
-### Step 4: 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 { HStack } from '@/components/ui/hstack';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### HStack
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Accessibility
-
-The accessibility of a HStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a HStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.
-
-### Props
-
-HStack 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.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- space
-
-
-
- {`string `}
-
-
- -
-
-
- {`It sets the space between children. By default there is no space between the HStack items.`}
-
-
-
-
-
- reversed
-
-
-
- {`boolean`}
-
-
- false
-
-
- {`When true, it places the HStack items in reverse direction.`}
-
-
-
-
-
-
-
-### 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.
-
-#### HStack Reversed
-
-An HStack component with the reversed prop reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, HStack },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/HStack/index.themed.stories.mdx b/example/storybook-v7/src/components/HStack/index.themed.stories.mdx
deleted file mode 100644
index 4f053f91a6..0000000000
--- a/example/storybook-v7/src/components/HStack/index.themed.stories.mdx
+++ /dev/null
@@ -1,237 +0,0 @@
----
-title: gluestack-ui HStack Component | Installation, Usage, and API
-
-description: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack.
-
-pageTitle: HStack
-
-pageDescription: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Box,HStack} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-
-
-This is an illustration of **HStack** component.
-
-<>
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, HStack },
- argsType: {
- space: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
- default: 'md',
- },
- reversed: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add hstack
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/hstack/index.tsx --%%
-```
-
-
-### Step 2: 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 { HStack } from '@/components/ui/hstack';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### HStack
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Accessibility
-
-The accessibility of a HStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a HStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.
-
-### Props
-
-HStack 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), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- space
-
-
-
- {`string `}
-
-
- -
-
-
- {`It sets the space between children. By default there is no space between the HStack items.`}
-
-
-
-
-
- reversed
-
-
-
- {`boolean`}
-
-
- false
-
-
- {`When true, it places the HStack items in reverse direction.`}
-
-
-
-
-
->
-
-
-
-
-
-
-### 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.
-
-#### HStack Reversed
-
-An HStack component with the reversed prop reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, HStack },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Heading/Heading.png b/example/storybook-v7/src/components/Heading/Heading.png
deleted file mode 100644
index fa3326f104..0000000000
Binary files a/example/storybook-v7/src/components/Heading/Heading.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Heading/Heading.stories.tsx b/example/storybook-v7/src/components/Heading/Heading.stories.tsx
deleted file mode 100644
index a0ed82a9e2..0000000000
--- a/example/storybook-v7/src/components/Heading/Heading.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Heading from './Heading';
-
-const HeadingMeta: ComponentMeta = {
- title: 'stories/Heading',
- component: Heading,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Heading component gives you the ability to create headings for your page with different sizes and symantics from h1 to h6.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
- },
- },
- args: {
- text: 'This is heading',
- size: '2xl',
- },
-};
-
-export default HeadingMeta;
-
-export { Heading };
diff --git a/example/storybook-v7/src/components/Heading/Heading.tsx b/example/storybook-v7/src/components/Heading/Heading.tsx
deleted file mode 100644
index 01990b147f..0000000000
--- a/example/storybook-v7/src/components/Heading/Heading.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Center } from '@gluestack-ui/themed';
-import { Heading } from '@/components/ui/heading';
-
-const HeadingBasic = ({ text = "I'm the heading", ...props }) => {
- return {text};
-};
-
-HeadingBasic.description =
- 'This is a basic Heading component example. Headings are used to show the title of a section or page.';
-
-export default HeadingBasic;
-
-export { Center, Heading };
diff --git a/example/storybook-v7/src/components/Heading/index.nw.stories.mdx b/example/storybook-v7/src/components/Heading/index.nw.stories.mdx
deleted file mode 100644
index c27bc8ea39..0000000000
--- a/example/storybook-v7/src/components/Heading/index.nw.stories.mdx
+++ /dev/null
@@ -1,309 +0,0 @@
----
-title: gluestack-ui Heading Component | Installation, Usage, and API
-
-description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
-
-pageTitle: Heading
-
-pageDescription: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Heading, Center } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Heading** component.
-
-
- I am a Heading
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Heading,
- },
- argsType: { },
- }
-}
-/>
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add heading
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/heading/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/heading/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/heading/styles.tsx --%%
-```
-
-
-### Step 4: 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 { Heading } from '@/components/ui/heading';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Heading
-
-It inherits all the properties of @expo/html-elements's [H1](https://github.com/expo/expo/tree/main/packages/html-elements) component.
-
-### Props
-
-#### Heading
-
-Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by [Expo HTML Heading Elements](https://www.npmjs.com/package/@expo/html-elements/v/0.0.5), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-<>
-
-
-
->
-
-### 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.
-
-#### Heading Sizes
-
-Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements.
-
-
-
- {sizes.map((size) => (
- {size}
- ))}
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: { Wrapper, Center, Heading },
- argsType: {},
- }}
- />
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Heading/index.themed.stories.mdx b/example/storybook-v7/src/components/Heading/index.themed.stories.mdx
deleted file mode 100644
index c335b985f2..0000000000
--- a/example/storybook-v7/src/components/Heading/index.themed.stories.mdx
+++ /dev/null
@@ -1,427 +0,0 @@
----
-title: gluestack-ui Heading Component | Installation, Usage, and API
-
-description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
-
-pageTitle: Heading
-
-pageDescription: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Heading, Center } from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs,
- Box,
- HStack
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Heading** component.
-
-<>
- I am a Heading
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Heading,
- },
- argsType: {},
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add heading
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @expo/html-elements
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/heading/index.tsx --%%
-```
-
-
-### 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 { Heading } from '@/components/ui/heading';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Heading
-
-It inherits all the properties of @expo/html-elements's [H1](https://github.com/expo/expo/tree/main/packages/html-elements) component.
-
-### Props
-
-Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by [Expo HTML Heading Elements](https://www.npmjs.com/package/@expo/html-elements/v/0.0.5), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Heading
-
-<>
-
-
-
->
-
-### 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.
-
-#### Heading Sizes
-
-Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements. The size attribute determines which HTML tag (`h1` to `h6`) will be rendered.
-
-- For `5xl`, `4xl`, and `3xl`, it renders `h1`.
-- For `2xl`, it renders `h2`.
-- For `xl`, it renders `h3`.
-- For `lg`, it renders `h4`.
-- For `md`, it renders `h5`.
-- Finally, for `sm` and `xs`, it renders `h6`.
-
-
-
- {sizes.map((size) => (
- {size}
- ))}
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: { Wrapper, Center, Heading },
- argsType: {},
- }}
- />
-
-
-The Heading component also accepts some shorthands for basic quick styling.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- bold
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text bold.`}
-
-
-
-
-
- isTruncated
-
-
-
- boolean
-
-
- false
-
-
- {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`}
-
-
-
-
-
- italic
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text italic.`}
-
-
-
-
-
- underline
-
-
-
- boolean
-
-
- false
-
-
- {`Used underline the text.`}
-
-
-
-
-
- strikeThrough
-
-
-
- boolean
-
-
- false
-
-
- {`A horizontal line through the center of the text.`}
-
-
-
-
-
- highlight
-
-
-
- boolean
-
-
- false
-
-
- {`Used to highlight the text with a yellow background.`}
-
-
-
-
-
->
-
-#### InputField
-
-Contains all TextInput related layout style props and actions.
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput#props) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- type
-
-
-
- 'text' | 'password'
-
-
- 'text'
-
-
- {`If true, the input component obscures the text entered so that sensitive text like passwords stay secure.`}
-
-
-
-
-
->
-
-#### InputSlot
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### InputIcon
-
-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.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Input 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 [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox).
-
-#### Keyboard
-
-- Setting the `aria-label` and `aria-hint` to help users understand the purpose and function of the Input
-
-#### Screen Reader
-
-- Compatible with screen readers such as VoiceOver and Talk-back.
-- The `accessible` and `aria-label` props to provide descriptive information about the Input
-- Setting `aria-traits` and `aria-hint` to provide contextual information about the various states of the Input, such as "double tap to edit".
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-#### States
-
-- In error state, `aria-invalid` will be passed to indicate that the Input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
-- In disabled state, `aria-hidden` will be passed to make input not focusable.
-- In required state, `aria-required` will be passed to indicate that the Input is required.
-
-### Props
-
-Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below.
-
-#### Input
-
-<>
-
-
-
->
-
-#### InputField
-
-Contains all TextInput related layout style props and actions.
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput#props) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- type
-
-
-
- 'text' | 'password'
-
-
- 'text'
-
-
- {`If true, the input component obscures the text entered so that sensitive text like passwords stay secure.`}
-
-
-
-
-
->
-
-#### InputSlot
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### InputIcon
-
-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.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-- Option to add your styles or use the default styles.
-
-### Accessibility
-
-We have outlined the various features that ensure the Input 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 [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox).
-
-#### Keyboard
-
-- Setting the `aria-label` and `aria-hint` to help users understand the purpose and function of the Input
-
-#### Screen Reader
-
-- Compatible with screen readers such as VoiceOver and Talk-back.
-- The `accessible` and `aria-label` props to provide descriptive information about the Input
-- Setting `aria-traits` and `aria-hint` to provide contextual information about the various states of the Input, such as "double tap to edit".
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-#### States
-
-- In error state, `aria-invalid` will be passed to indicate that the Input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
-- In disabled state, `aria-hidden` will be passed to make input not focusable.
-- In required state, `aria-required` will be passed to indicate that the Input is required.
-
-### Props
-
-Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Input
-
-<>
-
-
-
->
-
-### 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.
-
-#### Input type password with FormControl
-
-The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component.
-
-
- {
- setShowPassword((showState) => {
- return !showState;
- });
- };
- return (
-
-
-
- Login
-
-
-
- Email
-
-
-
-
-
-
-
- Password
-
-
-
-
- {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */}
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Input,
- InputField,
- InputIcon,
- Button,
- ButtonText,
- VStack,
- Text: GSText,
- Heading,
- Icon,
- EyeIcon,
- EyeOffIcon,
- FormControl,
- InputSlot,
- },
- argsType: {},
- }}
- />
-
-
-### Input with Icons
-
-The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Input,
- InputField,
- InputIcon,
- SearchIcon,
- Icon,
- InputSlot,
- },
- argsType: {},
- }}
-/>
-
-
diff --git a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.stories.tsx b/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.stories.tsx
deleted file mode 100644
index 259e7d0c57..0000000000
--- a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import InputAccessoryViewStory from './InputAccessoryView';
-
-const InputAccessoryViewMeta: ComponentMeta = {
- title: 'stories/InputAccessoryView',
- component: InputAccessoryViewStory,
-};
-
-export default InputAccessoryViewMeta;
-
-// export { InputAccessoryView };
diff --git a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.tsx b/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.tsx
deleted file mode 100644
index ffbf3bfd27..0000000000
--- a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
- ScrollView,
- Button,
- ButtonText,
- Center,
- Input,
-} from '@gluestack-ui/themed';
-import { InputAccessoryView } from '@/components/ui/input-accessory-view';
-import { config } from '@gluestack-ui/config';
-import React, { useState } from 'react';
-
-export default function SafeAreaViewStory() {
- const inputAccessoryViewID = 'uniqueID';
- const initialText = '';
- const [text, setText] = useState(initialText);
- return (
-
-
-
-
-
-
-
-
- );
-}
-
-export {
- VStack,
- Center,
- Heading,
- GluestackUIProvider,
- SafeAreaView,
- Text,
-} from '@gluestack-ui/themed';
-
-export { config };
diff --git a/example/storybook-v7/src/components/InputAcessoryView/index.stories.mdx b/example/storybook-v7/src/components/InputAcessoryView/index.stories.mdx
deleted file mode 100644
index 757ad52485..0000000000
--- a/example/storybook-v7/src/components/InputAcessoryView/index.stories.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: InputAccessoryView | gluestack-ui
-
-description: A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars.
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-# InputAccessoryView
-
-Following is the default implementation of the **InputAccessoryView** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.
-
-> Note: InputAccessoryView component is only applicable to iOS devices with iOS version 11 or later.
-
-
-
-
-
-> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/InputAccessoryView/styled-components) to learn about default styling of InputAccessoryView component
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { InputAccessoryView } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a InputAccessoryView component's various parts.
-
-```jsx
-export default () => ;
-```
-
-### API Reference
-
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
-
-### InputAccessoryView
-
-It inherits all the properties of React Native's [InputAccessoryView](https://reactnative.dev/docs/InputAccessoryView) component.
diff --git a/example/storybook-v7/src/components/Link/Link.png b/example/storybook-v7/src/components/Link/Link.png
deleted file mode 100644
index 41222fb2d2..0000000000
Binary files a/example/storybook-v7/src/components/Link/Link.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Link/Link.stories.tsx b/example/storybook-v7/src/components/Link/Link.stories.tsx
deleted file mode 100644
index 2dae7c0c92..0000000000
--- a/example/storybook-v7/src/components/Link/Link.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Link from './Link';
-
-const LinkMeta: ComponentMeta = {
- title: 'stories/Link',
- component: Link,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.`,
- },
- argTypes: {
- isHovered: {
- control: 'boolean',
- options: [true, false],
- },
- isPressed: {
- control: 'boolean',
- options: [true, false],
- },
- isFocusVisible: {
- control: 'boolean',
- options: [true, false],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- isHovered: false,
- isPressed: false,
- isFocusVisible: false,
- isDisabled: false,
- },
-};
-
-export { Link };
-export default LinkMeta;
diff --git a/example/storybook-v7/src/components/Link/Link.tsx b/example/storybook-v7/src/components/Link/Link.tsx
deleted file mode 100644
index f6766910d0..0000000000
--- a/example/storybook-v7/src/components/Link/Link.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Link, LinkText } from '@/components/ui/link';
-import { Icon } from '@/components/ui/icon';
-import { HStack } from '@/components/ui/hstack';
-import { Text } from '@/components/ui/text';
-import { ArrowUpRightIcon } from 'lucide-react-native';
-const LinkBasic = ({ ...props }: any) => {
- return (
- <>
-
-
- GLUESTACK
-
-
- >
- );
-};
-
-LinkBasic.description =
- 'This is a basic Link component example. A link is a component that users can tap to navigate to a new page.';
-
-export default LinkBasic;
-
-export { Link, LinkText, ArrowUpRightIcon, Icon, HStack, Text };
diff --git a/example/storybook-v7/src/components/Link/index.nw.stories.mdx b/example/storybook-v7/src/components/Link/index.nw.stories.mdx
deleted file mode 100644
index a348f88d55..0000000000
--- a/example/storybook-v7/src/components/Link/index.nw.stories.mdx
+++ /dev/null
@@ -1,351 +0,0 @@
----
-title: gluestack-ui Link Component | Installation, Usage, and API
-
-description: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.
-
-pageTitle: Link
-
-pageDescription: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { ArrowUpRightIcon, Icon, HStack, Text, Link, LinkText } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Link** component.
-
-
-
- gluestack
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Link,
- LinkText,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add link
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/link
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/link/index.tsx --%%
-```
-
-
-### 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 { Link } from '@/components/ui/link';
-```
-
-```jsx
-export default () => (
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Link
-
-Contains all link related layout style props and actions.
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- href
-
-
-
- string
-
-
- -
-
-
- {`URL that should be opened on Link press.`}
-
-
-
-
-
- onPress
-
-
-
-
- {'(event?: GestureResponderEvent) => any'}
-
-
-
- -
-
-
- {`Callback that will be invoked on Link press.`}
-
-
-
-
-
- isExternal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, link will be opened in new tab on web. It uses _target property to achieve this.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the link displays a hover state.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- boolean
-
-
- false
-
-
- {`To manually set focus visible state to the link.`}
-
-
-
-
-
->
-
-#### LinkText
-
-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.
-
-### Accessibility
-
-We have outlined the various features that ensure the Link 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Enter`: Users should be able to open a link.
-
-#### Screen Reader
-
-- VoiceOver: When a link receives focus, screen readers should announce a descriptive link name.
-
-### Props
-
-Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
-
-#### Link
-
-<>
-
-
-
->
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
-
-#### Default
-
-
-
- Design inspiration from
-
- pinterest.com
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
- argsType: {},
- }}
- />
-
-
-#### Link with icon
-
-
-
- Go to
-
-
- Pinterest
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Link/index.themed.stories.mdx b/example/storybook-v7/src/components/Link/index.themed.stories.mdx
deleted file mode 100644
index 0ad676547f..0000000000
--- a/example/storybook-v7/src/components/Link/index.themed.stories.mdx
+++ /dev/null
@@ -1,458 +0,0 @@
----
-title: gluestack-ui Link Component | Installation, Usage, and API
-
-description: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.
-
-pageTitle: Link
-
-pageDescription: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Link,
- LinkText,
- ArrowUpRightIcon,
- Icon,
- HStack,
- Text,
-} from '../../core-components/themed';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Link** component.
-
-<>
-
- gluestack
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Link,
- LinkText,
- },
- argsType: {},
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add link
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/link
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/link/index.tsx --%%
-```
-
-
-### 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 { Link } from '@/components/ui/link';
-```
-
-```jsx
-export default () => (
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Link
-
-Contains all link related layout style props and actions.
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- href
-
-
-
- string
-
-
- -
-
-
- {`URL that should be opened on Link press.`}
-
-
-
-
-
- onPress
-
-
-
-
- {'(event?: GestureResponderEvent) => any'}
-
-
-
- -
-
-
- {`Callback that will be invoked on Link press.`}
-
-
-
-
-
- isExternal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, link will be opened in new tab on web. It uses _target property to achieve this.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the link displays a hover state.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- boolean
-
-
- false
-
-
- {`To manually set focus visible state to the link.`}
-
-
-
-
-
->
-
-#### LinkText
-
-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.
-
-### Accessibility
-
-We have outlined the various features that ensure the Link 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Enter`: Users should be able to open a link.
-
-#### Screen Reader
-
-- VoiceOver: When a link receives focus, screen readers should announce a descriptive link name.
-
-### Props
-
-Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Link
-
-<>
-
-
-
->
-
-
-
-
-
-
-### 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.
-
-#### Default
-
-
-
- Design inspiration from
-
- pinterest.com
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
- argsType: {},
- }}
- />
-
-
-#### Link with icon
-
-
-
- Go to
-
-
- Pinterest
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Menu/Menu.png b/example/storybook-v7/src/components/Menu/Menu.png
deleted file mode 100644
index edffc60468..0000000000
Binary files a/example/storybook-v7/src/components/Menu/Menu.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Menu/Menu.stories.tsx b/example/storybook-v7/src/components/Menu/Menu.stories.tsx
deleted file mode 100644
index 7de9221525..0000000000
--- a/example/storybook-v7/src/components/Menu/Menu.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Menu from './Menu';
-
-const MenuMeta: ComponentMeta = {
- title: 'stories/Menu',
- component: Menu,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `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.`,
- },
- argTypes: {
- placement: {
- control: 'select',
- figmaIgnore: true,
- options: [
- 'bottom',
- 'bottom end',
- 'bottom start',
- 'top',
- 'top end',
- 'top start',
- 'left',
- 'left end',
- 'left start',
- 'right',
- 'right end',
- 'right start',
- ],
- },
- showMenu: {
- control: 'boolean',
- figmaIgnore: true,
- options: [true, false],
- },
- },
- args: {
- placement: 'bottom',
- showMenu: true,
- },
-};
-
-export default MenuMeta;
-export { Menu };
diff --git a/example/storybook-v7/src/components/Menu/Menu.tsx b/example/storybook-v7/src/components/Menu/Menu.tsx
deleted file mode 100644
index aff1f17e16..0000000000
--- a/example/storybook-v7/src/components/Menu/Menu.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-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 { PaintBucket, PuzzleIcon } from 'lucide-react-native';
-
-const MenuBasic = ({ placement = 'bottom' }: any) => {
- return (
-
-
-
- );
-};
-
-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 {
- Button,
- ButtonText,
- GlobeIcon,
- HStack,
- Menu,
- // MenuIcon,
- MenuItem,
- MenuItemLabel,
- Icon,
- Text,
- SettingsIcon,
- AddIcon,
- PaintBucket,
- PuzzleIcon,
- Box,
-};
diff --git a/example/storybook-v7/src/components/Menu/index.nw.stories.mdx b/example/storybook-v7/src/components/Menu/index.nw.stories.mdx
deleted file mode 100644
index ed40ae7010..0000000000
--- a/example/storybook-v7/src/components/Menu/index.nw.stories.mdx
+++ /dev/null
@@ -1,789 +0,0 @@
----
-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';
-
-
-
-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,
- Tabs
-} 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.
-
-
- {
- return (
-
- );
- }}
- >
-
-
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Button,
- ButtonText,
- Menu,
- MenuIcon,
- MenuItem,
- MenuItemLabel,
- Text,
- Box,
- Icon,
- GlobeIcon,
- PuzzleIcon,
- PaintBucket,
- SettingsIcon,
- AddIcon,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add menu
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/menu @legendapp/motion
-```
-> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/menu/index.tsx --%%
-```
-
-
-
-### 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 () => (
-
-);
-```
-
-### 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.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- trigger
-
-
-
-
- {'(_props: any, state: { open: boolean; }) => Element'}
-
-
-
- -
-
-
- {`Function that returns a React Element. This element will be used as a Trigger for the Menu`}
-
-
-
-
-
- placement
-
-
-
-
- {
- '"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"'
- }
-
-
-
- bottom left
-
-
- menu placement
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- false
-
-
- {`If true, the menu will be opened by default.`}
-
-
-
-
-
- onOpen
-
-
-
- {'() => void'}
-
-
- true
-
-
- {`This function will be invoked when the menu is opened.`}
-
-
-
-
-
- onClose
-
-
-
- {' () => void'}
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- false
-
-
- {`Whether the menu is opened. Useful for controlling the open state.`}
-
-
-
-
-
- offset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the main axis between the
- element and its trigger element.
-
-
-
-
-
-
- crossOffset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the cross axis between the
- element and its trigger element.
-
-
-
-
-
-
- disabledKeys
-
-
-
- string []
-
-
- -
-
-
-
- Item keys in this collection will be disabled.
-
-
-
-
-
-
- closeOnSelect
-
-
-
- boolean
-
-
- true
-
-
- {`This prop determine whether menu is closed after option is selected.`}
-
-
-
-
-
- selectedKeys
-
-
-
- {`'all' | Iterable`}
-
-
- -
-
-
- {`The currently selected keys in the collection (controlled).`}
-
-
-
-
-
- selectionMode
-
-
-
- 'none'| 'single' | 'multiple'
-
-
- -
-
-
- {`The type of selection that is allowed in the collection.`}
-
-
-
-
-
- onSelectionChange
-
-
-
- {`(keys: 'all' | Iterable) => void`}
-
-
- -
-
-
- {`Handler that is called when the selection changes.`}
-
-
-
-
-
-
-
-#### 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.
-
-
-
-
-
-
-
-#### 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.
-
-
- {
- return (
-
- );
- }}
- >
-
-
-
-
-
-
-`,
- 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',
- },
- },
- }}
- />
-
-
-
-#### 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.
-
-
- {
- return (
-
- );
- }}
- >
-
-
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Button,
- ButtonText,
- Menu,
- MenuIcon,
- MenuItem,
- MenuItemLabel,
- Text,
- Box,
- Icon,
- GlobeIcon,
- PuzzleIcon,
- PaintBucket,
- SettingsIcon,
- AddIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### 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.
-
-
- {
- 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 (
-
- );
- }}
- >
-
-
-
-
-
- )
- }
-`,
- scope: {
- Wrapper,
- Button,
- ButtonText,
- Menu,
- MenuIcon,
- MenuItem,
- MenuItemLabel,
- Text,
- Box,
- Icon,
- GlobeIcon,
- PuzzleIcon,
- PaintBucket,
- SettingsIcon,
- AddIcon,
- },
- argsType: {},
- }}
- />
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Menu/index.themed.stories.mdx b/example/storybook-v7/src/components/Menu/index.themed.stories.mdx
deleted file mode 100644
index 0d4e7c3636..0000000000
--- a/example/storybook-v7/src/components/Menu/index.themed.stories.mdx
+++ /dev/null
@@ -1,817 +0,0 @@
----
-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';
-
-
-
-import {
- Button,
- ButtonText,
- 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,
- InfoIcon,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of a **Menu** component.
-
-
- {
- return (
-
- );
- }}
- >
-
-
-
-
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Button,
- ButtonText,
- Menu,
- MenuIcon,
- MenuItem,
- MenuItemLabel,
- Box,
- Icon,
- GlobeIcon,
- PuzzleIcon,
- PaintBucket,
- SettingsIcon,
- AddIcon,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add menu
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/menu
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/menu/index.tsx --%%
-```
-
-
-
-### 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 () => (
-
-);
-```
-
-### 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.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- trigger
-
-
-
-
- {'(_props: any, state: { open: boolean; }) => Element'}
-
-
-
- -
-
-
- {`Function that returns a React Element. This element will be used as a Trigger for the Menu`}
-
-
-
-
-
- placement
-
-
-
-
- {
- '"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"'
- }
-
-
-
- bottom left
-
-
- menu placement
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- false
-
-
- {`If true, the menu will be opened by default.`}
-
-
-
-
-
- onOpen
-
-
-
- {'() => void'}
-
-
- true
-
-
- {`This function will be invoked when the menu is opened.`}
-
-
-
-
-
- onClose
-
-
-
- {' () => void'}
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- false
-
-
- {`Whether the menu is opened. Useful for controlling the open state.`}
-
-
-
-
-
- offset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the main axis between the
- element and its trigger element.
-
-
-
-
-
-
- crossOffset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the cross axis between the
- element and its trigger element.
-
-
-
-
-
-
- disabledKeys
-
-
-
- string []
-
-
- -
-
-
-
- Item keys in this collection will be disabled.
-
-
-
-
-
-
- closeOnSelect
-
-
-
- boolean
-
-
- true
-
-
- {`This prop determine whether menu is closed after option is selected.`}
-
-
-
-
-
- selectedKeys
-
-
-
- {`'all' | Iterable`}
-
-
- -
-
-
- {`The currently selected keys in the collection (controlled).`}
-
-
-
-
-
- selectionMode
-
-
-
- 'none'| 'single' | 'multiple'
-
-
- -
-
-
- {`The type of selection that is allowed in the collection.`}
-
-
-
-
-
- onSelectionChange
-
-
-
- {`(keys: 'all' | Iterable) => void`}
-
-
- -
-
-
- {`Handler that is called when the selection changes.`}
-
-
-
-
-
-
-
-#### 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.
-
-
-
-
-//
-//
-//
-//
-//
-//
-// >
-// );
-// };
-
-// MultipleModals.description =
-// 'This is an example of multiple modals. Multiple modals can be opened at the same time. Here we have two modals where second modal is opened from first modal.';
-// export default MultipleModals;
diff --git a/example/storybook-v7/src/components/Modal/index.nw.stories.mdx b/example/storybook-v7/src/components/Modal/index.nw.stories.mdx
deleted file mode 100644
index 5c875b7423..0000000000
--- a/example/storybook-v7/src/components/Modal/index.nw.stories.mdx
+++ /dev/null
@@ -1,835 +0,0 @@
----
-title: Modal | gluestack-ui | Installation, Usage, and API
-
-description: A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
-
-pageTitle: Modal
-
-pageDescription: A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- Button,
- ButtonText,
- ButtonIcon,
- Center,
- Text as ModalText,
- CloseIcon,
- VStack,
- HStack,
- Heading,
- Icon,
- Input,
- InputField,
- Link,
- ArrowLeftIcon,
-} from '../../core-components/nativewind';
-
-import { transformedCode } from '../../utils';
-import { useState } from 'react';
-import {
- CodePreview,
- Table,
- TableContainer,
- AddIcon,
- InfoIcon,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Modal** component.
-
-
-
-
- {
- setShowModal(false);
- }}
- finalFocusRef={ref}
- >
-
-
-
- Engage with Modals
-
-
-
-
-
-
- Elevate user interactions with our versatile modals. Seamlessly integrate notifications, forms, and media displays. Make an impact effortlessly.
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- useState,
- CloseIcon,
- Button,
- ButtonText,
- Heading,
- Center,
- Text: ModalText,
- Icon,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add modal
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/modal @legendapp/motion
-```
-> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/modal/index.tsx --%%
-```
-
-
-### 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 { Modal } from '@/components/ui/modal';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Modal
-
-Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the modal will open. Useful for controllable state behavior.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback invoked when the modal is closed.`}
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, renders react-native native modal.`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- -
-
-
- {`Specifies the default open state of the Modal`}
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the modal opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the modal closes`}
-
-
-
-
-
- avoidKeyboard
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Modal will avoid the keyboard.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Modal will close when the overlay is clicked.`}
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the keyboard can dismiss the Modal`}
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
- {`The content to display inside the Modal`}
-
-
-
-
-
-
-
-#### ModalBackdrop
-
-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.
-
-#### ModalContent
-
-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.
-
-<>
-
-
-
->
-
-#### ModalHeader
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ModalCloseButton
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ModalBody
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component
-
-#### ModalFooter
-
-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 Modal 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/docs/) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
-
-### Props
-
-Modal 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Modal
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- xs | sm | md | lg | full
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-#### Multiple Modals
-
-A user interface featuring multiple modal components that allow for layered interaction and context-specific information display.
-
-
-
-
-
-
- {
- setShowModal(false);
- }}
- >
-
-
-
-
- Forgot password?
- No worries, we’ll send you reset instructions
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- setShowModal2(false);
- }}
- >
-
-
-
-
- Reset password
- A verification code has been sent to you. Enter code below.
-
-
-
-
-
-
-
-
-
-
- Didn’t receive the email?
- Click to resend
-
-
-
-
-
-
-
-
- {
- setShowModal3(false);
- }}
- >
-
-
-
-
- Set new password
- Almost done. Enter your new password and you are all set.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- Wrapper,
- useState,
- Button,
- ButtonText,
- ButtonIcon,
- Text: ModalText,
- Center,
- CloseIcon,
- VStack,
- HStack,
- Heading,
- Icon,
- Input,
- InputField,
- Link,
- ArrowLeftIcon,
- },
- argsType: {},
- }}
- />
-
-
-### Modal sizes
-
-A versatile modal component offering different sizes to accommodate various content types and optimize user experience.
-
-
- {
- setShowModal(true)
- setSize(currentSize)
- }
- return (
-
-
- {sizes.map((currentSize) => {
- return
- })}
-
- {
- setShowModal(false);
- }}
- size={size}
- finalFocusRef={ref}
- >
-
-
-
- Delete Folder
-
-
-
-
-
-
- Whoa, slow down there! This modal is like a red light at an intersection, reminding you to stop and think before you proceed. Is deleting this folder the right choice?
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- useState,
- CloseIcon,
- Button,
- ButtonText,
- Heading,
- Center,
- Text: ModalText,
- Icon,
- VStack,
- HStack,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- default: 'md',
- },
- },
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Modal/index.themed.stories.mdx b/example/storybook-v7/src/components/Modal/index.themed.stories.mdx
deleted file mode 100644
index 75fcb516aa..0000000000
--- a/example/storybook-v7/src/components/Modal/index.themed.stories.mdx
+++ /dev/null
@@ -1,913 +0,0 @@
----
-title: gluestack-ui Modal Component | Installation, Usage, and API
-
-description: A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
-
-pageTitle: Modal
-
-pageDescription: A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- CloseIcon,
- Button,
- ButtonText,
- ButtonIcon,
- Heading,
- Icon,
- Text as ModalText,
- Center,
- CheckCircleIcon,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- VStack,
- HStack,
- Input,
- InputField,
- ArrowLeftIcon,
- Link,
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import { useState } from 'react';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- AddIcon,
- InfoIcon,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Modal** component.
-
-
-
-
- {
- setShowModal(false);
- }}
- finalFocusRef={ref}
- >
-
-
-
- Engage with Modals
-
-
-
-
-
-
- Elevate user interactions with our versatile modals. Seamlessly integrate notifications, forms, and media displays. Make an impact effortlessly.
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- useState,
- CloseIcon,
- Button,
- ButtonText,
- Heading,
- Center,
- Text: ModalText,
- Icon,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add modal
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/modal
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/modal/index.tsx --%%
-```
-
-
-### 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 { Modal } from '@/components/ui/modal';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Modal
-
-Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the modal will open. Useful for controllable state behavior.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback invoked when the modal is closed.`}
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
- {`If true, renders react-native native modal.`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- -
-
-
- {`Specifies the default open state of the Modal`}
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the modal opens.`}
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
- {`The ref of element to receive focus when the modal closes`}
-
-
-
-
-
- avoidKeyboard
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Modal will avoid the keyboard.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the Modal will close when the overlay is clicked.`}
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- -
-
-
- {`If true, the keyboard can dismiss the Modal`}
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
- {`The content to display inside the Modal`}
-
-
-
-
-
->
-
-#### ModalBackdrop
-
-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.
-
-#### ModalContent
-
-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.
-
-<>
-
-
-
-
->
-
-#### ModalBody
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### ModalFooter
-
-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 Modal 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/docs/) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
-
-### Props
-
-Modal 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Modal
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- xs | sm | md | lg | full
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-#### Multiple Modals
-
-A user interface featuring multiple modal components that allow for layered interaction and context-specific information display.
-
-
-
-
-
-
- {
- setShowModal(false);
- }}
- >
-
-
-
-
- Forgot password?
- No worries, we’ll send you reset instructions
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- setShowModal2(false);
- }}
- >
-
-
-
-
- Reset password
- A verification code has been sent to you. Enter code below.
-
-
-
-
-
-
-
-
-
-
- Didn’t receive the email?
- Click to resend
-
-
-
-
-
-
-
-
- {
- setShowModal3(false);
- }}
- >
-
-
-
-
- Set new password
- Almost done. Enter your new password and you are all set.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- Wrapper,
- useState,
- Button,
- ButtonText,
- ButtonIcon,
- Text: ModalText,
- Center,
- CloseIcon,
- VStack,
- HStack,
- Heading,
- Icon,
- Input,
- InputField,
- Link,
- ArrowLeftIcon,
- },
- argsType: {},
- }}
- />
-
-
-### Modal sizes
-
-A versatile modal component offering different sizes to accommodate various content types and optimize user experience.
-
-
- {
- setShowModal(true)
- setSize(currentSize)
- }
- return (
-
-
- {sizes.map((currentSize) => ()
- )}
-
- {
- setShowModal(false);
- }}
- size={size}
- finalFocusRef={ref}
- >
-
-
-
- Delete Folder
-
-
-
-
-
-
- Whoa, slow down there! This modal is like a red light at an intersection, reminding you to stop and think before you proceed. Is deleting this folder the right choice?
-
-
-
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Modal,
- ModalBackdrop,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
- useState,
- CloseIcon,
- Button,
- ButtonText,
- Heading,
- Center,
- Text: ModalText,
- Icon,
- VStack,
- HStack,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- default: 'md',
- },
- },
- }}
- />
-
-
diff --git a/example/storybook-v7/src/components/Popover/Popover.png b/example/storybook-v7/src/components/Popover/Popover.png
deleted file mode 100644
index 4ebe8c2a4c..0000000000
Binary files a/example/storybook-v7/src/components/Popover/Popover.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Popover/Popover.stories.tsx b/example/storybook-v7/src/components/Popover/Popover.stories.tsx
deleted file mode 100644
index 9bb88bf6e9..0000000000
--- a/example/storybook-v7/src/components/Popover/Popover.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Popover from './Popover';
-
-const PopoverMeta: ComponentMeta = {
- title: 'stories/Popover',
- component: Popover,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- },
- placement: {
- control: 'select',
- figmaIgnore: true,
- options: [
- 'bottom',
- 'bottom left',
- 'bottom right',
- 'top',
- 'top left',
- 'top right',
- 'left',
- 'left bottom',
- 'left right',
- 'right',
- 'right bottom',
- 'right top',
- ],
- },
- },
- args: {
- size: 'md',
- placement: 'bottom',
- },
-};
-
-export default PopoverMeta;
-
-export { Popover };
diff --git a/example/storybook-v7/src/components/Popover/Popover.tsx b/example/storybook-v7/src/components/Popover/Popover.tsx
deleted file mode 100644
index f9e39cf329..0000000000
--- a/example/storybook-v7/src/components/Popover/Popover.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useState } from 'react';
-import {
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- PopoverArrow,
-} from '@/components/ui/popover';
-import { Button, ButtonText } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { Heading } from '@/components/ui/heading';
-import { Box } from '@/components/ui/box';
-import { X } from 'lucide-react-native';
-
-const PopoverBasic = (props: any) => {
- const [showPopover, setShowPopover] = React.useState(false);
- return (
- {
- setShowPopover(true);
- }}
- onClose={() => {
- setShowPopover(false);
- }}
- // eslint-disable-next-line react/no-unstable-nested-components
- trigger={(triggerProps) => {
- return (
-
- );
- }}
- >
-
-
-
-
- Welcome!
-
-
-
-
-
-
- Join the product tour and start creating your own checklist. Are you
- ready to jump in?
-
-
-
-
- Step 2 of 3
-
- {/* @ts-ignore */}
-
-
-
-
-
- );
-};
-
-PopoverBasic.description = `Popover is a non-modal dialog that floats around a trigger element. It is used to display contextual information or UI. It is triggered by clicking, tapping, or hovering on an element.`;
-
-export default PopoverBasic;
-
-export {
- PopoverBasic,
- Text,
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- Button,
- ButtonText,
- Box,
- useState,
-};
diff --git a/example/storybook-v7/src/components/Popover/index.nw.stories.mdx b/example/storybook-v7/src/components/Popover/index.nw.stories.mdx
deleted file mode 100644
index cea25dba7e..0000000000
--- a/example/storybook-v7/src/components/Popover/index.nw.stories.mdx
+++ /dev/null
@@ -1,820 +0,0 @@
----
-title: gluestack-ui Popover Component | Installation, Usage, and API
-
-description: Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view.
-
-pageTitle: Popover
-
-pageDescription: Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- PopoverArrow,
- Pressable,
- Text as PopoverText,
- Heading,
- Icon,
- HStack,
- VStack,
- Avatar,
- AvatarFallbackText,
- Button,
- ButtonText,
- Box,
- CloseIcon,
- CircleIcon,
- PhoneIcon,
- ClockIcon,
- MailIcon,
- Center,
-} from '../../core-components/nativewind';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of **Popover** component.
-
-
- {
- setIsOpen(true);
- };
- const handleClose = () => {
- setIsOpen(false);
- };
- return (
- {
- return (
-
- );
- }}
- >
-
-
-
- Welcome!
-
-
-
-
-
-
- Join the product tour and start creating your own checklist. Are you ready to jump in?
-
-
-
-
- Step 2 of 3
-
-
-
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- Text: PopoverText,
- Heading,
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- Button,
- ButtonText,
- CloseIcon,
- Icon,
- },
- argsType: {
- placement: {
- control: 'select',
- options: [
- 'bottom',
- 'bottom left',
- 'bottom right',
- 'top',
- 'top left',
- 'top right',
- 'left',
- 'left bottom',
- 'left right',
- 'right',
- 'right bottom',
- 'right top',
- ],
- default: 'bottom',
- },
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- default: 'md',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add popover
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/popover @legendapp/motion
-```
-> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/popover/index.tsx --%%
-```
-
-
-### 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 {
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverArrow,
- PopoverHeader,
- PopoverCloseButton,
- PopoverBody,
- PopoverFooter,
-} from '@/components/ui/popover';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Popover
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- -
-
-
-
- Specifies the default open state of the popover.
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- -
-
-
-
- If true, the popover will open. Useful for controllable state
- behavior.
-
-
-
-
-
-
- trapFocus
-
-
-
- boolean
-
-
- true
-
-
- Whether popover should trap focus.
-
-
-
-
-
- focusScope
-
-
-
- boolean
-
-
- true
-
-
-
- Whether focus should be outside of popover or not
-
-
-
-
-
-
- shouldFlip
-
-
-
- boolean
-
-
- true
-
-
-
- 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.
-
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
-
- The ref of element to receive focus when the popover opens.
-
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
-
- The ref of element to receive focus when the popover closes
-
-
-
-
-
-
- trigger
-
-
-
- {`() => any`}
-
-
- -
-
-
-
- Function that returns a React Element. This element will be used
- as a Trigger for the popover.
-
-
-
-
-
-
- crossOffset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the cross axis between the
- element and its trigger element.
-
-
-
-
-
-
- offset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the main axis between the
- element and its trigger element.
-
-
-
-
-
-
- shouldOverlapWithTrigger
-
-
-
- boolean
-
-
- false
-
-
-
- Determines whether popover content should overlap with the
- trigger.
-
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- -
-
-
-
- If true, the keyboard can dismiss the popover.
-
-
-
-
-
-
- placement
-
-
-
-
- 'top' | 'top left' | 'top right' | 'bottom' | 'bottom left' |
- 'bottom right' | 'right' | 'right top' | 'right bottom' | 'left' |
- 'left top' | 'left bottom'
-
-
-
- 'bottom'
-
-
- Popover placement
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
-
- If true, renders react-native native modal.
-
-
-
-
-
-
- avoidKeyboard
-
-
-
- boolean
-
-
- -
-
-
-
- If true, the popover will avoid the keyboard.
-
-
-
-
-
-
- onOpen
-
-
-
- () => any
-
-
- -
-
-
-
- This function will be invoked when popover is opened.
-
-
-
-
-
-
- onClose
-
-
-
- () => any
-
-
- -
-
-
-
- This function will be invoked when popover is closed. It'll also
- be called when user attempts to close the popover via Escape key
- or backdrop press.
-
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
-
- The content to display inside the popover.
-
-
-
-
-
-
->
-
-#### PopoverBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### PopoverContent
-
-Contains all backdrop related layout style props and actions.
-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.
-
-#### PopoverHeader
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### PopoverFooter
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### PopoverBody
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### PopoverCloseButton
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-### Accessibility
-
-We have outlined the various features that ensure the Popover 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 [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
-
-#### Keyboard
-
-- `Space`: Opens/closes the popover.
-- `Enter`: Opens/closes the popover.
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Esc`: Closes the popover and moves focus to PopoverTrigger.
-
-### Props
-
-Popover component is created using ScrollView component from react-native. It extends all the props supported by [React Native ScrollView](https://reactnative.dev/docs/scrollview#props) and the props mentioned below.
-
-#### Popover
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- xs | sm | md | lg | full
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-#### Popover on Avatar
-
-A popover component can enhance the avatar by providing additional information and context in a concise and visually appealing manner.
-
-
-
- {
- return (
-
-
-
-
- Kevin James
-
-
-
-
-
- Kevin James
-
-
- Hi Rachel, What’s up?
-
-
-
- );
- }}
- >
-
-
-
-
-
-
- Kevin James
-
-
-
-
- Kevin James
-
-
-
-
- Active
-
-
-
-
-
-
-
-
-
-
-
- (603) 555-0123
-
-
-
-
-
- 5:21 PM local time
-
-
-
-
-
- kevinjames@sample.com
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Box,
- Heading,
- Text: PopoverText,
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- Pressable,
- Button,
- ButtonText,
- HStack,
- VStack,
- CircleIcon,
- PhoneIcon,
- ClockIcon,
- MailIcon,
- Avatar,
- AvatarFallbackText,
- Icon,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Popover/index.themed.stories.mdx b/example/storybook-v7/src/components/Popover/index.themed.stories.mdx
deleted file mode 100644
index 2a5b2a449c..0000000000
--- a/example/storybook-v7/src/components/Popover/index.themed.stories.mdx
+++ /dev/null
@@ -1,1027 +0,0 @@
----
-title: gluestack-ui Popover Component | Installation, Usage, and API
-
-description: Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view.
-
-pageTitle: Popover
-
-pageDescription: Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- PopoverArrow,
- Pressable,
- Text as PopoverText,
- Heading,
- Icon,
- HStack,
- VStack,
- Avatar,
- AvatarFallbackText,
- Button,
- ButtonGroup,
- ButtonText,
- Box,
- CloseIcon,
- CircleIcon,
- PhoneIcon,
- Clock3Icon,
- MailIcon,
- Center,
-} from '../../core-components/themed';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Popover** component.
-
-
- {
- setIsOpen(true);
- };
- const handleClose = () => {
- setIsOpen(false);
- };
- return (
- {
- return (
-
- );
- }}
- >
-
-
-
- Welcome!
-
-
-
-
-
-
- Join the product tour and start creating your own checklist. Are you ready to jump in?
-
-
-
-
- Step 2 of 3
-
-
-
-
-
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- Text: PopoverText,
- Heading,
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- Button,
- ButtonGroup,
- ButtonText,
- CloseIcon,
- Icon,
- },
- argsType: {
- placement: {
- control: 'select',
- options: [
- 'bottom',
- 'bottom left',
- 'bottom right',
- 'top',
- 'top left',
- 'top right',
- 'left',
- 'left bottom',
- 'left right',
- 'right',
- 'right bottom',
- 'right top',
- ],
- default: 'bottom',
- },
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- default: 'md',
- },
- },
- }}
- />
-
-
-### Popover with arrow
-
-We have exported `PopoverArrow` component which can be used to render an arrow for the popover.
-
-
- {
- setIsOpen(true);
- };
- const handleClose = () => {
- setIsOpen(false);
- };
- return (
- {
- return (
-
- );
- }}
- >
-
-
-
-
- Welcome!
-
-
-
-
-
-
- Join the product tour and start creating your own checklist. Are you ready to jump in?
-
-
-
-
- Step 2 of 3
-
-
-
-
-
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- Text: PopoverText,
- Heading,
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- Button,
- ButtonGroup,
- ButtonText,
- CloseIcon,
- Icon,
- PopoverArrow,
- },
- argsType: {
- placement: {
- control: 'select',
- options: [
- 'bottom',
- 'bottom left',
- 'bottom right',
- 'top',
- 'top left',
- 'top right',
- 'left',
- 'left bottom',
- 'left right',
- 'right',
- 'right bottom',
- 'right top',
- ],
- default: 'bottom',
- },
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'full'],
- default: 'md',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add popover
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/popover
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/popover/index.tsx --%%
-```
-
-
-### 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 {
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverArrow,
- PopoverHeader,
- PopoverCloseButton,
- PopoverBody,
- PopoverFooter,
-} from '@gluestack-ui/themed';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Popover
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- -
-
-
-
- Specifies the default open state of the popover.
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- -
-
-
-
- If true, the popover will open. Useful for controllable state
- behavior.
-
-
-
-
-
-
- trapFocus
-
-
-
- boolean
-
-
- true
-
-
- Whether popover should trap focus.
-
-
-
-
-
- focusScope
-
-
-
- boolean
-
-
- true
-
-
-
- Whether focus should be outside of popover or not
-
-
-
-
-
-
- shouldFlip
-
-
-
- boolean
-
-
- true
-
-
-
- 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.
-
-
-
-
-
-
- initialFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
-
- The ref of element to receive focus when the popover opens.
-
-
-
-
-
-
- finalFocusRef
-
-
-
- {`React.RefObject`}
-
-
- -
-
-
-
- The ref of element to receive focus when the popover closes
-
-
-
-
-
-
- trigger
-
-
-
- {`() => any`}
-
-
- -
-
-
-
- Function that returns a React Element. This element will be used
- as a Trigger for the popover.
-
-
-
-
-
-
- crossOffset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the cross axis between the
- element and its trigger element.
-
-
-
-
-
-
- offset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the main axis between the
- element and its trigger element.
-
-
-
-
-
-
- shouldOverlapWithTrigger
-
-
-
- boolean
-
-
- false
-
-
-
- Determines whether popover content should overlap with the
- trigger.
-
-
-
-
-
-
- isKeyboardDismissable
-
-
-
- boolean
-
-
- -
-
-
-
- If true, the keyboard can dismiss the popover.
-
-
-
-
-
-
- placement
-
-
-
-
- 'top' | 'top left' | 'top right' | 'bottom' | 'bottom left' |
- 'bottom right' | 'right' | 'right top' | 'right bottom' | 'left' |
- 'left top' | 'left bottom'
-
-
-
- 'bottom'
-
-
- Popover placement
-
-
-
-
-
- useRNModal
-
-
-
- boolean
-
-
- false
-
-
-
- If true, renders react-native native modal.
-
-
-
-
-
-
- avoidKeyboard
-
-
-
- boolean
-
-
- -
-
-
-
- If true, the popover will avoid the keyboard.
-
-
-
-
-
-
- onOpen
-
-
-
- () => any
-
-
- -
-
-
-
- This function will be invoked when popover is opened.
-
-
-
-
-
-
- onClose
-
-
-
- () => any
-
-
- -
-
-
-
- This function will be invoked when popover is closed. It'll also
- be called when user attempts to close the popover via Escape key
- or backdrop press.
-
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
-
- The content to display inside the popover.
-
-
-
-
-
-
-
->
-
-#### PopoverBackdrop
-
-It is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### PopoverContent
-
-Contains all backdrop related layout style props and actions.
-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.
-
-#### PopoverHeader
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### PopoverFooter
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### PopoverBody
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### PopoverCloseButton
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
-
->
-
-### Accessibility
-
-We have outlined the various features that ensure the Popover 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 [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
-
-#### Keyboard
-
-- `Space`: Opens/closes the popover.
-- `Enter`: Opens/closes the popover.
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Esc`: Closes the popover and moves focus to PopoverTrigger.
-
-### Props
-
-Popover component is created using ScrollView component from react-native. It extends all the props supported by [React Native ScrollView](https://reactnative.dev/docs/scrollview#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Popover
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- xs | sm | md | lg | full
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-#### Popover on Avatar
-
-A popover component can enhance the avatar by providing additional information and context in a concise and visually appealing manner.
-
-
-
- {\/* PhoneIcon, Clock3Icon, MailIcon are imported from 'lucide-react-native' *\/}
- {
- return (
-
-
-
-
- Kevin James
-
-
-
-
-
- Kevin James
-
-
- Hi Rachel, What’s up?
-
-
-
- );
- }}
- >
-
-
-
-
-
-
- Kevin James
-
-
-
-
- Kevin James
-
-
-
-
- Active
-
-
-
-
-
-
-
-
-
-
-
- (603) 555-0123
-
-
-
-
-
- 5:21 PM local time
-
-
-
-
-
- kevinjames@sample.com
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Box,
- Heading,
- Text: PopoverText,
- Popover,
- PopoverBackdrop,
- PopoverContent,
- PopoverHeader,
- PopoverBody,
- PopoverFooter,
- PopoverCloseButton,
- Pressable,
- Button,
- ButtonText,
- HStack,
- VStack,
- CircleIcon,
- PhoneIcon,
- Clock3Icon,
- MailIcon,
- Avatar,
- AvatarFallbackText,
- Icon,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Pressable/Pressable.png b/example/storybook-v7/src/components/Pressable/Pressable.png
deleted file mode 100644
index ed594a02e5..0000000000
Binary files a/example/storybook-v7/src/components/Pressable/Pressable.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Pressable/Pressable.stories.tsx b/example/storybook-v7/src/components/Pressable/Pressable.stories.tsx
deleted file mode 100644
index ba4651d48e..0000000000
--- a/example/storybook-v7/src/components/Pressable/Pressable.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Pressable from './Pressable';
-
-const PressableMeta: ComponentMeta = {
- title: 'stories/Pressable',
- component: Pressable,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.`,
- },
- argTypes: {
- disabled: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- disabled: false,
- },
-};
-
-export default PressableMeta;
-
-export { Pressable };
diff --git a/example/storybook-v7/src/components/Pressable/Pressable.tsx b/example/storybook-v7/src/components/Pressable/Pressable.tsx
deleted file mode 100644
index 9e418b858e..0000000000
--- a/example/storybook-v7/src/components/Pressable/Pressable.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Center, Text } from '@gluestack-ui/themed';
-import { Pressable } from '@/components/ui/pressable';
-
-const PressableBasic = ({ ...props }: any) => {
- return (
- console.log('Hello')}
- {...props}
- className="p-5 bg-primary-500"
- >
- PRESSABLE
-
- );
-};
-
-PressableBasic.description =
- 'This is a basic Pressable component example. Pressable components are used to show a loading state of a component or page.';
-
-export default PressableBasic;
-
-export { Pressable, Center, Text };
diff --git a/example/storybook-v7/src/components/Pressable/index.nw.stories.mdx b/example/storybook-v7/src/components/Pressable/index.nw.stories.mdx
deleted file mode 100644
index f658b87a81..0000000000
--- a/example/storybook-v7/src/components/Pressable/index.nw.stories.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: gluestack-ui Pressable Component | Installation, Usage, and API
-
-description: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
-
-pageTitle: Pressable
-
-pageDescription: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Pressable, Text } from '../../core-components/nativewind';
-
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Pressable** component.
-
-
- console.log('Hello')} className="p-5 bg-primary-500">
- Press me
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Pressable,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add pressable
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/pressable
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/pressable/index.tsx --%%
-```
-
-
-
-### 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 { Pressable } from '@/components/ui/pressable';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Pressable
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-### 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.
-
-#### Pressable child elements according to its states
-
-You can change the child elements according to the states of Pressable component.
-
-
-
- {({ pressed }) => (
-
- PRESSABLE
-
- )}
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Pressable,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-Similarly, you can change the child elements according to other states of Pressable
-component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
diff --git a/example/storybook-v7/src/components/Pressable/index.stories.mdx b/example/storybook-v7/src/components/Pressable/index.stories.mdx
deleted file mode 100644
index 15d498280d..0000000000
--- a/example/storybook-v7/src/components/Pressable/index.stories.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Pressable | gluestack-ui | Installation, Usage, and API
-
-description: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
-
-pageTitle: Pressable
-
-pageDescription: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Pressable } from './Pressable';
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Pressable** component.
-
-<>
- console.log('Hello')} p="$5" bg="$primary500" $hover-bg="$primary400">
- Press me
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Pressable,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-
-
-## API Reference
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { Pressable } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a Pressable component's various parts.
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Pressable
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-### 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.
-
-#### Pressable child elements according to its states
-
-You can change the child elements according to the states of Pressable component.
-
-<>
-
- {({ pressed }) => (
- PRESSABLE
- )}
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Pressable,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-Similarly, you can change the child elements according to other states of Pressable
-component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
-
-## 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/eject-library). The import names of components serve as keys to customize each component.
-
-
diff --git a/example/storybook-v7/src/components/Pressable/index.themed.stories.mdx b/example/storybook-v7/src/components/Pressable/index.themed.stories.mdx
deleted file mode 100644
index a4d1c262d9..0000000000
--- a/example/storybook-v7/src/components/Pressable/index.themed.stories.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: gluestack-ui Pressable Component | Installation, Usage, and API
-
-description: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
-
-pageTitle: Pressable
-
-pageDescription: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Pressable, Text } from '../../core-components/themed';
-import { AppProvider, CodePreview, CollapsibleCode, Tabs } from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-
-
-This is an illustration of **Pressable** component.
-
-
- console.log('Hello')} p="$5" bg="$primary500" $hover-bg="$primary400">
- Press me
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Pressable,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add pressable
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/pressable
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/pressable/index.tsx --%%
-```
-
-
-
-### 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 { Pressable } from '@/components/ui/pressable';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Pressable
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-### 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.
-
-#### Pressable child elements according to its states
-
-You can change the child elements according to the states of Pressable component.
-
-
-
- {({ pressed }) => (
- PRESSABLE
- )}
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Pressable,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-Similarly, you can change the child elements according to other states of Pressable
-component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
diff --git a/example/storybook-v7/src/components/Progress/Progress.png b/example/storybook-v7/src/components/Progress/Progress.png
deleted file mode 100644
index 9b45655400..0000000000
Binary files a/example/storybook-v7/src/components/Progress/Progress.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Progress/Progress.stories.tsx b/example/storybook-v7/src/components/Progress/Progress.stories.tsx
deleted file mode 100644
index 7e68938e1b..0000000000
--- a/example/storybook-v7/src/components/Progress/Progress.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Progress from './Progress';
-
-const ProgressMeta: ComponentMeta = {
- title: 'stories/Progress',
- component: Progress,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete.`,
- },
- argTypes: {
- value: {
- type: 'number',
- defaultValue: '50',
- },
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
- },
- },
- args: {
- value: 40,
- size: 'md',
- },
-};
-
-export default ProgressMeta;
-
-export { Progress };
diff --git a/example/storybook-v7/src/components/Progress/Progress.tsx b/example/storybook-v7/src/components/Progress/Progress.tsx
deleted file mode 100644
index 065e44032a..0000000000
--- a/example/storybook-v7/src/components/Progress/Progress.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { Progress, ProgressFilledTrack } from '@/components/ui/progress';
-import { VStack } from '@/components/ui/vstack';
-import { Box } from '@/components/ui/box';
-import { Heading } from '@/components/ui/heading';
-import { Center } from '@/components/ui/center';
-
-const ProgressBasic = ({ value = 50, ...props }: any) => {
- return (
-
-
-
- );
-};
-
-ProgressBasic.description =
- 'This is a basic Progress component example. Progress components are used to show the progress of a task.';
-
-export default ProgressBasic;
-
-export { Progress, ProgressFilledTrack, VStack, Box, Heading };
diff --git a/example/storybook-v7/src/components/Progress/index.nw.stories.mdx b/example/storybook-v7/src/components/Progress/index.nw.stories.mdx
deleted file mode 100644
index 1e9aa12cfc..0000000000
--- a/example/storybook-v7/src/components/Progress/index.nw.stories.mdx
+++ /dev/null
@@ -1,337 +0,0 @@
----
-title: gluestack-ui Progress Component | Installation, Usage, and API
-
-description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
-
-pageTitle: Progress
-
-pageDescription: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-
-import { Progress, ProgressFilledTrack, VStack, Box, Heading } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Text,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Progress** component.
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Wrapper, Progress, ProgressFilledTrack },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
- default: 'md',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add progress
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/progress
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/progress/index.tsx --%%
-```
-
-
-### 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 { Progress, ProgressFilledTrack } from '@/components/ui/progress';
-```
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Progress
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- number
-
-
- -
-
-
- {`It is used to set the progress of the progress bar`}
-
-
-
-
-
->
-
-#### ProgressFilledTrack
-
-It also 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 Fab 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 [WAI-ARIA design pattern](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role).
-
-#### Keyboard
-
-- Tab: Moves focus to the next focusable element.
-
-#### Screen Reader
-
-- VoiceOver: When the Progress is focused, the screen reader will announce it's a progress and it's current progress indicator.
-
-### Props
-
-Progress 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).
-
-#### Progress
-
-<>
-
-
-
->
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
-
-#### Value
-
-Progress component with value
-
-
-
- Downloading 55%
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Progress,
- ProgressFilledTrack,
- VStack,
- Text,
- Box,
- },
- argsType: {},
- }}
- />
-
-
-#### Color
-
-You can add track color to progress bar as per our needs.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Progress,
- ProgressFilledTrack,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom
-
-You can customize the progress bar. Below is the example where we have change the theme of progress bar.
-
-
-
- Internal Storage
-
- 14GB
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Progress,
- ProgressFilledTrack,
- VStack,
- Heading,
- Text,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Progress/index.themed.stories.mdx b/example/storybook-v7/src/components/Progress/index.themed.stories.mdx
deleted file mode 100644
index c4ca93f1b9..0000000000
--- a/example/storybook-v7/src/components/Progress/index.themed.stories.mdx
+++ /dev/null
@@ -1,348 +0,0 @@
----
-title: gluestack-ui Progress Component | Installation, Usage, and API
-
-description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
-
-pageTitle: Progress
-
-pageDescription: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import {
- Progress,
- ProgressFilledTrack,
- VStack,
- Box,
- Heading,
- Text
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-
-
-This is an illustration of **Progress** component.
-
-<>
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Wrapper, Progress, ProgressFilledTrack },
- argsType: {
- size: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
- default: 'md',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add progress
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/progress
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/progress/index.tsx --%%
-```
-
-
-### 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 { Progress, ProgressFilledTrack } from '@/components/ui/progress';
-```
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Progress
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- number
-
-
- -
-
-
- {`It is used to set the progress of the progress bar`}
-
-
-
-
-
->
-
-#### ProgressFilledTrack
-
-It also 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 Fab 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 [WAI-ARIA design pattern](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role).
-
-#### Keyboard
-
-- Tab: Moves focus to the next focusable element.
-
-#### Screen Reader
-
-- VoiceOver: When the Progress is focused, the screen reader will announce it's a progress and it's current progress indicator.
-
-
-
-
-### 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.
-
-#### Value
-
-Progress component with value
-
-
-
- Downloading 55%
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Progress,
- ProgressFilledTrack,
- VStack,
- Text,
- Box,
- },
- argsType: {},
- }}
- />
-
-
-#### Color
-
-You can add track color to progress bar as per our needs.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Progress,
- ProgressFilledTrack,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom
-
-You can customize the progress bar. Below is the example where we have change the theme of progress bar.
-
-
-
- Internal Storage
-
- 14GB
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Progress,
- ProgressFilledTrack,
- VStack,
- Heading,
- Text,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Radio/Radio.png b/example/storybook-v7/src/components/Radio/Radio.png
deleted file mode 100644
index e7494b79bc..0000000000
Binary files a/example/storybook-v7/src/components/Radio/Radio.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Radio/Radio.stories.tsx b/example/storybook-v7/src/components/Radio/Radio.stories.tsx
deleted file mode 100644
index a976854593..0000000000
--- a/example/storybook-v7/src/components/Radio/Radio.stories.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Radio from './Radio';
-
-const RadioMeta: ComponentMeta = {
- title: 'stories/Radio',
- component: Radio,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- },
- isInvalid: {
- type: 'boolean',
- options: [true, false],
- },
- isDisabled: {
- type: 'boolean',
- options: [true, false],
- },
- isHovered: {
- type: 'boolean',
- options: [true, false],
- },
- isFocusVisible: {
- type: 'boolean',
- options: [true, false],
- },
- isReadOnly: {
- type: 'boolean',
- figmaIgnore: true,
- options: [true, false],
- },
- },
- args: {
- size: 'md',
- isInvalid: false,
- isDisabled: false,
- isReadOnly: false,
- isHovered: false,
- isFocusVisible: false,
- },
-};
-
-export default RadioMeta;
-
-export { Radio };
diff --git a/example/storybook-v7/src/components/Radio/Radio.tsx b/example/storybook-v7/src/components/Radio/Radio.tsx
deleted file mode 100644
index f1eed53d00..0000000000
--- a/example/storybook-v7/src/components/Radio/Radio.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react';
-import {
- Center,
- VStack,
- HStack,
- Box,
- Heading,
- Text,
- FormControl,
- CircleIcon,
-} from '@gluestack-ui/themed';
-import {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
-} from '@/components/ui/radio';
-
-const RadioBasic = ({ ...props }: any) => {
- const [values, setValues] = React.useState('Label 1');
-
- return (
-
- console.log(nextValue, 'nextValue')}
- gap="$2"
- >
-
-
-
- Label 1
-
- console.log(nextValue, 'nextValue')}
- gap="$2"
- >
-
-
-
- Label 2
-
-
- );
-};
-
-RadioBasic.description =
- 'This is a basic Radio component example. Radio buttons are used to select a single option from a list of options.';
-
-export default RadioBasic;
-
-export {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- Center,
- VStack,
- HStack,
- Box,
- Heading,
- Text,
- FormControl,
-};
diff --git a/example/storybook-v7/src/components/Radio/RadioGroup.tsx b/example/storybook-v7/src/components/Radio/RadioGroup.tsx
deleted file mode 100644
index 065c24c82c..0000000000
--- a/example/storybook-v7/src/components/Radio/RadioGroup.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-/* eslint-disable no-console */
-import { CircleIcon } from '@gluestack-ui/themed';
-import {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
-} from '@/components/ui/radio';
-
-const RadioGroupBasic = ({
- size,
- isDisabled = false,
- isInvalid = false,
- isReadOnly = false,
- ...props
-}: any) => {
- const [values, setValues] = React.useState('Label 1');
-
- return (
-
- console.log(nextValue, 'nextValue')}
- {...props}
- >
-
-
-
-
-
- Label 1
-
- console.log(nextValue, 'nextValue')}
- >
-
-
-
-
-
- Label 2
-
-
- console.log(isSelected, 'isSelected')
- }
- >
-
-
-
-
-
- Label 3
-
-
- );
-};
-
-RadioGroupBasic.description =
- 'This is a basic RadioGroup component example. RadioGroups are form elements that allow users to select one option from a set.';
-
-export default RadioGroupBasic;
diff --git a/example/storybook-v7/src/components/Radio/index.nw.stories.mdx b/example/storybook-v7/src/components/Radio/index.nw.stories.mdx
deleted file mode 100644
index 531606dc8f..0000000000
--- a/example/storybook-v7/src/components/Radio/index.nw.stories.mdx
+++ /dev/null
@@ -1,936 +0,0 @@
----
-title: gluestack-ui Radio Component | Installation, Usage, and API
-
-description: The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.
-
-pageTitle: Radio
-
-pageDescription: The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
-} from '../../core-components/nativewind';
-import { HStack, Box, Heading, CircleIcon, Center } from '../../core-components/nativewind';
-import { VStack, Text, FormControl } from '../../core-components/nativewind';
-import { useState, useRef } from 'react';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **Radio** component.
-
-
-
-
-
-
-
- Label
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- isInvalid: {
- control: 'boolean',
- },
- isDisabled: {
- control: 'boolean',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add radio
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/radio lucide-react-native
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/radio/index.tsx --%%
-```
-
-
-### 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 { Radio } from '@gluestack-ui/themed';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Radio
-
-Contains all Radio related layout style props and actions.
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used in the radio input. This is the value that will be returned on form submission.`}
-
-
-
-
-
- onChange
-
-
-
- function
-
-
- -
-
-
- {`Function called when the state of the radio changes.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the radio.`}
-
-
-
-
-
- isInvalid
-
-
-
- bool
-
-
- false
-
-
- {`To manually set invalid to the radio.`}
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the radio.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- bool
-
-
- false
-
-
- {`To manually set focus visible state to the radio.`}
-
-
-
-
-
- isIndeterminate
-
-
-
- bool
-
-
- false
-
-
- {`To manually set indeterminate to the radio.`}
-
-
-
-
-
-
-
-#### RadioIndicator
-
-Contains all Indicator related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### RadioIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-#### RadioLabel
-
-Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### RadioGroup
-
-Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- The value of the radio group.
-
-
-
-
-
- onChange
-
-
-
- function
-
-
- -
-
-
-
- The callback fired when any children Radio is checked or
- unchecked.
-
-
-
-
-
-
- isReadOnly
-
-
-
- bool
-
-
- false
-
-
- {`To manually set read-only to the radio group.`}
-
-
-
-
-
-
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-
-### Accessibility
-
-We have outlined the various features that ensure the Radio 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Space`: To check or uncheck focused radio.
-
-#### Screen Reader
-
-- VoiceOver: When the radio is focused, the screen reader will announce it's a radio and it's current state (check or uncheck) and it's label.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-#### States
-
-- In error state, `aria-invalid` will be passed to indicate that the radio input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
-- In disabled state, `aria-hidden` will be passed to make radio input not focusable.
-- In required state, `aria-required` will be passed to indicate that the radio input is required.
-
-### Props
-
-Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
-
-
-
-
-
-### 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.
-
-#### Multiple Radio
-
-Radio buttons provide a mutually exclusive selection mechanism, allowing users to choose a single option from a set of related choices.
-
-
-
-
-
-
-
-
- English
-
-
-
-
-
- French
-
-
-
-
-
- German
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Horizontal
-
-Radio buttons can be used horizontally.
-
-
-
-
-
-
-
-
- Credit Card
-
-
-
-
-
- Cash On Delivery
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- HStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### With help text
-
-Radio buttons can be used with helper text.
-
-
-
-
-
-
-
-
-
- Extended coverage
-
- Extra services included
-
-
-
-
-
-
- Basic coverage
-
- Nothing extra included
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- Box,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control
-
-Radio buttons can be used inside FormControl for better control of states and functionality.
-
-
-
-
-
- Which time slot works best for you?
-
-
-
-
-
-
-
- Monday
-
-
-
-
-
- Tuesday
-
-
-
-
-
- Wednesday
-
-
-
-
- Choose a time slot for the meeting
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Center,
- Text,
- CircleIcon,
- VStack,
- Heading,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- FormControl,
- },
- argsType: {},
- }}
- />
-
-
-#### Label left
-
-Radio buttons can be used horizontally
-
-
-
-
-
- Jane Cooper
-
-
-
-
-
- Wade Warren
-
-
-
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Controlled
-
-The Radio components can be used with a controlled state, enabling precise management of the selected option through external state management.
-
-
-
-
-
-
-
-
- Apartments
-
-
-
-
-
- Houses
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Uncontrolled
-
-The Radio components can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally.
-
-
- {
- e.preventDefault();
- const checkboxValue = radioRef.current.checked;
- };
- return (
-
-
-
-
-
-
- Hotels
-
-
-
-
-
- Living quarters
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- useRef,
- },
- argsType: {},
- }}
- />
-
-
-#### Radio group
-
-The Radio group component allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality.
-
-
-
-
-
-
-
-
- Label 1
-
-
-
-
-
- Label 2
-
-
-
-
-
- Label 3
-
-
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'RadioGroupExample');
- },
- scope: {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- VStack,
- Wrapper,
- Center,
- CircleIcon,
- useState,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Radio/index.themed.stories.mdx b/example/storybook-v7/src/components/Radio/index.themed.stories.mdx
deleted file mode 100644
index 3a5f23c0fb..0000000000
--- a/example/storybook-v7/src/components/Radio/index.themed.stories.mdx
+++ /dev/null
@@ -1,980 +0,0 @@
----
-title: gluestack-ui Radio Component | Installation, Usage, and API
-
-description: The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.
-
-pageTitle: Radio
-
-pageDescription: The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { useState, useRef } from 'react';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-import {
- Radio,
- RadioGroup,
- RadioIndicator,
- RadioLabel,
- RadioIcon,
- HStack,
- Box,
- Heading,
- CircleIcon,
- Center,
- VStack,
- Text,
- FormControl,
-} from '../../core-components/themed';
-
-This is an illustration of **Radio** component.
-
-<>
-
-
-
-
-
- Label
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- isInvalid: {
- control: 'boolean',
- },
- isDisabled: {
- control: 'boolean',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/radio lucide-react-native
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/themed/radio/index.tsx --%%
-```
-
-
-
-### 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 { Radio } from '@gluestack-ui/themed';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Radio
-
-Contains all Radio related layout style props and actions.
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used in the radio input. This is the value that will be returned on form submission.`}
-
-
-
-
-
- onChange
-
-
-
- function
-
-
- -
-
-
- {`Function called when the state of the radio changes.`}
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`To manually set disable to the radio.`}
-
-
-
-
-
- isInvalid
-
-
-
- bool
-
-
- false
-
-
- {`To manually set invalid to the radio.`}
-
-
-
-
-
- isHovered
-
-
-
- bool
-
-
- false
-
-
- {`To manually set hover to the radio.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- bool
-
-
- false
-
-
- {`To manually set focus visible state to the radio.`}
-
-
-
-
-
- isIndeterminate
-
-
-
- bool
-
-
- false
-
-
- {`To manually set indeterminate to the radio.`}
-
-
-
-
-
->
-
-#### RadioIndicator
-
-Contains all Indicator related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### RadioIcon
-
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
-
-#### RadioLabel
-
-Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### RadioGroup
-
-Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- The value of the radio group.
-
-
-
-
-
- onChange
-
-
-
- function
-
-
- -
-
-
-
- The callback fired when any children Radio is checked or
- unchecked.
-
-
-
-
-
-
- isReadOnly
-
-
-
- bool
-
-
- false
-
-
- {`To manually set read-only to the radio group.`}
-
-
-
-
-
->
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-
-### Accessibility
-
-We have outlined the various features that ensure the Radio 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Shift + Tab`: Moves focus to the previous focusable element.
-- `Space`: To check or uncheck focused radio.
-
-#### Screen Reader
-
-- VoiceOver: When the radio is focused, the screen reader will announce it's a radio and it's current state (check or uncheck) and it's label.
-
-#### Focus Management
-
-- The `onFocus` and `onBlur` props manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
-
-#### States
-
-- In error state, `aria-invalid` will be passed to indicate that the radio input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
-- In disabled state, `aria-hidden` will be passed to make radio input not focusable.
-- In required state, `aria-required` will be passed to indicate that the radio input is required.
-
-### Props
-
-Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Radio
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- lg | md | sm
-
-
- md
-
-
-
-
-
->
-
-### 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.
-
-#### Multiple Radio
-
-Radio buttons provide a mutually exclusive selection mechanism, allowing users to choose a single option from a set of related choices.
-
-
-
-
-
-
-
-
- English
-
-
-
-
-
- French
-
-
-
-
-
- German
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### Horizontal
-
-Radio buttons can be used horizontally.
-
-
-
-
-
-
-
-
- Credit Card
-
-
-
-
-
- Cash On Delivery
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- HStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- },
- argsType: {},
- }}
- />
-
-
-#### With help text
-
-Radio buttons can be used with helper text.
-
-
-
-
-
-
-
-
-
- Extended coverage
-
- Extra services included
-
-
-
-
-
-
- Basic coverage
-
- Nothing extra included
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- Box,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Control
-
-Radio buttons can be used inside FormControl for better control of states and functionality.
-
-
-
-
-
- Which time slot works best for you?
-
-
-
-
-
-
-
- Monday
-
-
-
-
-
- Tuesday
-
-
-
-
-
- Wednesday
-
-
-
-
- Choose a time slot for the meeting
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Center,
- Text,
- CircleIcon,
- VStack,
- Heading,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- FormControl,
- },
- argsType: {},
- }}
- />
-
-
-#### Label left
-
-Radio buttons can be used horizontally
-
-
-
-
-
- Jane Cooper
-
-
-
-
-
- Wade Warren
-
-
-
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Controlled
-
-The Radio components can be used with a controlled state, enabling precise management of the selected option through external state management.
-
-
-
-
-
-
-
-
- Apartments
-
-
-
-
-
- Houses
-
-
-
- )
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- useState,
- },
- argsType: {},
- }}
- />
-
-
-#### Uncontrolled
-
-The Radio components can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally.
-
-
- {
- e.preventDefault();
- const checkboxValue = radioRef.current.checked;
- };
- return (
-
-
-
-
-
-
- Hotels
-
-
-
-
-
- Living quarters
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- VStack,
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- CircleIcon,
- useRef,
- },
- argsType: {},
- }}
- />
-
-
-#### Radio group
-
-The Radio group component allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality.
-
-
-
-
-
-
-
-
- Label 1
-
-
-
-
-
- Label 2
-
-
-
-
-
- Label 3
-
-
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'RadioGroupExample');
- },
- scope: {
- Radio,
- RadioGroup,
- RadioIcon,
- RadioIndicator,
- RadioLabel,
- VStack,
- Wrapper,
- Center,
- CircleIcon,
- useState,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Select/Select.png b/example/storybook-v7/src/components/Select/Select.png
deleted file mode 100644
index 07394e1bf3..0000000000
Binary files a/example/storybook-v7/src/components/Select/Select.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Select/Select.stories.tsx b/example/storybook-v7/src/components/Select/Select.stories.tsx
deleted file mode 100644
index 8b634bdeb0..0000000000
--- a/example/storybook-v7/src/components/Select/Select.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import Select from './Select';
-import SelectSectionList from './SelectSectionList';
-import SelectScrollView from './SelectScrollView';
-import SelectFlatList from './SelectFlatList';
-import SelectVirtualizedList from './SelectVirtualizedList';
-import SelectFormControl from './SelectFormControl';
-
-import type { ComponentMeta } from '@storybook/react-native';
-
-const SelectMeta: ComponentMeta = {
- title: 'stories/Select',
- component: Select,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- },
- variant: {
- control: 'select',
- options: ['outline', 'underlined', 'rounded'],
- },
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- },
- isHovered: {
- control: 'boolean',
- options: [true, false],
- },
- isFocused: {
- control: 'boolean',
- options: [true, false],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- size: 'md',
- isDisabled: false,
- isInvalid: false,
- isHovered: false,
- isFocused: false,
- variant: 'outline',
- },
-};
-
-export default SelectMeta;
-
-export {
- Select,
- SelectSectionList,
- SelectScrollView,
- SelectFlatList,
- SelectVirtualizedList,
- SelectFormControl,
-};
diff --git a/example/storybook-v7/src/components/Select/Select.tsx b/example/storybook-v7/src/components/Select/Select.tsx
deleted file mode 100644
index 9b898fdaf5..0000000000
--- a/example/storybook-v7/src/components/Select/Select.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { Center } from '@/components/ui/center';
-import { Icon, ChevronDownIcon } from '@/components/ui/icon';
-import {
- Select,
- SelectIcon,
- SelectTrigger,
- SelectInput,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
-} from '@/components/ui/select';
-
-const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
- return (
-
- );
-};
-
-SelectBasic.description =
- 'This is a basic Select component example. Selects are used to select an option from a list of options.';
-
-export default SelectBasic;
-
-export {
- Center,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
-};
diff --git a/example/storybook-v7/src/components/Select/SelectFlatList.tsx b/example/storybook-v7/src/components/Select/SelectFlatList.tsx
deleted file mode 100644
index 5ba6a12e7d..0000000000
--- a/example/storybook-v7/src/components/Select/SelectFlatList.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useCallback } from 'react';
-
-import {
- Center,
- ChevronDownIcon,
- Select,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicator,
- SelectDragIndicatorWrapper,
- SelectIcon,
- SelectInput,
- SelectItem,
- SelectPortal,
- SelectFlatList,
- SelectTrigger,
- Icon,
-} from '@gluestack-ui/themed';
-
-const SelectWithFlatList = ({ isDisabled, isInvalid, ...props }: any) => {
- const DATA = [
- {
- id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
- title: 'First Item',
- },
- {
- id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
- title: 'Second Item',
- },
- {
- id: '58694a0f-3da1-471f-bd96-145571e29d72',
- title: 'Third Item',
- },
- ];
-
- const Item = useCallback(
- ({ title }: any) => ,
- []
- );
-
- return (
-
- );
-};
-
-SelectWithFlatList.description =
- 'This is an example of Select component with FlatList. Selects with flatlist can be used when you have a large number of options and you want to optimize the performance of the list by using FlatList.';
-
-export default SelectWithFlatList;
-
-export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook-v7/src/components/Select/SelectFormControl.tsx b/example/storybook-v7/src/components/Select/SelectFormControl.tsx
deleted file mode 100644
index 69ca9059fb..0000000000
--- a/example/storybook-v7/src/components/Select/SelectFormControl.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-
-import {
- Center,
- ChevronDownIcon,
- Select,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicator,
- SelectDragIndicatorWrapper,
- SelectIcon,
- SelectInput,
- SelectItem,
- SelectPortal,
- SelectTrigger,
- Icon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
-} from '@gluestack-ui/themed';
-
-const colors = [
- { label: 'Red', value: 'red-key' },
- { label: 'Blue', value: 'blue-key' },
- { label: 'Black', value: 'black-key' },
- { label: 'Pink', value: 'pink-key', isDisabled: true },
- { label: 'Green', value: 'green-key' },
-];
-const SelectWithFormControl = ({ size, variant, ...props }: any) => {
- const items = colors.map((c) => {
- return (
-
- );
- });
- const [selected, setSelected] = React.useState(colors[0]);
- return (
-
-
- Choose your favorite color
-
-
-
-
- You can only select one option
-
-
-
-
-
-
- Mandatory field
-
-
- );
-};
-
-SelectWithFormControl.description =
- 'This is a Select component example used with formcontrol to show error and helper text.';
-
-export default SelectWithFormControl;
-
-export {
- Center,
- Select,
- Icon,
- ChevronDownIcon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
-};
diff --git a/example/storybook-v7/src/components/Select/SelectScrollView.tsx b/example/storybook-v7/src/components/Select/SelectScrollView.tsx
deleted file mode 100644
index c2991f5d8d..0000000000
--- a/example/storybook-v7/src/components/Select/SelectScrollView.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-
-import {
- Center,
- ChevronDownIcon,
- Select,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicator,
- SelectDragIndicatorWrapper,
- SelectIcon,
- SelectInput,
- SelectItem,
- SelectPortal,
- SelectScrollView,
- SelectTrigger,
- Icon,
-} from '@gluestack-ui/themed';
-
-const SelectWithScrollView = ({ isDisabled, isInvalid, ...props }: any) => {
- // variables
- const data = useMemo(
- () =>
- Array(50)
- .fill(0)
- .map((_, index) => `Item ${index}`),
- []
- );
-
- const renderItem = useCallback(
- (item: any) => ,
- []
- );
-
- return (
-
- );
-};
-
-SelectWithScrollView.description =
- 'SelectWithScrollView is an example of how to use Select with list that uses ScrollView on native';
-
-export default SelectWithScrollView;
-
-export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook-v7/src/components/Select/SelectSectionList.tsx b/example/storybook-v7/src/components/Select/SelectSectionList.tsx
deleted file mode 100644
index 1b4b1217c3..0000000000
--- a/example/storybook-v7/src/components/Select/SelectSectionList.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useCallback } from 'react';
-
-import {
- Center,
- ChevronDownIcon,
- Select,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicator,
- SelectDragIndicatorWrapper,
- SelectIcon,
- SelectInput,
- SelectItem,
- SelectPortal,
- SelectSectionList,
- SelectSectionHeaderText,
- SelectTrigger,
- Icon,
-} from '@gluestack-ui/themed';
-
-const SelectWithSectionList = ({ isDisabled, isInvalid, ...props }: any) => {
- const DATA = [
- {
- title: 'Main dishes',
- data: ['Pizza', 'Burger', 'Risotto'],
- },
- {
- title: 'Sides',
- data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
- },
- {
- title: 'Drinks',
- data: ['Water', 'Coke', 'Beer'],
- },
- {
- title: 'Desserts',
- data: ['Cheese Cake', 'Ice Cream'],
- },
- ];
-
- const Item = useCallback(({ item }: any) => {
- return ;
- }, []);
-
- return (
-
- );
-};
-
-SelectWithSectionList.description =
- 'SelectWithSectionList is an example of how to use Select with list that uses SectionList on native';
-
-export default SelectWithSectionList;
-
-export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook-v7/src/components/Select/SelectVirtualizedList.tsx b/example/storybook-v7/src/components/Select/SelectVirtualizedList.tsx
deleted file mode 100644
index ff3d539cab..0000000000
--- a/example/storybook-v7/src/components/Select/SelectVirtualizedList.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-
-import {
- Center,
- ChevronDownIcon,
- Select,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicator,
- SelectDragIndicatorWrapper,
- SelectIcon,
- SelectInput,
- SelectItem,
- SelectPortal,
- SelectTrigger,
- SelectVirtualizedList,
- Icon,
-} from '@gluestack-ui/themed';
-
-const SelectWithVirtualizedList = ({
- isDisabled,
- isInvalid,
- ...props
-}: any) => {
- const getItem = (_data: any, index: number): any => ({
- id: Math.random().toString(12).substring(0),
- title: _data[index],
- });
-
- const getItemCount = (_data: any) => _data.length;
-
- const Item = useCallback(
- ({ title }: any) => ,
- []
- );
-
- const data = useMemo(
- () =>
- Array(50)
- .fill(0)
- .map((_, index) => `Item ${index + 1}`),
- []
- );
-
- return (
-
- );
-};
-
-SelectWithVirtualizedList.description =
- 'SelectWithVirtualizedList is an example of how to use Select with list that uses VirtualizedList on native';
-
-export default SelectWithVirtualizedList;
-
-export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook-v7/src/components/Select/index.nw.stories.mdx b/example/storybook-v7/src/components/Select/index.nw.stories.mdx
deleted file mode 100644
index e75ae020f7..0000000000
--- a/example/storybook-v7/src/components/Select/index.nw.stories.mdx
+++ /dev/null
@@ -1,725 +0,0 @@
----
-title: gluestack-ui Select | Installation, Usage, and API
-
-description: Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
-
-pageTitle: Select
-
-pageDescription: Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Select,
- SelectIcon,
- SelectTrigger,
- SelectInput,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
-} from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Tabs,
- InlineCode,
- CollapsibleCode,
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of **Select** component.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- },
- argsType: {
- variant: {
- control: 'select',
- options: ['rounded', 'outline', 'underlined'],
- default: 'outline',
- },
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- default: 'md',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add select
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/select
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/select/index.tsx --%%
-```
-
-
-### 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 { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicatorWrapper, SelectDragIndicator, SelectItem } from '@/components/ui/select';
-```
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Select
-
-Contains all Select related layout style and high-level select props.
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-> Note: Please note that this select component renders as an Actionsheet on `iOS` and `Android` devices for a native feel. On `web`, it behaves like a regular select element and renders the default HTML options.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select is disabled and cannot be edited.`}
-
-
-
-
-
- isInvalid
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays an error state.`}
-
-
-
-
-
- isRequired
-
-
-
- boolean
-
-
- false
-
-
- {`When true, sets aria-required="true" on the input.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays a hover state.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the focus ring of select will be visible.`}
-
-
-
-
-
- isFocused
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays a focus state.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select will close when the overlay is clicked.`}
-
-
-
-
-
- selectedValue
-
-
-
- boolean
-
-
- false
-
-
- {`Sets the currently selected option value, allowing the component to render with the corresponding option pre-selected.`}
-
-
-
-
-
- initialLabel
-
-
-
- string
-
-
- -
-
-
- {`Sets the initial selected Label for a select component.`}
-
-
-
-
-
- defaultValue
-
-
-
- boolean
-
-
- false
-
-
- {`Sets the initial selected option value for a select component.`}
-
-
-
-
-
- onOpen
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select Dropdown or Actionsheet is opened.`}
-
-
-
-
-
- onValueChange
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select value is changed.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select Dropdown or Actionsheet is closed.`}
-
-
-
-
-
->
-
-> Note: Please note that if you want to use `initialLabel` prop, then you also need to pass `defaultValue` or `selectedValue` prop, to select the option value for a select component.
-
-#### SelectTrigger
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-#### SelectInput
-
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
-
-#### SelectIcon
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-#### SelectPortal
-
-It is internally mapped wth gluestack-ui's [Actionsheet](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectBackdrop
-
-It is internally mapped wth gluestack-ui's [ActionsheetBackdrop](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### SelectContent
-
-It is internally mapped wth gluestack-ui's [ActionsheetContent](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this ActionSheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-#### SelectDragIndicatorWrapper
-
-It is internally mapped wth gluestack-ui's [ActionsheetDragIndicatorWrapper](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectDragIndicator
-
-It is internally mapped wth gluestack-ui's [ActionsheetDragIndicator](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectItem
-
-It internally uses gluestack-ui's [ActionsheetItem](https://ui.gluestack.io/docs/components/disclosure/actionsheet) and [Actionsheet.ItemText](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`When true, its disabled state activates.`}
-
-
-
-
-
- label
-
-
-
- string
-
-
- -
-
-
- {`setting label that displays to the user.`}
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used for the item. This is the value that will be returned on form submission.`}
-
-
-
-
-
->
-
-#### SelectScrollView
-
-It is internally mapped wth gluestack-ui's [Actionsheet.ScrollView](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview#props) component.
-
-#### SelectVirtualizedList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.VirtualizedList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist#props) component.
-
-#### SelectFlatList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.FlatList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist#props) component.
-
-#### SelectSectionList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist#props) component.
-
-#### SelectSectionHeaderText
-
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionHeaderText](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
-
-### Features
-
-- Support for native and web platforms separately.
-- Support for passing custom trigger.
-
-### Accessibility
-
-We have outlined the various features that ensure the Select 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 [WAI-ARIA design pattern](https://react-spectrum.adobe.com/react-aria/Selecthtml).
-
-#### Keyboard
-
-- `Tab + Space`: Triggers the select's action.
-
-#### Screen Reader
-
-- VoiceOver: When the select is focused, the screen reader will announce the select content.
-
-### Props
-
-Select 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.
-
-#### Select
-
-<>
-
-
-
->
-
-### 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.
-
-### Select FormControlled
-
-The Select component with FormControl example demonstrates how to manage its state using the FormControl component. This allows for easy integration with forms and form validation.
-
-
-
-
-
- Choose your favorite color
-
-
-
-
-
- You can only select one option
-
-
-
-
- Mandatory field
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Select/index.stories.mdx b/example/storybook-v7/src/components/Select/index.stories.mdx
deleted file mode 100644
index 1729fcd61b..0000000000
--- a/example/storybook-v7/src/components/Select/index.stories.mdx
+++ /dev/null
@@ -1,927 +0,0 @@
----
-title: Select | gluestack-ui | Installation, Usage, and API
-
-description: Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
-
-pageTitle: Select
-
-pageDescription: Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
-
-showHeader: true
-
-tag: beta
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Select,
- SelectIcon,
- SelectTrigger,
- SelectInput,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
-} from '../../core-components/themed';
-import {
- Icon,
- ChevronDownIcon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
-} from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Select** component.
-
-<>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- },
- argsType: {
- variant: {
- control: 'select',
- options: ['rounded', 'outline', 'underlined'],
- default: 'outline',
- },
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- default: 'md',
- },
- },
- }}
- />
->
-
-
-
-## API Reference
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { Select } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a Select component's various parts.
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Select
-
-Contains all Select related layout style and high-level select props.
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-> Note: Please note that this select component renders as an Actionsheet on `iOS` and `Android` devices for a native feel. On `web`, it behaves like a regular select element and renders the default HTML options.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select is disabled and cannot be edited.`}
-
-
-
-
-
- isInvalid
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays an error state.`}
-
-
-
-
-
- isRequired
-
-
-
- boolean
-
-
- false
-
-
- {`When true, sets aria-required="true" on the input.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays a hover state.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the focus ring of select will be visible.`}
-
-
-
-
-
- isFocused
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays a focus state.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select will close when the overlay is clicked.`}
-
-
-
-
-
- selectedValue
-
-
-
- boolean
-
-
- false
-
-
- {`Sets the currently selected option value, allowing the component to render with the corresponding option pre-selected.`}
-
-
-
-
-
- initialLabel
-
-
-
- string
-
-
- -
-
-
- {`Sets the initial selected Label for a select component.`}
-
-
-
-
-
- defaultValue
-
-
-
- boolean
-
-
- false
-
-
- {`Sets the initial selected option value for a select component.`}
-
-
-
-
-
- onOpen
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select Dropdown or Actionsheet is opened.`}
-
-
-
-
-
- onValueChange
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select value is changed.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select Dropdown or Actionsheet is closed.`}
-
-
-
-
-
->
-
-> Note: Please note that if you want to use `initialLabel` prop, then you also need to pass `defaultValue` or `selectedValue` prop, to select the option value for a select component.
-
-#### SelectTrigger
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### SelectInput
-
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
-
-#### SelectIcon
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-#### SelectPortal
-
-It is internally mapped wth gluestack-ui's [Actionsheet](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectBackdrop
-
-It is internally mapped wth gluestack-ui's [ActionsheetBackdrop](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### SelectContent
-
-It is internally mapped wth gluestack-ui's [ActionsheetContent](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this ActionSheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### SelectDragIndicatorWrapper
-
-It is internally mapped wth gluestack-ui's [ActionsheetDragIndicatorWrapper](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectDragIndicator
-
-It is internally mapped wth gluestack-ui's [ActionsheetDragIndicator](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectItem
-
-It internally uses gluestack-ui's [ActionsheetItem](https://ui.gluestack.io/docs/components/disclosure/actionsheet) and [Actionsheet.ItemText](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`When true, its disabled state activates.`}
-
-
-
-
-
- label
-
-
-
- string
-
-
- -
-
-
- {`setting label that displays to the user.`}
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used for the item. This is the value that will be returned on form submission.`}
-
-
-
-
-
->
-
-#### SelectScrollView
-
-It is internally mapped wth gluestack-ui's [Actionsheet.ScrollView](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview#props) component.
-
-#### SelectVirtualizedList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.VirtualizedList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist#props) component.
-
-#### SelectFlatList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.FlatList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist#props) component.
-
-#### SelectSectionList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist#props) component.
-
-#### SelectSectionHeaderText
-
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionHeaderText](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
-
-### Features
-
-- Support for native and web platforms separately.
-- Support for passing custom trigger.
-
-### Accessibility
-
-We have outlined the various features that ensure the Select 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 [WAI-ARIA design pattern](https://react-spectrum.adobe.com/react-aria/Selecthtml).
-
-#### Keyboard
-
-- `Tab + Space`: Triggers the select's action.
-
-#### Screen Reader
-
-- VoiceOver: When the select is focused, the screen reader will announce the select content.
-
-## Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-### Props
-
-Select 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Select
-
-<>
-
-
-
->
-
-### 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.
-
-### Select FormControlled
-
-The Select component with FormControl example demonstrates how to manage its state using the FormControl component. This allows for easy integration with forms and form validation.
-
-<>
-
-
-
- Choose your favorite color
-
-
-
-
-
- You can only select one option
-
-
-
-
- Mandatory field
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
- },
- 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/eject-library). The import names of components serve as keys to customize each component.
-
-
-
-## Spec Doc
-
-Explore the comprehensive details of the Select 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.
-
-
diff --git a/example/storybook-v7/src/components/Select/index.themed.stories.mdx b/example/storybook-v7/src/components/Select/index.themed.stories.mdx
deleted file mode 100644
index ee50e043a6..0000000000
--- a/example/storybook-v7/src/components/Select/index.themed.stories.mdx
+++ /dev/null
@@ -1,839 +0,0 @@
----
-title: gluestack-ui Select | Installation, Usage, and API
-
-description: Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
-
-pageTitle: Select
-
-pageDescription: Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Select,
- SelectIcon,
- SelectTrigger,
- SelectInput,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- FormControl,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlErrorIcon,
- FormControlErrorText,
- AlertCircleIcon,
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs,
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Select** component.
-
-<>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Select,
- SelectTrigger,
- SelectInput,
- SelectIcon,
- SelectPortal,
- SelectBackdrop,
- SelectContent,
- SelectDragIndicatorWrapper,
- SelectDragIndicator,
- SelectItem,
- Icon,
- ChevronDownIcon,
- },
- argsType: {
- variant: {
- control: 'select',
- options: ['rounded', 'outline', 'underlined'],
- default: 'outline',
- },
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- default: 'md',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add select
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/select
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/select/index.tsx --%%
-```
-
-
-### 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 { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicatorWrapper, SelectDragIndicator, SelectItem } from '@/components/ui/select';
-```
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Select
-
-Contains all Select related layout style and high-level select props.
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-> Note: Please note that this select component renders as an Actionsheet on `iOS` and `Android` devices for a native feel. On `web`, it behaves like a regular select element and renders the default HTML options.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select is disabled and cannot be edited.`}
-
-
-
-
-
- isInvalid
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays an error state.`}
-
-
-
-
-
- isRequired
-
-
-
- boolean
-
-
- false
-
-
- {`When true, sets aria-required="true" on the input.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays a hover state.`}
-
-
-
-
-
- isFocusVisible
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the focus ring of select will be visible.`}
-
-
-
-
-
- isFocused
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select displays a focus state.`}
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the select will close when the overlay is clicked.`}
-
-
-
-
-
- selectedValue
-
-
-
- boolean
-
-
- false
-
-
- {`Sets the currently selected option value, allowing the component to render with the corresponding option pre-selected.`}
-
-
-
-
-
- initialLabel
-
-
-
- string
-
-
- -
-
-
- {`Sets the initial selected Label for a select component.`}
-
-
-
-
-
- defaultValue
-
-
-
- boolean
-
-
- false
-
-
- {`Sets the initial selected option value for a select component.`}
-
-
-
-
-
- onOpen
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select Dropdown or Actionsheet is opened.`}
-
-
-
-
-
- onValueChange
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select value is changed.`}
-
-
-
-
-
- onClose
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when Select Dropdown or Actionsheet is closed.`}
-
-
-
-
-
->
-
-> Note: Please note that if you want to use `initialLabel` prop, then you also need to pass `defaultValue` or `selectedValue` prop, to select the option value for a select component.
-
-#### SelectTrigger
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### SelectInput
-
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
-
-#### SelectIcon
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-#### SelectPortal
-
-It is internally mapped wth gluestack-ui's [Actionsheet](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectBackdrop
-
-It is internally mapped wth gluestack-ui's [ActionsheetBackdrop](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which is React Native's [Pressable](https://reactnative.dev/docs/pressable) 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.
-
-#### SelectContent
-
-It is internally mapped wth gluestack-ui's [ActionsheetContent](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this ActionSheet component, you have the flexibility to use any declarative animation library that suits your needs.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
->
-
-#### SelectDragIndicatorWrapper
-
-It is internally mapped wth gluestack-ui's [ActionsheetDragIndicatorWrapper](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectDragIndicator
-
-It is internally mapped wth gluestack-ui's [ActionsheetDragIndicator](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SelectItem
-
-It internally uses gluestack-ui's [ActionsheetItem](https://ui.gluestack.io/docs/components/disclosure/actionsheet) and [Actionsheet.ItemText](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- {`When true, its disabled state activates.`}
-
-
-
-
-
- label
-
-
-
- string
-
-
- -
-
-
- {`setting label that displays to the user.`}
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The value to be used for the item. This is the value that will be returned on form submission.`}
-
-
-
-
-
->
-
-#### SelectScrollView
-
-It is internally mapped wth gluestack-ui's [Actionsheet.ScrollView](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview#props) component.
-
-#### SelectVirtualizedList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.VirtualizedList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist#props) component.
-
-#### SelectFlatList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.FlatList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist#props) component.
-
-#### SelectSectionList
-
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist#props) component.
-
-#### SelectSectionHeaderText
-
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionHeaderText](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
-
-### Features
-
-- Support for native and web platforms separately.
-- Support for passing custom trigger.
-
-### Accessibility
-
-We have outlined the various features that ensure the Select 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 [WAI-ARIA design pattern](https://react-spectrum.adobe.com/react-aria/Selecthtml).
-
-#### Keyboard
-
-- `Tab + Space`: Triggers the select's action.
-
-#### Screen Reader
-
-- VoiceOver: When the select is focused, the screen reader will announce the select content.
-
-### Props
-
-Select 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Select
-
-<>
-
-
-
->
-
-#### SliderTrack
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/Pressable) component.
-
-#### SliderFilledTrack
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SliderThumb
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-
-### Accessibility
-
-We have outlined the various features that ensure the Slider 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Right Arrow`: Increase the value of the slider by one step.
-- `Up Arrow`: Increase the value of the slider by one step.
-- `Left Arrow`: Decrease the value of the slider by one step.
-- `Down Arrow`: Decrease the value of the slider by one step.
-
-### Screen Reader
-
-- VoiceOver: When the slider is focused, the screen reader will announce the slider's value.
-
-### Props
-
-Slider 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).
-
-
diff --git a/example/storybook-v7/src/components/Slider/index.themed.stories.mdx b/example/storybook-v7/src/components/Slider/index.themed.stories.mdx
deleted file mode 100644
index 35fa0c1d21..0000000000
--- a/example/storybook-v7/src/components/Slider/index.themed.stories.mdx
+++ /dev/null
@@ -1,875 +0,0 @@
----
-title: gluestack-ui Slider Component | Installation, Usage, and API
-
-description: The Slider component enables an intuitive selection of values within a designated range. Users can easily adjust their selection by sliding a visual indicator along the track.
-
-pageTitle: Slider
-
-pageDescription: The Slider component enables an intuitive selection of values within a designated range. Users can easily adjust their selection by sliding a visual indicator along the track.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { useRef, useEffect, useState } from 'react';
-import {
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- HStack,
- Box,
- Center,
- VStack,
- Text,
- Icon,
- Heading,
- Tooltip,
- TooltipContent,
- Button,
- Slider
-} from '../../core-components/themed';
-import { Volume, Volume2Icon, LightbulbIcon } from 'lucide-react-native';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- InlineCode,
- Table,
- TableContainer,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Slider** component.
-
-<>
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Center,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- orientation: {
- control: 'select',
- options: ['vertical', 'horizontal'],
- default: 'horizontal',
- },
- isDisabled: {
- control: 'boolean',
- },
- isReversed: {
- control: 'boolean',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add slider
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/slider
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/slider/index.tsx --%%
-```
-
-
-### 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 { Slider } from '@/components/ui/slider';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Slider
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- onChange
-
-
-
- {'(value: number) => void'}
-
-
- -
-
-
-
- Function called when the state of the Slider changes.
-
-
-
-
-
-
- isDisabled
-
-
-
- bool
-
-
- false
-
-
- When true, this will disable Slider
-
-
-
-
-
- isReadOnly
-
-
-
- boolean
-
-
- false
-
-
-
- To manually set read-only to the checkbox.
-
-
-
-
-
-
- sliderTrackHeight
-
-
-
- number
-
-
- 8
-
-
- To change the slider track height .
-
-
-
-
-
- defaultValue
-
-
-
- number
-
-
- -
-
-
- To change the slider value .
-
-
-
-
-
- minValue
-
-
-
- number
-
-
- -
-
-
- The slider's minimum value
-
-
-
-
-
- maxValue
-
-
-
- number
-
-
- -
-
-
- The slider's maximum value.
-
-
-
-
-
- value
-
-
-
- number
-
-
- -
-
-
- The slider's current value.
-
-
-
-
-
- step
-
-
-
- number
-
-
- -
-
-
- The slider's step value.
-
-
-
-
-
->
-
-#### SliderTrack
-
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/Pressable) component.
-
-#### SliderFilledTrack
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### SliderThumb
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Features
-
-- Keyboard support for actions.
-- Support for hover, focus and active states.
-
-### Accessibility
-
-We have outlined the various features that ensure the Slider 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Right Arrow`: Increase the value of the slider by one step.
-- `Up Arrow`: Increase the value of the slider by one step.
-- `Left Arrow`: Decrease the value of the slider by one step.
-- `Down Arrow`: Decrease the value of the slider by one step.
-
-### Screen Reader
-
-- VoiceOver: When the slider is focused, the screen reader will announce the slider's value.
-
-### Props
-
-Slider 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Slider
-
-<>
-
-
-
->
-
-### 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.
-
-#### Slider with Orientation
-
-An example of the Slider component being used with the Slider with Orientation feature to customize the orientation of the slider, providing flexibility in the direction of sliding and input for numerical or adjustable values within a user interface.
-
-
- {
- setSliderValue(value);
- };
- return (
-
- {
- handleChange(value);
- }}>
-
-
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Box,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Center,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-#### Color scheme
-
-A Slider component with a color scheme adds visual styling and customization options, allowing the slider track and handle to be displayed in different colors, enhancing the aesthetic appeal and visual coherence of the slider within a user interface.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Center,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- VStack,
- Wrapper,
- },
- argsType: {},
- }}
- />
-
-
-#### With tooltip
-
-A Slider component with a tooltip displays a visual indicator or text overlay that provides real-time feedback on the selected value as users interact with the slider, improving usability and precision in inputting or adjusting numeric or continuous data within a user interface.
-
-
- {
- setSliderValue(value);
- };
- return (
-
- $0
- {
- return (
-
- )
- }}
- >
-
- {"$" + sliderValue}
-
-
- $60
-
-);
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Center,
- Volume,
- VStack,
- HStack,
- Volume2Icon,
- Text,
- Box,
- Tooltip,
- TooltipContent,
- Button,
- },
- argsType: {},
- }}
- />
-
-
-#### Form Controlled
-
-A Slider component with form-controlled behavior allows for seamless integration with a form's state management, enabling the slider value to be controlled and updated through a parent component's form state, providing a consistent and synchronized user experience for capturing and manipulating numeric or continuous data within a form.
-
-
- {
- setSliderValue(value);
- };
- return (
-
- Select the quantity
-
- {
- handleChange(value);
- }}>
-
-
-
-
-
-
- Slide the knob to select the number of products
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Center,
- LightbulbIcon,
- Icon,
- Text,
- VStack,
- Heading,
- },
- argsType: {},
- }}
- />
-
-
-#### Custom
-
-A custom Slider component with an icon incorporates a personalized design by combining a graphical symbol or icon with the slider interface, adding a unique visual element and enhancing the user experience when interacting with numeric or continuous data input in a user interface.
-
-
- {
- setSliderValue(value);
- };
- return (
-
- Brightness
-
- {
- handleChange(value);
- }}>
-
-
-
-
-
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- LightbulbIcon,
- Icon,
- Text,
- VStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Volume
-
-A Slider component used as a volume control allows users to adjust the audio volume by sliding the handle along the track, providing an intuitive and interactive way to control the sound output within a user interface.
-
-
- {
- setSliderValue(value);
- };
- return (
-
-
- current sliderValue - {sliderValue}
- onChangeEndValue - {onChangeEndValue}
-
-
-
-
-
-
-
- );
-}
-`,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Wrapper,
- Center,
- Slider,
- SliderTrack,
- SliderFilledTrack,
- SliderThumb,
- Center,
- Volume,
- VStack,
- HStack,
- Volume2Icon,
- Text,
- Box,
- },
- argsType: {},
- }}
- />
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Spinner/Spinner.png b/example/storybook-v7/src/components/Spinner/Spinner.png
deleted file mode 100644
index 585102015d..0000000000
Binary files a/example/storybook-v7/src/components/Spinner/Spinner.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Spinner/Spinner.stories.tsx b/example/storybook-v7/src/components/Spinner/Spinner.stories.tsx
deleted file mode 100644
index 8bfc089930..0000000000
--- a/example/storybook-v7/src/components/Spinner/Spinner.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Spinner from './Spinner';
-
-const SpinnerMeta: ComponentMeta = {
- title: 'stories/Spinner',
- component: Spinner,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['small', 'large'],
- description: 'The size of the spinner.',
- table: {
- defaultValue: { summary: 'small' },
- },
- },
- },
- args: {
- size: 'small',
- },
-};
-
-export default SpinnerMeta;
-
-export { Spinner };
diff --git a/example/storybook-v7/src/components/Spinner/Spinner.tsx b/example/storybook-v7/src/components/Spinner/Spinner.tsx
deleted file mode 100644
index 4baa6284d0..0000000000
--- a/example/storybook-v7/src/components/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Spinner } from '@/components/ui/spinner';
-import { HStack } from '@/components/ui/hstack';
-import { Text } from '@/components/ui/text';
-import { VStack } from '@/components/ui/vstack';
-import colors from 'tailwindcss/colors';
-
-const SpinnerBasic = ({ ...props }) => (
-
-);
-
-SpinnerBasic.description =
- 'This is a basic Spinner component example. Spinners are used to show a loading state of a component or page.';
-
-export default SpinnerBasic;
-
-export { Spinner, HStack, Text, VStack };
diff --git a/example/storybook-v7/src/components/Spinner/index.nw.stories.mdx b/example/storybook-v7/src/components/Spinner/index.nw.stories.mdx
deleted file mode 100644
index 74e4bd062e..0000000000
--- a/example/storybook-v7/src/components/Spinner/index.nw.stories.mdx
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: gluestack-ui Spinner Component | Installation, Usage, and API
-
-description: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
-
-pageTitle: Spinner
-
-pageDescription: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Spinner, HStack, VStack, Text } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview } from '@gluestack/design-system';
-import colors from 'tailwindcss/colors';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Spinner** component.
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Wrapper, Spinner, colors },
- argsType: {
- size: {
- control: 'select',
- options: ['small', 'large'],
- default: 'small',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add spinner
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/spinner
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/spinner/index.tsx --%%
-```
-
-
-### 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 { Spinner } from '@/components/ui/spinner';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Spinner
-
-Contains all Spinner related layout style props and actions.
-It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator) component.
-
-### Accessibility
-
-We have outlined the various features that ensure the Fab component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- Tab: Moves focus to the next focusable element.
-
-#### Screen Reader
-
-- VoiceOver: When the Spinner is focused, the screen reader will announce the loading indicator.
-
-### 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.
-
-#### Spinner with Label
-
-A Spinner component with a label provides informative text or a label alongside the spinner, offering descriptive context and improving user understanding and interaction with the spinner element within a user interface.
-
-
-
-
- Please Wait
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Spinner,
- HStack,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Color Scheme
-
-A Spinner component with a color scheme enhances visual appeal by incorporating distinct colors, adding a touch of customization and style to the spinner element within a user interface.
-
-
-
- {/* colors is imported from 'tailwindcss/colors' */}
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Spinner,
- VStack,
- colors,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Spinner/index.themed.stories.mdx b/example/storybook-v7/src/components/Spinner/index.themed.stories.mdx
deleted file mode 100644
index 59dcade8c6..0000000000
--- a/example/storybook-v7/src/components/Spinner/index.themed.stories.mdx
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: gluestack-ui Spinner Component | Installation, Usage, and API
-
-description: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
-
-pageTitle: Spinner
-
-pageDescription: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview ,CollapsibleCode, Tabs} from '@gluestack/design-system';
-import { Spinner, HStack, VStack, Text } from '../../core-components/themed';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-
-This is an illustration of **Spinner** component.
-
-<>
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Wrapper, Spinner },
- argsType: {
- size: {
- control: 'select',
- options: ['small', 'large'],
- default: 'small',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add spinner
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/spinner
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/spinner/index.tsx --%%
-```
-
-
-### 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 { Spinner } from '@/components/ui/spinner';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Spinner
-
-Contains all Spinner related layout style props and actions.
-It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator) component.
-
-### Accessibility
-
-We have outlined the various features that ensure the Fab component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- Tab: Moves focus to the next focusable element.
-
-#### Screen Reader
-
-- VoiceOver: When the Spinner is focused, the screen reader will announce the loading indicator.
-
-
-
-
-
-### 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.
-
-#### Spinner with Label
-
-A Spinner component with a label provides informative text or a label alongside the spinner, offering descriptive context and improving user understanding and interaction with the spinner element within a user interface.
-
-
-
-
- Please Wait
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Spinner,
- HStack,
- Text,
- },
- argsType: {},
- }}
- />
-
-
-#### Color Scheme
-
-A Spinner component with a color scheme enhances visual appeal by incorporating distinct colors, adding a touch of customization and style to the spinner element within a user interface.
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Spinner,
- VStack,
- },
- argsType: {},
- }}
- />
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Switch/Switch.png b/example/storybook-v7/src/components/Switch/Switch.png
deleted file mode 100644
index 5e705a7dab..0000000000
Binary files a/example/storybook-v7/src/components/Switch/Switch.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Switch/Switch.stories.tsx b/example/storybook-v7/src/components/Switch/Switch.stories.tsx
deleted file mode 100644
index 4bb1c74b83..0000000000
--- a/example/storybook-v7/src/components/Switch/Switch.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Switch from './Switch';
-
-const SwitchMeta: ComponentMeta = {
- title: 'stories/Switch',
- component: Switch,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- isEnabled: {
- control: 'boolean',
- options: [true, false],
- },
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- },
- defaultValue: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- size: 'md',
- isDisabled: false,
- isEnabled: false,
- isInvalid: false,
- defaultValue: false,
- },
-};
-
-export default SwitchMeta;
-
-export { Switch };
diff --git a/example/storybook-v7/src/components/Switch/Switch.tsx b/example/storybook-v7/src/components/Switch/Switch.tsx
deleted file mode 100644
index ed5b01cb40..0000000000
--- a/example/storybook-v7/src/components/Switch/Switch.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Switch } from '@/components/ui/switch';
-import colors from 'tailwindcss/colors';
-
-const SwitchBasic = ({ ...props }: any) => {
- return (
-
- );
-};
-
-SwitchBasic.description =
- 'This is a basic Switch component example. Switches are used to toggle between two states.';
-
-export default SwitchBasic;
-
-export { Switch };
diff --git a/example/storybook-v7/src/components/Switch/index.nw.stories.mdx b/example/storybook-v7/src/components/Switch/index.nw.stories.mdx
deleted file mode 100644
index 3144a0a2db..0000000000
--- a/example/storybook-v7/src/components/Switch/index.nw.stories.mdx
+++ /dev/null
@@ -1,396 +0,0 @@
----
-title: gluestack-ui Switch Component | Installation, Usage, and API
-
-description: The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion. This component is perfect for adding a touch of elegance and interactivity to your user interface.
-
-pageTitle: Switch
-
-pageDescription: The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion. This component is perfect for adding a touch of elegance and interactivity to your user interface.
-
-showHeader: true
----
-
-> The current component is functioning as expected, but we have decided to rebuild it entirely to align with our vision and enhance its performance. It is primarily based on React Native, and while we have made minimal modifications so far, our upcoming rebuild will involve significant changes to ensure it closely matches our desired structure and meets our objectives.
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import colors from 'tailwindcss/colors';
-import { HStack, Switch, VStack, Text } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-This is an illustration of **Switch** component.
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Wrapper, Switch, colors },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- isDisabled: {
- control: 'boolean',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
-```bash
-npx gluestack-ui add switch
-```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/switch
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/switch/index.tsx --%%
-```
-
-
-### 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 { Switch } from '@/components/ui/switch';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Switch
-
-Contains all switch related layout style props and actions.
-It inherits all the properties of React Native's [Switch](https://reactnative.dev/docs/switch) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the switch is disabled and cannot be toggled`}
-
-
-
-
-
- isInvalid
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the switch displays an error state.`}
-
-
-
-
-
- isRequired
-
-
-
- boolean
-
-
- false
-
-
- {`When true, sets aria-required="true" on the switch.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the switch displays a hover state.`}
-
-
-
-
-
- value
-
-
-
- boolean
-
-
- false
-
-
- {`The value of the switch. If true the switch will be turned on.`}
-
-
-
-
-
- defaultValue
-
-
-
- boolean
-
-
- false
-
-
- {`The defaultValue of the switch. If true the switch will be turned on initially.`}
-
-
-
-
-
- onToggle
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when switch value is changed.`}
-
-
-
-
-
->
-
-### Accessibility
-
-We have outlined the various features that ensure the Button 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Space`: Triggers the switch's action.
-
-### Screen Reader
-
-- VoiceOver: When the switch is focused, the screen reader will announce the switch's action and its current state.
-
-### Props
-
-Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props).
-
-#### Switch
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- sm | md | lg
-
-
- md
-
-
-
-
-
->
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
-
-#### Switch With Label
-
-An example of a switch component with a label, which includes another switch component for toggling additional options.
-
-
-
-
- Allow notifications
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Switch,
- Text,
- HStack,
- colors
- },
- argsType: {},
- }}
- />
-
-
-#### Checked State
-
-An example of a switch component used within a checked state component to represent a pre-selected or activated option.
-
-
-
-
- Public profile
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Switch,
- Text,
- HStack,
- colors,
- },
- argsType: {},
- }}
- />
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Switch/index.themed.stories.mdx b/example/storybook-v7/src/components/Switch/index.themed.stories.mdx
deleted file mode 100644
index 464f2f5b4e..0000000000
--- a/example/storybook-v7/src/components/Switch/index.themed.stories.mdx
+++ /dev/null
@@ -1,467 +0,0 @@
----
-title: gluestack-ui Switch Component | Installation, Usage, and API
-
-description: The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion. This component is perfect for adding a touch of elegance and interactivity to your user interface.
-
-pageTitle: Switch
-
-pageDescription: The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion. This component is perfect for adding a touch of elegance and interactivity to your user interface.
-
-showHeader: true
----
-
-> The current component is functioning as expected, but we have decided to rebuild it entirely to align with our vision and enhance its performance. It is primarily based on React Native, and while we have made minimal modifications so far, our upcoming rebuild will involve significant changes to ensure it closely matches our desired structure and meets our objectives.
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import { Switch, VStack, Text, HStack } from '../../core-components/themed';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Switch** component.
-
-<>
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Wrapper, Switch },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg'],
- default: 'md',
- },
- isDisabled: {
- control: 'boolean',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
-```bash
-npx gluestack-ui add switch
-```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/switch
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/switch/index.tsx --%%
-```
-
-
-### 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 { Switch } from '@/components/ui/switch';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Switch
-
-Contains all switch related layout style props and actions.
-It inherits all the properties of React Native's [Switch](https://reactnative.dev/docs/switch) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the switch is disabled and cannot be toggled`}
-
-
-
-
-
- isInvalid
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the switch displays an error state.`}
-
-
-
-
-
- isRequired
-
-
-
- boolean
-
-
- false
-
-
- {`When true, sets aria-required="true" on the switch.`}
-
-
-
-
-
- isHovered
-
-
-
- boolean
-
-
- false
-
-
- {`When true, the switch displays a hover state.`}
-
-
-
-
-
- value
-
-
-
- boolean
-
-
- false
-
-
- {`The value of the switch. If true the switch will be turned on.`}
-
-
-
-
-
- defaultValue
-
-
-
- boolean
-
-
- false
-
-
- {`The defaultValue of the switch. If true the switch will be turned on initially.`}
-
-
-
-
-
- onToggle
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Callback to be invoked when switch value is changed.`}
-
-
-
-
-
->
-
-### Accessibility
-
-We have outlined the various features that ensure the Button 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
-
-#### Keyboard
-
-- `Tab`: Moves focus to the next focusable element.
-- `Space`: Triggers the switch's action.
-
-### Screen Reader
-
-- VoiceOver: When the switch is focused, the screen reader will announce the switch's action and its current state.
-
-### Props
-
-Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Switch
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- size
-
-
-
- sm | md | lg
-
-
- md
-
-
-
-
-
->
-
-
-
-### 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.
-
-#### Switch With Label
-
-An example of a switch component with a label, which includes another switch component for toggling additional options.
-
-
-
-
- Allow notifications
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Switch,
- Text,
- HStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Checked State
-
-An example of a switch component used within a checked state component to represent a pre-selected or activated option.
-
-
-
-
- Public profile
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Switch,
- Text,
- HStack,
- },
- argsType: {},
- }}
- />
-
-
-#### Color scheme
-
-An example of a switch component being used with a different color scheme.
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Switch,
- Text,
- VStack,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Table/Table.stories.tsx b/example/storybook-v7/src/components/Table/Table.stories.tsx
deleted file mode 100644
index 31b9012901..0000000000
--- a/example/storybook-v7/src/components/Table/Table.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Table from './Table';
-import TableCaption from './TableCaption';
-import TableStripped from './TableStripped';
-import TableWithComponent from './TableWithComponent';
-import TableWithSideHeader from './TableWithSideHeader';
-
-const TableMeta: ComponentMeta = {
- title: 'stories/Table',
- component: Table,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Table component provides a flexible and customizable way to display tabular data, facilitating easy organization and presentation of information in various applications.`,
- },
-};
-
-export default TableMeta;
-
-export {
- Table,
- TableCaption,
- TableStripped,
- TableWithComponent,
- TableWithSideHeader,
-};
diff --git a/example/storybook-v7/src/components/Table/Table.tsx b/example/storybook-v7/src/components/Table/Table.tsx
deleted file mode 100644
index e4e511c9e3..0000000000
--- a/example/storybook-v7/src/components/Table/Table.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import {
- Table,
- TableBody,
- TableData,
- TableHead,
- TableHeader,
- TableRow,
- TableFooter,
-} from '@/components/ui/table';
-
-const TableBasic = () => {
- return (
-
-
- );
-};
-
-export default TableWithSideHeaderExample;
diff --git a/example/storybook-v7/src/components/Table/index.nw.stories.mdx b/example/storybook-v7/src/components/Table/index.nw.stories.mdx
deleted file mode 100644
index 1de9c41f24..0000000000
--- a/example/storybook-v7/src/components/Table/index.nw.stories.mdx
+++ /dev/null
@@ -1,795 +0,0 @@
----
-title: gluestack-ui Table Component | Installation, Usage, and API
-
-description: The Table component provides a flexible and customizable way to display tabular data, facilitating easy organization and presentation of information in various applications.
-
-pageTitle: Table
-
-pageDescription: The Table component provides a flexible and customizable way to display tabular data, facilitating easy organization and presentation of information in various applications.
-
-showHeader: true
-
-tag: alpha
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Table,
- TableBody,
- TableData,
- TableHead,
- TableHeader,
- TableRow,
- TableFooter,
- TableCaption,
- Badge,
- BadgeText,
- ScrollView,
- Box,
-} from '../../core-components/nativewind';
-import {
- AppProvider,
- CodePreview,
- Table as DSTable,
- TableContainer,
- InlineCode,
- Tabs,
- CollapsibleCode,
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of a **Table** component.
-
-
-
-
-
- Customer Name
- Units
- Costs
-
-
-
-
- Rajesh Kumar
- 10
- $130
-
-
- Priya Sharma
- 12
- $210
-
-
- Ravi Patel
- 6
- $55
-
-
- Ananya Gupta
- 18
- $340
-
-
- Arjun Singh
- 2
- $35
-
-
-
-
- Total
- 48
- $770
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Table,
- TableBody,
- TableData,
- TableHead,
- TableHeader,
- TableRow,
- TableFooter,
- ScrollView,
- Wrapper,
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add table
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
- ```bash
- npm i @expo/html-elements
- ```
-
-### Step 2: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/table/index.tsx --%%
-```
-
-
-> Note: **Step 3 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 4 directly if you don't have this requirement.**
-
-### Step 3(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/table/index.web.tsx --%%
-```
-
-
-
-### Step 4: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/table/styles.tsx --%%
-```
-
-
-### Step 5: 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 {
- Table,
- TableHeader,
- TableFooter,
- TableBody,
- TableHead,
- TableData,
- TableRow,
- TableCaption,
- } from '@/components/ui/table';
-```
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Table
-
-It inherits all the properties of of @expo/html-elements's [Table](https://www.npmjs.com/package/@expo/html-elements#table) on native and html table tag on web.
-
-#### TableHeader
-
-It inherits all the properties of of @expo/html-elements's [THead](https://www.npmjs.com/package/@expo/html-elements#thead) on native and html thead tag on web.
-
-#### TableRow
-
-It inherits all the properties of of @expo/html-elements's [TR](https://www.npmjs.com/package/@expo/html-elements#tr) on native and html tr tag on web.
-
-#### TableData
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component on native and html td tag on web.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
-
-
-
-
-
- useRNView
-
-
-
- boolean
-
-
-
- If true renders a react-native view component instead of a text
- component.
-
-
-
-
-
-
->
-
-#### TableHead
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component on native and html th tag on web.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
-
-
-
-
-
- useRNView
-
-
-
- boolean
-
-
-
- If true renders a react-native view component instead of a text
- component.
-
-
-
-
-
-
->
-
-
-#### TableBody
-
-It inherits all the properties of of @expo/html-elements's [TBody](https://www.npmjs.com/package/@expo/html-elements#tbody) on native and html tbody tag on web.
-
-#### TableFooter
-
-It inherits all the properties of of @expo/html-elements's [TFoot](https://www.npmjs.com/package/@expo/html-elements#tfoot) on native and html tfoot tag on web.
-
-#### TableCaption
-
-It inherits all the properties of of @expo/html-elements's [Caption](https://www.npmjs.com/package/@expo/html-elements#caption) on native and html caption tag on web.
-
-## 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.
-
-### Table with caption
-
-This is an example of a Table component with a caption.
-
-
-
-
-
-);
-}
-`,
-transformCode: (code) => {
-return transformedCode(code, 'function', 'App');
-},
-scope: {
- Table,
- TableBody,
- TableData,
- TableHead,
- TableHeader,
- TableRow,
- Box,
-Wrapper,
-},
-}}
-/>
-
-
diff --git a/example/storybook-v7/src/components/Table/index.themed.stories.mdx b/example/storybook-v7/src/components/Table/index.themed.stories.mdx
deleted file mode 100644
index 139597f9cb..0000000000
--- a/example/storybook-v7/src/components/Table/index.themed.stories.mdx
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/example/storybook-v7/src/components/Tabs/index.stories.mdx b/example/storybook-v7/src/components/Tabs/index.stories.mdx
deleted file mode 100644
index a4f0c18f85..0000000000
--- a/example/storybook-v7/src/components/Tabs/index.stories.mdx
+++ /dev/null
@@ -1,388 +0,0 @@
----
-title: Tabs | gluestack-ui | Installation, Usage, and API
-
-description: The Tabs component organizes content into multiple sections with tab-based navigation for easy switching between different views.
-
-pageTitle: Tabs
-
-pageDescription: The Tabs component organizes content into multiple sections with tab-based navigation for easy switching between different views.
-
-showHeader: true
-
-tag: api-draft
----
-
-import { Meta } from '@storybook/addon-docs';
-import { Table, TableContainer, InlineCode } from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-
-
-## Anatomy
-
-The structure provided below can help you identify and understand a Tabs component's various parts.
-
-```jsx
-export default () => (
-
-
-
-
-
-
-
-
-
-
-);
-```
-
-## API Reference
-
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
-
-#### Tabs
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- defaultValue
-
-
-
- string
-
-
- -
-
-
- {`The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.`}
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`The controlled value of the tab to activate. Should be used in conjunction with onValueChange.`}
-
-
-
-
-
- onValueChange
-
-
-
- function
-
-
- -
-
-
- {`Event handler called when the value changes`}
-
-
-
-
-
- orientation
-
-
-
- "horizontal" | "vertical"
-
-
- "horizontal"
-
-
- {`The orientation of the tabs.`}
-
-
-
-
-
->
-
-#### TabsList
-
-Contains the triggers that are aligned along the edge of the active content.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- loop
-
-
-
- boolean
-
-
- true
-
-
- {`When true, keyboard navigation will loop from last tab to first, and vice versa.`}
-
-
-
-
-
->
-
-#### TabsTrigger
-
-The button that activates its associated content. Must be wrapped with `TabsList`.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`A unique value that associates the trigger with a content.`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`When true, prevents the user from interacting with the tab.`}
-
-
-
-
-
->
-
-#### TabsText
-
-Must be wrapped with `TabsTrigger`. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-#### TabsContents
-
-Wraps all the `TabsContent` components. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-#### TabsContent
-
-Contains the content associated with each trigger. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- value
-
-
-
- string
-
-
- -
-
-
- {`A unique value that associates the content with a trigger.`}
-
-
-
-
-
->
-
-## Accessibility
-
-Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
-
-We have outlined the various features that ensure the Tabs component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-- The element that serves as the container for the set of tabs has role `tablist`.
-- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.
-- Each element that contains the content panel for a tab has role `tabpanel`.
-- If the tab list has a visible label, the element with role `tablist` has `aria-labelledby` set to a value that refers to the labelling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
-- Each element with role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
-- The active tab element has the state `aria-selected` set to true and all other tab elements have it set to `false`.
-- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
-- If the `tablist` element is vertically oriented, it has the property `aria-orientation` set to `vertical`. The default value of aria-orientation for a tablist element is horizontal.
-
-### Keyboard Interactions
-
-- `Space or Enter` - Activates the tab if it was not activated automatically on focus.
-- `Tab` - When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
-- `ArrowDown` - Moves focus to the next trigger depending on `orientation` and activates its associated content.
-- `ArrowUp` - Moves focus to the previous trigger depending on `orientation` and activates its associated content.
-- `ArrowRight` - Moves focus to the next trigger depending on `orientation` and activates its associated content.
-- `ArrowLeft` - Moves focus to the previous trigger depending on `orientation` and activates its associated content.
-- `Home` - Moves focus to the first trigger and activates its associated content.
-- `End` - Moves focus to the last trigger and activates its associated content.
-
-## Unstyled
-
-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 Tabs
-
-We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
-
-You can read more on how to animate components [here](/ui/docs/advanced/animations).
-
-### Usage
-
-Default styling of all these components can be found in the `components/core/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Tabs) of the styled `Tabs` components.
-
-```jsx
-// import the styled components
-
-import {
- Root,
- List,
- Trigger,
- Content,
- Contents,
- Text,
-} from 'components/core/tabs/styled-components';
-
-// import the createTabs function
-import { createTabs } from '@gluestack-ui/tabs';
-
-// Understanding the API
-export const Tabs = createTabs({
- Root,
- List,
- Trigger,
- Content,
- Contents,
- Text,
-});
-
-// Using the tabs component
-export default () => (
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 2
-
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
-);
-```
diff --git a/example/storybook-v7/src/components/Text/Text.png b/example/storybook-v7/src/components/Text/Text.png
deleted file mode 100644
index 82d74b048e..0000000000
Binary files a/example/storybook-v7/src/components/Text/Text.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Text/Text.stories.tsx b/example/storybook-v7/src/components/Text/Text.stories.tsx
deleted file mode 100644
index 3257973a1e..0000000000
--- a/example/storybook-v7/src/components/Text/Text.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Text from './Text';
-// import TextSizes from './TextSizes';
-
-const TextMeta: ComponentMeta = {
- title: 'stories/Text',
- component: Text,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Text component, which supports paragraphs and other formatting options.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: [
- '2xs',
- 'xs',
- 'sm',
- 'md',
- 'lg',
- 'xl',
- '2xl',
- '3xl',
- '4xl',
- '5xl',
- '6xl',
- ],
- },
- fontWeight: {
- control: 'select',
- options: [
- 'hairline',
- 'thin',
- 'light',
- 'normal',
- 'medium',
- 'semibold',
- 'bold',
- 'extrabold',
- 'black',
- ],
- },
- },
- args: {
- text: 'Hello world',
- size: 'md',
- fontWeight: 'medium',
- },
-};
-
-export default TextMeta;
-
-export { Text };
-// export { TextSizes };
diff --git a/example/storybook-v7/src/components/Text/Text.tsx b/example/storybook-v7/src/components/Text/Text.tsx
deleted file mode 100644
index 1f0e351db8..0000000000
--- a/example/storybook-v7/src/components/Text/Text.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { Text } from '@/components/ui/text';
-
-const TextBasic = ({
- size = 'md',
- text = 'Hello world',
- fontWeight = 'bold',
- ...props
-}: any) => {
- const fontWeights = {
- hairline: 'font-hairline',
- thin: 'font-thin',
- light: 'font-light',
- normal: 'font-normal',
- medium: 'font-medium',
- semibold: 'font-semibold',
- bold: 'font-bold',
- extrabold: 'font-extrabold',
- black: 'font-black',
- };
-
- return (
-
- {text}
-
- );
-};
-
-TextBasic.description =
- 'This is a basic Text component example. Texts are used to show the content of a section or page.';
-
-export default TextBasic;
-
-export { Text };
diff --git a/example/storybook-v7/src/components/Text/TextSizes.tsx b/example/storybook-v7/src/components/Text/TextSizes.tsx
deleted file mode 100644
index 33745735a8..0000000000
--- a/example/storybook-v7/src/components/Text/TextSizes.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { Center, Text } from '@gluestack-ui/themed';
-
-const TextSizes = () => {
- const sizes = [
- '2xs',
- 'xs',
- 'sm',
- 'md',
- 'lg',
- 'xl',
- '2xl',
- '3xl',
- '4xl',
- '5xl',
- '6xl',
- ];
- return (
-
- {sizes.map((size: any) => (
- {size}
- ))}
-
- );
-};
-
-export default TextSizes;
diff --git a/example/storybook-v7/src/components/Text/index.nw.stories.mdx b/example/storybook-v7/src/components/Text/index.nw.stories.mdx
deleted file mode 100644
index 637fb3bf2e..0000000000
--- a/example/storybook-v7/src/components/Text/index.nw.stories.mdx
+++ /dev/null
@@ -1,434 +0,0 @@
----
-title: gluestack-ui Text Component | Installation, Usage, and API
-
-description: Looking to add text to your gluestack-ui project? Check out our text component, which supports paragraphs and other formatting options.
-
-pageTitle: Text
-
-pageDescription: Looking to add text to your gluestack-ui project? Check out our text component, which supports paragraphs and other formatting options.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Text, Center } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
-
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
-} from '@gluestack/design-system';
-
-This is an illustration of **Text** component.
-
-
-
- Hello World!
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Text,
- },
- argsType: { },
- }
-}
-/>
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add text
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/text/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/text/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/text/styles.tsx --%%
-```
-
-
-### Step 4: 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 { Text } from '@/components/ui/text';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Text
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-### Props
-
-Text component is created using Text component from react-native. It extends all the props supported by [React Native Text](https://reactnative.dev/docs/text#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Text
-
-<>
-
-
-
->
-
-### 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.
-
-#### Text Sizes
-
-Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, and `6xl` allowing users to adjust the button size based on their design needs.
-
-
-
- {sizes.map((size) => (
- {size}
- ))}
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: { Wrapper, Center, Text },
- argsType: {},
- }}
- />
-
-
-Text component also accepts some shorthands for basic quick styling.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- bold
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text bold.`}
-
-
-
-
-
- isTruncated
-
-
-
- boolean
-
-
- false
-
-
- {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`}
-
-
-
-
-
- italic
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text italic.`}
-
-
-
-
-
- underline
-
-
-
- boolean
-
-
- false
-
-
- {`Used underline the text.`}
-
-
-
-
-
- strikeThrough
-
-
-
- boolean
-
-
- false
-
-
- {`A horizontal line through the center of the text.`}
-
-
-
-
-
- highlight
-
-
-
- boolean
-
-
- false
-
-
- {`Used to highlight the text with a yellow background.`}
-
-
-
-
-
-
diff --git a/example/storybook-v7/src/components/Text/index.stories.mdx b/example/storybook-v7/src/components/Text/index.stories.mdx
deleted file mode 100644
index 2c97222ae7..0000000000
--- a/example/storybook-v7/src/components/Text/index.stories.mdx
+++ /dev/null
@@ -1,417 +0,0 @@
----
-title: Text | gluestack-ui | Installation, Usage, and API
-
-description: Looking to add text to your gluestack-ui project? Check out our text component, which supports paragraphs and other formatting options.
-
-pageTitle: Text
-
-pageDescription: Looking to add text to your gluestack-ui project? Check out our text component, which supports paragraphs and other formatting options.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Text } from './Text';
-import { Center } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
-} from '@gluestack/design-system';
-
-This is an illustration of **Text** component.
-
-<>
-
- Hello World!
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-
-
-## API Reference
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```jsx
-import { Text } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a Text component's various parts.
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Text
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-## Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-### Props
-
-Text component is created using Text component from react-native. It extends all the props supported by [React Native Text](https://reactnative.dev/docs/text#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Text
-
-<>
-
-
-
->
-
-### 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.
-
-#### Text Sizes
-
-Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, and `6xl` allowing users to adjust the button size based on their design needs.
-
-<>
-
- {sizes.map((size) => (
- {size}
- ))}
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: { Wrapper, Center, Text },
- argsType: {},
- }}
- />
->
-
-Text component also accepts some shorthands for basic quick styling.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- bold
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text bold.`}
-
-
-
-
-
- isTruncated
-
-
-
- boolean
-
-
- false
-
-
- {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`}
-
-
-
-
-
- italic
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text italic.`}
-
-
-
-
-
- underline
-
-
-
- boolean
-
-
- false
-
-
- {`Used underline the text.`}
-
-
-
-
-
- strikeThrough
-
-
-
- boolean
-
-
- false
-
-
- {`A horizontal line through the center of the text.`}
-
-
-
-
-
- highlight
-
-
-
- boolean
-
-
- false
-
-
- {`Used to highlight the text with a yellow background.`}
-
-
-
-
-
->
-
-## 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/eject-library). The import names of components serve as keys to customize each component.
-
-
diff --git a/example/storybook-v7/src/components/Text/index.themed.stories.mdx b/example/storybook-v7/src/components/Text/index.themed.stories.mdx
deleted file mode 100644
index e69853e8c9..0000000000
--- a/example/storybook-v7/src/components/Text/index.themed.stories.mdx
+++ /dev/null
@@ -1,415 +0,0 @@
----
-title: gluestack-ui Text Component | Installation, Usage, and API
-
-description: Looking to add text to your gluestack-ui project? Check out our text component, which supports paragraphs and other formatting options.
-
-pageTitle: Text
-
-pageDescription: Looking to add text to your gluestack-ui project? Check out our text component, which supports paragraphs and other formatting options.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { transformedCode } from '../../utils';
-import { Text, Center } from '../../core-components/themed';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Text** component.
-
-<>
-
- Hello World!
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Text,
- },
- argsType: {},
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add text
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/text/index.tsx --%%
-```
-
-
-### Step 2: 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 { Text } from '@/components/ui/text';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Text
-
-It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
-
-### Props
-
-Text component is created using Text component from react-native. It extends all the props supported by [React Native Text](https://reactnative.dev/docs/text#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Text
-
-<>
-
-
-
->
-
-### 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.
-
-#### Text Sizes
-
-Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, and `6xl` allowing users to adjust the button size based on their design needs.
-
-
-
- {sizes.map((size) => (
- {size}
- ))}
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: { Wrapper, Center, Text },
- argsType: {},
- }}
- />
-
-
-Text component also accepts some shorthands for basic quick styling.
-
-
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- bold
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text bold.`}
-
-
-
-
-
- isTruncated
-
-
-
- boolean
-
-
- false
-
-
- {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`}
-
-
-
-
-
- italic
-
-
-
- boolean
-
-
- false
-
-
- {`Used to make the text italic.`}
-
-
-
-
-
- underline
-
-
-
- boolean
-
-
- false
-
-
- {`Used underline the text.`}
-
-
-
-
-
- strikeThrough
-
-
-
- boolean
-
-
- false
-
-
- {`A horizontal line through the center of the text.`}
-
-
-
-
-
- highlight
-
-
-
- boolean
-
-
- false
-
-
- {`Used to highlight the text with a yellow background.`}
-
-
-
-
-
-
diff --git a/example/storybook-v7/src/components/Textarea/Textarea.png b/example/storybook-v7/src/components/Textarea/Textarea.png
deleted file mode 100644
index 0b866b5731..0000000000
Binary files a/example/storybook-v7/src/components/Textarea/Textarea.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Textarea/Textarea.stories.tsx b/example/storybook-v7/src/components/Textarea/Textarea.stories.tsx
deleted file mode 100644
index b150ad9cab..0000000000
--- a/example/storybook-v7/src/components/Textarea/Textarea.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Textarea from './Textarea';
-
-const TextareaMeta: ComponentMeta = {
- title: 'stories/Textarea',
- component: Textarea,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs.`,
- },
- argTypes: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- },
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- },
- isHovered: {
- control: 'boolean',
- options: [true, false],
- },
- isFocused: {
- control: 'boolean',
- options: [true, false],
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- },
- },
- args: {
- size: 'md',
- isInvalid: false,
- isHovered: false,
- isFocused: false,
- isDisabled: false,
- },
-};
-
-export default TextareaMeta;
-
-export { Textarea };
diff --git a/example/storybook-v7/src/components/Textarea/Textarea.tsx b/example/storybook-v7/src/components/Textarea/Textarea.tsx
deleted file mode 100644
index e646f0dc89..0000000000
--- a/example/storybook-v7/src/components/Textarea/Textarea.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {
- FormControl,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlLabel,
- FormControlLabelText,
-} from '@gluestack-ui/themed';
-
-import { Textarea, TextareaInput } from '@/components/ui/textarea';
-
-const TextareaBasic = ({ ...props }: any) => {
- return (
-
- );
-};
-
-TextareaBasic.description =
- 'This is a basic Textarea component example. Textareas are used to get multiline input from the user.';
-
-export default TextareaBasic;
-
-export {
- Textarea,
- TextareaInput,
- FormControl,
- FormControlHelper,
- FormControlHelperText,
- FormControlError,
- FormControlLabel,
- FormControlLabelText,
-};
diff --git a/example/storybook-v7/src/components/Textarea/index.nw.stories.mdx b/example/storybook-v7/src/components/Textarea/index.nw.stories.mdx
deleted file mode 100644
index 52bf138dc9..0000000000
--- a/example/storybook-v7/src/components/Textarea/index.nw.stories.mdx
+++ /dev/null
@@ -1,432 +0,0 @@
----
-title: gluestack-ui Textarea Component | Installation, Usage, and API
-
-description: The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs.
-
-pageTitle: Textarea
-
-pageDescription: The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- FormControl,
- FormControlError,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- Textarea,
- TextareaInput,
-} from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs,
- CollapsibleCode
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-This is an illustration of **Textarea** component.
-
-<>
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Textarea,
- TextareaInput,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- default: 'md',
- },
- isReadOnly: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add textarea
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/textarea
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/textarea/index.tsx --%%
-```
-
-
-### 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 { Textarea } from '@/components/ui/textarea';
-```
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Textarea
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
->
-
-#### TextareaInput
-
-Contains all TextInput related layout style props and actions.
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
-
-### Accessibility
-
-We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- setting the aria-label and aria-hint
-
-#### Screen Reader
-
-- VoiceOver: accessible and aria-label props to describe the input's purpose
-- `aria-traits` and `aria-hint` for the various states of the input, such as "double tap to edit"
-
-### Props
-
-Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below.
-
-#### Textarea
-
-<>
-
-
-
->
-
-#### TextareaInput
-
-Contains all TextInput related layout style props and actions.
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
-
-### Accessibility
-
-We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- setting the aria-label and aria-hint
-
-#### Screen Reader
-
-- VoiceOver: accessible and aria-label props to describe the input's purpose
-- `aria-traits` and `aria-hint` for the various states of the input, such as "double tap to edit"
-
-## Themed
-
-The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).
-
-### Props
-
-Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Textarea
-
-<>
-
-
-
->
-
-### 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.
-
-#### FormControl
-
-The Textarea Component can be incorporated within the FormControl.
-
-<>
-
-
-
- Write with me
-
-
-
-
-
- Start your story
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Textarea,
- TextareaInput,
- FormControl,
- FormControlError,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- },
- 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/eject-library). The import names of components serve as keys to customize each component.
-
-
-
-## Spec Doc
-
-Explore the comprehensive details of the Input 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.
-
-
diff --git a/example/storybook-v7/src/components/Textarea/index.themed.stories.mdx b/example/storybook-v7/src/components/Textarea/index.themed.stories.mdx
deleted file mode 100644
index 1ecba59d6e..0000000000
--- a/example/storybook-v7/src/components/Textarea/index.themed.stories.mdx
+++ /dev/null
@@ -1,432 +0,0 @@
----
-title: gluestack-ui Textarea Component | Installation, Usage, and API
-
-description: The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs.
-
-pageTitle: Textarea
-
-pageDescription: The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- FormControl,
- FormControlError,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- Textarea,
- TextareaInput,
-} from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- Tabs,
- CollapsibleCode
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Textarea** component.
-
-<>
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Textarea,
- TextareaInput,
- },
- argsType: {
- size: {
- control: 'select',
- options: ['sm', 'md', 'lg', 'xl'],
- default: 'md',
- },
- isReadOnly: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isInvalid: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- isDisabled: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add textarea
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/textarea
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/textarea/index.tsx --%%
-```
-
-
-### 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 { Textarea } from '@/components/ui/textarea';
-```
-
-```jsx
-export default () => (
-
-);
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Textarea
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
->
-
-#### TextareaInput
-
-Contains all TextInput related layout style props and actions.
-It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
-
-### Accessibility
-
-We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.
-
-#### Keyboard
-
-- setting the aria-label and aria-hint
-
-#### Screen Reader
-
-- VoiceOver: accessible and aria-label props to describe the input's purpose
-- `aria-traits` and `aria-hint` for the various states of the input, such as "double tap to edit"
-
-### Props
-
-Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Textarea
-
-<>
-
-
-
->
-
-### 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.
-
-#### FormControl
-
-The Textarea Component can be incorporated within the FormControl.
-
-
-
-
-
- Write with me
-
-
-
-
-
- Start your story
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Textarea,
- TextareaInput,
- FormControl,
- FormControlError,
- FormControlLabel,
- FormControlLabelText,
- FormControlHelper,
- FormControlHelperText,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/Toast/Basic.tsx b/example/storybook-v7/src/components/Toast/Basic.tsx
deleted file mode 100644
index c90c0ea555..0000000000
--- a/example/storybook-v7/src/components/Toast/Basic.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {
- Button,
- ButtonText,
- Toast,
- ToastTitle,
- useToast,
-} from '@gluestack-ui/themed';
-
-const ToastPlacement = ({ placement = 'top', ...props }: any) => {
- const toast = useToast();
- return (
-
- );
-};
-
-ToastPlacement.description =
- 'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page';
-
-export default ToastPlacement;
diff --git a/example/storybook-v7/src/components/Toast/DuplicateToastPrevent.tsx b/example/storybook-v7/src/components/Toast/DuplicateToastPrevent.tsx
deleted file mode 100644
index 8198e883f1..0000000000
--- a/example/storybook-v7/src/components/Toast/DuplicateToastPrevent.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import {
- Button,
- ButtonText,
- Toast,
- ToastTitle,
- useToast,
-} from '@gluestack-ui/themed';
-
-const ToastDuplicatePrevent = ({ placement = 'top', ...props }: any) => {
- const toast = useToast();
- const idTest = 'test-id';
- return (
-
- );
-};
-
-ToastDuplicatePrevent.description =
- 'This is an example for preventing duplicate toasts. Toasts are used to communicate a state that affects a system, feature or page';
-
-export default ToastDuplicatePrevent;
diff --git a/example/storybook-v7/src/components/Toast/Toast.png b/example/storybook-v7/src/components/Toast/Toast.png
deleted file mode 100644
index 4c1b60b5af..0000000000
Binary files a/example/storybook-v7/src/components/Toast/Toast.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Toast/Toast.stories.tsx b/example/storybook-v7/src/components/Toast/Toast.stories.tsx
deleted file mode 100644
index d63a3a94c9..0000000000
--- a/example/storybook-v7/src/components/Toast/Toast.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Toast from './Toast';
-import DuplicateToastPrevent from './DuplicateToastPrevent';
-
-const ToastMeta: ComponentMeta = {
- title: 'stories/Toast',
- component: Toast,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.`,
- },
- argTypes: {
- placement: {
- control: 'select',
- figmaIgnore: true,
- options: [
- 'top',
- 'top right',
- 'top left',
- 'bottom',
- 'bottom left',
- 'bottom right',
- ],
- },
- action: {
- control: 'select',
- options: ['error', 'warning', 'success', 'info', 'attention'],
- },
- variant: {
- control: 'select',
- options: ['solid', 'outline', 'accent'],
- },
- },
- args: {
- placement: 'bottom',
- action: 'attention',
- variant: 'solid',
- },
-};
-
-export default ToastMeta;
-
-export { Toast, DuplicateToastPrevent };
diff --git a/example/storybook-v7/src/components/Toast/Toast.tsx b/example/storybook-v7/src/components/Toast/Toast.tsx
deleted file mode 100644
index afe2148ee6..0000000000
--- a/example/storybook-v7/src/components/Toast/Toast.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import {
- Icon,
- CloseIcon,
- VStack,
- CheckIcon,
- Pressable,
- Center,
-} from '@gluestack-ui/themed';
-import {
- Toast,
- ToastTitle,
- ToastDescription,
- useToast,
-} from '@/components/ui/toast';
-import { Button, ButtonText } from '@/components/ui/button';
-import { MessageCircle, AlertTriangleIcon } from 'lucide-react-native';
-
-const ToastFigmaStory = ({ _placement = 'top', _colorMode, ...props }: any) => {
- return (
-
-
- Hello World Toast
-
- Please create a support ticket from the support page
-
-
-
-
-
-
- );
-};
-
-const ToastBasic = ({ placement = 'top', ...props }: any) => {
- const toast = useToast();
- return (
-
- );
-};
-
-ToastBasic.description =
- 'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page';
-
-export default ToastBasic;
-
-export {
- ToastFigmaStory,
- Toast,
- ToastTitle,
- ToastDescription,
- useToast,
- Icon,
- CloseIcon,
- VStack,
- CheckIcon,
- MessageCircle,
- AlertTriangleIcon,
- Button,
- ButtonText,
- Pressable,
- Center,
-};
diff --git a/example/storybook-v7/src/components/Toast/index.nw.stories.mdx b/example/storybook-v7/src/components/Toast/index.nw.stories.mdx
deleted file mode 100644
index a6c7925a74..0000000000
--- a/example/storybook-v7/src/components/Toast/index.nw.stories.mdx
+++ /dev/null
@@ -1,825 +0,0 @@
----
-title: gluestack-ui Toast Component | Installation, Usage, and API
-
-description: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
-
-pageTitle: Toast
-
-pageDescription: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Toast,
- ToastTitle,
- ToastDescription,
- useToast,
- Button,
- ButtonText,
- CheckIcon,
- MessageCircleIcon,
- Icon,
- CloseIcon,
- VStack,
- Pressable,
- Center,
-} from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- CollapsibleCode,
- Tabs,
-} from '@gluestack/design-system';
-import { View } from 'react-native';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { AlertTriangle } from 'lucide-react-native'
-
-This is an illustration of **Toast** component.
-
-<>
- {
- toast.show({
- placement:"top",
- render: ({ id }) => {
- const toastId = "toast-" + id;
- return (
-
-
- New Message
-
- Hey, just wanted to touch base and see how you're doing. Let's catch up soon!
-
-
-
- );
- },
- });
- }}
- >
- Press Me
-
- );
- };
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'Example');
- },
- scope: {
- Wrapper,
- Toast,
- ToastTitle,
- ToastDescription,
- useToast,
- Text,
- Button,
- ButtonText,
- VStack,
- },
- argsType: {
- action: {
- control: 'select',
- options: ['success', 'info', 'error', 'warning', 'attention'],
- default: 'attention',
- },
- variant: {
- control: 'select',
- options: ['accent', 'solid', 'outline'],
- default: 'solid',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add toast
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/toast
-
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/toast/index.tsx --%%
-```
-
-
-
-### 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 { useToast, Toast } from '@/components/ui/toast';
-```
-
-```jsx
-export default () => (
-
-
-
-
-);
-```
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### Toast
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- duration
-
-
-
- number or null
-
-
- 5000
-
-
- {`The delay before the toast hides (in milliseconds). If set to null, toast will never dismiss.`}
-
-
-
-
-
- onCloseComplete
-
-
-
- {`()=>{}`}
-
-
- -
-
-
- {`Callback function to run side effects after the toast has closed.`}
-
-
-
-
-
- placement
-
-
-
-
- 'top'| 'top right' | 'top left' | 'bottom' | 'bottom left' |
- 'bottom right'
-
-
-
- bottom
-
-
- Position of toast on the web page.
-
-
-
-
-
- render?: (props: any)
-
-
-
- ReactNode
-
-
- -
-
-
- Renders a toast component
-
-
-
-
-
- avoidKeyboard
-
-
-
- bool
-
-
- false
-
-
- {`If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.`}
-
-
-
-
-
- containerStyle
-
-
-
- ViewStyle
-
-
- -
-
-
- Container style object for the toast.
-
-
-
-
-
->
-
-#### ToastTitle
-
-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.
-
-#### ToastDescription
-
-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.
-
-### Accessibility
-
-We have outlined the various features that ensure the Toast 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
-
-#### Keyboard
-
-- `Tab + Enter`: Triggers the toast's action.
-
-#### Screen Reader
-
-- VoiceOver: When the toast is focused, the screen reader will announce the toast's title.
-
-### Props
-
-Toast 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.
-
-#### Toast
-
-<>
-
-
-
->
-
-#### ToastTitle
-
-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.
-
-#### ToastDescription
-
-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.
-
-### Accessibility
-
-We have outlined the various features that ensure the Toast 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 [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
-
-#### Keyboard
-
-- `Tab + Enter`: Triggers the toast's action.
-
-#### Screen Reader
-
-- VoiceOver: When the toast is focused, the screen reader will announce the toast's title.
-
-### Props
-
-Toast 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### Toast
-
-<>
-
-
-
->
-
-
\ No newline at end of file
diff --git a/example/storybook-v7/src/components/Tooltip/Tooltip.png b/example/storybook-v7/src/components/Tooltip/Tooltip.png
deleted file mode 100644
index 97177c41a4..0000000000
Binary files a/example/storybook-v7/src/components/Tooltip/Tooltip.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/Tooltip/Tooltip.stories.tsx b/example/storybook-v7/src/components/Tooltip/Tooltip.stories.tsx
deleted file mode 100644
index 084b78ca91..0000000000
--- a/example/storybook-v7/src/components/Tooltip/Tooltip.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import Tooltip from './Tooltip';
-
-const TooltipMeta: ComponentMeta = {
- title: 'stories/Tooltip',
- component: Tooltip,
- // metaInfo is required for figma generation
- // @ts-ignore
- metaInfo: {
- componentDescription: `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.`,
- },
- argTypes: {
- placement: {
- control: 'select',
- figmaIgnore: true,
- options: [
- 'bottom',
- 'bottom left',
- 'bottom right',
- 'top',
- 'top left',
- 'top right',
- 'left',
- 'left top',
- 'left bottom',
- 'right',
- 'right top',
- 'right bottom',
- ],
- },
- showTooltip: {
- control: 'boolean',
- figmaIgnore: true,
- options: [true, false],
- },
- },
- args: {
- text: 'Hello world',
- placement: 'bottom',
- showTooltip: true,
- },
-};
-
-export default TooltipMeta;
-
-export { Tooltip };
diff --git a/example/storybook-v7/src/components/Tooltip/Tooltip.tsx b/example/storybook-v7/src/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index dee82fdb80..0000000000
--- a/example/storybook-v7/src/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/tooltip';
-import { Button, ButtonText } from '@/components/ui/button';
-import { Edit, Command } from 'lucide-react-native';
-
-const TooltipBasic = ({
- showTooltip: showTooltipProp = true,
- placement = 'bottom',
- text = 'Hello world',
-}: any) => {
- 2;
- return (
- {
- return (
-
- );
- }}
- >
-
- {text}
-
-
- );
-};
-
-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 {
- TooltipBasic,
- Tooltip,
- TooltipContent,
- TooltipText,
- Button,
- ButtonText,
- Edit,
- Command,
-};
diff --git a/example/storybook-v7/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-v7/src/components/Tooltip/index.nw.stories.mdx
deleted file mode 100644
index 6916f6d86b..0000000000
--- a/example/storybook-v7/src/components/Tooltip/index.nw.stories.mdx
+++ /dev/null
@@ -1,645 +0,0 @@
----
-title: Tooltip | gluestack-ui | Installation, Usage, and API
-
-description: 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.
-
-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: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-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,
- Tabs
-} from '@gluestack/design-system';
-
-import Wrapper from '../../core-components/nativewind/Wrapper';
-
-import { Command } from 'lucide-react-native';
-
-This is an illustration of **Tooltip** component.
-
-<>
- {
- return (
-
- );
- }}
- >
-
- 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',
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add tooltip
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-
-```bash
-npm i @gluestack-ui/tooltip @legendapp/motion
-```
-> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.
-
-### Step 2: Copy and paste the following code into your project.
-
-
-
-```jsx
-%%-- File: core-components/nativewind/tooltip/index.tsx --%%
-```
-
-
-
-### 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 () => (
-
-
-
-
-
-);
-```
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- false
-
-
- {`Whether the tooltip is opened. Useful for controlling the open state.`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`Whether the tooltip is disabled.`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- false
-
-
- {`If true, the popover will be opened by default.`}
-
-
-
-
-
- onOpen
-
-
-
- {'() => void'}
-
-
- true
-
-
- {`This function will be invoked when the tooltip is opened.`}
-
-
-
-
-
- onClose
-
-
-
- {'() => void'}
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- openDelay
-
-
-
- {'number'}
-
-
- 0
-
-
- {`Duration in ms to wait till displaying the tooltip.`}
-
-
-
-
-
- closeDelay
-
-
-
- {'number'}
-
-
- 0
-
-
- {`Duration in ms to wait till hiding the tooltip.`}
-
-
-
-
-
- placement
-
-
-
- {`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`}
-
-
- bottom left
-
-
- {`Tooltip placement`}
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
-
- The content to display inside the tooltip.
-
-
-
-
-
-
- closeOnClick
-
-
-
- boolean
-
-
- true
-
-
-
- Whether tooltip should be closed on Trigger click.
-
-
-
-
-
-
- trigger
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`}
-
-
-
-
-
- offset
-
-
-
- number
-
-
- 10
-
-
-
- Distance between the trigger and the tooltip.
-
-
-
-
-
-
- crossOffset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the cross axis between the
- element and its trigger element.
-
-
-
-
-
-
- shouldOverlapWithTrigger
-
-
-
- boolean
-
-
- false
-
-
-
- Determines whether tooltip content should overlap with the
- trigger.
-
-
-
-
-
-
- shouldFlip
-
-
-
- boolean
-
-
- true
-
-
-
- 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.
-
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- true
-
-
- {`Closes tooltip when clicked outside.`}
-
-
-
-
-
->
-
-#### 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.
-
-
-
-
- {
- return (
-
- + 3
-
- )
- }}
- >
-
-
- View all members of this channel
-
- Includes John, Sarah, Mike, Emily
- and David
-
-
-
-
-
- Sandeep Srivastva
-
-
- Arjun Kapoor
-
-
- Ritik Sharma
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Avatar,
- AvatarGroup,
- AvatarFallbackText,
- Wrapper,
- HStack,
- Tooltip,
- TooltipContent,
- TooltipText,
- Text,
- Box,
- Heading,
- VStack,
- Center,
- },
- argsType: {},
- }}
- />
-
-
-#### 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.
-
-
-
- {
- return (
-
-
-
- )
- }}
- >
-
-
- New message
-
-
-
-
-
- N
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Avatar,
- AvatarFallbackText,
- Wrapper,
- HStack,
- Tooltip,
- TooltipContent,
- TooltipText,
- Text,
- Box,
- Heading,
- EditIcon,
- Command,
- Icon,
- },
- argsType: {},
- }}
- />
-
-
-
-
-
-
diff --git a/example/storybook-v7/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-v7/src/components/Tooltip/index.themed.stories.mdx
deleted file mode 100644
index e0edfdf0be..0000000000
--- a/example/storybook-v7/src/components/Tooltip/index.themed.stories.mdx
+++ /dev/null
@@ -1,674 +0,0 @@
----
-title: gluestack-ui Tooltip Component | Installation, Usage, and API
-
-description: 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.
-
-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: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- Tooltip,
- TooltipContent,
- TooltipText,
- Button,
- ButtonText,
- Avatar,
- AvatarGroup,
- AvatarFallbackText,
- HStack,
- Box,
- Heading,
- Center,
- VStack,
- Command,
- Icon,
- Text
-} from '../../core-components/themed';
-import { Edit } from 'lucide-react-native'
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import { Command } from "lucide-react-native";
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **Tooltip** component.
-
-
- {
- return (
-
- );
- }}
- >
-
- 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',
- },
- },
- }}
- />
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add tooltip
- ```
->
-
-
-<>
-
-### Step 1: Install the following dependencies:
-```bash
-npm i @gluestack-ui/tooltip
-```
-
-### Step 2: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/tooltip/index.tsx --%%
-```
-
-
-### 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 () => (
-
-
-
-
-
-);
-```
-
-### 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.
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- isOpen
-
-
-
- boolean
-
-
- false
-
-
- {`Whether the tooltip is opened. Useful for controlling the open state.`}
-
-
-
-
-
- isDisabled
-
-
-
- boolean
-
-
- false
-
-
- {`Whether the tooltip is disabled.`}
-
-
-
-
-
- defaultIsOpen
-
-
-
- boolean
-
-
- false
-
-
- {`If true, the popover will be opened by default.`}
-
-
-
-
-
- onOpen
-
-
-
- {'() => void'}
-
-
- true
-
-
- {`This function will be invoked when the tooltip is opened.`}
-
-
-
-
-
- onClose
-
-
-
- {'() => void'}
-
-
- -
-
-
- {`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.`}
-
-
-
-
-
- openDelay
-
-
-
- {'number'}
-
-
- 0
-
-
- {`Duration in ms to wait till displaying the tooltip.`}
-
-
-
-
-
- closeDelay
-
-
-
- {'number'}
-
-
- 0
-
-
- {`Duration in ms to wait till hiding the tooltip.`}
-
-
-
-
-
- placement
-
-
-
- {`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`}
-
-
- bottom left
-
-
- {`Tooltip placement`}
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
-
- The content to display inside the tooltip.
-
-
-
-
-
-
- closeOnClick
-
-
-
- boolean
-
-
- true
-
-
-
- Whether tooltip should be closed on Trigger click.
-
-
-
-
-
-
- trigger
-
-
-
- {`() => any`}
-
-
- -
-
-
- {`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`}
-
-
-
-
-
- offset
-
-
-
- number
-
-
- 10
-
-
-
- Distance between the trigger and the tooltip.
-
-
-
-
-
-
- crossOffset
-
-
-
- number
-
-
- -
-
-
-
- The additional offset applied along the cross axis between the
- element and its trigger element.
-
-
-
-
-
-
- shouldOverlapWithTrigger
-
-
-
- boolean
-
-
- false
-
-
-
- Determines whether tooltip content should overlap with the
- trigger.
-
-
-
-
-
-
- shouldFlip
-
-
-
- boolean
-
-
- true
-
-
-
- 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.
-
-
-
-
-
-
- closeOnOverlayClick
-
-
-
- boolean
-
-
- true
-
-
- {`Closes tooltip when clicked outside.`}
-
-
-
-
-
->
-
-#### 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.
-
-**Descendants Styling Props**
-Props to style child components.
-
-<>
-
-
-
-
->
-
-### 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.
-
-
-
-
- {
- return (
-
- + 3
-
- )
- }}
- >
-
-
- View all members of this channel
-
- Includes John, Sarah, Mike, Emily
- and David
-
-
-
-
- {avatars.map((avatar, index) => {
- return (
-
- {avatar.alt}
-
- );
- })}
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Avatar,
- AvatarGroup,
- AvatarFallbackText,
- Wrapper,
- HStack,
- Tooltip,
- TooltipContent,
- TooltipText,
- Text,
- Box,
- Heading,
- VStack,
- Center,
- },
- argsType: {},
- }}
- />
-
-
-#### 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.
-
-
-
- {
- return (
-
-
-
- )
- }}
- >
-
-
- New message
-
-
-
-
-
- N
-
-
-
-
-
-
- );
- }
- `,
- transformCode: (code) => {
- return transformedCode(code, 'function', 'App');
- },
- scope: {
- Avatar,
- AvatarFallbackText,
- Wrapper,
- HStack,
- Tooltip,
- TooltipContent,
- TooltipText,
- Text,
- Box,
- Heading,
- Edit,
- Command,
- Icon,
- },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/VStack/VStack.png b/example/storybook-v7/src/components/VStack/VStack.png
deleted file mode 100644
index 8c4b489145..0000000000
Binary files a/example/storybook-v7/src/components/VStack/VStack.png and /dev/null differ
diff --git a/example/storybook-v7/src/components/VStack/VStack.stories.tsx b/example/storybook-v7/src/components/VStack/VStack.stories.tsx
deleted file mode 100644
index 849635c8e1..0000000000
--- a/example/storybook-v7/src/components/VStack/VStack.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import VStack from './VStack';
-// import VStackReversedExample from './VStackReversed';
-
-const VStackMeta: ComponentMeta = {
- title: 'stories/VStack',
- component: VStack,
- argTypes: {
- space: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl'],
- },
- reversed: {
- control: 'boolean',
- },
- },
- args: {
- space: 'md',
- reversed: false,
- },
-};
-
-export default VStackMeta;
-
-export { VStack };
-// export { VStackReversedExample };
diff --git a/example/storybook-v7/src/components/VStack/VStack.tsx b/example/storybook-v7/src/components/VStack/VStack.tsx
deleted file mode 100644
index 3195a3f5b9..0000000000
--- a/example/storybook-v7/src/components/VStack/VStack.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { Box } from '@gluestack-ui/themed';
-import { VStack } from '@/components/ui/vstack';
-
-const VStackBasic = ({ space, reversed, ...props }: any) => {
- return (
-
-
-
-
-
-
- );
-};
-
-VStackBasic.description =
- 'This is a basic VStack component example. VStack is a primitive component to layout its children vertically.';
-
-export default VStackBasic;
-
-export { Box, VStack };
diff --git a/example/storybook-v7/src/components/VStack/VStackReversed.tsx b/example/storybook-v7/src/components/VStack/VStackReversed.tsx
deleted file mode 100644
index 92be66edac..0000000000
--- a/example/storybook-v7/src/components/VStack/VStackReversed.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Box } from '@gluestack-ui/themed';
-
-import { VStack } from '@gluestack-ui/themed';
-
-const VStackReversed = ({ space, ...props }) => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default VStackReversed;
diff --git a/example/storybook-v7/src/components/VStack/index.nw.stories.mdx b/example/storybook-v7/src/components/VStack/index.nw.stories.mdx
deleted file mode 100644
index 63dc29d196..0000000000
--- a/example/storybook-v7/src/components/VStack/index.nw.stories.mdx
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: gluestack-ui VStack Component | Installation, Usage, and API
-
-description: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout.
-
-pageTitle: VStack
-
-pageDescription: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- Text,
- InlineCode,
- Tabs
-} from '@gluestack/design-system';
-import { Box, VStack } from '../../core-components/nativewind';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
-
-This is an illustration of **VStack** component.
-
-
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- VStack,
- Box,
- },
- argsType: {
- space: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
- default: 'md',
- },
- reversed: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }
-}
-/>
-
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add vstack
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into index.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/vstack/index.tsx --%%
-```
-
-
-> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-
-### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/vstack/index.web.tsx --%%
-```
-
-
-### Step 3: Copy and paste the following code into styles.tsx in your project.
-
-
-```jsx
-%%-- File: core-components/nativewind/vstack/styles.tsx --%%
-```
-
-
-### Step 4: 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 { VStack } from '@/components/ui/vstack';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### VStack
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Accessibility
-
-The accessibility of a VStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a VStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.
-
-In essence, the VStack acts as a container that inherits and propagates the accessibility attributes of its child views.
-
-### Props
-
-VStack 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), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### VStack
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- space
-
-
-
- string
-
-
- -
-
-
- {`It sets the space between children. By default there is no space between the VStack items.`}
-
-
-
-
-
- reversed
-
-
-
- boolean
-
-
- false
-
-
- {`When true, it places the VStack items in reverse direction.`}
-
-
-
-
-
->
-
-### 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.
-
-#### VStack Reversed
-
-A VStack component with the reversed prop reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, VStack },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/VStack/index.themed.stories.mdx b/example/storybook-v7/src/components/VStack/index.themed.stories.mdx
deleted file mode 100644
index 7968790463..0000000000
--- a/example/storybook-v7/src/components/VStack/index.themed.stories.mdx
+++ /dev/null
@@ -1,227 +0,0 @@
----
-title: gluestack-ui VStack Component | Installation, Usage, and API
-
-description: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout.
-
-pageTitle: VStack
-
-pageDescription: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout.
-
-showHeader: true
----
-
-import { Meta } from '@storybook/addon-docs';
-
-
-
-import { Box, VStack, Text } from '../../core-components/themed';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
- CollapsibleCode,
- Tabs
-} from '@gluestack/design-system';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-This is an illustration of **VStack** component.
-
-<>
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- VStack,
- Box,
- },
- argsType: {
- space: {
- control: 'select',
- options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
- default: 'md',
- },
- reversed: {
- control: 'boolean',
- options: [true, false],
- default: false,
- },
- },
- }}
- />
->
-
-
-
-## Installation
-
-
-
-
- CLI
-
-
- Manual
-
-
-
-
-<>
-
-### Run the following command:
- ```bash
- npx gluestack-ui add vstack
- ```
->
-
-
-<>
-
-### Step 1: Copy and paste the following code into your project.
-
-
-```jsx
-%%-- File: core-components/themed/vstack/index.tsx --%%
-```
-
-
-### Step 2: 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 { VStack } from '@/components/ui/vstack';
-```
-
-```jsx
-export default () => ;
-```
-
-### Component Props
-
-This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
-
-#### VStack
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Accessibility
-
-The accessibility of a VStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a VStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.
-
-In essence, the VStack acts as a container that inherits and propagates the accessibility attributes of its child views.
-
-### Props
-
-VStack 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), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### VStack
-
-<>
-
-
-
-
-
- Prop
-
-
- Type
-
-
- Default
-
-
- Description
-
-
-
-
-
-
-
- space
-
-
-
- string
-
-
- -
-
-
- {`It sets the space between children.`}
-
-
-
-
-
- reversed
-
-
-
- boolean
-
-
- -
-
-
- {`When true, it places the VStack items in reverse direction.`}
-
-
-
-
-
->
-
-### 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.
-
-#### VStack Reversed
-
-A VStack component with the reversed prop reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface.
-
-
-
-
-
-
-
- `,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: { Box, Wrapper, VStack },
- argsType: {},
- }}
- />
-
diff --git a/example/storybook-v7/src/components/View/View.stories.tsx b/example/storybook-v7/src/components/View/View.stories.tsx
deleted file mode 100644
index 3d129440ca..0000000000
--- a/example/storybook-v7/src/components/View/View.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ComponentMeta } from '@storybook/react-native';
-import View from './View';
-
-const ViewMeta: ComponentMeta = {
- title: 'stories/View',
- component: View,
-};
-
-export default ViewMeta;
-
-export { View };
diff --git a/example/storybook-v7/src/components/View/View.tsx b/example/storybook-v7/src/components/View/View.tsx
deleted file mode 100644
index e14de4632c..0000000000
--- a/example/storybook-v7/src/components/View/View.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { View, Center, Heading, Text } from '@gluestack-ui/themed';
-import React from 'react';
-
-export default function ViewStory() {
- return (
-
-
-
- A component library for the{' '}
- React Ecosystem
-
-
- gluestack-ui is a simple, modular and accessible component library
- that gives you building blocks to build you React applications.
-
-
-
- );
-}
-
-export { View, Center, Heading, Text };
diff --git a/example/storybook-v7/src/components/View/index.stories.mdx b/example/storybook-v7/src/components/View/index.stories.mdx
deleted file mode 100644
index d9fbdcc202..0000000000
--- a/example/storybook-v7/src/components/View/index.stories.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: View | gluestack-ui
-description: View is the most fundamental component for building a UI.
----
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { transformedCode } from '../../utils';
-import {
- AppProvider,
- CodePreview,
- Table,
- TableContainer,
- InlineCode,
-} from '@gluestack/design-system';
-import { View } from '../../core-components/themed';
-import { Text, Heading } from '@gluestack-ui/themed';
-import Wrapper from '../../core-components/themed/Wrapper';
-
-
-
-# View
-
-The most fundamental component for building a UI.
-
-<>
-
-
- A component library for the{" "}
- React Ecosystem
-
-
- gluestack-ui is a simple, modular and accessible component library that
- gives you building blocks to build you React applications.
-
-
-`,
- transformCode: (code) => {
- return transformedCode(code);
- },
- scope: {
- Wrapper,
- Text,
- Heading,
- View,
- },
- }}
- />
->
-
-
-
-> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/View/styled-components) to learn about default styling of StatusBar component
-
-### Import
-
-To use this component in your project, include the following import statement in your file.
-
-```bash
-import { View } from '@gluestack-ui/themed';
-```
-
-### Anatomy
-
-The structure provided below can help you identify and understand a badge component's various parts.
-
-```jsx
-export default () => ;
-```
-
-### Props
-
-gluestack-ui View 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
-
-#### View
-
-<>
-
-
-
-
-
- Name
-
-
- Value
-
-
- Default
-
-
-
-
-
-
-
- children
-
-
-
- any
-
-
- -
-
-
-
-
-
->
diff --git a/example/storybook-v7/src/components/docs-components/DefaultComponent.tsx b/example/storybook-v7/src/components/docs-components/DefaultComponent.tsx
deleted file mode 100644
index 16684b96c9..0000000000
--- a/example/storybook-v7/src/components/docs-components/DefaultComponent.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useContext, Fragment, useMemo } from 'react';
-import tailwindConfig from 'tailwind.config';
-import { GluestackUIProvider } from '../../core-components/nativewind/gluestack-ui-provider';
-import { config } from '../../core-components/nativewind/gluestack-ui-provider/config';
-import {
- VStack,
- HStack,
- Box,
- Text,
- Heading,
-} from '../../core-components/nativewind';
-import { LayoutContext } from '@gluestack/design-system';
-
-const ColorPaletteComponent = () => {
- const { colorMode } = useContext(LayoutContext);
-
- const colorPalette = useMemo(() => {
- const sourceObject = tailwindConfig!.theme!.extend!.colors; // get the source object to loop
- const paletteData: {
- name: string;
- variants: {
- name: string;
- variant: string;
- color: string;
- className: string;
- };
- }[] = []; // result array to push data into
-
- for (const [name, colors] of Object.entries(sourceObject)) {
- // object.entries gives us the key value pair of the object and makes it iterable. {primary: [{0: '#fff'}]} where primary is the key (name) and the value is an object with the color variants (colors)
-
- const variants: {
- name: string;
- variant: string;
- color: string;
- className: string;
- }[] = [];
-
- for (const [variant, color] of Object.entries(colors)) {
- // loop over all the variants of the color i.e. the {0: '#fff'} object in the same way as the above loop
- const variableName = extractVariableName(color); // extract the --color-name part from the var(---color-name) string using regex, it will return null if we pass it a hex code
- const colorName = variableName || color; // variableName will be null in case there was a hex code passed to the extract function
-
- const colorCode =
- colorMode === 'light'
- ? config.light[colorName]
- : config.dark[colorName]; // get the color code from the config based on the color name and the color mode
-
- const className = `bg-${name}-${variant}`; // need to save the class name for the color to use in the UI
-
- variants.push({
- name,
- variant,
- color: colorCode || color,
- className,
- }); // push the data into the result array
- }
-
- paletteData.push({ name, variants }); // push the data into the result array
- }
-
- return paletteData; // return the result array
- }, [colorMode]);
-
- function extractVariableName(text: string): string | null {
- const pattern = /\bvar\((.*?)\)/g;
- const match = pattern.exec(text);
- return match?.[1] ?? null;
- }
-
- return (
-
-
- {colorPalette.map(({ name }, i) => (
-
-
- {name}
-
-
- {colorPalette[i].variants.map((variant, j) => (
-
-
-
- {variant.variant}
- {variant.color}
-
-
- ))}
-
-
- ))}
-
-
- );
-};
-
-export { ColorPaletteComponent };
diff --git a/example/storybook-v7/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-v7/src/components/docs-components/DefaultComponentThemed.tsx
deleted file mode 100644
index a58a3c0554..0000000000
--- a/example/storybook-v7/src/components/docs-components/DefaultComponentThemed.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-import React, {
- Fragment,
- useContext,
- useState,
- useEffect,
- useMemo,
-} from 'react';
-import {
- Text,
- VStack,
- HStack,
- Box,
- GluestackUIProvider,
- Divider,
- Tooltip,
- TooltipContent,
- TooltipText,
- Pressable,
-} from '@gluestack-ui/themed';
-import { config } from '../../core-components/themed/gluestack-ui-provider/config';
-import { LayoutContext } from '@gluestack/design-system';
-
-const ColorPaletteComponent = () => {
- const { colorMode } = useContext(LayoutContext);
- const [colors, setColors] = useState([]);
-
- useEffect(() => {
- if (!colorMode) return;
- if (colorMode === 'light') {
- setColors(config.tokens.colors);
- } else {
- setColors(config.themes[colorMode].colors);
- }
- }, [colorMode]);
-
- const sortedPalette = useMemo(() => {
- const colorPalette: any = {
- primary: {},
- secondary: {},
- tertiary: {},
- others: {},
- };
-
- for (const colorKey in colors) {
- const category = colorKey.replace(/\d+/g, '');
- const shade = colorKey.replace(/\D+/g, '');
-
- if (shade === '') {
- colorPalette.others[category] = colors[colorKey];
- continue;
- }
-
- if (!colorPalette[category]) {
- colorPalette[category] = {};
- }
-
- colorPalette[category][shade] = colors[colorKey];
- }
-
- const sortedColorPalette: any = {};
-
- for (const category in colorPalette) {
- if (category !== 'others') {
- sortedColorPalette[category] = Object.fromEntries(
- Object.entries(colorPalette[category]).sort()
- );
- }
- }
-
- sortedColorPalette.others = { ...colorPalette.others };
-
- return sortedColorPalette;
- }, [colors]);
- return (
-
-
- {Object.keys(sortedPalette).map((category: string) => {
- return (
-
-
- {category}
-
-
- {Object.keys(sortedPalette[category]).map((shade: string) => {
- return (
-
-
-
-
- {category === 'others'
- ? `${shade}`
- : `${category}${shade}`}
-
- {sortedPalette[category][shade]}
-
-
- );
- })}
-
-
- );
- })}
-
-
- );
-};
-
-const spaces: any = config.tokens.space;
-
-const sortedSpaceObject: any = spaces;
-
-// Convert the map to an array of key-value pairs for sorting
-const mapEntries = Object.entries(sortedSpaceObject);
-
-// Sort the map entries based on the keys
-mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => {
- // Treat 'px' as the smallest and 'full' as the largest
- // Place '0' at the top
- if (keyA === '0') return -1;
- if (keyB === '0') return 1;
-
- // Treat 'px' as the second smallest
- if (keyA === 'px') return -1;
- if (keyB === 'px') return 1;
-
- // Treat 'full' as the largest
- if (keyA === 'full') return 1;
- if (keyB === 'full') return -1;
-
- // Values with '%' should be grouped and sorted at the end
- const isValueAPercentage = valueA.toString().includes('%');
- const isValueBPercentage = valueB.toString().includes('%');
- if (isValueAPercentage && !isValueBPercentage) return 1;
- if (isValueBPercentage && !isValueAPercentage) return -1;
-
- // Group values with the same denominator and sort them
- const [numA, denomA] = keyA.split('/').map(parseFloat);
- const [numB, denomB] = keyB.split('/').map(parseFloat);
-
- if (!isNaN(numA) && !isNaN(denomA) && !isNaN(numB) && !isNaN(denomB)) {
- if (denomA === denomB) {
- return numA - numB;
- } else {
- return denomA - denomB; // Sort by denominator if they are different
- }
- }
-
- // For numeric keys, compare them as numbers
- if (!isNaN(numA) && !isNaN(numB)) {
- return numA - numB;
- }
-
- // For other keys, compare them as strings
- return keyA.localeCompare(keyB);
-});
-// const spaceElementsArray =
-// Create a new Map from the sorted map entries
-
-const SpaceComponent = () => {
- const { colorMode } = useContext(LayoutContext);
- return (
-
-
-
-
- Tokens
-
-
- Value (Pixels)
-
- Representation
-
- {mapEntries.map(([key, value]: any) => {
- return (
-
-
-
-
- {key}
-
-
- {value}
-
-
-
-
-
-
- );
- })}
-
-
- );
-};
-
-const opacity: any = config.tokens.opacity;
-
-const OpacityComponent = () => {
- const { colorMode } = useContext(LayoutContext);
- return (
-
-
- {Object.keys(opacity).map((op: string) => {
- return (
-
-
-
-
- {op}
-
-
- ({opacity[op]})
-
-
-
- );
- })}
-
-
- );
-};
-
-const ShadowsComponent = () => {
- const { colorMode } = useContext(LayoutContext);
- const hardShadows: any = config.globalStyle.variants.hardShadow;
- const softShadows: any = config.globalStyle.variants.softShadow;
-
- return (
-
-
-
- Hard Shadows
-
-
- {Object.keys(hardShadows).map((shadow: string) => {
- return (
- {
- return (
-
-
- {shadow}
-
-
- );
- }}
- >
-
-
- {JSON.stringify(hardShadows[shadow], null, 2)}
-
-
-
- );
- })}
-
-
- Soft Shadows
-
-
- {Object.keys(softShadows).map((shadow: string) => {
- return (
- {
- return (
-
-
- {shadow}
-
-
- );
- }}
- >
-
-
- {JSON.stringify(softShadows[shadow], null, 2)}
-
-
-
- );
- })}
-
-
-
- );
-};
-
-const borderWidths = config.tokens.borderWidths;
-const BorderWidthComponent = () => {
- const { colorMode } = useContext(LayoutContext);
- return (
-
-
- {Object.keys(borderWidths).map((borderWidth: any) => {
- return (
-
- {borderWidth}
-
- ({borderWidths[borderWidth]})
-
-
- );
- })}
-
-
- );
-};
-
-const radii = config.tokens.radii;
-const RadiiComponent = () => {
- const { colorMode } = useContext(LayoutContext);
- return (
-
-
- {Object.keys(radii).map((borderRadiusValue: any) => {
- return (
-
- {borderRadiusValue}
-
- ({radii[borderRadiusValue]})
-
-
- );
- })}
-
-
- );
-};
-
-export {
- ColorPaletteComponent,
- SpaceComponent,
- OpacityComponent,
- ShadowsComponent,
- BorderWidthComponent,
- RadiiComponent,
-};
-
-export { Text, VStack, HStack, Box };
diff --git a/example/storybook-v7/src/components/hooks/useDarkMode.ts b/example/storybook-v7/src/components/hooks/useDarkMode.ts
deleted file mode 100644
index baa231e93d..0000000000
--- a/example/storybook-v7/src/components/hooks/useDarkMode.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const useDarkMode = () => {
- return false;
-};
diff --git a/example/storybook-v7/src/components/hooks/useDarkMode.web.ts b/example/storybook-v7/src/components/hooks/useDarkMode.web.ts
deleted file mode 100644
index 3724b39752..0000000000
--- a/example/storybook-v7/src/components/hooks/useDarkMode.web.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useDarkMode } from 'storybook-dark-mode';
diff --git a/example/storybook-v7/src/core-components/nativewind/Wrapper.tsx b/example/storybook-v7/src/core-components/nativewind/Wrapper.tsx
deleted file mode 100644
index 54ab86a8ed..0000000000
--- a/example/storybook-v7/src/core-components/nativewind/Wrapper.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-import React from 'react';
-import { Box, Center, useColorMode } from '@gluestack-ui/themed';
-import { config } from './gluestack-ui-provider/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;
-}
-
-const Wrapper = ({ children, ...props }: any) => {
- const colorMode: any = useColorMode();
- return (
-
-
-