Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

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

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/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/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/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**
 

example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx

@@ -7,29 +7,66 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/Home/Getting Started/Figma UI Kit" />
 
+import { Box } from "../../../core-components/nativewind/box"
+import { HStack } from "../../../core-components/nativewind/hstack"
+import { Text } from "../../../core-components/nativewind/text"
+import { Button, ButtonText } from "../../../core-components/nativewind/button"
+
+
 # Figma UI Kit
 
-The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui v2. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible!
+The [Figma UI Kit](https://www.figma.com/community/file/1358053104938234615) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won't have a chance to say this is not possible!
+
+<img src="/images/figma-kit.png" />
+
+## What is included?
+
+Discover the comprehensive features of our latest Figma UI Kit, designed to enhance your design workflow with consistency, efficiency, and customization. Here's a breakdown of what you can expect:
+
+- **Color Tokens**: Color tokens in Figma provide a systematic way to manage and use colors in your design projects. They ensure consistency and simplify updates by defining a centralized set of color values reusable throughout the project. Our kit includes an extended color palette added as styles, semantic colors as variable collections, and a set of fixed colors that remain unchanged across modes.
+- **Text Tokens**: Text tokens in Figma enable you to define and manage consistent text properties like font, size, line spacing, and color. Our Figma UI Kit features two main foundation components, **Text** and **Heading**, with various sizes and font weights. You can easily customize these styles and typography properties to align with your brand.
+- **Shadow Tokens**: Shadow tokens, also known as effect styles, allow you to define and manage effects such as drop shadows, strokes, blurs, and images. Our kit includes two primary shadows, **Hard** and **Soft**, covering different light source directions and intensities.
+- **Components**: Components in Figma are reusable design elements that ensure consistent and efficient designs. They can represent UI elements, icons, buttons, or any visual elements you want to reuse. Our Figma UI Kit includes around 23 components with instances mapped in compound components, enabling you to design screens effortlessly with common primitive components.
+- **Additional Examples**: We've added more components and their use cases in the latest version. These examples demonstrate how components can be customized to meet user needs.
+
+## Incorporated Features -
 
-## Auto-generated
+The Figma kit includes all the latest Figma features, making it an excellent starting point for any design system. The gluestack kit leverages the following advanced features to enhance your design process and streamline your workflow.
 
-Yes, our Figma UI Kit is auto-generated from the storybook. This helps us maintain a single source of truth, providing design-development consistency which is very important if you are building at scale.
+### AutoLayout Support
 
-## Customize with ease
+Figma's AutoLayout feature allows for the creation of responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. This ensures that designs adapt seamlessly to various screen sizes and content changes. All components in our file are equipped with AutoLayout, enabling consistent design across mobile, tablet, and desktop devices.
 
-- **AutoLayout support** - AutoLayout is a powerful feature in Figma that helps you create responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. It's particularly useful for designing interfaces that need to adapt to various screen sizes or content changes.
+### Variable Support
 
-- **Color Tokens** - Color tokens in Figma refer to a systematic and organized way of managing and using colors within your design projects. They help maintain consistency and make it easier to update colors across your designs by defining a centralized set of color values that can be reused throughout your project. In this Figma UI Kit we have a beautiful palette around 4312 color tokens with alpha support, covering around 48 colors with its 10 hues.
+The latest variable feature in Figma simplifies the process of switching between light and dark modes. With just one click, you can toggle between these modes, ensuring that designs are optimized for different viewing preferences.
 
-- **Text Tokens** - Text tokens in Figma, sometimes referred to as text styles or text components, allow you to define and manage a consistent set of text properties such as font, size, line spacing, color, and more. Text tokens help maintain a unified text style across your design project, making it easier to ensure consistency and make global updates when needed. In this Figma UI Kit, we have two major foundation components **Text** and **Heading**, along with its sizes and font weights.
+<img src="/images/Variables.png" />
 
-- **Shadow Tokens** - Shadow tokens in Figma, sometimes referred to as effect styles, allow you to define and manage Effects, like drop shadows, stroke, blur and even images as Styles. In this Figma UI Kit, we majorly have included two shadows, named **Hard** and **Soft** shadows.
+## Taking It One Step Further
 
-- **Components** - Components in Figma are reusable design elements that allow you to create consistent and efficient designs. Components can represent UI elements, icons, buttons, or any other visual elements that you want to reuse across your design projects. This Figma UI Kit, includes around 23 components along with its instances mapped in compound components.
+We like to elevate our offerings, and with the v2 release, users will benefit from the following enhancements:
 
-<img src="/images/figma-ui-kit-desktop.svg" />
+- **Detailed Documentation**: Each component comes with a spec sheet, providing comprehensive information on structuring, properties, dos and don'ts, and use cases. This documentation is invaluable for anyone seeking an in-depth understanding of our design process.
 
-## Try it now
+<img src="/images/figma-docs.png" />
 
-Find the Figma UI Kit live [here](https://www.figma.com/community/file/1358053104938234615/gluestack-ui-v2-0-design-kit)!
+- **gluestack Plugin**: Customization in Figma can often be a manual and time-consuming task. To streamline this, we've introduced the [gluestack plugin](https://www.figma.com/community/plugin/1304000704678516266/gluestack), now available in the Figma Community. This plugin simplifies the process of linking text styles and updating font families, making customization more efficient and less tedious.
 
+<Box className="mt-6 m-3 p-4 flex rounded-md border border-[#E6E6E6] dark:border-[#414141] mb-6">
+  <HStack className="sm:items-center sm:justify-between flex-col sm:flex-row">
+      <Box
+        maxWidth="fit-content"
+        maxHeight="fit-content"
+        className="max-w-fit max-h-fit flex-1 text-sm gap-[6px]"
+      >
+        <Text className="text-lg font-semibold dark:text-[#FAFAFA] text-[#171717]">Try it out now!</Text>
+        <Text className="text-sm leading-[22px] max-w-[95%]">Streamline your design process with our versatile Figma kit. Get access to a rich collection of components, patterns, and assets to create stunning designs effortlessly.</Text>
+      </Box>
+      <a className="contents" href="https://www.figma.com/community/file/1358053104938234615" target="__blank">
+    <Button className="gap-2 sm:mt-0 mt-6">
+      <ButtonText>Figma Kit</ButtonText>
+    </Button>
+    </a>
+  </HStack>
+</Box>

example/storybook-nativewind/src/tailwind.config.js

@@ -196,6 +196,6 @@ module.exports = {
         'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
       },
     },
-    plugins: [],
   },
+  plugins: [],
 };

packages/config/package.json

@@ -51,7 +51,7 @@
     "@gluestack-ui/icon": "0.1.22",
     "@gluestack-ui/image": "0.1.10",
     "@gluestack-ui/input": "0.1.31",
-    "@gluestack-ui/link": "0.1.21",
+    "@gluestack-ui/link": "0.1.22",
     "@gluestack-ui/menu": "0.2.34",
     "@gluestack-ui/modal": "0.1.34",
     "@gluestack-ui/overlay": "0.1.15",
@@ -66,14 +66,14 @@
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/tabs": "0.1.16",
     "@gluestack-ui/textarea": "0.1.23",
-    "@gluestack-ui/themed": "1.1.40",
+    "@gluestack-ui/themed": "1.1.42",
     "@gluestack-ui/toast": "1.0.7",
     "@gluestack-ui/tooltip": "0.1.32",
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
     "@gluestack-style/react": ">=1.0.57",
-    "@gluestack-ui/themed": ">=1.1.40"
+    "@gluestack-ui/themed": ">=1.1.42"
   },
   "release-it": {
     "git": {

packages/themed/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gluestack-ui/themed
 
+## 1.1.42
+
+### Patch Changes
+
+- - slider version bump
+
+## 1.1.41
+
+### Patch Changes
+
+- Updated dependencies
+  - @gluestack-ui/link@0.1.22
+
 ## 1.1.40
 
 ### Patch Changes

packages/themed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -50,7 +50,7 @@
     "@gluestack-ui/icon": "0.1.22",
     "@gluestack-ui/image": "0.1.10",
     "@gluestack-ui/input": "0.1.31",
-    "@gluestack-ui/link": "0.1.21",
+    "@gluestack-ui/link": "0.1.22",
     "@gluestack-ui/menu": "0.2.34",
     "@gluestack-ui/modal": "0.1.34",
     "@gluestack-ui/overlay": "0.1.15",

packages/unstyled/link/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-ui/link
 
+## 0.1.22
+
+### Patch Changes
+
+- fix: disabled link
+
 ## 0.1.21
 
 ### Patch Changes