Merge pull request #2324 from gluestack/release/@gluestack-ui/link@0.…

…1.22

release: @gluestack-ui/link version 0.1.22

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.40",
+    "@gluestack-ui/themed": "^1.1.41",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

example/storybook-nativewind/src/apps/todo-app/index.stories.mdx

@@ -14,6 +14,6 @@ import { todoapp } from '../../extra-components/nativewind/appConfig';
 
 This [Todo App](https://gluestack-ui-todo-example-app.vercel.app/) is built using `gluestack-ui v2`.
 
-<Responsiveness {...todoapp} showMenuItems={true} />
+<Responsiveness {...todoapp} showMenuItems={false} />
 
 GitHub link for this [Todo App](https://github.com/gluestack/gluestack-ui-todo-example-app).

example/storybook-nativewind/src/components/Alert/Alert.tsx

@@ -4,7 +4,7 @@ import { InfoIcon } from '@/components/ui/icon';
 
 const AlertBasic = ({ ...props }: any) => {
   return (
-    <Alert {...props} className="gap-3">
+    <Alert {...props}>
       <AlertIcon as={InfoIcon} />
       <AlertText>Selection successfully moved!</AlertText>
     </Alert>

example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx

@@ -26,12 +26,17 @@ const CheckboxMeta: ComponentMeta<typeof Checkbox> = {
       control: 'boolean',
       options: [true, false],
     },
+    isHovered: {
+      control: 'boolean',
+      options: [true, false],
+    },
   },
   args: {
     size: 'md',
     isDisabled: false,
     isInvalid: false,
     isFocusVisible: false,
+    isHovered: false,
   },
 };
 

example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx

@@ -780,7 +780,7 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
           </FormControl>
                <FormControl>
             <Button action='negative' className='ml-4'>
-              <ButtonText className="text-white">
+              <ButtonText className="text-white group-hover/button:text-white group-active/button:text-white">
                 Delete
               </ButtonText>
             </Button>

example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx

@@ -440,8 +440,7 @@ The Examples section provides visual representations of the different variants o
                     <HStack space="md">
                       <Icon
                         as={HelpCircleIcon}
-                        className="stroke-typography-0"
-                        size="lg"
+                        className="stroke-error-500 mt-0.5"
                       />
                       <VStack space="xs">
                         <ToastTitle className="font-semibold text-error-500">Error!</ToastTitle>
@@ -710,7 +709,7 @@ The Examples section provides visual representations of the different variants o
                         <Icon
                           as={Send}
                           size="xl"
-                          className="fill-blue-500 stroke-none"
+                          className="fill-typography-100 stroke-none"
                         />
                         <Divider
                           orientation="vertical"

example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx

@@ -188,7 +188,7 @@ const Alert = React.forwardRef(
     {
       className,
       variant = 'solid',
-      action = 'info',
+      action = 'muted',
       ...props
     }: { className?: string } & IAlertProps,
     ref?: any

example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx

@@ -119,7 +119,7 @@ const checkboxStyle = tva({
 });
 
 const checkboxIndicatorStyle = tva({
-  base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 group-hover/checkbox:data-[checked=false]:border-outline-500 group-hover/checkbox:bg-transparent group-hover/checkbox:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[checked=true]:bg-primary-700 group-hover/checkbox:data-[checked=true]:border-primary-700 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:border-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:bg-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:opacity-40 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[disabled=true]:border-outline-400 group-hover/checkbox:data-[disabled=true]:data-[invalid=true]:border-error-700 active:data-[checked=true]:bg-primary-800 active:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
+  base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 data-[hover=true]:data-[checked=false]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[checked=true]:bg-primary-700 data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[checked=true]:data-[disabled=true]:border-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:bg-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[active=true]:data-[checked=true]:bg-primary-800 data-[active=true]:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
   parentVariants: {
     size: {
       lg: 'w-6 h-6 border-[3px]',
@@ -130,7 +130,7 @@ const checkboxIndicatorStyle = tva({
 });
 
 const checkboxLabelStyle = tva({
-  base: 'text-typography-600 data-[checked=true]:text-typography-900 group-hover/checkbox:text-typography-900 group-hover/checkbox:data-[checked=true]:text-typography-900 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:text-typography-900 group-hover/checkbox:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
+  base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[checked=true]:text-typography-900 data-[hover=true]:data-[checked=true]:data-[disabled=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
   parentVariants: {
     size: {
       lg: 'text-lg',

example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts

@@ -205,7 +205,7 @@ export const config = {
     '--color-error-400': '230 53 53',
     '--color-error-500': '239 68 68',
     '--color-error-600': '248 113 113',
-    '--color-error-700': '230 53 52',
+    '--color-error-700': '252 165 165',
     '--color-error-800': '254 202 202',
     '--color-error-900': '254 226 226',
     '--color-error-950': '254 233 233',

example/storybook-nativewind/src/core-components/nativewind/link/index.tsx

@@ -23,11 +23,11 @@ cssInterop(UILink, { className: 'style' });
 cssInterop(UILink.Text, { className: 'style' });
 
 const linkStyle = tva({
-  base: 'web:outline-0 web:data-[disabled=true]:cursor-not-allowed web:data-[focus-visible=true]:outline-2 web:data-[focus-visible=true]:outline-primary-700 web:data-[focus-visible=true]:outline data-[disabled=true]:opacity-40 group/link',
+  base: 'group/link web:outline-0 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-primary data-[focus-visible=true]:web:outline-0 data-[disabled=true]:opacity-4 ',
 });
 
 const linkTextStyle = tva({
-  base: 'underline text-info-700 group-hover/link:text-info-600 group-hover/link:no-underline group-active/link:text-info-700 font-normal font-body web:font-sans web:tracking-sm web:my-0 web:bg-transparent web:border-0 web:box-border web:display-inline web:list-none web:margin-0 web:padding-0 web:position-relative web:text-start web:whitespace-pre-wrap web:word-wrap-break-word',
+  base: 'underline text-info-700 data-[hover=true]:text-info-600 data-[hover=true]:no-underline data-[active=true]:text-info-700 font-normal font-body web:font-sans web:tracking-sm web:my-0 web:bg-transparent web:border-0 web:box-border web:display-inline web:list-none web:margin-0 web:padding-0 web:position-relative web:text-start web:whitespace-pre-wrap web:word-wrap-break-word',
 
   variants: {
     isTruncated: {

example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx

@@ -31,7 +31,7 @@ const toastStyle = tva({
   base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
   variants: {
     action: {
-      error: 'bg-error-700',
+      error: 'bg-error-800',
       warning: 'bg-warning-700',
       success: 'bg-success-700',
       info: 'bg-info-700',

example/storybook-nativewind/src/extra-components/nativewind/Demos/AccordionDemo.tsx

@@ -17,7 +17,7 @@ const AccordionDemo = () => {
   const accRef = React.useRef(null);
   return (
     <ScrollView contentContainerStyle={{ maxHeight: 50 }}>
-      <Accordion mt="$5">
+      <Accordion className="border border-outline-200">
         <AccordionItem value="a">
           <AccordionHeader>
             <AccordionTrigger>

example/storybook-nativewind/src/extra-components/nativewind/appConfig.tsx

@@ -9,12 +9,12 @@ export const kitchensink = {
 };
 export const todoapp = {
   updateIds: {
-    android: '02ec2cd6-f764-4eaa-a87a-31fdf50747ac',
-    ios: '23d48499-cbad-4d38-8828-72f2c148a69e',
+    android: '43940b83-c131-4584-bca2-9fab98debd25',
+    ios: '2be27bfb-845b-4e44-ab7e-fd5109ab20bb',
   },
   iframeUri: 'https://gluestack-ui-todo-example-app.vercel.app/',
   qrCodeUri:
-    'https://qr.expo.dev/eas-update?slug=exp&projectId=2f45053e-e4a6-4598-b0bb-5b7a5024029d&groupId=65b26650-c13e-438a-859f-b1f3499353b0',
+    'https://qr.expo.dev/eas-update?slug=exp&projectId=2f45053e-e4a6-4598-b0bb-5b7a5024029d&groupId=6eaef910-7074-458e-91df-adf917e222d3',
 };
 
 export const appStoryConfig = {

example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx

@@ -19,14 +19,6 @@ import { CollapsibleCode, Tabs } from '@gluestack/design-system';
 
 To get started with **gluestack-ui v2**, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects.
 
-
-### Step 1: Setup your project.
-
-Setup your project with [Next.js](https://nextjs.org/docs/getting-started/installation) or [Expo](https://docs.expo.dev/get-started/create-a-project/). 
-
-
-### Step 2: Initialize
-
 <br />
 
 <Tabs value="cli" type="section">
@@ -44,18 +36,33 @@ Setup your project with [Next.js](https://nextjs.org/docs/getting-started/instal
 
 <br />
 
+### Step 1: Initialize
+
 Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project.
 
 ```bash
 npx gluestack-ui init
 ```
 
+Your project is now ready to use **gluestack-ui** components. To add gluestack-ui components to your project using the CLI, refer to the above command or use the [CLI guide](/ui/docs/home/getting-started/cli).
+
+```bash
+npx gluestack-ui add box
+```
+
+If you encounter issues during the CLI installation, refer to the manual installation guide available.
+
 </>
     </Tabs.TabPanel>
     <Tabs.TabPanel value="manual"> 
 <>
+<br />
 
-### Step 2.1: Install dependencies
+### Step 1: Setup your project.
+
+Setup nativewind in your project following [NativeWind documentation](https://www.nativewind.dev/v4/getting-started/react-native).
+
+### Step 2: Install dependencies
 
 Install the dependencies of gluestack-ui in your project. This can be done using the following command:
 
@@ -71,15 +78,15 @@ npm i @gluestack-ui/nativewind-utils
 
 ```
 
-### Step 2.2: Update Tailwind configuration
+### Step 2.1: Update Tailwind configuration
 
 Update `tailwind.config.js` file with the following code
 
 ```js
 %%-- File: tailwind.config.js --%% 
 ```
 
-### Step 2.3: Configure components path
+### Step 2.2: Configure components path
 
 Create a `components/ui` folder inside `src` folder and add path in `tsconfig.json`
 
@@ -94,7 +101,7 @@ Create a `components/ui` folder inside `src` folder and add path in `tsconfig.js
   }
 ```
 
-### Step 2.4: Configure GluestackUIProvider
+### Step 2.3: Configure GluestackUIProvider
 
 To add config, create a `gluestack-ui-provider/config.ts` file in your `components/ui` folder and paste the following code.
 
@@ -128,11 +135,6 @@ To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.web.tsx` fil
 
 </CollapsibleCode>
 
-</>
-    </Tabs.TabPanel>
-  </Tabs.TabPanels>
-</Tabs>
-
 ### Step 3: Configure GluestackUIProvider in project
 
 Wrap your app with `GluestackUIProvider` in `App.tsx`.
@@ -162,6 +164,7 @@ It's also recommended to set up your server-side rendering (SSR) correctly. To d
   <Tabs.TabPanels>
     <Tabs.TabPanel value="App Router">
 <>
+<br/>
 
 For Next.js App Routers we will create a new `registry.tsx` file in the root of your project and use the flush function from `@gluestack-ui/nativewind-utils`
 
@@ -239,6 +242,7 @@ export default function RootLayout({
     </Tabs.TabPanel>
     <Tabs.TabPanel value="Page Router">
 <>
+<br/>
 
 
 For Next.js we will add this code in `_document.tsx` file.
@@ -277,6 +281,11 @@ export default Document;
   </Tabs.TabPanels>
 </Tabs>
 
+</>
+    </Tabs.TabPanel>
+  </Tabs.TabPanels>
+</Tabs>
+
 ## Common issues
 **Expo app stuck in `tailwindcss(ios) rebuilding...` while running `expo start` command**