feat(docs): switch docs done

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo, useRef} from "react";
 import dynamic from "next/dynamic";
-import {Spinner} from "@nextui-org/react";
+import {Skeleton} from "@nextui-org/react";
 import {useInView} from "framer-motion";
 
 import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
@@ -10,22 +10,14 @@ const DynamicReactLiveDemo = dynamic(
   {
     ssr: false,
     // eslint-disable-next-line react/display-name
-    loading: () => (
-      <div>
-        <Spinner />
-      </div>
-    ),
+    loading: () => <Skeleton className="w-full h-24 rounded-xl" />,
   },
 );
 
 const DynamicSandpack = dynamic(() => import("../../../sandpack").then((m) => m.Sandpack), {
   ssr: false,
   // eslint-disable-next-line react/display-name
-  loading: () => (
-    <div>
-      <Spinner />
-    </div>
-  ),
+  loading: () => <Skeleton className="w-full h-32 rounded-xl" />,
 });
 
 interface CodeDemoProps extends UseCodeDemoProps {

apps/docs/components/docs/components/component-links.tsx

@@ -5,11 +5,17 @@ import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
 
 export interface ComponentLinksProps {
   component: string;
+  styles?: string;
   storybook?: string;
   reactAriaHook?: string;
 }
 
-export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentLinksProps) => {
+export const ComponentLinks = ({
+  component,
+  storybook,
+  styles,
+  reactAriaHook,
+}: ComponentLinksProps) => {
   if (!component) {
     return null;
   }
@@ -70,7 +76,7 @@ export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentL
         isExternal
         as={Link}
         className="text-default-700"
-        href={`${COMPONENT_THEME_PATH}/${component}.ts`}
+        href={`${COMPONENT_THEME_PATH}/${styles || component}.ts`}
         radius="md"
         size="sm"
         startIcon={<GithubIcon />}

apps/docs/components/theme-switch.tsx

@@ -45,7 +45,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "bg-transparent",
               "rounded-lg",
               "flex items-center justify-center",
-              "group-data-[checked=true]:bg-transparent",
+              "group-data-[selected=true]:bg-transparent",
               "!text-default-600 dark:!text-default-500",
               "pt-px",
               "px-0",

apps/docs/content/components/checkbox/colors.ts

@@ -3,7 +3,7 @@ const App = `import {Checkbox} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Checkbox defaultSelected color="default">default</Checkbox>
+      <Checkbox defaultSelected color="default">Default</Checkbox>
       <Checkbox defaultSelected color="primary">Primary</Checkbox>
       <Checkbox defaultSelected color="secondary">Secondary</Checkbox>
       <Checkbox defaultSelected color="success">Success</Checkbox>

apps/docs/content/components/index.ts

@@ -21,3 +21,4 @@ export * from "./input";
 export * from "./textarea";
 export * from "./image";
 export * from "./radio-group";
+export * from "./switch";

apps/docs/content/components/switch/colors.ts

@@ -0,0 +1,22 @@
+const App = `import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected color="default">Default</Switch>
+      <Switch defaultSelected color="primary">Primary</Switch>
+      <Switch defaultSelected color="secondary">Secondary</Switch>
+      <Switch defaultSelected color="success">Success</Switch>
+      <Switch defaultSelected color="warning">Warning</Switch>
+      <Switch defaultSelected color="danger">Danger</Switch>
+    </div> 
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/controlled.ts

@@ -0,0 +1,22 @@
+const App = `import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(true);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
+        Airplane mode
+      </Switch>  
+      <p className="text-default-500">Selected: {isSelected ? "true" : "false"}</p>
+    </div>
+  )  
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/custom-impl.ts

@@ -0,0 +1,136 @@
+const MoonIcon = `export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const SunIcon = `export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);`;
+
+const App = `import {Switch, VisuallyHidden, useSwitch} from "@nextui-org/react";
+import {MoonIcon} from "./MoonIcon";
+import {SunIcon} from "./SunIcon";
+
+const ThemeSwitch = (props) => {
+  const {
+    Component, 
+    slots, 
+    isSelected, 
+    getBaseProps, 
+    getInputProps, 
+    getWrapperProps
+  } = useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+          <VisuallyHidden>
+            <input {...getInputProps()} />
+          </VisuallyHidden>
+          <div
+            {...getWrapperProps()}
+            className={slots.wrapper({
+              class: [
+                "w-8 h-8",
+                "flex items-center justify-center",
+                "rounded-lg bg-default-100 hover:bg-default-200",
+              ],
+            })}
+          >
+            {isSelected ? <SunIcon/> : <MoonIcon/>}
+          </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  )
+}
+
+
+export default function App() {
+  return <ThemeSwitch/>
+}`;
+
+const AppTs = `import {Switch, useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
+import {MoonIcon} from "./MoonIcon";
+import {SunIcon} from "./SunIcon";
+
+const ThemeSwitch = (props: SwitchProps) => {
+  const {
+    Component, 
+    slots, 
+    isSelected, 
+    getBaseProps, 
+    getInputProps, 
+    getWrapperProps
+  } = useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+          <VisuallyHidden>
+            <input {...getInputProps()} />
+          </VisuallyHidden>
+          <div
+            {...getWrapperProps()}
+            className={slots.wrapper({
+              class: [
+                "w-8 h-8",
+                "flex items-center justify-center",
+                "rounded-lg bg-default-100 hover:bg-default-200",
+              ],
+            })}
+          >
+            {isSelected ? <SunIcon/> : <MoonIcon/>}
+          </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  )
+}
+
+
+export default function App() {
+  return <ThemeSwitch/>
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/MoonIcon.jsx": MoonIcon,
+  "/SunIcon.jsx": SunIcon,
+};
+
+const reactTs = {
+  "/App.tsx": AppTs,
+  "/MoonIcon.tsx": MoonIcon,
+  "/SunIcon.tsx": SunIcon,
+};
+
+export default {
+  ...react,
+  ...reactTs,
+};

apps/docs/content/components/switch/custom-styles.ts

@@ -0,0 +1,39 @@
+const App = `import {Switch, cn} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch
+      classNames={{
+        base: cn(
+          "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
+          "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        wrapper: "p-0 h-4 overflow-visible",
+        thumb: cn("w-6 h-6 border-2 shadow-lg",
+          "group-data-[hover=true]:border-primary",
+          //selected
+          "group-data-[selected=true]:ml-6",
+          // pressed
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
+        ),
+      }}
+    >
+      <div className="flex flex-col gap-1">
+        <p className="text-base">Enable early access</p>
+        <p className="text-xs text-default-400">
+          Get access to new features before they are released.
+        </p>
+      </div>
+    </Switch>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/disabled.ts

@@ -0,0 +1,17 @@
+const App = `import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch isDisabled defaultSelected>
+      Automatic updates
+    </Switch>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/icons.ts

@@ -0,0 +1,61 @@
+const MoonIcon = `export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const SunIcon = `export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);`;
+
+const App = `import {Switch} from "@nextui-org/react";
+import {MoonIcon} from "./MoonIcon";
+import {SunIcon} from "./SunIcon";
+
+export default function App() {
+  return (
+    <Switch
+      defaultSelected
+      size="lg"
+      color="secondary"
+      startContent={<SunIcon />}
+      endContent={<MoonIcon />}
+    >
+      Dark mode
+    </Switch>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/MoonIcon.jsx": MoonIcon,
+  "/SunIcon.jsx": SunIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/index.ts

@@ -0,0 +1,23 @@
+import usage from "./usage";
+import label from "./label";
+import disabled from "./disabled";
+import sizes from "./sizes";
+import colors from "./colors";
+import thumbIcon from "./thumb-icon";
+import icons from "./icons";
+import controlled from "./controlled";
+import customStyles from "./custom-styles";
+import customImpl from "./custom-impl";
+
+export const switchContent = {
+  usage,
+  label,
+  disabled,
+  sizes,
+  colors,
+  thumbIcon,
+  icons,
+  controlled,
+  customStyles,
+  customImpl,
+};

apps/docs/content/components/switch/label.ts

@@ -0,0 +1,17 @@
+const App = `import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch defaultSelected>
+      Automatic updates
+    </Switch>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/sizes.ts

@@ -0,0 +1,21 @@
+const App = `import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected size="xs">Option</Switch>
+      <Switch defaultSelected size="sm">Option</Switch>
+      <Switch defaultSelected size="md">Option</Switch>
+      <Switch defaultSelected size="lg">Option</Switch>
+      <Switch defaultSelected size="xl">Option</Switch>
+    </div>  
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/thumb-icon.ts

@@ -0,0 +1,66 @@
+const MoonIcon = `export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const SunIcon = `export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);`;
+
+const App = `import {Switch} from "@nextui-org/react";
+import {MoonIcon} from "./MoonIcon";
+import {SunIcon} from "./SunIcon";
+
+export default function App() {
+  return (
+    <Switch
+      defaultSelected
+      size="lg"
+      color="secondary"
+      thumbIcon={({ isSelected, className }) =>
+        isSelected ? (
+          <SunIcon className={className} />
+        ) : (
+          <MoonIcon className={className} />
+        )
+      }
+    >
+      Dark mode
+    </Switch>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/MoonIcon.jsx": MoonIcon,
+  "/SunIcon.jsx": SunIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/switch/usage.ts

@@ -0,0 +1,15 @@
+const App = `import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch defaultSelected aria-label="Automatic updates"/>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/docs/components/accordion.mdx

@@ -121,6 +121,8 @@ Here's an example of how to customize the accordion styles:
 
 <CodeDemo title="Custom Accordion Styles" files={accordionContent.customStyles} />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `AccordionItem` has the following attributes on the `root` element:
@@ -130,6 +132,8 @@ Here's an example of how to customize the accordion styles:
 - **data-disabled**:
   When the accordion item is disabled.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Keyboard event support for <kbd>Space</kbd>, <kbd>Enter</kbd>, <kbd>Arrow Up</kbd>, <kbd>Arrow Down</kbd> and <kbd>Home</kbd> / <kbd>End</kbd> keys.
@@ -138,6 +142,8 @@ Here's an example of how to customize the accordion styles:
 - `aria-disabled` attribute for the accordion item.
 - `aria-controls` attribute for the accordion item.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Accordion Item Props

apps/docs/content/docs/components/avatar.mdx

@@ -132,6 +132,8 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 
 <CodeDemo title="Custom Avatar" files={avatarContent.custom} />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `Avatar` has the following attributes on the `root` element:
@@ -143,6 +145,8 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 - **data-focus-visible**:
   When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Avatar Props

apps/docs/content/docs/components/badge.mdx

@@ -74,7 +74,7 @@ Instead, consider supplying a comprehensive description, such as using `aria-lab
 
 <CodeDemo title="Accessibility" files={badgeContent.a11y} />
 
-<Spacer y={8} />
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/button.mdx

@@ -74,7 +74,7 @@ You can also display a button without text by passing the `isIconOnly` prop and
 
 ### Custom Styles
 
-You can customize any part of the avatar by using the `className` prop.
+You can customize the `Button` component by passing custom Tailwind CSS classes to the component slots.
 
 <CodeDemo title="Custom Styles" files={buttonContent.customStyles} />
 
@@ -105,6 +105,8 @@ A common use case for the `ButtonGroup` component is to display a group of two b
 
 > See the [Dropdown](/docs/components/dropdown) component for more details.
 
+<Spacer y={4} />
+
 ## Data Attributes
 
 `Button` has the following attributes on the `root` element:
@@ -122,6 +124,7 @@ A common use case for the `ButtonGroup` component is to display a group of two b
 - **data-loading**:
   When the button is loading. Based on `isLoading` prop.
 
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -133,6 +136,7 @@ A common use case for the `ButtonGroup` component is to display a group of two b
 We recommend to read this [blog post](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) about the complexities of 
 building buttons that work well across devices and interaction methods.
 
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/card.mdx

@@ -74,6 +74,8 @@ You can use `Image` component as the cover of the card by taking it out of the `
 
 <CodeDemo title="Cover Image" files={cardContent.coverImage} />
 
+<Spacer y={4} />
+
 ## Data Attributes
 
 `Card` has the following attributes on the `root` element:
@@ -89,6 +91,8 @@ You can use `Image` component as the cover of the card by taking it out of the `
 - **data-pressed**:
   When the card is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html)
 
+<Spacer y={4} />
+
 ## API
 
 ### Card Props

apps/docs/content/docs/components/checkbox-group.mdx

@@ -54,6 +54,9 @@ You can use the `value` and `onValueChange` properties to control the checkbox i
 
 ### Custom Styles
 
+
+You can customize the `CheckboxGroup` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo title="Custom Styles" files={checkboxGroupContent.customStyles} />
 
 ### Custom Implementation
@@ -64,6 +67,8 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 > **Note**: We used [Tailwind Variants](https://www.tailwind-variants.org/) to implement the styles above, you can use any other library such as [clsx](https://www.npmjs.com/package/clsx) to achieve the same result.
 
+<Spacer y={4} />
+
 ## API
 
 ### Checkbox Group Props

apps/docs/content/docs/components/checkbox.mdx

@@ -71,6 +71,8 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
 
 ### Custom Styles
 
+You can customize the `Checkbox` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo title="Custom Styles" files={checkboxContent.customStyles} />
 
 ### Custom Implementation
@@ -81,6 +83,8 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 > **Note**: We used [Tailwind Variants](https://www.tailwind-variants.org/) to implement the styles above, you can use any other library such as [clsx](https://www.npmjs.com/package/clsx) to achieve the same result.
 
+<Spacer y={4} />{" "}
+
 ## Data Attributes
 
 `Checkbox` has the following attributes on the `root` element:
@@ -106,6 +110,8 @@ In case you need to customize the checkbox even further, you can use the `useChe
 - **data-loading**:
   When the checkbox is loading. Based on `isLoading` prop.
 
+<Spacer y={4} />{" "}
+
 ## Accessibility
 
 - Built with a native HTML `<input>` element.
@@ -115,6 +121,8 @@ In case you need to customize the checkbox even further, you can use the `useChe
 - Labeling support for assistive technology.
 - Indeterminate state support.
 
+<Spacer y={4} />
+
 ## API
 
 ### Checkbox Props
@@ -141,10 +149,10 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Events
 
-| Attribute     | Type                                   | Description                                                                                                                                              |
-| ------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent <HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
-| onValueChange | `(isSelected: boolean) => void`        | Handler that is called when the element's selection state changes.                                                                                       |
+| Attribute     | Type                                  | Description                                                                                                                                              |
+| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
+| onValueChange | `(isSelected: boolean) => void`       | Handler that is called when the element's selection state changes.                                                                                       |
 
 ### Types
 

apps/docs/content/docs/components/chip.mdx

@@ -73,8 +73,12 @@ If you pass the `onClose` prop, the close button will be visible. You can overri
 
 ### Custom Styles
 
+You can customize the `Chip` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo title="Custom Styles" files={chipContent.customStyles} />
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Chip Props

apps/docs/content/docs/components/circular-progress.mdx

@@ -67,12 +67,16 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
 
 ### Custom Styles
 
+You can customize the `CircularProgress` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo
   title="Custom Styles"
   files={circularProgressContent.customStyles}
   highlightedLines="9-12"
 />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `CircularProgress` has the following attributes on the `root` element:
@@ -82,6 +86,8 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
 - **data-disabled**:
   Indicates whether the progress is disabled. Based on `isDisabled` prop.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Exposed to assistive technology as a progress bar via ARIA.
@@ -90,6 +96,8 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
 - Determinate and indeterminate progress support.
 - Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Circular Progress Props

apps/docs/content/docs/components/code.mdx

@@ -34,6 +34,8 @@ Code is a component used to display inline code.
 
 <CodeDemo title="Colors" files={codeContent.colors} />
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Code Props

apps/docs/content/docs/components/divider.mdx

@@ -25,6 +25,8 @@ Divider is a component that separates content in a page.
 
 <CodeDemo title="Usage" files={dividerContent.usage} />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `Divider` has the following attributes on the `root` element:
@@ -32,12 +34,16 @@ Divider is a component that separates content in a page.
 - **data-orientation**:
   The orientation of the divider. Based on `orientation` prop.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Separator role is added to the divider.
 - Support for horizontal and vertical orientation.
 - Support for HTML `<hr>` element or a custom element type.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Divider Props

apps/docs/content/docs/components/input.mdx

@@ -119,6 +119,8 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 ### Custom Styles
 
+You can customize the `Input` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo title="Custom Styles" highlightedLines="14-32" files={inputContent.customStyles} />
 
 ### Custom Implementation
@@ -132,6 +134,8 @@ In case you need to customize the input even further, you can use the `useInput`
   files={inputContent.customImpl}
 />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `Input` has the following attributes on the `root` element:
@@ -151,6 +155,8 @@ In case you need to customize the input even further, you can use the `useInput`
 - **data-disabled**:
   When the input is disabled. Based on `isDisabled` prop.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Built with a native `<input>` element.
@@ -159,6 +165,8 @@ In case you need to customize the input even further, you can use the `useInput`
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Input Props

apps/docs/content/docs/components/kbd.mdx

@@ -37,10 +37,14 @@ Keyboard key is a component to display which key or combination of keys performs
 - **abbr**: The `keys` wrapper that handles the appearance of the keys.
 - **content**: The children wrapper that handles the appearance of the content.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Each command `key` has a `title` attribute that describes the action that the key performs.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Keyboard Key Props

apps/docs/content/docs/components/link.mdx

@@ -78,6 +78,8 @@ In case you need to customize the link even further, you can use the `useLink` h
 
 <CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `Link` has the following attributes on the `root` element:
@@ -89,6 +91,7 @@ In case you need to customize the link even further, you can use the `useLink` h
 - **data-disabled**:
   When the link is disabled. Based on `isDisabled` prop.
 
+<Spacer y={4}/>  
 
 ## Accessibility
 
@@ -97,6 +100,8 @@ In case you need to customize the link even further, you can use the `useLink` h
 - Support for disabled links.
 - Keyboard users may activate links using the <kbd>Enter</kbd> key.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Link Props

apps/docs/content/docs/components/progress.mdx

@@ -75,8 +75,12 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
 
 ### Custom Styles
 
+You can customize the `Progress` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo title="Custom Styles" files={progressContent.customStyles} highlightedLines="9-13" />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `CircularProgress` has the following attributes on the `root` element:
@@ -86,6 +90,8 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
 - **data-disabled**:
   Indicates whether the progress is disabled. Based on `isDisabled` prop.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Exposed to assistive technology as a progress bar via ARIA.
@@ -94,6 +100,8 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
 - Determinate and indeterminate progress support.
 - Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Circular Progress Props

apps/docs/content/docs/components/radio-group.mdx

@@ -53,7 +53,6 @@ You can use the `value` and `onValueChange` properties to control the radio inpu
 ## Slots
 
 - RadioGroup Slots
-
   - **base**: Radio group root wrapper, it wraps the label and the wrapper.
   - **wrapper**: Radio group wrapper, it wraps all Radios.
   - **label**: Radio group label, it is placed before the wrapper.
@@ -70,6 +69,8 @@ You can use the `value` and `onValueChange` properties to control the radio inpu
 
 ### Custom Styles
 
+You can customize the `RadioGroup` and `Radio` component by passing custom Tailwind CSS classes to the component slots.
+
 <CodeDemo title="Custom Styles" files={radioGroupContent.customStyles} />
 
 ### Custom Implementation
@@ -78,6 +79,8 @@ In case you need to customize the radio group even further, you can use the `use
 
 <CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 - RadioGroup has the following attributes on the `root` element:
@@ -106,6 +109,8 @@ In case you need to customize the radio group even further, you can use the `use
   - **data-disabled**:
     When the radio is disabled. Based on `isDisabled` prop.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Radio groups are exposed to assistive technology via ARIA.
@@ -115,6 +120,8 @@ In case you need to customize the radio group even further, you can use the `use
 - Keyboard focus management and cross browser normalization.
 - Group and radio labeling support for assistive technology.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### RadioGroup Props

apps/docs/content/docs/components/skeleton.mdx

@@ -43,6 +43,8 @@ You can use the `isLoaded` prop to stop the skeleton animation and show the chil
 - **base**: The base slot of the skeleton, it contains the `before` and `after` pseudo elements to create the animation.
 - **content**: The wrapped component to show the skeleton shape. It is visible only when the `isLoaded` prop is `true`.
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `Skeleton` has the following attributes on the `root` element:
@@ -50,6 +52,8 @@ You can use the `isLoaded` prop to stop the skeleton animation and show the chil
 - **data-loaded**:
   Indicates the loaded state of the skeleton. Based on the `isLoaded` prop.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Skeleton Props

apps/docs/content/docs/components/snippet.mdx

@@ -75,6 +75,8 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 - **copyIcon**: The copy icon slot.
 - **checkIcon**: The check icon slot.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Snippet Props

apps/docs/content/docs/components/spacer.mdx

@@ -27,6 +27,8 @@ Spacer is a component used to add space between components.
 
 > **Note**: The `x` and `y` values are based on [Tailwind Spacing Scale](https://tailwindcss.com/docs/space)
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Spacer Props

apps/docs/content/docs/components/spinner.mdx

@@ -51,6 +51,8 @@ Spinner express an unspecified wait time or display the length of a process.
 - **circle2**: The second circle of the spinner.
 - **label**: The label content.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Circular Progress Props

apps/docs/content/docs/components/switch.mdx

@@ -1,14 +1,160 @@
 ---
-title: 'Switch'
-description: 'The Switch component is used as an alternative for the Checkbox component. You can switch between enabled or disabled states.'
+title: "Switch"
+description: "The Switch component is used as an alternative between checked and not checked states."
 url: https://nextui.org/docs/components/switch
 ---
 
 # Switch
 
-The Switch component is used as an alternative for the [Checkbox](https://nextui.org/docs/components/checkbox)
-component. You can switch between enabled or disabled states.
+The Switch component is used as an alternative between checked and not checked states.
 
-```jsx
-import {Switch} from '@nextui-org/react';
-```
+<ComponentLinks component="switch" styles="toggle" reactAriaHook="useSwitch" />
+
+---
+
+## Import
+
+<ImportTabs
+  commands={{
+    main: 'import {Switch} from "@nextui-org/react";',
+    individual: 'import {Switch} from "@nextui-org/switch";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={switchContent.usage} />
+
+### With Label
+
+<CodeDemo title="With Label" files={switchContent.label} />
+
+### Disabled
+
+<CodeDemo title="Disabled" files={switchContent.disabled} />
+
+### Sizes
+
+<CodeDemo title="Sizes" files={switchContent.sizes} />
+
+### Colors
+
+<CodeDemo title="Colors" files={switchContent.colors} />
+
+### With Thumb Icon
+
+<CodeDemo title="With Thumb Icon" files={switchContent.thumbIcon} />
+
+### With Icons
+
+You can also add icons to start and end of the switch by using `startContent` and `endContent` props.
+
+<CodeDemo title="With Icons" files={switchContent.icons} highlightedLines="11-12" />
+
+### Controlled
+
+<CodeDemo title="Controlled" files={switchContent.controlled} />
+
+> **Note**: NextUI `Switch` also supports native events like `onChange`, useful for form libraries
+> such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/).
+
+## Slots
+
+- **base**: Base slot for the switch. It is the main wrapper.
+- **wrapper**: The wrapper of the start icon, end icon and thumb.
+- **thumb**: The thumb element of the switch. It is the circle element.
+- **label**: The label slot of the switch.
+- **startContent**:The icon slot at the start of the switch.
+- **endContent**: The icon slot at the end of the switch.
+- **thumbIcon**: The icon slot inside the thumb.
+
+### Custom Styles
+
+You can customize the `Switch` component by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo title="Custom Styles" files={switchContent.customStyles} />
+
+### Custom Implementation
+
+In case you need to customize the switch even further, you can use the `useSwitch` hook to create your own implementation.
+
+<CodeDemo title="Custom Implementation" files={switchContent.customImpl} />
+
+<Spacer y={4} />{" "}
+
+## Data Attributes
+
+`Switch` has the following attributes on the `root` element:
+
+- **data-selected**:
+  When the switch is checked. Based on `isSelected` prop.
+- **data-pressed**:
+  When the switch is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html)
+- **data-readonly**:
+  When the switch is readonly. Based on `isReadOnly` prop.
+- **data-hover**:
+  When the switch is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
+- **data-focus**:
+  When the switch is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
+- **data-focus-visible**:
+  When the switch is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
+- **data-disabled**:
+  When the switch is disabled. Based on `isDisabled` prop.
+
+<Spacer y={4} />{" "}
+
+## Accessibility
+
+- Built with a native HTML `<input>` element.
+- Full support for browser features like form autofill.
+- Keyboard focus management and cross browser normalization.
+- Keyboard event support for <kbd>Tab</kbd> and <kbd>Space</kbd> keys.
+- Labeling support for assistive technology.
+- Exposed as a switch to assistive technology via ARIA
+
+<Spacer y={4} />{" "}
+
+## API
+
+### Switch Props
+
+| Attribute        | Type                                                                                                       | Description                                                         | Default   |
+| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------- |
+| children         | `ReactNode`                                                                                                | The label of the switch.                                            | -         |
+| value            | `string`                                                                                                   | The value of the input element, used when submitting an HTML form.  | -         |
+| name             | `string`                                                                                                   | The name of the input element, used when submitting an HTML form.   | -         |
+| size             | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                                                       | The size of the switch.                                             | `md`      |
+| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                | The color of the switch.                                            | `primary` |
+| thumbIcon        | [ThumbIconProps](#switch-icon-props)                                                                       | The icon to be displayed when the switch is checked.                | -         |
+| startContent     | `ReactNode`                                                                                                | The icon to be displayed at the start of the switch.                | -         |
+| endContent       | `ReactNode`                                                                                                | The icon to be displayed at the end of the switch.                  | -         |
+| isSelected       | `boolean`                                                                                                  | Whether the element should be selected (controlled).                | -         |
+| defaultSelected  | `boolean`                                                                                                  | Whether the element should be selected (uncontrolled).              | -         |
+| isRequired       | `boolean`                                                                                                  | Whether user input is required on the input before form submission. | `false`   |
+| isReadOnly       | `boolean`                                                                                                  | Whether the input can be selected but not changed by the user.      | -         |
+| isDisabled       | `boolean`                                                                                                  | Whether the switch is disabled.                                     | `false`   |
+| disableAnimation | `boolean`                                                                                                  | Whether the animation should be disabled.                           | `false`   |
+| classNames       | `Record<"base"｜ "wrapper"｜ "thumb"｜ "label" ｜ "startContent" ｜ "endContent" ｜ "thumbIcon" , string>` | Allows to set custom class names for the switch slots.              | -         |
+
+### Switch Events
+
+| Attribute     | Type                                  | Description                                                                                                                                              |
+| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
+| onValueChange | `(isSelected: boolean) => void`       | Handler that is called when the element's selection state changes.                                                                                       |
+
+### Types
+
+#### Switch Icon Props
+
+```ts
+type IconProps = {
+  "data-checked": string;
+  width: string;
+  height: string;
+  isSelected: boolean;
+  className: string;
+};
+
+type CheckboxIconProps = ReactNode | ((props: IconProps) => ReactNode);
+```

apps/docs/content/docs/components/textarea.mdx

@@ -79,6 +79,8 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **description**: The description of the textarea.
 - **errorMessage**: The error message of the textarea.
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `Textarea` has the following attributes on the `root` element:
@@ -98,6 +100,8 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **data-disabled**:
   When the textarea is disabled. Based on `isDisabled` prop.
 
+<Spacer y={4}/>  
+
 ## Accessibility
 
 - Built with a native `<input>` element.
@@ -106,6 +110,8 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
+<Spacer y={4}/>  
+
 ## API
 
 ### Textarea Props

apps/docs/content/docs/components/user.mdx

@@ -38,6 +38,8 @@ Display user information with avatar and name.
 - **name**: The name of the user.
 - **description**: The description of the user.
 
+<Spacer y={4}/>  
+
 ## Data Attributes
 
 `User` has the following attributes on the `root` element only when `isFocusable` is `true`:
@@ -47,6 +49,8 @@ Display user information with avatar and name.
 - **data-focus-visible**:
   When the user is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)
 
+<Spacer y={4}/>  
+
 ## API
 
 ### User Props

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/accordion
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230604204500
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/avatar
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-image@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/badge
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/button
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/spinner@0.0.0-dev-v2-20230604204500
+  - @nextui-org/drip@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/card/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/drip@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/checkbox
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/chip
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"

packages/components/code/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/code
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/divider/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/divider
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": ". A separator is a visual divider between two groups of content",
   "keywords": [
     "divider"

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/drip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
   "keywords": [
     "drip"

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/dropdown
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/popover@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"

packages/components/image/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/image
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-image@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A simple image component",
   "keywords": [
     "image"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"

packages/components/kbd/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/kbd
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"

packages/components/link/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/link
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"

packages/components/modal/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/modal
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/navbar
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/pagination
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/popover
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/progress
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/radio
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"

packages/components/skeleton/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/skeleton
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Skeleton is used to display the loading state of some component.",
   "keywords": [
     "skeleton"

packages/components/snippet/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/snippet
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230604204500
+  - @nextui-org/button@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"

packages/components/spacer/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spacer
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/spacer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"

packages/components/spinner/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spinner
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",

packages/components/switch/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/switch
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/switch/__tests__/switch.test.tsx

@@ -148,9 +148,9 @@ describe("Switch", () => {
       }),
     );
 
-    const checkedThumbIcon = container.querySelector("[data-testid=checked-thumb-icon]");
+    const checkedthumbIcon = container.querySelector("[data-testid=checked-thumb-icon]");
 
-    expect(checkedThumbIcon).toBeInTheDocument();
+    expect(checkedthumbIcon).toBeInTheDocument();
 
     act(() => {
       checkbox.click();
@@ -164,31 +164,33 @@ describe("Switch", () => {
       }),
     );
 
-    const uncheckedThumbIcon = container.querySelector("[data-testid=unchecked-thumb-icon]");
+    const uncheckedthumbIcon = container.querySelector("[data-testid=unchecked-thumb-icon]");
 
-    expect(uncheckedThumbIcon).toBeInTheDocument();
+    expect(uncheckedthumbIcon).toBeInTheDocument();
   });
 
-  it('should work with "startIcon"', () => {
+  it('should work with "startContent"', () => {
     const wrapper = render(
-      <Switch aria-label="switch" startIcon={<svg data-testid="start-icon" />} />,
+      <Switch aria-label="switch" startContent={<svg data-testid="start-icon" />} />,
     );
 
     expect(wrapper.getByTestId("start-icon")).toBeInTheDocument();
   });
 
-  it('should work with "endIcon"', () => {
-    const wrapper = render(<Switch aria-label="switch" endIcon={<svg data-testid="end-icon" />} />);
+  it('should work with "endContent"', () => {
+    const wrapper = render(
+      <Switch aria-label="switch" endContent={<svg data-testid="end-icon" />} />,
+    );
 
     expect(wrapper.getByTestId("end-icon")).toBeInTheDocument();
   });
 
-  it('should work with "startIcon" and "endIcon"', () => {
+  it('should work with "startContent" and "endContent"', () => {
     const wrapper = render(
       <Switch
         aria-label="switch"
-        endIcon={<svg data-testid="end-icon" />}
-        startIcon={<svg data-testid="start-icon" />}
+        endContent={<svg data-testid="end-icon" />}
+        startContent={<svg data-testid="start-icon" />}
       />,
     );
 

packages/components/switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"

packages/components/switch/src/switch.tsx

@@ -10,8 +10,8 @@ const Switch = forwardRef<SwitchProps, "div">((props, ref) => {
   const {
     Component,
     children,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
     thumbIcon,
     getBaseProps,
     getInputProps,
@@ -19,8 +19,8 @@ const Switch = forwardRef<SwitchProps, "div">((props, ref) => {
     getThumbProps,
     getThumbIconProps,
     getLabelProps,
-    getStartIconProps,
-    getEndIconProps,
+    getStartContentProps,
+    getEndContentProps,
   } = useSwitch({ref, ...props});
 
   const clonedThumbIcon =
@@ -28,8 +28,10 @@ const Switch = forwardRef<SwitchProps, "div">((props, ref) => {
       ? thumbIcon(getThumbIconProps({includeStateProps: true}))
       : thumbIcon && cloneElement(thumbIcon as ReactElement, getThumbIconProps());
 
-  const clonedStartIcon = startIcon && cloneElement(startIcon as ReactElement, getStartIconProps());
-  const clonedEndIcon = endIcon && cloneElement(endIcon as ReactElement, getEndIconProps());
+  const clonedStartContent =
+    startContent && cloneElement(startContent as ReactElement, getStartContentProps());
+  const clonedEndContent =
+    endContent && cloneElement(endContent as ReactElement, getEndContentProps());
 
   return (
     <Component {...getBaseProps()}>
@@ -37,9 +39,9 @@ const Switch = forwardRef<SwitchProps, "div">((props, ref) => {
         <input {...getInputProps()} />
       </VisuallyHidden>
       <span {...getWrapperProps()}>
-        {startIcon && clonedStartIcon}
+        {startContent && clonedStartContent}
         <span {...getThumbProps()}>{thumbIcon && clonedThumbIcon}</span>
-        {endIcon && clonedEndIcon}
+        {endContent && clonedEndContent}
       </span>
       {children && <span {...getLabelProps()}>{children}</span>}
     </Component>

packages/components/switch/src/use-switch.ts

@@ -43,11 +43,11 @@ interface Props extends HTMLNextUIProps<"label"> {
   /**
    * Start icon to be displayed inside the switch.
    */
-  startIcon?: ReactNode;
+  startContent?: ReactNode;
   /**
    * End icon to be displayed inside the switch.
    */
-  endIcon?: ReactNode;
+  endContent?: ReactNode;
   /**
    * Classname or List of classes to change the classNames of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -84,8 +84,8 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
     value = "",
     isReadOnly: isReadOnlyProp = false,
     autoFocus = false,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
     defaultSelected,
     isSelected: isSelectedProp,
     children,
@@ -189,7 +189,7 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
       ref: domRef,
       className: slots.base({class: clsx(baseStyles, props?.className)}),
       "data-disabled": dataAttr(isDisabled),
-      "data-checked": dataAttr(isSelected),
+      "data-selected": dataAttr(isSelected),
       "data-readonly": dataAttr(isReadOnly),
       "data-focus": dataAttr(isFocused),
       "data-focus-visible": dataAttr(isFocusVisible),
@@ -261,24 +261,24 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
     [slots, classNames?.thumbIcon, isSelected],
   );
 
-  const getStartIconProps = useCallback<PropGetter>(
+  const getStartContentProps = useCallback<PropGetter>(
     (props = {}) => ({
       width: "1em",
       height: "1em",
       ...props,
-      className: slots.startIcon({class: clsx(classNames?.startIcon, props?.className)}),
+      className: slots.startContent({class: clsx(classNames?.startContent, props?.className)}),
     }),
-    [slots, classNames?.startIcon, isSelected],
+    [slots, classNames?.startContent, isSelected],
   );
 
-  const getEndIconProps = useCallback<PropGetter>(
+  const getEndContentProps = useCallback<PropGetter>(
     (props = {}) => ({
       width: "1em",
       height: "1em",
       ...props,
-      className: slots.endIcon({class: clsx(classNames?.endIcon, props?.className)}),
+      className: slots.endContent({class: clsx(classNames?.endContent, props?.className)}),
     }),
-    [slots, classNames?.endIcon, isSelected],
+    [slots, classNames?.endContent, isSelected],
   );
 
   return {
@@ -288,8 +288,8 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
     domRef,
     children,
     thumbIcon,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
     isHovered,
     isSelected,
     isPressed: pressed,
@@ -302,8 +302,8 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
     getLabelProps,
     getThumbProps,
     getThumbIconProps,
-    getStartIconProps,
-    getEndIconProps,
+    getStartContentProps,
+    getEndContentProps,
   };
 }
 

packages/components/switch/stories/switch.stories.tsx

@@ -6,7 +6,7 @@ import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {SunFilledIcon, MoonFilledIcon} from "@nextui-org/shared-icons";
 import {clsx} from "@nextui-org/shared-utils";
 
-import {Switch, SwitchProps, SwitchThumbIconProps, useSwitch} from "../src";
+import {Switch, SwitchProps, SwitchthumbIconProps, useSwitch} from "../src";
 
 export default {
   title: "Components/Switch",
@@ -51,11 +51,11 @@ const WithIconsTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) =>
       <Switch
         {...args}
         classNames={{
-          startIcon: "text-white",
+          startContent: "text-white",
         }}
-        endIcon={<MoonFilledIcon />}
+        endContent={<MoonFilledIcon />}
         isSelected={isSelected}
-        startIcon={<SunFilledIcon />}
+        startContent={<SunFilledIcon />}
         onValueChange={setIsSelected}
       />
       <p className="text-default-500">Selected: {isSelected ? "true" : "false"}</p>
@@ -158,11 +158,11 @@ DisableAnimation.args = {
   disableAnimation: true,
 };
 
-export const WithThumbIcon = Template.bind({});
-WithThumbIcon.args = {
+export const WiththumbIcon = Template.bind({});
+WiththumbIcon.args = {
   ...defaultProps,
   size: "xl",
-  thumbIcon: (props: SwitchThumbIconProps) =>
+  thumbIcon: (props: SwitchthumbIconProps) =>
     props.isSelected ? (
       <SunFilledIcon className={props.className} />
     ) : (

packages/components/table/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/table
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/spacer@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"

packages/components/tabs/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/tabs
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230604204500
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes

packages/components/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230604191549",
+  "version": "0.0.0-dev-v2-20230604204500",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"

packages/components/tooltip/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/tooltip
 
+## 0.0.0-dev-v2-20230604204500
+
+### Patch Changes
+
+- Switch API changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230604204500
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230604204500
+  - @nextui-org/system@0.0.0-dev-v2-20230604204500
+  - @nextui-org/theme@0.0.0-dev-v2-20230604204500
+
 ## 0.0.0-dev-v2-20230604191549
 
 ### Patch Changes