ci(changesets): version packages (#1366 )

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
fix(tooltip): filter dom props function fixed (#1365 )
2023-08-11 12:20:17 -03:00 · 2023-08-11 12:06:47 -03:00 · 2023-08-11 09:04:17 -03:00 · 2023-08-10 23:47:40 -03:00 · 2023-08-10 23:25:24 -03:00 · 2023-08-10 17:35:26 -03:00
300 changed files with 12101 additions and 9513 deletions
@@ -1,6 +1,7 @@
 .now/*
 .next/*
 *.css
+.changeset
 dist
 esm/*
 public/*
@@ -20,6 +20,7 @@ coverage
 dist/
 storybook-static
 /packages/storybook/public/tailwind.css
+
 # misc
 .DS_Store
 .env
@@ -2,6 +2,7 @@ dist
 node_modules
 plop
 coverage
+.changeset
 .next
 build
 scripts
@@ -179,9 +179,9 @@ const MyButton2 = extendVariants(Button, {
 });

 export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string | undefined>("");
-  const [textB, setTextB] = useState<string | undefined>("");
-  const [textC, setTextC] = useState<string | undefined>("");
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");

  return (
    <div className="w-full p-24 gap-4 flex flex-col">
@@ -271,8 +271,6 @@ export default function Page() {

  const [page, setPage] = useState(1);

-  const pages = Math.ceil(users.length / rowsPerPage);
-
  const hasSearchFilter = Boolean(filterValue);

  const headerColumns = useMemo(() => {
@@ -298,6 +296,8 @@ export default function Page() {
    return filteredUsers;
  }, [users, filterValue, statusFilter]);

+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
  const items = useMemo(() => {
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;
@@ -390,6 +390,11 @@ export default function Page() {
    }
  }, []);

+  const onClear = useCallback(() => {
+    setFilterValue("");
+    setPage(1);
+  }, []);
+
  const topContent = useMemo(() => {
    return (
      <div className="flex flex-col gap-4">
@@ -400,7 +405,7 @@ export default function Page() {
            placeholder="Search by name..."
            startContent={<SearchIcon />}
            value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
            onValueChange={onSearchChange}
          />
          <div className="flex gap-3">
@@ -483,23 +488,22 @@ export default function Page() {
        <span className="w-[30%] text-small text-default-400">
          {selectedKeys === "all"
            ? "All items selected"
-            : `${selectedKeys.size} of ${items.length} selected`}
+            : `${selectedKeys.size} of ${filteredItems.length} selected`}
        </span>
        <Pagination
          isCompact
          showControls
          showShadow
          color="primary"
-          isDisabled={hasSearchFilter}
          page={page}
          total={pages}
          onChange={setPage}
        />
        <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
            Previous
          </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
            Next
          </Button>
        </div>
@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/react";
+import {Spacer} from "@nextui-org/spacer";

 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
@@ -1,7 +1,7 @@
 "use client";

 import {BlogPost} from "contentlayer/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar} from "@nextui-org/react";
+import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
@@ -39,10 +39,9 @@ const BlogPostCard = (post: BlogPost) => {
                <Balancer>{post.title}</Balancer>
              </Link>
            </CardHeader>
-            <CardBody className="px-3 pt-0 pb-1">
-              <p className="font-normal text-default-600">
-                <Balancer>{post.description}</Balancer>
-              </p>
+            <CardBody className="pt-0 px-2 pb-1">
+              <Image className="mb-3" src={post.image} />
+              <p className="font-normal px-1 text-default-600">{post.description}</p>
            </CardBody>
            <CardFooter className="flex justify-between items-center">
              <time className="block text-small text-default-500" dateTime={post.date}>
@@ -1,12 +1,15 @@
-import {Button, ButtonProps, Link} from "@nextui-org/react";
+import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
+import {ReactNode} from "react";
+import Balancer from "react-wrap-balancer";

-import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon} from "@/components/icons";
+import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";

 export interface ComponentLinksProps {
  component: string;
  styles?: string;
  storybook?: string;
+  rscCompatible?: boolean;
  reactAriaHook?: string;
 }

@@ -14,27 +17,40 @@ const ButtonLink = ({
  children,
  href,
  startContent,
+  tooltip,
  ...props
 }: ButtonProps & {
  href: string;
-}) => (
-  <Button
-    isExternal
-    as={Link}
-    className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
-    href={href}
-    size="sm"
-    startContent={startContent}
-    {...props}
-  >
-    {children}
-  </Button>
-);
+  tooltip?: string | ReactNode;
+}) => {
+  const button = (
+    <Button
+      isExternal
+      as={Link}
+      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      href={href}
+      size="sm"
+      startContent={startContent}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+
+  return tooltip ? (
+    <Tooltip className="max-w-[230px]" content={tooltip}>
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  );
+};

 export const ComponentLinks = ({
  component,
  storybook,
  styles,
+  rscCompatible,
  reactAriaHook,
 }: ComponentLinksProps) => {
  if (!component) {
@@ -63,6 +79,26 @@ export const ComponentLinks = ({
          React Aria
        </ButtonLink>
      )}
+      {rscCompatible && (
+        <ButtonLink
+          href="https://nextjs.org/docs/getting-started/react-essentials#server-components"
+          startContent={<NextJsIcon size={18} />}
+          tooltip={
+            <p>
+              <Balancer>
+                This component doesn&apos;t use the
+                <Code className="font-normal bg-transparent px-0 py-0 text-code-mdx">
+                  `use client;`
+                </Code>
+                directive making it compatible with RSC.
+              </Balancer>
+            </p>
+          }
+        >
+          Server component
+        </ButtonLink>
+      )}
+
      <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
        Source
      </ButtonLink>
@@ -30,8 +30,7 @@ export const nextuiTheme: SandpackTheme = {
  },
  font: {
    body: "Inter var",
-    mono:
-      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
    size: "14px",
    lineHeight: "1.5rem",
  },
@@ -175,7 +175,7 @@ We've added a new function, `extendVariants`, that allows you to customize any N
  height={350}
 />

-You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
+You can create or override the component `variants`, `defaultVariants` and `compoundVariants`.

 > Check out the [Custom Variants](/docs/customization/custom-variants) documentation for more information.

@@ -140,7 +140,7 @@ const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...p
  </svg>
 );`;

-const App = `import {Card, CardFooter, Image, Button, Progress} from "@nextui-org/react";
+const App = `import {Card, CardBody, Image, Button, Progress} from "@nextui-org/react";
 import {HeartIcon} from "./HeartIcon";
 import {PauseCircleIcon} from "./PauseCircleIcon";
 import {NextIcon} from "./NextIcon";
@@ -16,6 +16,7 @@ export default function App() {
      <div className="flex flex-wrap gap-3">
        {backdrops.map((b) => (
          <Button  
+            key={b}
            variant="flat" 
            color="warning" 
            onPress={() => handleOpen(b)}
@@ -16,7 +16,7 @@ export default function App() {
    <>
      <div className="flex flex-wrap gap-3">
        {sizes.map((size) => (
-          <Button onPress={() => handleOpen(size)}>Open {size}</Button>
+          <Button key={size} onPress={() => handleOpen(size)}>Open {size}</Button>
        ))}  
      </div>
      <Modal 
@@ -7,7 +7,7 @@ export default function App() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      {colors.map((color) => (
-        <Pagination total={10} initialPage={1} color={color} />
+        <Pagination key={color} total={10} initialPage={1} color={color} />
      ))}
    </div>
  );
@@ -7,7 +7,7 @@ export default function App() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      {radius.map((r) => (
-        <Pagination total={10} initialPage={1} radius={r} />
+        <Pagination key={r} total={10} initialPage={1} radius={r} />
      ))}
    </div>
  );
@@ -7,7 +7,7 @@ export default function App() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      {sizes.map((size) => (
-        <Pagination total={10} initialPage={1} size={size} />
+        <Pagination key={size} total={10} initialPage={1} size={size} />
      ))}
    </div>
  );
@@ -7,7 +7,7 @@ export default function App() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      {variants.map((variant) => (
-        <Pagination total={10} initialPage={1} variant={variant} />
+        <Pagination key={variant} total={10} initialPage={1} variant={variant} />
      ))}
    </div>
  );
@@ -360,8 +360,6 @@ export default function App() {
  });
  const [page, setPage] = React.useState(1);

-  const pages = Math.ceil(users.length / rowsPerPage);
-
  const hasSearchFilter = Boolean(filterValue);

  const headerColumns = React.useMemo(() => {
@@ -387,6 +385,8 @@ export default function App() {
    return filteredUsers;
  }, [users, filterValue, statusFilter]);

+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
  const items = React.useMemo(() => {
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;
@@ -452,7 +452,7 @@ export default function App() {
        return cellValue;
    }
  }, []);
-  
+
  const onNextPage = React.useCallback(() => {
    if (page < pages) {
      setPage(page + 1);
@@ -479,6 +479,11 @@ export default function App() {
    }
  }, []);

+  const onClear = useCallback(()=>{
+    setFilterValue("")
+    setPage(1)
+  },[])
+
  const topContent = React.useMemo(() => {
    return (
      <div className="flex flex-col gap-4">
@@ -489,7 +494,7 @@ export default function App() {
            placeholder="Search by name..."
            startContent={<SearchIcon />}
            value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
            onValueChange={onSearchChange}
          />
          <div className="flex gap-3">
@@ -572,23 +577,22 @@ export default function App() {
        <span className="w-[30%] text-small text-default-400">
          {selectedKeys === "all"
            ? "All items selected"
-            : \`\${selectedKeys.size} of \${items.length} selected\`}
+            : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
        </span>
        <Pagination
          isCompact
          showControls
          showShadow
          color="primary"
-          isDisabled={hasSearchFilter}
          page={page}
          total={pages}
          onChange={setPage}
        />
        <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
            Previous
          </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
            Next
          </Button>
        </div>
@@ -684,7 +688,6 @@ export default function App() {
  });

  const [page, setPage] = useState(1);
-  const pages = Math.ceil(users.length / rowsPerPage);

  const hasSearchFilter = Boolean(filterValue);

@@ -711,6 +714,8 @@ export default function App() {
    return filteredUsers;
  }, [users, filterValue, statusFilter]);

+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
  const items = React.useMemo(() => {
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;
@@ -776,7 +781,7 @@ export default function App() {
        return cellValue;
    }
  }, []);
-  
+
  const onNextPage = React.useCallback(() => {
    if (page < pages) {
      setPage(page + 1);
@@ -803,6 +808,11 @@ export default function App() {
    }
  }, []);

+  const onClear = useCallback(()=>{
+    setFilterValue("")
+    setPage(1)
+  },[])
+
  const topContent = React.useMemo(() => {
    return (
      <div className="flex flex-col gap-4">
@@ -813,7 +823,7 @@ export default function App() {
            placeholder="Search by name..."
            startContent={<SearchIcon />}
            value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
            onValueChange={onSearchChange}
          />
          <div className="flex gap-3">
@@ -896,23 +906,22 @@ export default function App() {
        <span className="w-[30%] text-small text-default-400">
          {selectedKeys === "all"
            ? "All items selected"
-            : \`\${selectedKeys.size} of \${items.length} selected\`}
+            : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
        </span>
        <Pagination
          isCompact
          showControls
          showShadow
          color="primary"
-          isDisabled={hasSearchFilter}
          page={page}
          total={pages}
          onChange={setPage}
        />
        <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
            Previous
          </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
            Next
          </Button>
        </div>
@@ -20,7 +20,7 @@ const MyButton = extendVariants(Button, {
    color: "olive",
    size: "xl",
  },
-  componentVariants: [
+  compoundVariants: [
    {
      isDisabled: true,
      color: "olive",
@@ -13,7 +13,7 @@ Accordion display a list of high-level options that can expand/collapse to revea

 ---

-<CarbonAd/>
+<CarbonAd />

 ## Import

@@ -174,6 +174,37 @@ Here's an example of how to customize the accordion styles:

 ## API

+### Accordion Props
+
+| Attribute                 | Type                                            | Description                                                                                             | Default  |
+| ------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
+| children                  | `ReactNode` \| `ReactNode[]`                    | The contents of the collection. Usually the array of `AccordionItem`                                    |          |
+| variant                   | `light` \| `shadow` \| `bordered` \| `splitted` | The accordion appearance style.                                                                         | `light`  |
+| selectionMode             | `none` \| `single` \| `multiple`                | The type of selection that is allowed in the collection.                                                |          |
+| selectionBehavior         | `toggle` \| `replace`                           | The accordion selection behavior.                                                                       | `toggle` |
+| isCompact                 | `boolean`                                       | Whether all Accordion items should be smaller.                                                          | `false`  |
+| isDisabled                | `boolean`                                       | Whether the Accordion items are disabled.                                                               |          |
+| showDivider               | `boolean`                                       | WWhether to display a divider at the bottom of the each accordion item.                                 | `true`   |
+| DividerProps              | [DividerProps](/docs/components/divider)        | The divider component props.                                                                            | -        |
+| hideIndicator             | `boolean`                                       | Whether the Accordion items indicator is hidden.                                                        |          |
+| disableAnimation          | `boolean`                                       | Whether the Accordion items open/close animation is disabled.                                           |          |
+| disableIndicatorAnimation | `boolean`                                       | Whether the Accordion items indicator animation is disabled.                                            |          |
+| disallowEmptySelection    | `boolean`                                       | Whether the collection allows empty selection.                                                          |          |
+| keepContentMounted        | `boolean`                                       | Whether the Accordion items content should be always mounted.                                           | `false`  |
+| fullWidth                 | `boolean`                                       | Whether the accordion should take up the full width of its parent container.                            | `true`   |
+| motionProps               | `MotionProps`                                   | The motion properties of the Accordion.                                                                 |          |
+| disabledKeys              | `React.Key[]`                                   | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |          |
+| itemClasses               | [Classnames](#accordiom-item-classnames)        | The accordion items classNames.                                                                         |          |
+| selectedKeys              | `all` \| `React.Key[]`                          | The currently selected keys in the collection (controlled).                                             |          |
+| defaultSelectedKeys       | `all` \| `React.Key[]`                          | The initial selected keys in the collection (uncontrolled).                                             |          |
+| disabledKeys              | `React.Key[]`                                   | The currently disabled keys in the collection (controlled).                                             |          |
+
+### Accordion Events
+
+| Attribute         | Type                                     | Description                                        |
+| ----------------- | ---------------------------------------- | -------------------------------------------------- |
+| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. |
+
 ### Accordion Item Props

 | Attribute                 | Type                                              | Description                                                                                           | Default |
@@ -187,6 +218,7 @@ Here's an example of how to customize the accordion styles:
 | isOpen                    | `boolean`                                         | The current open status. (controlled)                                                                 |         |
 | isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                 | `false` |
 | isDisabled                | `boolean`                                         | The current disabled status.                                                                          | `false` |
+| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                        | `false` |
 | hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                        | `false` |
 | disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                      | `false` |
 | disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                            | `false` |
@@ -208,36 +240,6 @@ Here's an example of how to customize the accordion styles:
 | onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
 | onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |

-### Accordion Props
-
-| Attribute                 | Type                                            | Description                                                                                             | Default  |
-| ------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
-| children                  | `ReactNode` \| `ReactNode[]`                    | The contents of the collection. Usually the array of `AccordionItem`                                    |          |
-| variant                   | `light` \| `shadow` \| `bordered` \| `splitted` | The accordion appearance style.                                                                         | `light`  |
-| selectionMode             | `none` \| `single` \| `multiple`                | The type of selection that is allowed in the collection.                                                |          |
-| selectionBehavior         | `toggle` \| `replace`                           | The accordion selection behavior.                                                                       | `toggle` |
-| isCompact                 | `boolean`                                       | Whether all Accordion items should be smaller.                                                          | `false`  |
-| isDisabled                | `boolean`                                       | Whether the Accordion items are disabled.                                                               |          |
-| showDivider               | `boolean`                                       | WWhether to display a divider at the bottom of the each accordion item.                                 | `true`   |
-| DividerProps              | [DividerProps](/docs/components/divider)        | The divider component props.                                                                            | -        |
-| hideIndicator             | `boolean`                                       | Whether the Accordion items indicator is hidden.                                                        |          |
-| disableAnimation          | `boolean`                                       | Whether the Accordion items open/close animation is disabled.                                           |          |
-| disableIndicatorAnimation | `boolean`                                       | Whether the Accordion items indicator animation is disabled.                                            |          |
-| disallowEmptySelection    | `boolean`                                       | Whether the collection allows empty selection.                                                          |          |
-| fullWidth                 | `boolean`                                       | Whether the accordion should take up the full width of its parent container.                            | `true`   |
-| motionProps               | `MotionProps`                                   | The motion properties of the Accordion.                                                                 |          |
-| disabledKeys              | `React.Key[]`                                   | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |          |
-| itemClasses               | [Classnames](#accordiom-item-classnames)        | The accordion items classNames.                                                                         |          |
-| selectedKeys              | `all` \| `React.Key[]`                          | The currently selected keys in the collection (controlled).                                             |          |
-| defaultSelectedKeys       | `all` \| `React.Key[]`                          | The initial selected keys in the collection (uncontrolled).                                             |          |
-| disabledKeys              | `React.Key[]`                                   | The currently disabled keys in the collection (controlled).                                             |          |
-
-### Accordion Events
-
-| Attribute         | Type                                     | Description                                        |
-| ----------------- | ---------------------------------------- | -------------------------------------------------- |
-| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. |
-
 ---

 ### Types
@@ -9,7 +9,7 @@ import {badgeContent} from "@/content/components/badge";

 Badges are used as a small numerical value or status descriptor for UI elements.

-<ComponentLinks component="badge" />
+<ComponentLinks component="badge" rscCompatible />

 ---

@@ -9,7 +9,7 @@ import {codeContent} from "@/content/components/code";

 Code is a component used to display inline code.

-<ComponentLinks component="code" />
+<ComponentLinks component="code" rscCompatible />

 ---

@@ -9,7 +9,7 @@ import {dividerContent} from "@/content/components/divider";

 Divider is a component that separates content in a page.

-<ComponentLinks component="divider" reactAriaHook="useSeparator" />
+<ComponentLinks component="divider" reactAriaHook="useSeparator" rscCompatible />

 ---

@@ -9,7 +9,7 @@ import {kbdContent} from "@/content/components/kbd";

 Keyboard key is a component to display which key or combination of keys performs a given action.

-<ComponentLinks component="kbd" />
+<ComponentLinks component="kbd" rscCompatible />

 ---

@@ -34,7 +34,7 @@ NextUI exports 7 navbar-related components:
  NavbarBrand, 
  NavbarContent, 
  NavbarItem, 
-  NavbarMenuToggle.
+  NavbarMenuToggle,
  NavbarMenu,
  NavbarMenuItem
 } from "@nextui-org/react";`,
@@ -43,7 +43,7 @@ NextUI exports 7 navbar-related components:
  NavbarBrand, 
  NavbarContent, 
  NavbarItem, 
-  NavbarMenuToggle.
+  NavbarMenuToggle,
  NavbarMenu,
  NavbarMenuItem
 } from "@nextui-org/navbar";`,
@@ -46,7 +46,7 @@ NextUI exports 3 pagination-related components:
 ### Colors

 <CodeDemo title="Radius" files={paginationContent.colors} />
-
+{/* 
 ### Variants

 You can use the `variant` property to change the pagination items style.
@@ -129,7 +129,7 @@ You can customize the `Pagination` component by passing custom Tailwind CSS clas
 In case you need to customize the pagination even further, you can use the `usePagination` hook to create
 your own implementation.

-<CodeDemo title="Custom Implementation" files={paginationContent.customImpl} />
+<CodeDemo title="Custom Implementation" files={paginationContent.customImpl} /> */}

 <Spacer y={4} />

@@ -9,7 +9,7 @@ import {skeletonContent} from "@/content/components/skeleton";

 Skeleton is a placeholder to show a loading state and the expected shape of a component.

-<ComponentLinks component="skeleton" />
+<ComponentLinks component="skeleton" rscCompatible />

 ---

@@ -9,7 +9,7 @@ import {spacerContent} from "@/content/components/spacer";

 Spacer is a component used to add space between components.

-<ComponentLinks component="spacer" />
+<ComponentLinks component="spacer" rscCompatible />

 ---

@@ -9,7 +9,7 @@ import {spinnerContent} from "@/content/components/spinner";

 Spinner express an unspecified wait time or display the length of a process.

-<ComponentLinks component="spinner" />
+<ComponentLinks component="spinner" rscCompatible />

 ---

@@ -233,7 +233,7 @@ import {useAsyncList} from "@react-stately/data";

 ### Loading more data

-Table sllows you to add a custom component at the end of the table, on the example below we are
+Table allows you to add a custom component at the end of the table, on the example below we are
 using a button to load more data.

 <CodeDemo
@@ -10,7 +10,7 @@ This can be done by extending the component and its properties, and customizing

 <CarbonAd />

-You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
+You can create or override the component `variants`, `defaultVariants` and `compoundVariants`.

 > **Note**: For one-off customizations, refer to the [Override Styles](/docs/customization/override-styles) documentation.

@@ -52,13 +52,11 @@ export const MyButton = extendVariants(Button, {
      xl: "px-unit-8 min-w-unit-28 h-unit-14 text-large gap-unit-4 rounded-medium",
    },
  },
-  defaultVariants: {
-    // <- modify/add the default variants
+  defaultVariants: { // <- modify/add default variants
    color: "olive",
    size: "xl",
  },
-  componentVariants: [
-    // <- modify/add the component variants
+  compoundVariants: [ // <- modify/add compound variants
    {
      isDisabled: true,
      color: "olive",
@@ -131,8 +131,8 @@ import {Button} from "@nextui-org/react";
 export default function App() {
  return (
    <div className="flex gap-4">
-      <Button variant="solid">Solid</Button>
-      <Button variant="ghost">Ghost</Button>
+      <Button color="primary" variant="solid">Solid</Button>
+      <Button color="primary" variant="ghost">Ghost</Button>
    </div>
  );
 }
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
@@ -22,19 +22,26 @@
    "@nextui-org/shared-icons": "workspace:*",
    "@nextui-org/shared-utils": "workspace:*",
    "@nextui-org/theme": "workspace:*",
+    "@nextui-org/spacer": "workspace:*",
+    "@nextui-org/kbd": "workspace:*",
+    "@nextui-org/code": "workspace:*",
+    "@nextui-org/badge": "workspace:*",
+    "@nextui-org/skeleton": "workspace:*",
+    "@nextui-org/spinner": "workspace:*",
+    "@nextui-org/divider": "workspace:*",
    "@nextui-org/use-clipboard": "workspace:*",
    "@nextui-org/use-infinite-scroll": "workspace:*",
    "@nextui-org/use-is-mobile": "workspace:*",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/selection": "^3.15.0",
-    "@react-aria/ssr": "^3.6.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-aria/virtualizer": "^3.8.0",
-    "@react-aria/visually-hidden": "^3.8.0",
-    "@react-stately/data": "^3.10.0",
-    "@react-stately/layout": "^3.12.0",
-    "@react-stately/tree": "^3.7.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/selection": "^3.16.1",
+    "@react-aria/ssr": "^3.7.1",
+    "@react-aria/utils": "^3.19.0",
+    "@react-aria/virtualizer": "^3.9.1",
+    "@react-aria/visually-hidden": "^3.8.3",
+    "@react-stately/data": "^3.10.1",
+    "@react-stately/layout": "^3.13.0",
+    "@react-stately/tree": "^3.7.1",
    "@rehooks/local-storage": "^2.4.4",
    "@vercel/analytics": "^1.0.1",
    "canvas-confetti": "^1.4.0",
@@ -42,7 +49,7 @@
    "color2k": "^2.0.2",
    "contentlayer": "^0.3.4",
    "date-fns": "^2.30.0",
-    "framer-motion": "^10.12.18",
+    "framer-motion": "^10.15.1",
    "github-slugger": "^2.0.0",
    "gray-matter": "^4.0.3",
    "hast-util-to-html": "7.1.2",
@@ -86,7 +93,7 @@
    "@docusaurus/utils": "2.0.0-beta.3",
    "@next/bundle-analyzer": "^13.4.6",
    "@next/env": "^13.4.12",
-    "@react-types/shared": "^3.18.0",
+    "@react-types/shared": "^3.19.0",
    "@tailwindcss/typography": "^0.5.9",
    "@types/canvas-confetti": "^1.4.2",
    "@types/lodash": "^4.14.194",
@@ -13,17 +13,17 @@
  },
  "scripts": {
    "dev": "pnpm sb && pnpm dev:docs",
-    "build": "turbo build --filter=!@nextui-org/docs",
-    "build:fast": "turbo build:fast --filter=!@nextui-org/docs ",
+    "build": "turbo build --filter=!@nextui-org/docs --filter=!@nextui-org/storybook",
+    "build:fast": "turbo build:fast --filter=!@nextui-org/docs --filter=!@nextui-org/storybook",
    "dev:docs": "turbo dev --filter=@nextui-org/docs",
    "build:docs": "turbo build --filter=@nextui-org/docs",
    "build:docs-meta": "node ./scripts/update-index-docs.js",
    "start:docs": "turbo start --filter=@nextui-org/docs",
    "deploy:docs": "pnpm --filter @nextui-org/docs deploy",
    "deploy:stage-docs": "pnpm --filter @nextui-org/docs deploy:stage",
-    "sb": "pnpm --filter @nextui-org/storybook storybook",
-    "build:sb": "pnpm --filter @nextui-org/storybook build-storybook",
-    "start:sb": "pnpx serve  --filter @nextui-org/storybook start-storybook",
+    "sb": "pnpm --filter @nextui-org/storybook dev",
+    "build:sb": "pnpm --filter @nextui-org/storybook build",
+    "start:sb": "pnpm --filter @nextui-org/storybook start",
    "test": "jest --verbose --config ./jest.config.js",
    "typecheck": "turbo typecheck",
    "lint": "pnpm lint:pkg && pnpm lint:docs",
@@ -65,8 +65,7 @@
    "@commitlint/config-conventional": "^17.2.0",
    "@react-bootstrap/babel-preset": "^2.1.0",
    "@react-types/link": "^3.3.3",
-    "@react-types/shared": "^3.18.0",
-    "@storybook/react": "^6.5.16",
+    "@react-types/shared": "^3.19.0",
    "@swc-node/jest": "^1.5.2",
    "@swc/core": "^1.3.35",
    "@swc/jest": "^0.2.24",
@@ -83,6 +82,7 @@
    "@types/testing-library__jest-dom": "5.14.5",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.42.0",
+    "@storybook/react": "^7.1.1",
    "chalk": "^4.1.2",
    "concurrently": "^7.6.0",
    "commitlint-plugin-function-rules": "^1.7.1",
@@ -1,5 +1,91 @@
 # @nextui-org/accordion

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.0.8
+  - @nextui-org/react-utils@2.0.5
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/use-aria-accordion-item@2.0.3
+  - @nextui-org/framer-transitions@2.0.5
+  - @nextui-org/aria-utils@2.0.5
+  - @nextui-org/divider@2.0.7
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+  - @nextui-org/aria-utils@2.0.4
+  - @nextui-org/framer-transitions@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- [#1351](https://github.com/nextui-org/nextui/pull/1351) [`d13a14fa`](https://github.com/nextui-org/nextui/commit/d13a14facc1a92dac72e58a93e0452a86a2243c6) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - filterDOMProps function modified to filter non-default event/props this avoid passing non-valid props to HTML elements
+  - NavbarMenu onMenuOpenChange open state modified, undefined type removed
+  - keepContentMounted prop added to accordion and accordion item
+  - Some bug fixes..
+- Updated dependencies []:
+  - @nextui-org/divider@2.0.6
+  - @nextui-org/react-utils@2.0.4
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.0.5
+  - @nextui-org/react-utils@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/divider@2.0.4
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/divider@2.0.3
+  - @nextui-org/system@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/use-aria-accordion-item@2.0.2
+  - @nextui-org/aria-utils@2.0.3
+  - @nextui-org/framer-transitions@2.0.3
+  - @nextui-org/shared-icons@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -246,4 +246,36 @@ describe("Accordion", () => {

    expect(button).toHaveAttribute("aria-expanded", "true");
  });
+
+  it("should support keepContentMounted", async () => {
+    const wrapper = render(
+      <Accordion keepContentMounted>
+        <AccordionItem key="1" data-testid="item-1" title="Accordion Item 1">
+          Accordion Item 1 description
+        </AccordionItem>
+        <AccordionItem key="2" data-testid="item-2" title="Accordion Item 2">
+          Accordion Item 2 description
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const item1 = wrapper.getByTestId("item-1");
+    const button = item1.querySelector("button") as HTMLElement;
+
+    expect(item1.querySelector("[role='region']")).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.click(button);
+    });
+
+    const item2 = wrapper.getByTestId("item-2");
+    const button2 = item2.querySelector("button") as HTMLElement;
+
+    await act(async () => {
+      await userEvent.click(button2);
+    });
+
+    expect(item1.querySelector("[role='region']")).toBeInTheDocument();
+    expect(item2.querySelector("[role='region']")).toBeInTheDocument();
+  });
 });
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/accordion",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
  "keywords": [
    "react",
@@ -53,18 +53,18 @@
    "@nextui-org/system": "workspace:*",
    "@nextui-org/theme": "workspace:*",
    "@nextui-org/divider": "workspace:*",
-    "@react-aria/accordion": "3.0.0-alpha.19",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-stately/tree": "^3.7.0"
+    "@react-aria/accordion": "3.0.0-alpha.20",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/utils": "^3.19.0",
+    "@react-stately/tree": "^3.7.1"
  },
  "devDependencies": {
    "@nextui-org/avatar": "workspace:*",
    "@nextui-org/test-utils": "workspace:*",
-    "@react-types/accordion": "3.0.0-alpha.14",
-    "@react-types/shared": "^3.18.1",
-    "framer-motion": "^10.12.18",
+    "@react-types/accordion": "3.0.0-alpha.15",
+    "@react-types/shared": "^3.19.0",
+    "framer-motion": "^10.15.1",
    "clean-package": "2.2.0",
    "react": "^18.0.0"
  },
@@ -21,6 +21,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
    isOpen,
    isDisabled,
    hideIndicator,
+    keepContentMounted,
    disableAnimation,
    motionProps,
    getBaseProps,
@@ -51,7 +52,19 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
      return <div {...getContentProps()}>{children}</div>;
    }

-    return (
+    return keepContentMounted ? (
+      <motion.section
+        key="accordion-content"
+        animate={isOpen ? "enter" : "exit"}
+        exit="exit"
+        initial="exit"
+        style={{overflowY: "hidden", willChange}}
+        variants={TRANSITION_VARIANTS.collapse}
+        {...motionProps}
+      >
+        <div {...getContentProps()}>{children}</div>
+      </motion.section>
+    ) : (
      <AnimatePresence initial={false}>
        {isOpen && (
          <motion.section
@@ -68,7 +81,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
        )}
      </AnimatePresence>
    );
-  }, [isOpen, disableAnimation, children, motionProps]);
+  }, [isOpen, disableAnimation, keepContentMounted, children, motionProps]);

  return (
    <Component {...getBaseProps()}>
@@ -55,6 +55,11 @@ export interface Props<T extends object = {}>
   * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
   */
  motionProps?: HTMLMotionProps<"section">;
+  /**
+   * Whether to keep the accordion content mounted when collapsed.
+   * @default false
+   */
+  keepContentMounted?: boolean;
  /**
   * The native button click event handler.
   * @deprecated - use `onPress` instead.
@@ -6,7 +6,6 @@ export type {AccordionProps} from "./accordion";
 export type {AccordionItemProps} from "./accordion-item";
 export type {AccordionItemIndicatorProps} from "./base/accordion-item-base";
 export type {AccordionItemBaseProps} from "./base/accordion-item-base";
-export type {Selection} from "@react-types/shared";

 // export hooks
 export {useAccordionItem} from "./use-accordion-item";
@@ -56,6 +56,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
    isDisabled: isDisabledProp = false,
    hideIndicator = false,
    disableAnimation = false,
+    keepContentMounted = false,
    disableIndicatorAnimation = false,
    onPress,
    onPressStart,
@@ -67,6 +68,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
  } = props;

  const Component = as || "div";
+  const shouldFilterDOMProps = typeof Component === "string";

  const domRef = useDOMRef<HTMLButtonElement>(ref);

@@ -132,10 +134,15 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
        "data-open": dataAttr(isOpen),
        "data-disabled": dataAttr(isDisabled),
        className: slots.base({class: baseStyles}),
-        ...mergeProps(filterDOMProps(otherProps), props),
+        ...mergeProps(
+          filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps,
+          }),
+          props,
+        ),
      };
    },
-    [baseStyles, otherProps, slots, item.props, isOpen, isDisabled],
+    [baseStyles, shouldFilterDOMProps, otherProps, slots, item.props, isOpen, isDisabled],
  );

  const getButtonProps: PropGetter = (props = {}) => {
@@ -242,6 +249,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
    isOpen,
    isDisabled,
    hideIndicator,
+    keepContentMounted,
    disableAnimation,
    motionProps,
    getBaseProps,
@@ -3,7 +3,7 @@ import type {SelectionBehavior, MultipleSelection} from "@react-types/shared";
 import type {AriaAccordionProps} from "@react-types/accordion";
 import type {AccordionGroupVariantProps} from "@nextui-org/theme";

-import {ReactRef} from "@nextui-org/react-utils";
+import {ReactRef, filterDOMProps} from "@nextui-org/react-utils";
 import React, {Key, useCallback} from "react";
 import {TreeState, useTreeState} from "@react-stately/tree";
 import {useAccordion as useReactAriaAccordion} from "@react-aria/accordion";
@@ -35,6 +35,11 @@ interface Props extends HTMLNextUIProps<"div"> {
   * @default "toggle"
   */
  selectionBehavior?: SelectionBehavior;
+  /**
+   * Whether to keep the accordion content mounted when collapsed.
+   * @default false
+   */
+  keepContentMounted?: boolean;
  /**
   * The accordion items classNames.
   */
@@ -62,6 +67,7 @@ export type ValuesType<T extends object = {}> = {
  isDisabled?: AccordionItemProps["isDisabled"];
  hideIndicator?: AccordionItemProps["hideIndicator"];
  disableAnimation?: AccordionItemProps["disableAnimation"];
+  keepContentMounted?: Props["keepContentMounted"];
  disableIndicatorAnimation?: AccordionItemProps["disableAnimation"];
  motionProps?: AccordionItemProps["motionProps"];
 };
@@ -81,6 +87,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
    defaultExpandedKeys,
    selectionMode = "single",
    selectionBehavior = "toggle",
+    keepContentMounted = false,
    disallowEmptySelection,
    defaultSelectedKeys,
    onExpandedChange,
@@ -99,6 +106,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
  const [focusedKey, setFocusedKey] = useState<Key | null>(null);

  const Component = as || "div";
+  const shouldFilterDOMProps = typeof Component === "string";

  const domRef = useDOMRef(ref);

@@ -182,6 +190,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
      isDisabled,
      hideIndicator,
      disableAnimation,
+      keepContentMounted,
      disableIndicatorAnimation,
    }),
    [
@@ -190,10 +199,11 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
      isDisabled,
      hideIndicator,
      disableAnimation,
+      keepContentMounted,
      state?.expandedKeys.values,
      disableIndicatorAnimation,
-      ...[...state?.expandedKeys],
-      ...[...state?.disabledKeys],
+      state.expandedKeys.size,
+      state.disabledKeys.size,
      motionProps,
    ],
  );
@@ -203,7 +213,13 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
      ref: domRef,
      className: classNames,
      "data-orientation": "vertical",
-      ...mergeProps(accordionProps, otherProps, props),
+      ...mergeProps(
+        accordionProps,
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps,
+        }),
+        props,
+      ),
    };
  }, []);

@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {accordionItem} from "@nextui-org/theme";
 import {
  AnchorIcon,
@@ -22,8 +22,8 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["default", "shadow", "bordered", "splitted"],
      },
+      options: ["default", "shadow", "bordered", "splitted"],
    },
    isDisabled: {
      control: {
@@ -33,8 +33,8 @@ export default {
    selectionMode: {
      control: {
        type: "select",
-        options: ["single", "multiple"],
      },
+      options: ["single", "multiple"],
    },
    disableAnimation: {
      control: {
@@ -42,7 +42,7 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof Accordion>;
+} as Meta<typeof Accordion>;

 const defaultProps = {
  ...accordionItem.defaultVariants,
@@ -311,84 +311,120 @@ const CustomWithClassNamesTemplate = (args: AccordionProps) => {
  );
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const IsCompact = Template.bind({});
-IsCompact.args = {
-  ...defaultProps,
-  isCompact: true,
+export const IsCompact = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isCompact: true,
+  },
 };

-export const Multiple = Template.bind({});
-Multiple.args = {
-  ...defaultProps,
-  selectionMode: "multiple",
+export const Multiple = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    selectionMode: "multiple",
+  },
 };

-export const DefaultExpanded = Template.bind({});
-DefaultExpanded.args = {
-  ...defaultProps,
-  defaultExpandedKeys: ["2"],
+export const DefaultExpanded = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    defaultExpandedKeys: ["2"],
+  },
 };

-export const DisabledKeys = Template.bind({});
-DisabledKeys.args = {
-  ...defaultProps,
-  disabledKeys: ["2"],
+export const KeepContentMounted = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    keepContentMounted: true,
+  },
 };

-export const WithSubtitle = TemplateWithSubtitle.bind({});
-WithSubtitle.args = {
-  ...defaultProps,
+export const DisabledKeys = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    disabledKeys: ["2"],
+  },
 };

-export const WithStartContent = TemplateWithStartContent.bind({});
-WithStartContent.args = {
-  ...defaultProps,
+export const WithSubtitle = {
+  render: TemplateWithSubtitle,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const Variants = VariantsTemplate.bind({});
-Variants.args = {
-  ...defaultProps,
+export const WithStartContent = {
+  render: TemplateWithStartContent,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const CustomMotion = Template.bind({});
-CustomMotion.args = {
-  ...defaultProps,
-  motionProps: {
-    variants: {
-      enter: {
-        y: 0,
-        opacity: 1,
-        height: "auto",
-        transition: {
-          height: {
-            type: "spring",
-            stiffness: 500,
-            damping: 30,
-            duration: 1,
-          },
-          opacity: {
-            easings: "ease",
-            duration: 1,
+export const Variants = {
+  render: VariantsTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const CustomMotion = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    motionProps: {
+      variants: {
+        enter: {
+          y: 0,
+          opacity: 1,
+          height: "auto",
+          transition: {
+            height: {
+              type: "spring",
+              stiffness: 500,
+              damping: 30,
+              duration: 1,
+            },
+            opacity: {
+              easings: "ease",
+              duration: 1,
+            },
          },
        },
-      },
-      exit: {
-        y: -10,
-        opacity: 0,
-        height: 0,
-        transition: {
-          height: {
-            easings: "ease",
-            duration: 0.25,
-          },
-          opacity: {
-            easings: "ease",
-            duration: 0.3,
+        exit: {
+          y: -10,
+          opacity: 0,
+          height: 0,
+          transition: {
+            height: {
+              easings: "ease",
+              duration: 0.25,
+            },
+            opacity: {
+              easings: "ease",
+              duration: 0.3,
+            },
          },
        },
      },
@@ -396,17 +432,26 @@ CustomMotion.args = {
  },
 };

-export const CustomIndicator = CustomInidicatorTemplate.bind({});
-CustomIndicator.args = {
-  ...defaultProps,
+export const CustomIndicator = {
+  render: CustomInidicatorTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const Controlled = ControlledTemplate.bind({});
-Controlled.args = {
-  ...defaultProps,
+export const Controlled = {
+  render: ControlledTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
-CustomWithClassNames.args = {
-  ...defaultProps,
+export const CustomWithClassNames = {
+  render: CustomWithClassNamesTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };
@@ -1,5 +1,68 @@
 # @nextui-org/avatar

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/use-image@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/avatar",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
  "keywords": [
    "avatar"
@@ -42,9 +42,9 @@
    "@nextui-org/shared-utils": "workspace:*",
    "@nextui-org/react-utils": "workspace:*",
    "@nextui-org/use-image": "workspace:*",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/utils": "^3.18.0"
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/utils": "^3.19.0"
  },
  "devDependencies": {
    "@nextui-org/shared-icons": "workspace:*",
@@ -13,7 +13,7 @@ export {useAvatarGroup} from "./use-avatar-group";
 export {AvatarIcon} from "./avatar-icon";

 // export context
-export * from "./avatar-group-context";
+export {AvatarGroupProvider, useAvatarGroupContext} from "./avatar-group-context";

 // export component
 export {Avatar, AvatarGroup};
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";

 import {Avatar, AvatarGroup, AvatarGroupProps} from "../src";

@@ -9,22 +9,16 @@ export default {
  component: AvatarGroup,
  argTypes: {
    color: {
-      control: {
-        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
-      },
+      control: {type: "select"},
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
-      control: {
-        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
-      },
+      control: {type: "select"},
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
-      control: {
-        type: "select",
-        options: ["sm", "md", "lg"],
-      },
+      control: {type: "select"},
+      options: ["sm", "md", "lg"],
    },
    spacing: {
      control: {
@@ -32,7 +26,7 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof AvatarGroup>;
+} as Meta<typeof AvatarGroup>;

 const Template = (args: AvatarGroupProps) => (
  <AvatarGroup {...args}>
@@ -48,49 +42,67 @@ const Template = (args: AvatarGroupProps) => (
  </AvatarGroup>
 );

-export const Default = Template.bind({});
-Default.args = {
-  color: "primary",
-  isBordered: true,
+export const Default = {
+  render: Template,
+
+  args: {
+    color: "primary",
+    isBordered: true,
+  },
 };

-export const Grid = Template.bind({});
-Grid.args = {
-  color: "primary",
-  isBordered: true,
-  max: 7,
-  isGrid: true,
+export const Grid = {
+  render: Template,
+
+  args: {
+    color: "primary",
+    isBordered: true,
+    max: 7,
+    isGrid: true,
+  },
 };

-export const isDisabled = Template.bind({});
-isDisabled.args = {
-  color: "warning",
-  isBordered: true,
-  isDisabled: true,
+export const isDisabled = {
+  render: Template,
+
+  args: {
+    color: "warning",
+    isBordered: true,
+    isDisabled: true,
+  },
 };

-export const WithMaxCount = Template.bind({});
-WithMaxCount.args = {
-  color: "primary",
-  isBordered: true,
-  max: 3,
+export const WithMaxCount = {
+  render: Template,
+
+  args: {
+    color: "primary",
+    isBordered: true,
+    max: 3,
+  },
 };

-export const WithTotal = Template.bind({});
-WithTotal.args = {
-  color: "primary",
-  isBordered: true,
-  max: 3,
-  total: 10,
+export const WithTotal = {
+  render: Template,
+
+  args: {
+    color: "primary",
+    isBordered: true,
+    max: 3,
+    total: 10,
+  },
 };

-export const CustomCount = Template.bind({});
-CustomCount.args = {
-  color: "primary",
-  isBordered: true,
-  max: 3,
-  total: 10,
-  renderCount: (count: number) => (
-    <p className="text-sm text-black dark:text-white ml-2">+{count}</p>
-  ),
+export const CustomCount = {
+  render: Template,
+
+  args: {
+    color: "primary",
+    isBordered: true,
+    max: 3,
+    total: 10,
+    renderCount: (count: number) => (
+      <p className="text-sm text-black dark:text-white ml-2">+{count}</p>
+    ),
+  },
 };
@@ -1,9 +1,9 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {Activity, Camera} from "@nextui-org/shared-icons";
 import {avatar} from "@nextui-org/theme";

-import {Avatar, AvatarProps} from "../src";
+import {Avatar} from "../src";

 export default {
  title: "Components/Avatar",
@@ -12,143 +12,156 @@ export default {
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
  },
-} as ComponentMeta<typeof Avatar>;
-
-const Template = (args: AvatarProps) => <Avatar {...args} />;
+} as Meta<typeof Avatar>;

 const defaultProps = {
  ...avatar.defaultVariants,
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
-};
-
-export const WithText = Template.bind({});
-WithText.args = {
-  ...defaultProps,
-  name: "JW",
-  color: "danger",
-};
-
-export const IsDisabled = Template.bind({});
-IsDisabled.args = {
-  ...defaultProps,
-  src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
-  color: "secondary",
-  isBordered: true,
-  isDisabled: true,
-};
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  ...defaultProps,
-  src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
-};
-
-export const isBordered = Template.bind({});
-isBordered.args = {
-  ...defaultProps,
-  src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
-  color: "secondary",
-  isBordered: true,
-};
-
-export const isFocusable = Template.bind({});
-isFocusable.args = {
-  ...defaultProps,
-  src: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
-  isFocusable: true,
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  ...defaultProps,
-  size: "lg",
-};
-
-export const Custom = Template.bind({});
-Custom.args = {
-  ...defaultProps,
-  icon: <Activity fill="currentColor" size={20} />,
-  radius: "xl",
-  classNames: {
-    base: "shadow-lg bg-cyan-200 dark:bg-cyan-800",
+export const Default = {
+  args: {
+    ...defaultProps,
  },
 };

-export const CustomSize = Template.bind({});
-CustomSize.args = {
-  ...defaultProps,
-  classNames: {
-    base: "w-32 h-32 text-base",
+export const WithText = {
+  args: {
+    ...defaultProps,
+    name: "JW",
+    color: "danger",
  },
 };

-export const CustomSizeImg = Template.bind({});
-CustomSizeImg.args = {
-  ...defaultProps,
-  src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
-  name: "Junior",
-  classNames: {
-    base: "w-32 h-32 text-base",
+export const IsDisabled = {
+  args: {
+    ...defaultProps,
+    src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
+    color: "secondary",
+    isBordered: true,
+    isDisabled: true,
  },
 };

-export const DefaultIcon = Template.bind({});
-DefaultIcon.args = {
-  ...defaultProps,
-  classNames: {
-    icon: "text-default-400",
+export const WithImage = {
+  args: {
+    ...defaultProps,
+    src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
  },
 };

-export const IconFallback = Template.bind({});
-IconFallback.args = {
-  ...defaultProps,
-  src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
-  showFallback: true,
+export const isBordered = {
+  args: {
+    ...defaultProps,
+    src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
+    color: "secondary",
+    isBordered: true,
+  },
 };

-export const InitialsFallback = Template.bind({});
-InitialsFallback.args = {
-  ...defaultProps,
-  src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
-  name: "Junior",
-  showFallback: true,
+export const isFocusable = {
+  args: {
+    ...defaultProps,
+    src: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
+    isFocusable: true,
+  },
 };

-export const CustomFallback = Template.bind({});
-CustomFallback.args = {
-  ...defaultProps,
-  src: "https://images.unsplash.com/broken",
-  showFallback: true,
-  fallback: (
-    <Camera className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
-  ),
+export const WithIcon = {
+  args: {
+    ...defaultProps,
+    size: "lg",
+  },
 };

-export const BrokenImage = Template.bind({});
-BrokenImage.args = {
-  ...defaultProps,
-  src: "https://images.unsplash.com/broken-image",
-  name: "Junior",
-  showFallback: true,
+export const Custom = {
+  args: {
+    ...defaultProps,
+    icon: <Activity fill="currentColor" size={20} />,
+    radius: "xl",
+    classNames: {
+      base: "shadow-lg bg-cyan-200 dark:bg-cyan-800",
+    },
+  },
+};
+
+export const CustomSize = {
+  args: {
+    ...defaultProps,
+    classNames: {
+      base: "w-32 h-32 text-base",
+    },
+  },
+};
+
+export const CustomSizeImg = {
+  args: {
+    ...defaultProps,
+    src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
+    name: "Junior",
+    classNames: {
+      base: "w-32 h-32 text-base",
+    },
+  },
+};
+
+export const DefaultIcon = {
+  args: {
+    ...defaultProps,
+    classNames: {
+      icon: "text-default-400",
+    },
+  },
+};
+
+export const IconFallback = {
+  args: {
+    ...defaultProps,
+    src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
+    showFallback: true,
+  },
+};
+
+export const InitialsFallback = {
+  args: {
+    ...defaultProps,
+    src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
+    name: "Junior",
+    showFallback: true,
+  },
+};
+
+export const CustomFallback = {
+  args: {
+    ...defaultProps,
+    src: "https://images.unsplash.com/broken",
+    showFallback: true,
+    fallback: (
+      <Camera className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
+    ),
+  },
+};
+
+export const BrokenImage = {
+  args: {
+    ...defaultProps,
+    src: "https://images.unsplash.com/broken-image",
+    name: "Junior",
+    showFallback: true,
+  },
 };
@@ -1,5 +1,56 @@
 # @nextui-org/badge

+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system-rsc@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/badge",
-  "version": "2.0.2",
+  "version": "2.0.7",
  "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
  "keywords": [
    "badge"
@@ -37,7 +37,7 @@
    "react": ">=18"
  },
  "dependencies": {
-    "@nextui-org/system": "workspace:*",
+    "@nextui-org/system-rsc": "workspace:*",
    "@nextui-org/theme": "workspace:*",
    "@nextui-org/shared-utils": "workspace:*",
    "@nextui-org/react-utils": "workspace:*"
@@ -1,6 +1,6 @@
 import type {ReactNode} from "react";

-import {forwardRef} from "@nextui-org/system";
+import {forwardRef} from "@nextui-org/system-rsc";

 import {UseBadgeProps, useBadge} from "./use-badge";

@@ -11,13 +11,14 @@ export interface BadgeProps extends UseBadgeProps {
 const Badge = forwardRef<"span", BadgeProps>((props, ref) => {
  const {Component, children, content, slots, classNames, getBadgeProps} = useBadge({
    ...props,
-    ref,
  });

  return (
    <div className={slots.base({class: classNames?.base})}>
      {children}
-      <Component {...getBadgeProps()}>{content}</Component>
+      <Component ref={ref} {...getBadgeProps()}>
+        {content}
+      </Component>
    </div>
  );
 });
@@ -1,9 +1,9 @@
 import type {BadgeSlots, BadgeVariantProps, SlotsToClasses} from "@nextui-org/theme";
 import type {ReactNode} from "react";
+import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system-rsc";

 import {badge} from "@nextui-org/theme";
-import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {mapPropsVariants} from "@nextui-org/system-rsc";
 import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";
@@ -41,12 +41,10 @@ export type UseBadgeProps = Props & BadgeVariantProps;
 export function useBadge(originalProps: UseBadgeProps) {
  const [props, variantProps] = mapPropsVariants(originalProps, badge.variantKeys);

-  const {as, ref, children, className, content, classNames, ...otherProps} = props;
+  const {as, children, className, content, classNames, ...otherProps} = props;

  const Component = as || "span";

-  const domRef = useDOMRef(ref);
-
  const isOneChar = useMemo(
    () => String(content)?.length === 1 || originalProps?.isOneChar,
    [content, originalProps?.isOneChar],
@@ -68,7 +66,6 @@ export function useBadge(originalProps: UseBadgeProps) {

  const getBadgeProps: PropGetter = () => {
    return {
-      ref: domRef,
      className: slots.badge({class: baseStyles}),
      "data-invisible": originalProps.isInvisible,
      ...otherProps,
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {badge} from "@nextui-org/theme";
 import {Avatar} from "@nextui-org/avatar";
 import {CheckIcon} from "@nextui-org/shared-icons";
@@ -20,32 +20,32 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["solid", "flat", "faded", "shadow"],
      },
+      options: ["solid", "flat", "faded", "shadow"],
    },
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    shape: {
      control: {
        type: "select",
-        options: ["rectangle", "circle"],
      },
+      options: ["rectangle", "circle"],
    },
    placement: {
      control: {
        type: "select",
-        options: ["top-right", "top-left", "bottom-right", "bottom-left"],
      },
+      options: ["top-right", "top-left", "bottom-right", "bottom-left"],
    },
    isInvisible: {
      control: {
@@ -58,7 +58,7 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;

 const defaultProps = {
  ...badge.defaultVariants,
@@ -106,53 +106,71 @@ const InvisibleTemplate = (args: BadgeProps) => {
  );
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
-};
+export const Default = {
+  render: Template,

-export const Dot = Template.bind({});
-Dot.args = {
-  ...defaultProps,
-  content: "",
-  color: "success",
-  size: "sm",
-};
-
-export const HorizontalOffset = Template.bind({});
-HorizontalOffset.args = {
-  ...defaultProps,
-  variant: "shadow",
-  color: "secondary",
-  content: <CheckIcon />,
-  placement: "bottom-right",
-  size: "md",
-  classNames: {
-    badge: "p-0.5 right-[50%]",
+  args: {
+    ...defaultProps,
  },
 };

-export const VerticalOffset = Template.bind({});
-VerticalOffset.args = {
-  ...defaultProps,
-  variant: "shadow",
-  color: "secondary",
-  content: <CheckIcon />,
-  placement: "bottom-right",
-  size: "md",
-  classNames: {
-    badge: "p-0.5 right-[50%] bottom-[50%]",
+export const Dot = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    content: "",
+    color: "success",
+    size: "sm",
  },
 };

-export const Shapes = ShapesTemplate.bind({});
-Shapes.args = {
-  ...defaultProps,
-  color: "danger",
+export const HorizontalOffset = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    variant: "shadow",
+    color: "secondary",
+    content: <CheckIcon />,
+    placement: "bottom-right",
+    size: "md",
+    classNames: {
+      badge: "p-0.5 right-[50%]",
+    },
+  },
 };

-export const Invisible = InvisibleTemplate.bind({});
-Invisible.args = {
-  ...defaultProps,
-  color: "danger",
+export const VerticalOffset = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    variant: "shadow",
+    color: "secondary",
+    content: <CheckIcon />,
+    placement: "bottom-right",
+    size: "md",
+    classNames: {
+      badge: "p-0.5 right-[50%] bottom-[50%]",
+    },
+  },
+};
+
+export const Shapes = {
+  render: ShapesTemplate,
+
+  args: {
+    ...defaultProps,
+    color: "danger",
+  },
+};
+
+export const Invisible = {
+  render: InvisibleTemplate,
+
+  args: {
+    ...defaultProps,
+    color: "danger",
+  },
 };
@@ -4,5 +4,4 @@ export default defineConfig({
  clean: true,
  target: "es2019",
  format: ["cjs", "esm"],
-  banner: {js: '"use client";'},
 });
@@ -1,5 +1,86 @@
 # @nextui-org/button

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+  - @nextui-org/ripple@2.0.9
+  - @nextui-org/spinner@2.0.7
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/use-aria-button@2.0.3
+  - @nextui-org/ripple@2.0.8
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+  - @nextui-org/ripple@2.0.7
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+  - @nextui-org/ripple@2.0.6
+  - @nextui-org/spinner@2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+  - @nextui-org/ripple@2.0.5
+  - @nextui-org/spinner@2.0.5
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/spinner@2.0.4
+  - @nextui-org/theme@2.0.4
+  - @nextui-org/ripple@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/spinner@2.0.3
+  - @nextui-org/system@2.0.3
+  - @nextui-org/ripple@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/use-aria-button@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/button",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "Buttons allow users to perform actions and choose with a single tap.",
  "keywords": [
    "button"
@@ -44,12 +44,12 @@
    "@nextui-org/theme": "workspace:*",
    "@nextui-org/ripple": "workspace:*",
    "@nextui-org/spinner": "workspace:*",
-    "@react-aria/button": "^3.8.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-aria/focus": "^3.13.0",
-    "@react-types/shared": "^3.18.1",
-    "@react-types/button": "^3.7.3"
+    "@react-aria/button": "^3.8.1",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/utils": "^3.19.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-types/shared": "^3.19.0",
+    "@react-types/button": "^3.7.4"
  },
  "devDependencies": {
    "@nextui-org/shared-icons": "workspace:*",
@@ -10,7 +10,7 @@ export {useButton} from "./use-button";
 export {useButtonGroup} from "./use-button-group";

 // export context
-export * from "./button-group-context";
+export {ButtonGroupProvider, useButtonGroupContext} from "./button-group-context";

 // export component
 export {Button, ButtonGroup};
@@ -92,6 +92,7 @@ export function useButton(props: UseButtonProps) {
  } = props;

  const Component = as || "button";
+  const shouldFilterDOMProps = typeof Component === "string";

  const domRef = useDOMRef(ref);

@@ -164,7 +165,9 @@ export function useButton(props: UseButtonProps) {
        ariaButtonProps,
        focusProps,
        hoverProps,
-        filterDOMProps(otherProps),
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps,
+        }),
        filterDOMProps(props),
      ),
    }),
@@ -173,6 +176,7 @@ export function useButton(props: UseButtonProps) {
      isDisabled,
      isFocused,
      isPressed,
+      shouldFilterDOMProps,
      isFocusVisible,
      isHovered,
      ariaButtonProps,
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {button, buttonGroup} from "@nextui-org/theme";

 import {Button, ButtonGroup, ButtonGroupProps} from "../src";
@@ -11,26 +11,26 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
      },
+      options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
    },
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    fullWidth: {
      control: {
@@ -48,7 +48,7 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ButtonGroup>;
+} as Meta<typeof ButtonGroup>;

 const defaultProps = {
  ...button.defaultVariants,
@@ -63,7 +63,10 @@ const Template = (args: ButtonGroupProps) => (
  </ButtonGroup>
 );

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
 };
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {button} from "@nextui-org/theme";
 import {Camera, HeadphonesIcon, Notification} from "@nextui-org/shared-icons";

@@ -12,26 +12,26 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["solid", "bordered", "light", "flat", "faded", "shadow", "ghost"],
      },
+      options: ["solid", "bordered", "light", "flat", "faded", "shadow", "ghost"],
    },
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    spinnerPlacement: {
      control: {
        type: "select",
-        options: ["start", "end"],
      },
+      options: ["start", "end"],
    },
    fullWidth: {
      control: {
@@ -41,8 +41,8 @@ export default {
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    isDisabled: {
      control: {
@@ -60,7 +60,7 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;

 const defaultProps = {
  children: "Button",
@@ -68,8 +68,6 @@ const defaultProps = {
  ...button.defaultVariants,
 };

-const Template = (args: ButtonProps) => <Button {...args} />;
-
 const StateTemplate = (args: ButtonProps) => {
  const [isOpen, setIsOpen] = React.useState(false);

@@ -84,52 +82,62 @@ const StateTemplate = (args: ButtonProps) => {
  );
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithState = StateTemplate.bind({});
-WithState.args = {
-  ...defaultProps,
+export const WithState = {
+  render: StateTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const IsDisabled = Template.bind({});
-IsDisabled.args = {
-  ...defaultProps,
-  isDisabled: true,
+export const IsDisabled = {
+  args: {
+    ...defaultProps,
+    isDisabled: true,
+  },
 };

-export const DisableRipple = Template.bind({});
-DisableRipple.args = {
-  ...defaultProps,
-  disableRipple: true,
+export const DisableRipple = {
+  args: {
+    ...defaultProps,
+    disableRipple: true,
+  },
 };

-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  ...defaultProps,
-  startContent: <Notification className="fill-current" />,
-  endContent: <Camera className="fill-current" />,
+export const WithIcons = {
+  args: {
+    ...defaultProps,
+    startContent: <Notification className="fill-current" />,
+    endContent: <Camera className="fill-current" />,
+  },
 };

-export const IconButton = Template.bind({});
-IconButton.args = {
-  ...defaultProps,
-  isIconOnly: true,
-  children: <HeadphonesIcon className="w-5 h-5" />,
+export const IconButton = {
+  args: {
+    ...defaultProps,
+    isIconOnly: true,
+    children: <HeadphonesIcon className="w-5 h-5" />,
+  },
 };

-export const IsLoading = Template.bind({});
-IsLoading.args = {
-  ...defaultProps,
-  color: "primary",
-  isLoading: true,
+export const IsLoading = {
+  args: {
+    ...defaultProps,
+    color: "primary",
+    isLoading: true,
+  },
 };

-export const CustomWithClassNames = Template.bind({});
-CustomWithClassNames.args = {
-  ...defaultProps,
-  radius: "full",
-  className: "bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg",
+export const CustomWithClassNames = {
+  args: {
+    ...defaultProps,
+    radius: "full",
+    className: "bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg",
+  },
 };
@@ -1,5 +1,81 @@
 # @nextui-org/card

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+  - @nextui-org/ripple@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/use-aria-button@2.0.3
+  - @nextui-org/ripple@2.0.8
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+  - @nextui-org/ripple@2.0.7
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+  - @nextui-org/ripple@2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+  - @nextui-org/ripple@2.0.5
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+  - @nextui-org/ripple@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system@2.0.3
+  - @nextui-org/ripple@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/use-aria-button@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/card",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "Card is a container for text, photos, and actions in the context of a single subject.",
  "keywords": [
    "card"
@@ -43,11 +43,11 @@
    "@nextui-org/react-utils": "workspace:*",
    "@nextui-org/use-aria-button": "workspace:*",
    "@nextui-org/ripple": "workspace:*",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/button": "^3.8.0",
-    "@react-types/shared": "^3.18.1"
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/utils": "^3.19.0",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/button": "^3.8.1",
+    "@react-types/shared": "^3.19.0"
  },
  "devDependencies": {
    "@nextui-org/code": "workspace:*",
@@ -6,7 +6,7 @@ export type {CardFooterProps} from "./card-footer";
 export {useCard} from "./use-card";

 // export context
-export * from "./card-context";
+export {CardProvider, useCardContext} from "./card-context";

 // export components
 export {default as Card} from "./card";
@@ -81,6 +81,7 @@ export function useCard(originalProps: UseCardProps) {

  const domRef = useDOMRef<HTMLDivElement>(ref);
  const Component = as || (originalProps.isPressable ? "button" : "div");
+  const shouldFilterDOMProps = typeof Component === "string";

  const baseStyles = clsx(classNames?.base, className);

@@ -154,7 +155,9 @@ export function useCard(originalProps: UseCardProps) {
        ...mergeProps(
          originalProps.isPressable ? {...buttonProps, ...focusProps, role: "button"} : {},
          originalProps.isHoverable ? hoverProps : {},
-          filterDOMProps(otherProps),
+          filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps,
+          }),
          filterDOMProps(props),
        ),
      };
@@ -163,6 +166,7 @@ export function useCard(originalProps: UseCardProps) {
      domRef,
      slots,
      baseStyles,
+      shouldFilterDOMProps,
      originalProps.isPressable,
      originalProps.isHoverable,
      originalProps.isDisabled,
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {card} from "@nextui-org/theme";
 import {Link} from "@nextui-org/link";
 import {Button} from "@nextui-org/button";
@@ -15,14 +15,14 @@ export default {
    shadow: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg"],
      },
+      options: ["none", "sm", "md", "lg"],
    },
    fullWidth: {
      control: {
@@ -67,7 +67,7 @@ export default {
      </div>
    ),
  ],
-} as ComponentMeta<typeof Card>;
+} as Meta<typeof Card>;

 const defaultProps = {
  ...card.defaultVariants,
@@ -406,47 +406,74 @@ const CenterImgWithHeaderTemplate = (args: CardProps) => {
  );
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithDivider = WithDividerTemplate.bind({});
-WithDivider.args = {
-  ...defaultProps,
+export const WithDivider = {
+  render: WithDividerTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithFooter = WithFooterTemplate.bind({});
-WithFooter.args = {
-  ...defaultProps,
+export const WithFooter = {
+  render: WithFooterTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithAbsImageHeader = WithAbsImageHeaderTemplate.bind({});
-WithAbsImageHeader.args = {
-  ...defaultProps,
+export const WithAbsImageHeader = {
+  render: WithAbsImageHeaderTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithAbsImgHeaderFooter = WithAbsImgHeaderFooterTemplate.bind({});
-WithAbsImgHeaderFooter.args = {
-  ...defaultProps,
+export const WithAbsImgHeaderFooter = {
+  render: WithAbsImgHeaderFooterTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const CoverImg = CoverImgTemplate.bind({});
-CoverImg.args = {
-  ...defaultProps,
+export const CoverImg = {
+  render: CoverImgTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const CenterImg = CenterImgTemplate.bind({});
-CenterImg.args = {
-  ...defaultProps,
+export const CenterImg = {
+  render: CenterImgTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const PrimaryAction = PrimaryActionTemplate.bind({});
-PrimaryAction.args = {
-  ...defaultProps,
+export const PrimaryAction = {
+  render: PrimaryActionTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const CenterImgWithHeader = CenterImgWithHeaderTemplate.bind({});
-CenterImgWithHeader.args = {
-  ...defaultProps,
+export const CenterImgWithHeader = {
+  render: CenterImgWithHeaderTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };
@@ -1,5 +1,67 @@
 # @nextui-org/checkbox

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/checkbox",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
  "keywords": [
    "checkbox"
@@ -41,15 +41,15 @@
    "@nextui-org/shared-utils": "workspace:*",
    "@nextui-org/react-utils": "workspace:*",
    "@nextui-org/theme": "workspace:*",
-    "@react-aria/checkbox": "^3.9.2",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/visually-hidden": "^3.8.2",
-    "@react-stately/checkbox": "^3.4.3",
-    "@react-stately/toggle": "^3.6.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-types/checkbox": "^3.4.4",
-    "@react-types/shared": "^3.18.1"
+    "@react-aria/checkbox": "^3.10.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/visually-hidden": "^3.8.3",
+    "@react-stately/checkbox": "^3.4.4",
+    "@react-stately/toggle": "^3.6.1",
+    "@react-aria/utils": "^3.19.0",
+    "@react-types/checkbox": "^3.5.0",
+    "@react-types/shared": "^3.19.0"
  },
  "devDependencies": {
    "@nextui-org/shared-icons": "workspace:*",
@@ -11,8 +11,8 @@ export type {CheckboxGroupProps} from "./checkbox-group";
 export type {CheckboxIconProps} from "./use-checkbox";

 // export context
-export * from "./checkbox-group-context";
+export {CheckboxGroupProvider, useCheckboxGroupContext} from "./checkbox-group-context";

 // export components
 export {Checkbox, CheckboxGroup};
-export * from "./checkbox-icon";
+export {CheckboxIcon} from "./checkbox-icon";
@@ -1,14 +1,9 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {checkbox} from "@nextui-org/theme";

 import {CheckboxGroup, Checkbox, CheckboxGroupProps} from "../src";

-import {
-  CustomWithClassNames as CheckboxItemWithStyles,
-  CustomWithHooks as CheckboxItemWithHooks,
-} from "./checkbox.stories";
-
 export default {
  title: "Components/CheckboxGroup",
  component: CheckboxGroup,
@@ -16,20 +11,20 @@ export default {
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    lineThrough: {
      control: {
@@ -42,7 +37,7 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;

 const defaultProps = {
  ...checkbox.defaultVariants,
@@ -58,156 +53,92 @@ const Template = (args: CheckboxGroupProps) => (
  </CheckboxGroup>
 );

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  label: "Select cities",
+export const WithLabel = {
+  render: Template,
+
+  args: {
+    label: "Select cities",
+  },
 };

-export const DefaultValue = Template.bind({});
-DefaultValue.args = {
-  ...defaultProps,
-  label: "Select cities",
-  defaultValue: ["buenos-aires", "london"],
+export const DefaultValue = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    label: "Select cities",
+    defaultValue: ["buenos-aires", "london"],
+  },
 };

-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  label: "Select cities",
-  orientation: "horizontal",
+export const Horizontal = {
+  render: Template,
+
+  args: {
+    label: "Select cities",
+    orientation: "horizontal",
+  },
 };

-export const IsDisabled = Template.bind({});
-IsDisabled.args = {
-  label: "Select cities",
-  isDisabled: true,
+export const IsDisabled = {
+  render: Template,
+
+  args: {
+    label: "Select cities",
+    isDisabled: true,
+  },
 };

-export const LineThrough = Template.bind({});
-LineThrough.args = {
-  label: "Select cities",
-  lineThrough: true,
+export const LineThrough = {
+  render: Template,
+
+  args: {
+    label: "Select cities",
+    lineThrough: true,
+  },
 };

-export const WithDescription = Template.bind({});
-WithDescription.args = {
-  ...defaultProps,
-  description: "Select the cities you want to visit",
+export const WithDescription = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    description: "Select the cities you want to visit",
+  },
 };

-export const Invalid = Template.bind({});
-Invalid.args = {
-  ...defaultProps,
-  validationState: "invalid",
+export const Invalid = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    validationState: "invalid",
+  },
 };

-export const WithErrorMessage = Template.bind({});
-WithErrorMessage.args = {
-  ...defaultProps,
-  validationState: "invalid",
-  errorMessage: "The selected cities cannot be visited at the same time",
+export const WithErrorMessage = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    validationState: "invalid",
+    errorMessage: "The selected cities cannot be visited at the same time",
+  },
 };

-export const DisableAnimation = Template.bind({});
-DisableAnimation.args = {
-  label: "Select cities",
-  disableAnimation: true,
-};
-
-export const Controlled = () => {
-  const [groupSelected, setGroupSelected] = React.useState<string[]>(["buenos-aires", "sydney"]);
-
-  React.useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log("CheckboxGroup ", groupSelected);
-  }, [groupSelected]);
-
-  return (
-    <div className="flex flex-row gap-2">
-      <CheckboxGroup
-        color="warning"
-        label="Select cities"
-        value={groupSelected}
-        onChange={setGroupSelected}
-      >
-        <Checkbox color="primary" value="buenos-aires">
-          Buenos Aires
-        </Checkbox>
-        <Checkbox value="sydney">Sydney</Checkbox>
-        <Checkbox value="london">London</Checkbox>
-        <Checkbox value="tokyo">Tokyo</Checkbox>
-      </CheckboxGroup>
-    </div>
-  );
-};
-
-export const CustomWithClassNames = () => {
-  const [groupSelected, setGroupSelected] = React.useState<string[]>([]);
-
-  return (
-    <>
-      <CheckboxGroup label="Select employees" value={groupSelected} onChange={setGroupSelected}>
-        <CheckboxItemWithStyles value="junior" />
-        <CheckboxItemWithStyles
-          userName="John Doe"
-          userProfile={{
-            avatar: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
-            username: "johndoe",
-            url: "#",
-          }}
-          userRole="Product Designer"
-          value="johndoe"
-        />
-        <CheckboxItemWithStyles
-          userName="Zoey Lang"
-          userProfile={{
-            avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
-            username: "zoeylang",
-            url: "#",
-          }}
-          userRole="Technical Writer"
-          value="zoeylang"
-        />
-        <CheckboxItemWithStyles
-          userName="William Howard"
-          userProfile={{
-            avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
-            username: "william",
-            url: "#",
-          }}
-          userRole="Sales Manager"
-          value="william"
-        />
-      </CheckboxGroup>
-      <p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
-    </>
-  );
-};
-
-export const CustomWithHooks = () => {
-  const [groupSelected, setGroupSelected] = React.useState<string[]>([]);
-
-  return (
-    <>
-      <CheckboxGroup
-        className="gap-1"
-        label="Select amenities"
-        orientation="horizontal"
-        value={groupSelected}
-        onChange={setGroupSelected}
-      >
-        <CheckboxItemWithHooks value="wifi">Wifi</CheckboxItemWithHooks>
-        <CheckboxItemWithHooks value="tv">TV</CheckboxItemWithHooks>
-        <CheckboxItemWithHooks value="kitchen">Kitchen</CheckboxItemWithHooks>
-        <CheckboxItemWithHooks value="parking">Parking</CheckboxItemWithHooks>
-        <CheckboxItemWithHooks value="pool">Pool</CheckboxItemWithHooks>
-        <CheckboxItemWithHooks value="gym">Gym</CheckboxItemWithHooks>
-      </CheckboxGroup>
-      <p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
-    </>
-  );
+export const DisableAnimation = {
+  render: Template,
+
+  args: {
+    label: "Select cities",
+    disableAnimation: true,
+  },
 };
@@ -1,20 +1,9 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
-import {checkbox, colors} from "@nextui-org/theme";
-import {CheckIcon, CloseIcon} from "@nextui-org/shared-icons";
-import {User} from "@nextui-org/user";
-import {Link} from "@nextui-org/link";
-import {Chip, ChipProps} from "@nextui-org/chip";
-import {clsx} from "@nextui-org/shared-utils";
-import {VisuallyHidden} from "@react-aria/visually-hidden";
+import {Meta} from "@storybook/react";
+import {checkbox} from "@nextui-org/theme";
+import {CloseIcon} from "@nextui-org/shared-icons";

-import {
-  Checkbox,
-  CheckboxIconProps,
-  CheckboxProps,
-  useCheckbox,
-  useCheckboxGroupContext,
-} from "../src";
+import {Checkbox, CheckboxIconProps, CheckboxProps} from "../src";

 export default {
  title: "Components/Checkbox",
@@ -23,20 +12,20 @@ export default {
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    lineThrough: {
      control: {
@@ -49,15 +38,13 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;

 const defaultProps: CheckboxProps = {
  ...checkbox.defaultVariants,
  children: "Option",
 };

-const Template = (args: CheckboxProps) => <Checkbox {...args} />;
-
 const ControlledTemplate = (args: CheckboxProps) => {
  const [selected, setSelected] = React.useState<boolean>(true);

@@ -76,172 +63,73 @@ const ControlledTemplate = (args: CheckboxProps) => {
  );
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  args: {
+    ...defaultProps,
+  },
 };

-export const IsDisabled = Template.bind({});
-IsDisabled.args = {
-  ...defaultProps,
-  isDisabled: true,
+export const IsDisabled = {
+  args: {
+    ...defaultProps,
+    isDisabled: true,
+  },
 };

-export const DefaultSelected = Template.bind({});
-DefaultSelected.args = {
-  ...defaultProps,
-  defaultSelected: true,
+export const DefaultSelected = {
+  args: {
+    ...defaultProps,
+    defaultSelected: true,
+  },
 };

-export const CustomIconNode = Template.bind({});
-CustomIconNode.args = {
-  ...defaultProps,
-  icon: <CloseIcon />,
+export const CustomIconNode = {
+  args: {
+    ...defaultProps,
+    icon: <CloseIcon />,
+  },
 };

-export const CustomIconFunction = Template.bind({});
-CustomIconFunction.args = {
-  ...defaultProps,
-  // eslint-disable-next-line react/display-name
-  icon: (props: CheckboxIconProps) => <CloseIcon {...props} />,
+export const CustomIconFunction = {
+  args: {
+    ...defaultProps,
+    // eslint-disable-next-line react/display-name
+    icon: (props: CheckboxIconProps) => <CloseIcon {...props} />,
+  },
 };

-export const AlwaysSelected = Template.bind({});
-AlwaysSelected.args = {
-  ...defaultProps,
-  isSelected: true,
+export const AlwaysSelected = {
+  args: {
+    ...defaultProps,
+    isSelected: true,
+  },
 };

-export const IsIndeterminate = Template.bind({});
-IsIndeterminate.args = {
-  ...defaultProps,
-  isIndeterminate: true,
+export const IsIndeterminate = {
+  args: {
+    ...defaultProps,
+    isIndeterminate: true,
+  },
 };

-export const LineThrough = Template.bind({});
-LineThrough.args = {
-  ...defaultProps,
-  lineThrough: true,
+export const LineThrough = {
+  args: {
+    ...defaultProps,
+    lineThrough: true,
+  },
 };

-export const DisableAnimation = Template.bind({});
-DisableAnimation.args = {
-  ...defaultProps,
-  disableAnimation: true,
+export const DisableAnimation = {
+  args: {
+    ...defaultProps,
+    disableAnimation: true,
+  },
 };

-export const Controlled = ControlledTemplate.bind({});
-Controlled.args = {
-  ...defaultProps,
-};
-
-interface CustomCheckboxProps extends CheckboxProps {
-  userName?: string;
-  userProfile?: {
-    username?: string;
-    avatar?: string;
-    url?: string;
-  };
-  userRole?: string;
-  status?: string;
-  statusColor?: ChipProps["color"];
-}
-
-export const CustomWithClassNames = (props: CustomCheckboxProps) => {
-  const {
-    value,
-    userName = "Junior Garcia",
-    userProfile = {
-      avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
-      username: "jrgarciadev",
-      url: "https://twitter.com/jrgarciadev",
-    },
-    userRole = "Software Developer",
-    status = "Active",
-    statusColor = "secondary",
-    ...otherProps
-  } = props;
-
-  const groupContext = useCheckboxGroupContext();
-  const isInGroup = !!groupContext;
-
-  const [isSelected, setIsSelected] = React.useState<boolean>(false);
-
-  const checkboxProps = !isInGroup
-    ? {
-        isSelected,
-        onValueChange: setIsSelected,
-      }
-    : {};
-
-  const isChecked = isInGroup && value ? groupContext?.groupState.isSelected(value) : isSelected;
-
-  return (
-    <Checkbox
-      {...otherProps}
-      aria-label={userName}
-      classNames={{
-        base: clsx(
-          "inline-flex w-full max-w-md bg-content1 hover:bg-content2 items-center justify-start cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
-          {
-            "border-primary": isChecked,
-          },
-        ),
-        label: "w-full",
-      }}
-      value={value}
-      {...checkboxProps}
-    >
-      <div className="w-full flex justify-between gap-2">
-        <User
-          avatarProps={{size: "sm", src: userProfile.avatar}}
-          description={
-            <Link href={userProfile.url} size="sm">
-              @{userProfile.username}
-            </Link>
-          }
-          name={userName}
-        />
-        <div className="flex flex-col items-end gap-1">
-          <span className="text-xs text-default-500">{userRole}</span>
-          <Chip color={statusColor} size="sm" variant="flat">
-            {status}
-          </Chip>
-        </div>
-      </div>
-    </Checkbox>
-  );
-};
-
-export const CustomWithHooks = (props: CheckboxProps) => {
-  const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
-    useCheckbox({
-      "aria-label": props["aria-label"] || "Toggle status",
-      ...props,
-    });
-
-  return (
-    <label {...getBaseProps()}>
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <Chip
-        classNames={{
-          base: clsx("border-default hover:bg-default-200", {
-            "border-primary bg-primary hover:bg-primary-600 hover:border-primary-600": isSelected,
-            "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background": isFocusVisible,
-          }),
-          content: clsx("text-primary", {
-            "text-primary-foreground pl-1": isSelected,
-          }),
-        }}
-        color="primary"
-        startContent={isSelected ? <CheckIcon className="ml-1" color={colors.white} /> : null}
-        variant="faded"
-        {...getLabelProps()}
-      >
-        {children ? children : isSelected ? "Enabled" : "Disabled"}
-      </Chip>
-    </label>
-  );
+export const Controlled = {
+  render: ControlledTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };
@@ -1,5 +1,68 @@
 # @nextui-org/chip

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/shared-icons@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/chip",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
  "keywords": [
    "chip"
@@ -42,10 +42,10 @@
    "@nextui-org/react-utils": "workspace:*",
    "@nextui-org/system": "workspace:*",
    "@nextui-org/theme": "workspace:*",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-types/checkbox": "^3.4.4"
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/utils": "^3.19.0",
+    "@react-types/checkbox": "^3.5.0"
  },
  "devDependencies": {
    "@nextui-org/avatar": "workspace:*",
@@ -1,10 +1,10 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {chip} from "@nextui-org/theme";
 import {Avatar} from "@nextui-org/avatar";
 import {CheckIcon} from "@nextui-org/shared-icons";

-import {Chip, ChipProps} from "../src";
+import {Chip} from "../src";

 export default {
  title: "Components/Chip",
@@ -13,26 +13,26 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["solid", "bordered", "light", "flat", "faded", "shadow", "dot"],
      },
+      options: ["solid", "bordered", "light", "flat", "faded", "shadow", "dot"],
    },
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    isDisabled: {
      control: {
@@ -40,59 +40,63 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof Chip>;
+} as Meta<typeof Chip>;

 const defaultProps = {
  ...chip.defaultVariants,
  children: "Chip",
 };

-const Template = (args: ChipProps) => <Chip {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  args: {
+    ...defaultProps,
+  },
 };

-export const StartContent = Template.bind({});
-StartContent.args = {
-  ...defaultProps,
-  startContent: (
-    <span aria-label="celebration" className="ml-1" role="img">
-      🎉
-    </span>
-  ),
+export const StartContent = {
+  args: {
+    ...defaultProps,
+    startContent: (
+      <span aria-label="celebration" className="ml-1" role="img">
+        🎉
+      </span>
+    ),
+  },
 };

-export const EndContent = Template.bind({});
-EndContent.args = {
-  ...defaultProps,
-  endContent: (
-    <span aria-label="rocket" className="mr-1" role="img">
-      🚀
-    </span>
-  ),
+export const EndContent = {
+  args: {
+    ...defaultProps,
+    endContent: (
+      <span aria-label="rocket" className="mr-1" role="img">
+        🚀
+      </span>
+    ),
+  },
 };

-export const Closeable = Template.bind({});
-Closeable.args = {
-  ...defaultProps,
-  // eslint-disable-next-line
-  onClose: () => console.log("Close"),
+export const Closeable = {
+  args: {
+    ...defaultProps,
+    // eslint-disable-next-line
+    onClose: () => console.log("Close"),
+  },
 };

-export const CustomCloseIcon = Template.bind({});
-CustomCloseIcon.args = {
-  ...defaultProps,
-  endContent: <CheckIcon />,
-  // eslint-disable-next-line
-  onClose: () => console.log("Close"),
+export const CustomCloseIcon = {
+  args: {
+    ...defaultProps,
+    endContent: <CheckIcon />,
+    // eslint-disable-next-line
+    onClose: () => console.log("Close"),
+  },
 };

-export const WithAvatar = Template.bind({});
-WithAvatar.args = {
-  ...defaultProps,
-  variant: "flat",
-  color: "secondary",
-  avatar: <Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />,
+export const WithAvatar = {
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    color: "secondary",
+    avatar: <Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />,
+  },
 };
@@ -1,5 +1,56 @@
 # @nextui-org/code

+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system-rsc@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/code",
-  "version": "2.0.2",
+  "version": "2.0.7",
  "description": "Code is a component used to display inline code.",
  "keywords": [
    "code"
@@ -37,7 +37,7 @@
    "react": ">=18"
  },
  "dependencies": {
-    "@nextui-org/system": "workspace:*",
+    "@nextui-org/system-rsc": "workspace:*",
    "@nextui-org/theme": "workspace:*",
    "@nextui-org/shared-utils": "workspace:*",
    "@nextui-org/react-utils": "workspace:*"
@@ -1,13 +1,17 @@
-import {forwardRef} from "@nextui-org/system";
+import {forwardRef} from "@nextui-org/system-rsc";

 import {useCode, UseCodeProps} from "./use-code";

 export interface CodeProps extends UseCodeProps {}

 const Code = forwardRef<"div", CodeProps>((props, ref) => {
-  const {Component, children, getCodeProps} = useCode({...props, ref});
+  const {Component, children, getCodeProps} = useCode({...props});

-  return <Component {...getCodeProps()}>{children}</Component>;
+  return (
+    <Component ref={ref} {...getCodeProps()}>
+      {children}
+    </Component>
+  );
 });

 Code.displayName = "NextUI.Code";
@@ -1,8 +1,8 @@
 import type {CodeVariantProps} from "@nextui-org/theme";
+import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system-rsc";

 import {code} from "@nextui-org/theme";
-import {HTMLNextUIProps, PropGetter, mapPropsVariants} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {mapPropsVariants} from "@nextui-org/system-rsc";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";

@@ -16,12 +16,10 @@ export interface UseCodeProps extends HTMLNextUIProps<"code">, CodeVariantProps
 export function useCode(originalProps: UseCodeProps) {
  const [props, variantProps] = mapPropsVariants(originalProps, code.variantKeys);

-  const {ref, as, children, className, ...otherProps} = props;
+  const {as, children, className, ...otherProps} = props;

  const Component = as || "code";

-  const domRef = useDOMRef(ref);
-
  const classNames = useMemo(
    () =>
      code({
@@ -33,7 +31,6 @@ export function useCode(originalProps: UseCodeProps) {

  const getCodeProps: PropGetter = () => {
    return {
-      ref: domRef,
      className: classNames,
      ...otherProps,
    };
@@ -1,8 +1,7 @@
-import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {code} from "@nextui-org/theme";

-import {Code, CodeProps} from "../src";
+import {Code} from "../src";

 export default {
  title: "Components/Code",
@@ -11,32 +10,31 @@ export default {
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
  },
-} as ComponentMeta<typeof Code>;
+} as Meta<typeof Code>;

 const defaultProps = {
  children: "npm install @nextui-org/react",
  ...code.defaultVariants,
 };

-const Template = (args: CodeProps) => <Code {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  args: {
+    ...defaultProps,
+  },
 };
@@ -4,5 +4,4 @@ export default defineConfig({
  clean: true,
  target: "es2019",
  format: ["cjs", "esm"],
-  banner: {js: '"use client";'},
 });
@@ -1,5 +1,66 @@
 # @nextui-org/divider

+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`fe03c42f`](https://github.com/nextui-org/nextui/commit/fe03c42fa144b5066ebc8ad39c144aeef437d2c6), [`fe03c42f`](https://github.com/nextui-org/nextui/commit/fe03c42fa144b5066ebc8ad39c144aeef437d2c6)]:
+  - @nextui-org/react-rsc-utils@2.0.5
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.7
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies [[`d13a14fa`](https://github.com/nextui-org/nextui/commit/d13a14facc1a92dac72e58a93e0452a86a2243c6)]:
+  - @nextui-org/react-rsc-utils@2.0.4
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`42001647`](https://github.com/nextui-org/nextui/commit/4200164712b6eb4b37a14fe9e005844ff770a180)]:
+  - @nextui-org/react-rsc-utils@2.0.3
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+  - @nextui-org/system-rsc@2.0.3
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/system-rsc@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/react-rsc-utils@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/divider",
-  "version": "2.0.2",
+  "version": "2.0.8",
  "description": ". A separator is a visual divider between two groups of content",
  "keywords": [
    "divider"
@@ -38,11 +38,10 @@
  },
  "dependencies": {
    "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*",
-    "@nextui-org/system": "workspace:*",
+    "@nextui-org/react-rsc-utils": "workspace:*",
+    "@nextui-org/system-rsc": "workspace:*",
    "@nextui-org/theme": "workspace:*",
-    "@react-aria/separator": "^3.3.3",
-    "@react-aria/utils": "^3.18.0"
+    "@react-types/shared": "^3.19.0"
  },
  "devDependencies": {
    "clean-package": "2.2.0",
@@ -1,13 +1,13 @@
-import {forwardRef} from "@nextui-org/system";
+import {forwardRef} from "@nextui-org/system-rsc";

 import {UseDividerProps, useDivider} from "./use-divider";

 export interface DividerProps extends Omit<UseDividerProps, "children"> {}

 const Divider = forwardRef<"div", DividerProps>((props, ref) => {
-  const {Component, getDividerProps} = useDivider({ref, ...props});
+  const {Component, getDividerProps} = useDivider({...props});

-  return <Component {...getDividerProps()} />;
+  return <Component ref={ref} {...getDividerProps()} />;
 });

 Divider.displayName = "NextUI.Divider";
@@ -1,11 +1,10 @@
 import type {DividerVariantProps} from "@nextui-org/theme";
+import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system-rsc";

-import {SeparatorProps as AriaSeparatorProps, useSeparator} from "@react-aria/separator";
-import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import {divider} from "@nextui-org/theme";
-import {useDOMRef} from "@nextui-org/react-utils";
 import {Ref, useCallback, useMemo} from "react";
-import {mergeProps} from "@react-aria/utils";
+
+import {SeparatorProps as AriaSeparatorProps, useSeparator} from "./use-separator";

 interface Props extends HTMLNextUIProps<"hr"> {
  /**
@@ -17,12 +16,10 @@ interface Props extends HTMLNextUIProps<"hr"> {
 export type UseDividerProps = Props & DividerVariantProps & Omit<AriaSeparatorProps, "elementType">;

 export function useDivider(props: UseDividerProps) {
-  const {ref, as, className, orientation, ...otherProps} = props;
+  const {as, className, orientation, ...otherProps} = props;

  let Component = as || "hr";

-  const domRef = useDOMRef(ref);
-
  if (Component === "hr" && orientation === "vertical") {
    Component = "div";
  }
@@ -43,13 +40,14 @@ export function useDivider(props: UseDividerProps) {

  const getDividerProps: PropGetter = useCallback(
    (props = {}) => ({
-      ref: domRef,
      className: styles,
      role: "separator",
      "data-orientation": orientation,
-      ...mergeProps(separatorProps, otherProps, props),
+      ...separatorProps,
+      ...otherProps,
+      ...props,
    }),
-    [domRef, styles, orientation, separatorProps, otherProps],
+    [styles, orientation, separatorProps, otherProps],
  );

  return {Component, getDividerProps};
@@ -0,0 +1,53 @@
+/*
+ * Based on @react-aria/separator but with some changes to support RSC.
+ */
+
+import type {AriaLabelingProps, DOMAttributes, DOMProps, Orientation} from "@react-types/shared";
+
+import {filterDOMProps} from "@nextui-org/react-rsc-utils";
+
+export interface SeparatorProps extends DOMProps, AriaLabelingProps {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /** The HTML element type that will be used to render the separator. */
+  elementType?: string;
+}
+
+export interface SeparatorAria {
+  /** Props for the separator element. */
+  separatorProps: DOMAttributes;
+}
+
+/**
+ * Provides the accessibility implementation for a separator.
+ * A separator is a visual divider between two groups of content,
+ * e.g. groups of menu items or sections of a page.
+ */
+export function useSeparator(props: SeparatorProps): SeparatorAria {
+  let domProps = filterDOMProps(props, {
+    enabled: typeof props.elementType === "string",
+  });
+
+  let ariaOrientation: Orientation | undefined;
+
+  // if orientation is horizontal, aria-orientation default is horizontal, so we leave it undefined
+  // if it's vertical, we need to specify it
+  if (props.orientation === "vertical") {
+    ariaOrientation = "vertical";
+  }
+  // hr elements implicitly have role = separator and a horizontal orientation
+  if (props.elementType !== "hr") {
+    return {
+      separatorProps: {
+        ...domProps,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+      },
+    };
+  }
+
+  return {separatorProps: domProps};
+}
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {divider} from "@nextui-org/theme";

 import {Divider, DividerProps} from "../src";
@@ -11,8 +11,8 @@ export default {
    orientation: {
      control: {
        type: "select",
-        options: ["horizontal", "vertical"],
      },
+      options: ["horizontal", "vertical"],
    },
  },
  decorators: [
@@ -22,7 +22,7 @@ export default {
      </div>
    ),
  ],
-} as ComponentMeta<typeof Divider>;
+} as Meta<typeof Divider>;

 const defaultProps = {
  ...divider.defaultVariants,
@@ -45,7 +45,10 @@ const Template = (args: DividerProps) => (
  </div>
 );

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
 };
@@ -4,5 +4,4 @@ export default defineConfig({
  clean: true,
  target: "es2019",
  format: ["cjs", "esm"],
-  banner: {js: '"use client";'},
 });
@@ -1,5 +1,90 @@
 # @nextui-org/dropdown

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.0.8
+  - @nextui-org/react-utils@2.0.5
+  - @nextui-org/popover@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/aria-utils@2.0.5
+  - @nextui-org/use-is-mobile@2.0.3
+  - @nextui-org/divider@2.0.7
+  - @nextui-org/popover@2.0.8
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+  - @nextui-org/popover@2.0.7
+  - @nextui-org/aria-utils@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.0.6
+  - @nextui-org/react-utils@2.0.4
+  - @nextui-org/popover@2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.0.5
+  - @nextui-org/react-utils@2.0.3
+  - @nextui-org/popover@2.0.5
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/divider@2.0.4
+  - @nextui-org/popover@2.0.4
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/divider@2.0.3
+  - @nextui-org/system@2.0.3
+  - @nextui-org/popover@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/use-is-mobile@2.0.2
+  - @nextui-org/aria-utils@2.0.3
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/dropdown",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "A dropdown displays a list of actions or options that a user can choose.",
  "keywords": [
    "dropdown"
@@ -46,21 +46,21 @@
    "@nextui-org/theme": "workspace:*",
    "@nextui-org/divider": "workspace:*",
    "@nextui-org/use-is-mobile": "workspace:*",
-    "@react-aria/menu": "^3.10.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-stately/menu": "^3.5.3",
-    "@react-stately/tree": "^3.7.0",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-types/menu": "^3.9.2",
-    "@react-types/shared": "^3.18.1"
+    "@react-aria/menu": "^3.10.1",
+    "@react-aria/utils": "^3.19.0",
+    "@react-stately/menu": "^3.5.4",
+    "@react-stately/tree": "^3.7.1",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-types/menu": "^3.9.3",
+    "@react-types/shared": "^3.19.0"
  },
  "devDependencies": {
    "@nextui-org/button": "workspace:*",
    "@nextui-org/avatar": "workspace:*",
    "@nextui-org/user": "workspace:*",
    "@nextui-org/shared-icons": "workspace:*",
-    "framer-motion": "^10.12.18",
+    "framer-motion": "^10.15.1",
    "clean-package": "2.2.0",
    "react": "^18.0.0"
  },
@@ -59,6 +59,7 @@ export function useDropdownItem<T extends object>(originalProps: UseDropdownItem
  const domRef = useRef<HTMLLIElement>(null);

  const Component = as || "li";
+  const shouldFilterDOMProps = typeof Component === "string";

  const {rendered, key} = item;

@@ -127,7 +128,9 @@ export function useDropdownItem<T extends object>(originalProps: UseDropdownItem
      itemProps,
      isReadOnly ? {} : mergeProps(focusProps, pressProps),
      hoverProps,
-      filterDOMProps(otherProps),
+      filterDOMProps(otherProps, {
+        enabled: shouldFilterDOMProps,
+      }),
      props,
    ),
    "data-focus": dataAttr(isFocused),
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {dropdown, popover} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 import {Avatar} from "@nextui-org/avatar";
@@ -29,45 +29,45 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
      },
+      options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
    },
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    placement: {
      control: {
        type: "select",
-        options: [
-          "top",
-          "bottom",
-          "right",
-          "left",
-          "top-start",
-          "top-end",
-          "bottom-start",
-          "bottom-end",
-          "left-start",
-          "left-end",
-          "right-start",
-          "right-end",
-        ],
      },
+      options: [
+        "top",
+        "bottom",
+        "right",
+        "left",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "left-start",
+        "left-end",
+        "right-start",
+        "right-end",
+      ],
    },
    backdrop: {
      control: {
        type: "select",
-        options: ["transparent", "blur", "opaque"],
      },
+      options: ["transparent", "blur", "opaque"],
    },
    offset: {
      control: {
@@ -102,7 +102,7 @@ export default {
      </div>
    ),
  ],
-} as ComponentMeta<typeof Dropdown>;
+} as Meta<typeof Dropdown>;

 const defaultProps = {
  ...popover.defaultVariants,
@@ -523,84 +523,123 @@ const CustomTriggerTemplate = ({variant, ...args}) => {
  );
 };

-export const Default = Template.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithArrow = Template.bind({});
-WithArrow.args = {
-  ...defaultProps,
-  showArrow: true,
+export const WithArrow = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    showArrow: true,
+  },
 };

-export const WithDivider = DividerTemplate.bind({});
-WithDivider.args = {
-  ...defaultProps,
+export const WithDivider = {
+  render: DividerTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const DisabledKeys = DisabledKeysTemplate.bind({});
-DisabledKeys.args = {
-  ...defaultProps,
+export const DisabledKeys = {
+  render: DisabledKeysTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const SingleSelection = SingleSelectionTemplate.bind({});
-SingleSelection.args = {
-  ...defaultProps,
+export const SingleSelection = {
+  render: SingleSelectionTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const MultipleSelection = MultipleSelectionTemplate.bind({});
-MultipleSelection.args = {
-  ...defaultProps,
+export const MultipleSelection = {
+  render: MultipleSelectionTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithShortcut = WithShortcutTemplate.bind({});
-WithShortcut.args = {
-  ...defaultProps,
+export const WithShortcut = {
+  render: WithShortcutTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const WithStartContent = WithStartContentTemplate.bind({});
-WithStartContent.args = {
-  ...defaultProps,
-  variant: "flat",
-  color: "secondary",
+export const WithStartContent = {
+  render: WithStartContentTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    color: "secondary",
+  },
 };

-export const WithEndContent = WithEndContentTemplate.bind({});
-WithEndContent.args = {
-  ...defaultProps,
-  variant: "faded",
-  color: "success",
+export const WithEndContent = {
+  render: WithEndContentTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "faded",
+    color: "success",
+  },
 };

-export const WithDescription = WithDescriptionTemplate.bind({});
-WithDescription.args = {
-  ...defaultProps,
-  variant: "flat",
-  color: "secondary",
-  className: "min-w-[240px]",
+export const WithDescription = {
+  render: WithDescriptionTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    color: "secondary",
+    className: "min-w-[240px]",
+  },
 };

-export const WithSections = WithSectionsTemplate.bind({});
-WithSections.args = {
-  ...defaultProps,
-  variant: "flat",
-  color: "secondary",
-  className: "min-w-[240px]",
+export const WithSections = {
+  render: WithSectionsTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    color: "secondary",
+    className: "min-w-[240px]",
+  },
 };

-export const WithCustomTrigger = CustomTriggerTemplate.bind({});
-WithCustomTrigger.args = {
-  ...defaultProps,
-  variant: "flat",
-  offset: 14,
+export const WithCustomTrigger = {
+  render: CustomTriggerTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    offset: 14,
+  },
 };

-export const DisableAnimation = WithStartContentTemplate.bind({});
-DisableAnimation.args = {
-  ...defaultProps,
-  showArrow: true,
-  variant: "flat",
-  color: "secondary",
-  disableAnimation: true,
+export const DisableAnimation = {
+  render: WithStartContentTemplate,
+
+  args: {
+    ...defaultProps,
+    showArrow: true,
+    variant: "flat",
+    color: "secondary",
+    disableAnimation: true,
+  },
 };
@@ -1,5 +1,68 @@
 # @nextui-org/image

+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+
+## 2.0.8
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/system@2.0.5
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/use-image@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/image",
-  "version": "2.0.2",
+  "version": "2.0.9",
  "description": "A simple image component",
  "keywords": [
    "image"
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {image} from "@nextui-org/theme";

 import {Image, ImageProps} from "../src";
@@ -11,14 +11,14 @@ export default {
    radius: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg", "full"],
      },
+      options: ["none", "sm", "md", "lg", "full"],
    },
    shadow: {
      control: {
        type: "select",
-        options: ["none", "sm", "md", "lg"],
      },
+      options: ["none", "sm", "md", "lg"],
    },
    isBlurred: {
      control: {
@@ -43,17 +43,15 @@ export default {
      </div>
    ),
  ],
-} as ComponentMeta<typeof Image>;
+} as Meta<typeof Image>;

 const defaultProps = {
  ...image.defaultVariants,
-  src: require("./assets/local-image-1.jpeg"),
+  src: "./images/local-image-1.jpeg",
  alt: "NextUI hero image",
  disableSkeleton: true,
 };

-const Template = (args: ImageProps) => <Image {...args} />;
-
 const LoadingTemplate = (args: ImageProps) => {
  const [isLoading, setIsLoading] = React.useState(true);

@@ -72,64 +70,75 @@ const LoadingTemplate = (args: ImageProps) => {
  return <Image {...args} isLoading={isLoading} />;
 };

-export const Default = Template.bind({});
-Default.args = {
-  width: 300,
-  ...defaultProps,
+export const Default = {
+  args: {
+    width: 300,
+    ...defaultProps,
+  },
 };

-export const Blurred = Template.bind({});
-Blurred.args = {
-  ...defaultProps,
-  width: 300,
-  isBlurred: true,
-  src: require("./assets/local-image-small.jpg"),
-  // src:
-  //   "https://images.unsplash.com/photo-1519638831568-d9897f54ed69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
+export const Blurred = {
+  args: {
+    ...defaultProps,
+    width: 300,
+    isBlurred: true,
+    src: "/images/local-image-small.jpg",
+    // src:
+    //   "https://images.unsplash.com/photo-1519638831568-d9897f54ed69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
+  },
 };

-export const Zoomed = Template.bind({});
-Zoomed.args = {
-  ...defaultProps,
-  width: 300,
-  isZoomed: true,
-  radius: "lg",
-  src: "https://nextui.org/images/card-example-2.jpeg",
+export const Zoomed = {
+  args: {
+    ...defaultProps,
+    width: 300,
+    isZoomed: true,
+    radius: "lg",
+    src: "https://nextui.org/images/card-example-2.jpeg",
+  },
 };

-export const Shadow = Template.bind({});
-Shadow.args = {
-  ...defaultProps,
-  width: 300,
-  isZoomed: true,
-  radius: "lg",
-  shadow: "md",
-  src: require("./assets/local-image-small.jpg"),
+export const Shadow = {
+  args: {
+    ...defaultProps,
+    width: 300,
+    isZoomed: true,
+    radius: "lg",
+    shadow: "md",
+    src: "/images/local-image-small.jpg",
+  },
 };

-export const AnimatedLoad = Template.bind({});
-AnimatedLoad.args = {
-  ...defaultProps,
-  width: 300,
-  radius: "lg",
-  src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
+export const AnimatedLoad = {
+  args: {
+    ...defaultProps,
+    width: 300,
+    radius: "lg",
+    src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
+  },
 };

-export const Fallback = LoadingTemplate.bind({});
-Fallback.args = {
-  ...defaultProps,
-  width: 300,
-  radius: "lg",
-  src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
-  fallbackSrc: "https://via.placeholder.com/300x450",
+export const Fallback = {
+  render: LoadingTemplate,
+
+  args: {
+    ...defaultProps,
+    width: 300,
+    radius: "lg",
+    src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
+    fallbackSrc: "/images/placeholder_300x450.png",
+  },
 };

-export const Skeleton = LoadingTemplate.bind({});
-Skeleton.args = {
-  ...defaultProps,
-  width: 300,
-  height: 450,
-  radius: "lg",
-  src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1494790108377-be9c29b29330",
-  disableSkeleton: false,
+export const Skeleton = {
+  render: LoadingTemplate,
+
+  args: {
+    ...defaultProps,
+    width: 300,
+    height: 450,
+    radius: "lg",
+    src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1494790108377-be9c29b29330",
+    disableSkeleton: false,
+  },
 };
@@ -1,5 +1,81 @@
 # @nextui-org/input

+## 2.0.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.5
+
+## 2.0.9
+
+### Patch Changes
+
+- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
+
+  - react-aria packages updgraded to the latest version
+  - image storybooks fixed
+  - other bug fixes..
+
+- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
+  - @nextui-org/system@2.0.5
+
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`710395f3`](https://github.com/nextui-org/nextui/commit/710395f3a2ca44238332237a49e948c933abe63d)]:
+  - @nextui-org/system@2.0.4
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.4
+
+## 2.0.6
+
+### Patch Changes
+
+- [#1323](https://github.com/nextui-org/nextui/pull/1323) [`42001647`](https://github.com/nextui-org/nextui/commit/4200164712b6eb4b37a14fe9e005844ff770a180) Thanks [@tianenpang](https://github.com/tianenpang)! - Fixed event functions call twice.
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.3
+
+## 2.0.5
+
+### Patch Changes
+
+- [#1309](https://github.com/nextui-org/nextui/pull/1309) [`ac605eb7`](https://github.com/nextui-org/nextui/commit/ac605eb71f8aa945525a1c659b7bd17037303762) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - onValueChange returned value fixed, it nows return a plain string
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1301](https://github.com/nextui-org/nextui/pull/1301) [`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Plugin types adapted to work with latest version of postcss
+
+- Updated dependencies [[`d794225c`](https://github.com/nextui-org/nextui/commit/d794225cb75121db3a72f430739b4eaacd1cf8b7)]:
+  - @nextui-org/theme@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1289](https://github.com/nextui-org/nextui/pull/1289) [`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - "use client" directive removed from components that didn't need it
+
+  - packages adapted to support RSC imports
+  - filterDomProps function was modified to enable/disabled it
+
+- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
+  Component exports changed to named exports
+- Updated dependencies [[`eefda8d6`](https://github.com/nextui-org/nextui/commit/eefda8d6e2088526e0dbb2026d807b53d2a97782), [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
+  - @nextui-org/react-utils@2.0.2
+  - @nextui-org/system@2.0.3
+  - @nextui-org/theme@2.0.3
+  - @nextui-org/shared-icons@2.0.2
+  - @nextui-org/shared-utils@2.0.2
+
 ## 2.0.2

 ### Patch Changes
@@ -88,4 +88,15 @@ describe("Input", () => {

    expect(container6.querySelector("input")).toHaveAttribute("type", "text");
  });
+
+  it("should call dom event handlers only once", () => {
+    const onFocus = jest.fn();
+
+    const {container} = render(<Input label="test input" onFocus={onFocus} />);
+
+    container.querySelector("input")?.focus();
+    container.querySelector("input")?.blur();
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+  });
 });
@@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/input",
-  "version": "2.0.2",
+  "version": "2.0.10",
  "description": "The input component is designed for capturing user input within a text field.",
  "keywords": [
    "input"
@@ -42,14 +42,14 @@
    "@nextui-org/shared-utils": "workspace:*",
    "@nextui-org/system": "workspace:*",
    "@nextui-org/theme": "workspace:*",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/textfield": "^3.10.0",
-    "@react-aria/utils": "^3.18.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/interactions": "^3.17.0",
+    "@react-aria/textfield": "^3.11.0",
+    "@react-aria/utils": "^3.19.0",
    "@react-stately/utils": "^3.7.0",
-    "@react-types/shared": "^3.18.1",
-    "@react-types/textfield": "^3.7.2",
-    "react-textarea-autosize": "^8.5.1"
+    "@react-types/shared": "^3.19.0",
+    "@react-types/textfield": "^3.7.3",
+    "react-textarea-autosize": "^8.5.2"
  },
  "devDependencies": {
    "clean-package": "2.2.0",
@@ -58,7 +58,7 @@ export interface Props<T extends HTMLInputElement | HTMLTextAreaElement = HTMLIn
  /**
   * React aria onChange event.
   */
-  onValueChange?: (value: string | undefined) => void;
+  onValueChange?: (value: string) => void;
 }

 export type UseInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> =
@@ -86,13 +86,21 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
    ...otherProps
  } = props;

+  const handleValueChange = useCallback(
+    (value: string | undefined) => {
+      onValueChange(value ?? "");
+    },
+    [onValueChange],
+  );
+
  const [inputValue, setInputValue] = useControlledState<string | undefined>(
-    props.value,
-    props.defaultValue,
-    onValueChange,
+    props.value ?? undefined,
+    props.defaultValue ?? undefined,
+    handleValueChange,
  );

  const Component = as || "div";
+
  const baseStyles = clsx(classNames?.base, className, !!inputValue ? "is-filled" : "");
  const isMultiline = originalProps.isMultiline;

@@ -226,7 +234,16 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
      return {
        ref: domRef,
        className: slots.input({class: clsx(classNames?.input, !!inputValue ? "is-filled" : "")}),
-        ...mergeProps(focusProps, inputProps, filterDOMProps(otherProps), props),
+        ...mergeProps(
+          focusProps,
+          inputProps,
+          filterDOMProps(otherProps, {
+            enabled: true,
+            labelable: true,
+            omitEventNames: new Set(Object.keys(inputProps)),
+          }),
+          props,
+        ),
        required: originalProps.isRequired,
        "aria-readonly": dataAttr(originalProps.isReadOnly),
        "aria-required": dataAttr(originalProps.isRequired),
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from "react";
-import {ComponentMeta} from "@storybook/react";
+import {Meta} from "@storybook/react";
 import {input} from "@nextui-org/theme";
 import {
  MailFilledIcon,
@@ -20,32 +20,32 @@ export default {
    variant: {
      control: {
        type: "select",
-        options: ["flat", "faded", "bordered", "underlined"],
      },
+      options: ["flat", "faded", "bordered", "underlined"],
    },
    color: {
      control: {
        type: "select",
-        options: ["default", "primary", "secondary", "success", "warning", "danger"],
      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
    },
    radius: {
      control: {
        type: "select",
-        options: ["none", "base", "sm", "md", "lg", "xl", "full"],
      },
+      options: ["none", "base", "sm", "md", "lg", "xl", "full"],
    },
    size: {
      control: {
        type: "select",
-        options: ["sm", "md", "lg"],
      },
+      options: ["sm", "md", "lg"],
    },
    labelPlacement: {
      control: {
        type: "select",
-        options: ["inside", "outside", "outside-left"],
      },
+      options: ["inside", "outside", "outside-left"],
    },
    isDisabled: {
      control: {
@@ -60,7 +60,7 @@ export default {
      </div>
    ),
  ],
-} as ComponentMeta<typeof Input>;
+} as Meta<typeof Input>;

 const defaultProps = {
  ...input.defaultVariants,
@@ -445,127 +445,181 @@ const CustomWithHooksTemplate = (args: InputProps) => {
  );
 };

-export const Default = MirrorTemplate.bind({});
-Default.args = {
-  ...defaultProps,
+export const Default = {
+  render: MirrorTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const Required = MirrorTemplate.bind({});
-Required.args = {
-  ...defaultProps,
-  isRequired: true,
+export const Required = {
+  render: MirrorTemplate,
+
+  args: {
+    ...defaultProps,
+    isRequired: true,
+  },
 };

-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...defaultProps,
-  defaultValue: "junior@nextui.org",
-  variant: "faded",
-  isDisabled: true,
+export const Disabled = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    defaultValue: "junior@nextui.org",
+    variant: "faded",
+    isDisabled: true,
+  },
 };

-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-  ...defaultProps,
-  defaultValue: "junior@nextui.org",
-  variant: "bordered",
-  isReadOnly: true,
+export const ReadOnly = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    defaultValue: "junior@nextui.org",
+    variant: "bordered",
+    isReadOnly: true,
+  },
 };

-export const WithDescription = MirrorTemplate.bind({});
-WithDescription.args = {
-  ...defaultProps,
-  description: "We'll never share your email with anyone else.",
+export const WithDescription = {
+  render: MirrorTemplate,
+
+  args: {
+    ...defaultProps,
+    description: "We'll never share your email with anyone else.",
+  },
 };

-export const Password = PasswordTemplate.bind({});
-Password.args = {
-  ...defaultProps,
-  label: "Password",
-  placeholder: "Enter your password",
-  variant: "bordered",
+export const Password = {
+  render: PasswordTemplate,
+
+  args: {
+    ...defaultProps,
+    label: "Password",
+    placeholder: "Enter your password",
+    variant: "bordered",
+  },
 };

-export const LabelPlacement = LabelPlacementTemplate.bind({});
-LabelPlacement.args = {
-  ...defaultProps,
+export const LabelPlacement = {
+  render: LabelPlacementTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const Clearable = Template.bind({});
-Clearable.args = {
-  ...defaultProps,
-  variant: "bordered",
-  placeholder: "Enter your email",
-  defaultValue: "junior@nextui.org",
-  // eslint-disable-next-line no-console
-  onClear: () => console.log("input cleared"),
+export const Clearable = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+    placeholder: "Enter your email",
+    defaultValue: "junior@nextui.org",
+    // eslint-disable-next-line no-console
+    onClear: () => console.log("input cleared"),
+  },
 };

-export const StartContent = StartContentTemplate.bind({});
-StartContent.args = {
-  ...defaultProps,
-  labelPlacement: "outside",
+export const StartContent = {
+  render: StartContentTemplate,
+
+  args: {
+    ...defaultProps,
+    labelPlacement: "outside",
+  },
 };

-export const EndContent = EndContentTemplate.bind({});
-EndContent.args = {
-  ...defaultProps,
-  variant: "bordered",
-  labelPlacement: "outside",
+export const EndContent = {
+  render: EndContentTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+    labelPlacement: "outside",
+  },
 };

-export const StartAndEndContent = StartAndEndContentTemplate.bind({});
-StartAndEndContent.args = {
-  ...defaultProps,
-  variant: "bordered",
-  labelPlacement: "outside",
+export const StartAndEndContent = {
+  render: StartAndEndContentTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+    labelPlacement: "outside",
+  },
 };

-export const WithErrorMessage = Template.bind({});
-WithErrorMessage.args = {
-  ...defaultProps,
-  errorMessage: "Please enter a valid email address",
+export const WithErrorMessage = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    errorMessage: "Please enter a valid email address",
+  },
 };

-export const InvalidValidationState = Template.bind({});
-InvalidValidationState.args = {
-  ...defaultProps,
-  variant: "bordered",
-  defaultValue: "invalid@email.com",
-  validationState: "invalid",
-  placeholder: "Enter your email",
-  errorMessage: "Please enter a valid email address",
+export const InvalidValidationState = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+    defaultValue: "invalid@email.com",
+    validationState: "invalid",
+    placeholder: "Enter your email",
+    errorMessage: "Please enter a valid email address",
+  },
 };

-export const RegexValidation = RegexValidationTemplate.bind({});
-RegexValidation.args = {
-  ...defaultProps,
-  variant: "faded",
+export const RegexValidation = {
+  render: RegexValidationTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "faded",
+  },
 };

-export const InputTypes = InputTypesTemplate.bind({});
-InputTypes.args = {
-  ...defaultProps,
+export const InputTypes = {
+  render: InputTypesTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const Controlled = ControlledTemplate.bind({});
-Controlled.args = {
-  ...defaultProps,
-  variant: "bordered",
+export const Controlled = {
+  render: ControlledTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+  },
 };

-export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
-CustomWithClassNames.args = {
-  ...defaultProps,
+export const CustomWithClassNames = {
+  render: CustomWithClassNamesTemplate,
+
+  args: {
+    ...defaultProps,
+  },
 };

-export const CustomWithHooks = CustomWithHooksTemplate.bind({});
-CustomWithHooks.args = {
-  ...defaultProps,
-  label: "Search",
-  type: "search",
-  placeholder: "Type to search...",
-  startContent: (
-    <SearchIcon className="text-black/50 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
-  ),
+export const CustomWithHooks = {
+  render: CustomWithHooksTemplate,
+
+  args: {
+    ...defaultProps,
+    label: "Search",
+    type: "search",
+    placeholder: "Type to search...",
+    startContent: (
+      <SearchIcon className="text-black/50 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+    ),
+  },
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
github-actions[bot]	d15b16ecab	ci(changesets): version packages (#1366 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-11 12:20:17 -03:00
Junior Garcia	fe03c42fa1	fix(tooltip): filter dom props function fixed (#1365 ) * fix(tooltip): filter dom props function fixed * fix(root): react types pkg updated	2023-08-11 12:06:47 -03:00
navedqb	25a918d146	Fixed incorrect import in card component (#1364 )	2023-08-11 09:04:17 -03:00
github-actions[bot]	87918ac5b4	ci(changesets): version packages (#1360 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-10 23:47:40 -03:00
Junior Garcia	a30cec4810	chore(root): react-aria packages upgraded (#1359 )	2023-08-10 23:25:24 -03:00
github-actions[bot]	1b0653c97a	ci(changesets): version packages (#1353 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-10 17:35:26 -03:00
Junior Garcia	710395f3a2	Refactor/remove needless exports system (#1350 ) * fix(root): filter dom props func, accordion keep content mounted, navbaropen menu callbacks * refactor(system): needeless exports removed * refactor(system): needeless exports removed	2023-08-10 17:27:53 -03:00
github-actions[bot]	e7e58e854a	ci(changesets): version packages (#1352 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-10 17:19:51 -03:00
Junior Garcia	d13a14facc	Fix/events and props issues (#1351 ) * fix(root): filter dom props func, accordion keep content mounted, navbaropen menu callbacks * fix(docs): examples keys	2023-08-10 17:10:53 -03:00
Junior Garcia	cef7235c4b	fix(docs): compound variants typo	2023-08-10 08:54:38 -03:00
Junior Garcia	fcff1a1d36	Merge branch 'main' of github.com:nextui-org/nextui	2023-08-09 23:39:57 -03:00
Junior Garcia	c7ba9e1508	fix(docs): customize theme button example, color added	2023-08-09 23:39:44 -03:00
github-actions[bot]	1d8dc4b9d8	ci(changesets): version packages (#1339 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-09 21:51:25 -03:00
github-actions[bot]	ea5e0fb096	ci(changesets): version packages (#1338 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-09 21:42:53 -03:00
Junior Garcia	26f64d043d	fix(storybook): padding	2023-08-09 21:40:54 -03:00
Jakob Guddas	a078c3dcd2	chore: storybook improvements (#1335 )	2023-08-09 21:36:54 -03:00
Jakob Guddas	5a50390e3f	fix: moved sr only modal close buttons to not show unnecessary scroll bar (#1333 ) * fix: moved sr only modal close buttons to not show unnecessary scroll bar * Create sour-lizards-allow.md	2023-08-09 21:36:14 -03:00
Tianen Pang	894d85d059	docs(table): use case example (#1326 )	2023-08-08 14:43:40 -03:00
github-actions[bot]	0ef41d27e7	ci(changesets): version packages (#1324 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-08 12:28:30 -03:00
Tianen Pang	4200164712	fix(input): duplicate triggering of input events (#1323 ) * feat(utils): support for omit-names * fix(input): exclude duplicate event props * fix(input): exclude duplicate event fn only * test(input): event fn call count * chore(changeset): changeset added	2023-08-08 12:19:08 -03:00
Tianen Pang	6d4c6980d5	fix(docs): typo in the loading more data section (#1319 )	2023-08-08 09:10:10 -03:00
github-actions[bot]	f3f36a7146	ci(changesets): version packages (#1316 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-08 01:04:01 -03:00
Junior Garcia	8de209bff7	feat(root): new changeset	2023-08-08 00:56:56 -03:00
Junior Garcia	e9d01be74d	chore(root): eslint and prettier ignore updated	2023-08-08 00:45:14 -03:00
Junior Garcia	66ac2e67ae	feat(root): new changeset	2023-08-08 00:44:58 -03:00
Junior Garcia	7ed88f39c1	chore(pagination): fix prettier	2023-08-08 00:41:58 -03:00
vaynevayne	32d18bfd41	Update pagination-item.tsx (#1315 )	2023-08-08 00:41:09 -03:00
vaynevayne	a1b32c1ceb	Update use-pagination.ts (#1314 )	2023-08-08 00:39:01 -03:00
Junior Garcia	9e683b32ba	Merge branch 'main' of github.com:nextui-org/nextui	2023-08-08 00:12:35 -03:00
Junior Garcia	b7c947805d	feat(storybook): logo adapted to light/dark theme, favicon added	2023-08-08 00:12:21 -03:00
github-actions[bot]	a76fdfa774	ci(changesets): version packages (#1310 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-07 23:40:34 -03:00
Junior Garcia	ac605eb71f	Fix/1307 input on value change (#1309 ) * fix(input): inner event handler implemented * chore(root): changeset added	2023-08-07 23:31:16 -03:00
Junior Garcia	5b343b6181	chore(root): storybook static files removed	2023-08-06 15:56:24 -03:00
Junior Garcia	05562dcf90	feat(root): storybook v7	2023-08-06 15:41:25 -03:00
github-actions[bot]	0a60388258	ci(changesets): version packages (#1302 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-06 15:23:26 -03:00
Junior Garcia	d794225cb7	Pr/1224 (#1301 ) * chore: storybook migration * chore: storybook migration * chore: storybook migration * fix: moved options in arg types out of control * fix: fixed type issues * fix: renamed sb:start script to start * chore: migrate csf 2 to csf 3 * fix: removed storybook build from root build script * chore: kick * chore(root): pnpm lock updated * chore(root): new changeset --------- Co-authored-by: Jakob Guddas <github@jguddas.de>	2023-08-06 15:04:26 -03:00
Junior Garcia	ec2ed200f5	fix(docs): navbar imports	2023-08-06 14:53:19 -03:00
Junior Garcia	2f7703ec8e	fix(docs): navbar imports	2023-08-06 14:53:12 -03:00
Junior Garcia	25cbe1146f	chore(root): qa action parallelized again	2023-08-06 12:06:57 -03:00
Junior Garcia	3db9b6248e	chore(root): qa action parallelized again	2023-08-06 11:59:43 -03:00
github-actions[bot]	b1b5eda15b	ci(changesets): version packages (#1293 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-06 00:02:27 -03:00
Junior Garcia	e3e13a095f	chore(root): new changeset	2023-08-05 23:49:42 -03:00
Junior Garcia	86f921d098	Feat/server components (#1291 ) * feat(root): rsc components added, packages modified, filter dom props function adapted * fix(root): eslint/prettier issues * feat(root): exports changed to named, new pkg for system rsc compatible functions	2023-08-05 23:35:28 -03:00
Junior Garcia	eefda8d6e2	feat(root): RSC components added, packages modified, filter dom props function adapted (#1289 ) * feat(root): rsc components added, packages modified, filter dom props function adapted * fix(root): eslint/prettier issues	2023-08-05 18:53:34 -03:00
Junior Garcia	2e4ce7bcee	chore(root): all qa processes joined into a single one	2023-08-05 18:40:08 -03:00
Junior Garcia	5a4c4f498d	chore(root): build step added to tests QA	2023-08-05 18:34:17 -03:00
Junior Garcia	ec30a9adbd	refactor(root): sotybook build folder added to repo	2023-08-05 11:14:27 -03:00
Junior Garcia	a6954c4156	Merge branch 'main' of github.com:nextui-org/nextui	2023-08-05 11:13:53 -03:00
Junior Garcia	b887a2f503	refactor(root): sotybook build folder added to repo	2023-08-05 11:13:37 -03:00
github-actions[bot]	edc2bc741e	ci(changesets): version packages (#1284 ) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>	2023-08-05 10:54:54 -03:00
Tianen Pang	a1a02dc0db	fix(tooltip): behavior of tooltip trigger with delay (#1278 ) * fix(tooltip): use trigger-props instead of custom on-pointer events * chore(changeset): add tooltip changeset	2023-08-05 10:46:01 -03:00