Merge pull request #2380 from gluestack/release/@gluestack-ui/select@…

…0.1.28 release: @gluestack-ui/select version 0.1.28
gluestack · Aug 13, 2024 · 7099d14 · 7099d14
2 parents 5f7f4bf + 95b8ae3
commit 7099d14
Show file tree

Hide file tree

Showing 32 changed files with 143 additions and 25 deletions.
diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.43",
+    "@gluestack-ui/themed": "^1.1.44",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
@@ -45,6 +45,7 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Alert** component.
 
@@ -146,6 +147,8 @@ To use this component in your project, include the following import statement in
 import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/gdI4o2w.png' webUrl='https://i.imgur.com/f8hHiIJ.png' classNameStyle='aspect-[513/375] md:aspect-[736/259]' />
+
 ```jsx
 export default () => (
   <Alert>

diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
@@ -38,8 +38,8 @@ import {
   Tabs
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Avatar** component.
 
@@ -142,6 +142,8 @@ import {
 } from '@/components/ui/avatar';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/UWyUCue.png' webUrl='https://i.imgur.com/MUsrjdt.png' classNameStyle='aspect-[513/369] md:aspect-[736/209]' />
+
 > IOS: It is highly recommended to use `<AvatarFallbackText />` before `<AvatarImage />` to avoid indexing issues in IOS.
 
 ```jsx

diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -55,6 +55,7 @@ import {
 import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Badge** component.
 
@@ -145,6 +146,7 @@ To use this component in your project, include the following import statement in
 ```jsx
 import { Badge } from '@/components/ui/badge';
 ```
+<AnatomyImage mobileUrl='https://i.imgur.com/l1rzVbp.png' webUrl='https://i.imgur.com/H735cuy.png' classNameStyle='aspect-[513/341] md:aspect-[736/225]' />
 
 ```jsx
 export default () => (

diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -45,6 +45,7 @@ import {
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 import colors from 'tailwindcss/colors';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Button** component.
 
@@ -142,6 +143,8 @@ import {
 } from '@/components/ui/button';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/64ja4mQ.png' webUrl='https://i.imgur.com/eLSw4hK.png' classNameStyle='aspect-[513/296] md:aspect-[736/228]' />
+
 ```jsx
 export default () => (
   <ButtonGroup>

diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -44,6 +44,7 @@ import {
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Checkbox** component.
 
@@ -144,6 +145,8 @@ To use this component in your project, include the following import statement in
 import { Checkbox } from '@/components/ui/checkbox';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/qjGDZ6d.png' webUrl='https://i.imgur.com/tN9jjW3.png' classNameStyle='aspect-[513/388] md:aspect-[736/228]' />
+
 ```jsx
 export default () => (
   <CheckboxGroup>

diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
@@ -35,6 +35,7 @@ import {
 } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode, Tabs } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Divider** component.
 
@@ -121,6 +122,8 @@ To use this component in your project, include the following import statement in
 import { Divider } from '@/components/ui/divider';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/WAEtXS7.png' webUrl='https://i.imgur.com/4Nl0JfM.png' classNameStyle='aspect-[513/239] md:aspect-[736/167]' />
+
 ```jsx
 export default () => <Divider />;
 ```

diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -48,9 +48,9 @@ import {
   Tabs
 } from '@gluestack/design-system';
 import { ShoppingCartIcon } from 'lucide-react-native'
-
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Fab** component.
 
@@ -156,14 +156,16 @@ npm i @gluestack-ui/fab
   </Tabs.TabPanels>
 </Tabs>
 
-### API Reference
+## API Reference
 
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
 import { Fab } from '@gluestack-ui/themed';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/sVSTRfB.png' webUrl='https://i.imgur.com/olpBoZg.png' classNameStyle='aspect-[513/358] md:aspect-[736/242]' />
+
 ```jsx
 export default () => (
   <Fab>

diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
@@ -86,6 +86,7 @@ import {
 import { transformedCode } from '../../utils';
 import { useState } from 'react';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **FormControl** component.
 
@@ -287,6 +288,8 @@ To use this component in your project, include the following import statement in
 import { FormControl } from '@/components/ui/form-control';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/qDJSDGA.png' webUrl='https://i.imgur.com/jbkdJ4q.png' classNameStyle='aspect-[513/534] md:aspect-[736/378]' />
+
 ```jsx
 export default () => (
   <FormControl>

diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -41,8 +41,8 @@ import {
   CollapsibleCode,
   Tabs
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Input** component.
 
@@ -148,6 +148,8 @@ To use this component in your project, include the following import statement in
 import { Input } from '@/components/ui/input';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/5WeYhdS.png' webUrl='https://i.imgur.com/drYm89F.png' classNameStyle='aspect-[513/354] md:aspect-[736/238]' />
+
 ```jsx
 export default () => (
   <Input>

diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -24,9 +24,9 @@ import {
   InlineCode,
   Tabs
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Link** component.
 
@@ -106,6 +106,8 @@ To use this component in your project, include the following import statement in
 import { Link } from '@/components/ui/link';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/JdBJpkC.png' webUrl='https://i.imgur.com/dJxBBEl.png' classNameStyle='aspect-[513/227] md:aspect-[736/155]' />
+
 ```jsx
 export default () => (
   <Link>

diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
@@ -54,6 +54,7 @@ import {
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of a **Menu** component.
 
@@ -195,6 +196,8 @@ import {
 } from '@/components/ui/menu';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/ychqRCR.png' webUrl='https://i.imgur.com/42xE2oh.png' classNameStyle='aspect-[513/477] md:aspect-[736/317]' />
+
 ```jsx
 export default () => (
   <Menu>

diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
@@ -59,9 +59,9 @@ import {
   InlineCode,
   Tabs
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Modal** component.
 
@@ -215,6 +215,8 @@ To use this component in your project, include the following import statement in
 import { Modal } from '@/components/ui/modal';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/XMrIaFD.png' webUrl='https://i.imgur.com/y2wTaq8.png' classNameStyle='aspect-[513/697] md:aspect-[736/405]' />
+
 ```jsx
 export default () => (
   <Modal>

diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -36,6 +36,7 @@ import {
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Radio** component.
 
@@ -136,6 +137,8 @@ To use this component in your project, include the following import statement in
 import { Radio } from '@gluestack-ui/themed';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/ayT9tUE.png' webUrl='https://i.imgur.com/niaZmLz.png' classNameStyle='aspect-[513/394] md:aspect-[736/234]' />
+
 ```jsx
 export default () => (
   <RadioGroup>

diff --git a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
@@ -48,6 +48,7 @@ import {
   CollapsibleCode,
 } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Select** component.
 
@@ -174,6 +175,8 @@ To use this component in your project, include the following import statement in
 import { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicatorWrapper, SelectDragIndicator, SelectItem } from '@/components/ui/select';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/g0lTtcB.png' webUrl='https://i.imgur.com/cX9uCot.png' classNameStyle='aspect-[513/397] md:aspect-[736/237]' />
+
 ```jsx
 export default () => (
   <Select>
@@ -546,6 +549,22 @@ It internally uses gluestack-ui's [ActionsheetItem](https://ui.gluestack.io/docs
             <Table.TText>{`The value to be used for the item. This is the value that will be returned on form submission.`}</Table.TText>
           </Table.TD>
         </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>textStyle</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>inherits all the properties of react native text</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>-</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`This prop only works on native.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
       </Table.TBody>
     </Table>
   </TableContainer>

diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
@@ -21,7 +21,6 @@ import {
   SliderFilledTrack,
   SliderThumb,
 } from '../../core-components/nativewind';
-
 import { HStack, Volume2Icon, Box } from '../../core-components/nativewind';
 import {
   VStack,
@@ -40,10 +39,10 @@ import {
   Table,
   TableContainer,
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { Center } from '../../core-components/nativewind/center';
 import { CollapsibleCode, Tabs } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Slider** component.
 
@@ -148,6 +147,8 @@ To use this component in your project, include the following import statement in
 import { Slider } from '@/components/ui/slider';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/k4vbMIM.png' webUrl='https://i.imgur.com/E1WZefI.png' classNameStyle='aspect-[513/343] md:aspect-[736/231]' />
+
 ```jsx
 export default () => (
   <Slider>

diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
@@ -29,6 +29,7 @@ import {
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode, Tabs } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Switch** component.
 
@@ -115,6 +116,8 @@ To use this component in your project, include the following import statement in
 import { Switch } from '@/components/ui/switch';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/p6ndTjn.png' webUrl='https://i.imgur.com/rDy1AOi.png' classNameStyle='aspect-[513/298] md:aspect-[736/182]' />
+
 ```jsx
 export default () => <Switch />;
 ```

diff --git a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx
@@ -41,6 +41,7 @@ import {
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of a **Table** component.
 
@@ -199,6 +200,8 @@ import {
  } from '@/components/ui/table';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/5FVEmNK.png' webUrl='https://i.imgur.com/D622sCO.png' classNameStyle='aspect-[513/803] md:aspect-[736/467]' />
+
 ```jsx
 export default () => (
   <Table>

diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -35,6 +35,7 @@ import {
   CollapsibleCode
 } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Textarea** component.
 
@@ -137,6 +138,8 @@ To use this component in your project, include the following import statement in
 import { Textarea } from '@/components/ui/textarea';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/PRakWVb.png' webUrl='https://i.imgur.com/MWi9UNn.png' classNameStyle='aspect-[513/299] md:aspect-[736/227]' />
+
 ```jsx
 export default () => (
   <Textarea>

diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
@@ -51,6 +51,7 @@ import {
 import { View } from 'react-native';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { RefreshCw, Send, AlertTriangle } from 'lucide-react-native';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 
 This is an illustration of **Toast** component.
 
@@ -182,6 +183,8 @@ To use this component in your project, include the following import statement in
 import { useToast, Toast } from '@/components/ui/toast';
 ```
 
+<AnatomyImage mobileUrl='https://i.imgur.com/hESv96t.png' webUrl='https://i.imgur.com/onUcTTR.png' classNameStyle='aspect-[513/399] md:aspect-[736/283]' />
+
 ```jsx
 export default () => (
   <Toast>