Merge pull request #1294 from gluestack/release/@gluestack-ui/themed@…

…1.0.6

fix: updated docs and config dependancy

.github/workflows/back-merge.yml

@@ -11,7 +11,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Check Out Code
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Create Backmerge PR
         uses: devops-infra/action-pull-request@v0.5.3
         with:
           github_token: ${{ secrets.MY_GITHUB_TOKEN }}

example/storybook/src/guides/install-expo/index.stories.mdx

@@ -10,9 +10,9 @@ pageDescription: In this guide, we will walk you through the steps required to a
 showHeader: true
 ---
 
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-import { AppProvider, Link, Box, HStack, Text } from "@gluestack/design-system";
+import { AppProvider, Link, Box, HStack, Text } from '@gluestack/design-system';
 
 <Meta title="Guides/Install in Expo" />
 
@@ -58,15 +58,29 @@ OR
 npm i @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
 ```
 
+### Step 1.5: Default Themed.(Optional)
+
+`@gluestack-ui/themed` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
+
+```bash
+yarn add @gluestack-ui/config@latest
+```
+
+OR
+
+```bash
+npm i @gluestack-ui/config@latest
+```
+
 ### Step 2: Configure the GluestackUIProvider
 
 The `GluestackUIProvider` is a component that provides aliases and tokens throughout your app, using React's Context API. It should be added to the root of your app.
 
 You can update your `App.tsx` file as follows:
 
 ```jsx
-import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
-import { config } from "@gluestack-ui/config";
+import { GluestackUIProvider, Text, Box } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config'; // Optional if you want to use default theme
 
 export default function App() {
   return (

example/storybook/src/guides/install-nextjs/index.stories.mdx

@@ -51,6 +51,20 @@ npm i @gluestack-ui/themed @gluestack-style/react @gluestack/ui-next-adapter rea
 
 ```
 
+### Step 1.5: Default Themed.(Optional)
+
+`@gluestack-ui/themed` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
+
+```bash
+yarn add @gluestack-ui/config@latest
+```
+
+OR
+
+```bash
+npm i @gluestack-ui/config@latest
+```
+
 ### Step 2: Server-side rendering (SSR)
 
 It's also recommended to set up your server-side rendering (SSR) correctly. To do this, you will need to use the `flush()` function exported by the [@gluestack-ui/themed](/ui/docs/configuration/ssr).
@@ -191,7 +205,7 @@ module.exports = withGluestackUI(nextConfig);
 'use client';
 
 import { GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from '@gluestack-ui/config';
+import { config } from '@gluestack-ui/config'; // Optional if you want to use default theme
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>;
@@ -240,7 +254,7 @@ For Next.js Page Router just add `GluestackUIProvider` to the root of your app a
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from '@gluestack-ui/config';
+import { config } from '@gluestack-ui/config'; // Optional if you want to use default theme
 
 export default function App({ Component, pageProps }: AppProps) {
   return (

example/storybook/src/guides/install-rn/index.stories.mdx

@@ -10,9 +10,9 @@ pageDescription: In this guide, we will walk you through the steps required to a
 showHeader: true
 ---
 
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-import { AppProvider, Link, Box, HStack, Text } from "@gluestack/design-system";
+import { AppProvider, Link, Box, HStack, Text } from '@gluestack/design-system';
 
 <Meta title="Guides/Install in React Native" />
 
@@ -42,15 +42,29 @@ OR
 npm i @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
 ```
 
+### Step 1.5: Default Themed.(Optional)
+
+`@gluestack-ui/themed` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
+
+```bash
+yarn add @gluestack-ui/config@latest
+```
+
+OR
+
+```bash
+npm i @gluestack-ui/config@latest
+```
+
 ### Step 2: Configure the GluestackUIProvider
 
 The `GluestackUIProvider` is a component that provides aliases and tokens throughout your app, using React's Context API. It should be added to the root of your app.
 
 You can update your `App.tsx` file as follows:
 
 ```jsx
-import { GluestackUIProvider, Text } from "@gluestack-ui/themed";
-import { config } from "@gluestack-ui/config";
+import { GluestackUIProvider, Text } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config'; // Optional if you want to use default theme
 
 export default function App() {
   return (

packages/config/package.json

@@ -29,10 +29,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@gluestack-style/react": "^1.0.5"
+    "@gluestack-style/react": "^1.0.5",
+    "@gluestack-ui/themed": "^1.0.5"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=1.0"
+    "@gluestack-style/react": ">=1.0",
+    "@gluestack-style/themed": ">=1.0"
   },
   "release-it": {
     "git": {

packages/themed/package.json

@@ -38,7 +38,6 @@
     "@gluestack-ui/avatar": "^0.1.11",
     "@gluestack-ui/button": "^0.1.29",
     "@gluestack-ui/checkbox": "^0.1.18",
-    "@gluestack-ui/config": "1.0.1",
     "@gluestack-ui/divider": "^0.1.5",
     "@gluestack-ui/fab": "^0.1.13",
     "@gluestack-ui/form-control": "^0.1.11",