feat: added switch component with examples natiivewind

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

@@ -26,12 +26,17 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
       control: 'boolean',
       options: [true, false],
     },
+    defaultValue: {
+      control: 'boolean',
+      options: [true, false],
+    },
   },
   args: {
     size: 'md',
     isDisabled: false,
     isEnabled: false,
     isInvalid: false,
+    defaultValue: false,
   },
 };
 

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

@@ -1,14 +1,23 @@
 import React from 'react';
-import { VStack, Text, HStack } from '@gluestack-ui/themed';
 import { Switch } from '@/components/ui/switch';
+import colors from 'tailwindcss/colors';
 
 const SwitchBasic = ({ ...props }: any) => {
-  return <Switch defaultValue={true} value={props.isEnabled} {...props} />;
+  return (
+    <Switch
+      // value={props.isEnabled}
+      trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+      thumbColor={colors.gray[50]}
+      activeThumbColor={colors.gray[50]}
+      ios_backgroundColor={colors.gray[300]}
+      {...props}
+    />
+  );
 };
 
 SwitchBasic.description =
   'This is a basic Switch component example. Switches are used to toggle between two states.';
 
 export default SwitchBasic;
 
-export { Switch, VStack, Text, HStack };
+export { Switch };

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

@@ -16,9 +16,8 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Switch" />
 
-import { Switch } from '../../core-components/nativewind';
-import { VStack, Text } from '../../core-components/nativewind';
-import { HStack } from '../../core-components/nativewind';
+import colors from 'tailwindcss/colors';
+import { HStack, Switch, VStack, Text } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -39,12 +38,15 @@ This is an illustration of **Switch** component.
     showArgsController={true}
     metaData={{
       code: `
-          <Switch {...props} />
+          <Switch {...props} trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+      thumbColor={colors.gray[50]}
+      activeThumbColor={colors.gray[50]}
+      ios_backgroundColor={colors.gray[300]} />
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Wrapper, Switch },
+      scope: { Wrapper, Switch, colors },
       argsType: {
         size: {
           control: 'select',
@@ -258,43 +260,116 @@ We have outlined the various features that ensure the Button component is access
 
 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).
 
-<!--
-## Spec Doc
+#### Switch
 
-Explore the comprehensive details of the Switch 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.
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>sm | md | lg</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
 
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5970%253A30699%26type%3Ddesign%26node-id%3D5970-32506%26viewport%3D659%252C250%252C0.03%26t%3DYxQQpkFNh6esETpC-1%26scaling%3Dcontain%26starting-point-node-id%3D5970%253A32506%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+> 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.
 
-<!--
-### Customizing the Switch
+### Examples
 
-We have a function called `createSwitch` which can be used to create a custom switch component. This function takes in a configuration object which contains the styled components that you want to use for the switch. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
+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.
 
-#### Usage
+#### Switch With Label
 
-Default styling of all these components can be found in the `components/core/switch` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Switch) of the styled `Switch` components.
+An example of a switch component with a label, which includes another switch component for toggling additional options.
 
-```jsx
-// import the styles
-import { Root } from 'components/core/switch/styled-components';
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="md">
+          <Switch
+            trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+            thumbColor={colors.gray[50]}
+            activeThumbColor={colors.gray[50]}
+            ios_backgroundColor={colors.gray[300]}
+          />
+          <Text size="sm" >Allow notifications</Text>
+        </HStack>
+     `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Switch,
+        Text,
+        HStack,
+        colors
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
 
-// import the createSwitch function
-import { createSwitch } from '@gluestack-ui/switch';
+#### Checked State
 
-// Understanding the API
-const Switch = createSwitch({
-  Root,
-});
+An example of a switch component used within a checked state component to represent a pre-selected or activated option.
 
-// Using the switch component
-export default () => <Switch />;
-```
--->
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="md">
+          <Switch
+            defaultValue={true}
+            trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+            thumbColor={colors.gray[50]}
+            activeThumbColor={colors.gray[50]}
+            ios_backgroundColor={colors.gray[300]}
+          />
+          <Text size="sm" >Public profile</Text>
+        </HStack>
+     `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Switch,
+        Text,
+        HStack,
+        colors,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>