feat(docs): popover docs almost done

apps/docs/content/components/index.ts

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

apps/docs/content/components/popover/arrow.ts

@@ -0,0 +1,25 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="bottom" showArrow={true}>
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-xs">This is a content of the popover</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/backdrop.ts

@@ -0,0 +1,53 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+
+  const backdrops = ["opaque", "blur", "transparent", ];
+
+  const content = (
+    <PopoverContent className="w-[240px]">
+      {(titleProps) => (
+        <div className="px-1 py-2 w-full">
+          <p className="text-sm font-bold text-foreground" {...titleProps}>
+            Dimensions
+          </p>
+          <div className="mt-2 flex flex-col gap-2 w-full">
+            <Input autoFocus defaultValue="100%" label="Width" size="sm" variant="bordered" />
+            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+          </div>
+        </div>
+      )}
+    </PopoverContent>
+  )
+
+  return (
+    <div className="inline-grid grid-cols-3 gap-4">
+      {backdrops.map((backdrop) => (
+        <Popover
+          key={backdrop}
+          showArrow
+          offset={10}
+          placement="bottom"
+          backdrop={backdrop}
+        >
+          <PopoverTrigger>
+            <Button variant="flat" color="secondary">
+              {backdrop.charAt(0).toUpperCase() + backdrop.slice(1)}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,45 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-sm font-bold">Popover Content</div>
+        <div className="text-xs">This is a content of the popover</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const colors = [
+    "default",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "foreground",
+  ];
+
+  return (
+    <div className="inline-grid grid-cols-4 gap-4">
+      {colors.map((color) => (
+        <Popover key={color} placement="top" color={color}>
+          <PopoverTrigger>
+            <Button variant="flat" color={color}>
+              {color.charAt(0).toUpperCase() + color.slice(1)}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/custom-motion.ts

@@ -0,0 +1,53 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      offset={10}
+      placement="bottom"
+      motionProps={{
+        variants: {
+          enter: {
+            y: 0,
+            opacity: 1,
+            duration: 0.1,
+            transition: {
+              opacity: {
+                duration: 0.15,
+              },
+            },
+          },
+          exit: {
+            y: "10%",
+            opacity: 0,
+            duration: 0,
+            transition: {
+              opacity: {
+                duration: 0.1,
+              },
+            },
+          },
+        },
+      }}
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-xs">This is a content of the popover</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,25 @@
+import usage from "./usage";
+import arrow from "./arrow";
+import offset from "./offset";
+import colors from "./colors";
+import openCallback from "./open-callback";
+import variants from "./variants";
+import placements from "./placements";
+import titleProps from "./title-props";
+import withForm from "./with-form";
+import backdrop from "./backdrop";
+import customMotion from "./custom-motion";
+
+export const popoverContent = {
+  usage,
+  arrow,
+  offset,
+  colors,
+  openCallback,
+  variants,
+  placements,
+  titleProps,
+  withForm,
+  backdrop,
+  customMotion,
+};

apps/docs/content/components/popover/offset.ts

@@ -0,0 +1,25 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="bottom" offset={20} showArrow>
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-xs">This is a content of the popover</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/open-callback.ts

@@ -0,0 +1,30 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Popover onOpenChange={(open) => setIsOpen(open)}>
+        <PopoverTrigger>
+          <Button>Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className="px-1 py-2">
+            <div className="text-sm font-bold">Popover Content</div>
+            <div className="text-xs">This is a content of the popover</div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <p className="text-sm text-default-400">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/placements.ts

@@ -0,0 +1,50 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-sm font-bold">Popover Content</div>
+        <div className="text-xs">This is a content of the popover</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const placements = [
+    "top-start",
+    "top",
+    "top-end",
+    "bottom-start",
+    "bottom",
+    "bottom-end",
+    "left-start",
+    "left",
+    "left-end",
+    "right-start",
+    "right",
+    "right-end",
+  ];
+
+  return (
+    <div className="inline-grid grid-cols-3 gap-4">
+      {placements.map((placement) => (
+        <Popover key={placement} placement={placement}>
+          <PopoverTrigger>
+            <Button variant="flat" color="primary">
+              {placement.charAt(0).toUpperCase() + placement.slice(1)}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/title-props.ts

@@ -0,0 +1,29 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="right">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {(titleProps) => (
+          <div className="px-1 py-2">
+            <h3 className="text-sm font-bold" {...titleProps}>
+              Popover Content
+            </h3>
+            <div className="text-xs">This is a content of the popover</div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,25 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="right">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-xs">This is a content of the popover</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/variants.ts

@@ -0,0 +1,37 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-sm font-bold">Popover Content</div>
+        <div className="text-xs">This is a content of the popover</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const variants = ["solid", "bordered", "flat", "faded", "shadow"];
+
+  return (
+    <div className="flex gap-2">
+      {variants.map((variant) => (
+        <Popover key={variant} placement="top" variant={variant}>
+          <PopoverTrigger>
+            <Button variant={variant}>
+              {variant.charAt(0).toUpperCase() + variant.slice(1)}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/popover/with-form.ts

@@ -0,0 +1,34 @@
+const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="bottom" showArrow offset={10}>
+      <PopoverTrigger>
+        <Button color="primary">Customize</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[240px]">
+        {(titleProps) => (
+          <div className="px-1 py-2 w-full">
+            <p className="text-sm font-bold text-foreground" {...titleProps}>
+              Dimensions
+            </p>
+            <div className="mt-2 flex flex-col gap-2 w-full">
+              <Input autoFocus defaultValue="100%" label="Width" size="sm" variant="bordered" />
+              <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+              <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+              <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+            </div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/docs/components/popover.mdx

@@ -6,8 +6,84 @@ url: https://nextui.org/docs/components/tooltip
 
 # Popover
 
-Popover is a **non-modal** dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something. Popover implementation is based on [@react-aria/overlays](https://react-spectrum.adobe.com/react-aria/useOverlay.html).
+Popover is a **non-modal** dialog that floats around its disclosure. It's commonly used for displaying 
+additional rich content on top of something.
 
-```jsx
-import {Popover} from '@nextui-org/react';
-```
+<ComponentLinks component="popover" reactAriaHook="usePopover" />
+
+---
+
+## Import
+
+NextUI exports 4 popover-related components:
+
+- **Popover**: The main component to display a popover.
+- **PopoverTrigger**: The component that triggers the popover.
+- **PopoverContent**: The component that contains the popover content.
+
+
+<ImportTabs
+  commands={{
+    main: 'import {Popover, PopoverTrigger, PopoverContent} from "@nextui-org/react";',
+    individual: 'import {Popover, PopoverTrigger, PopoverContent} from "@nextui-org/popover";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={popoverContent.usage} />
+
+### With Arrow
+
+<CodeDemo title="With Arrow" files={popoverContent.arrow} />
+
+### Offset
+
+<CodeDemo title="Offset" files={popoverContent.offset} />
+
+### Open Callback
+
+Popover provides an `onOpenChange` callback to handle the open event.
+
+<CodeDemo title="Open Callback" files={popoverContent.openCallback} />
+
+### Placements
+
+<CodeDemo title="Placements" files={popoverContent.placements} />
+
+### Colors
+
+<CodeDemo title="Colors" files={popoverContent.colors} />
+
+### Title Props
+
+To be sure that the popover exposes the correct title to assistive technologies, you should use the
+`titleProps` prop on the `PopoverContent` component. To use this prop, you must pass a function as a child.
+
+<CodeDemo title="Title Props" files={popoverContent.titleProps} />
+
+### With Form
+
+The `Popover` handles the focus within the popover content. It means that you can use the popover with
+form elements without any problem. the focus returns to the trigger when the popover closes.
+
+<CodeDemo title="With Form" files={popoverContent.withForm} />
+
+
+> **Note**: The first `Input` component is focused when the popover opens because it has the `autoFocus` prop.
+
+### Backdrop
+
+The `Popover` component has a `backdrop` prop to show a backdrop behind the popover. The backdrop can be
+either `transparent`, `opaque` or `blur`. The default value is `transparent`.
+
+<CodeDemo title="Backdrop" files={popoverContent.backdrop} />
+
+
+### Custom Motion
+
+Popover offers a `motionProps` property to customize the `enter` / `exit` animation.
+
+<CodeDemo title="Custom Motion" files={popoverContent.customMotion} />
+
+> Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).

apps/docs/styles/sandpack.css

@@ -21,16 +21,18 @@
   width: 100%;
   font-size: 14px;
 }
+
 .sp-cm {
   max-height: 100%;
   overflow: hidden;
 }
-
 .cm-scroller {
   overflow: hidden;
   max-height: 600px;
 }
 
+
+
 .sp-code-viewer.is-expanded .cm-scroller {
   overflow: auto;
   padding-bottom: 50px;

examples/create-next-app/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": ["next", "next/core-web-vitals"]
-}

examples/create-next-app/.gitignore

@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel

examples/create-next-app/README.md

@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/create-next-app/next.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  reactStrictMode: true,
-};

examples/create-next-app/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "create-next-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@nextui-org/react": "2.0.0-beta.1",
-    "next": "11.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "eslint": "7.29.0",
-    "eslint-config-next": "11.0.0"
-  }
-}

examples/create-next-app/pages/_app.js

@@ -1,12 +0,0 @@
-import '../styles/globals.css';
-import { NextUIProvider } from '@nextui-org/react';
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <NextUIProvider>
-      <Component {...pageProps} />
-    </NextUIProvider>
-  );
-}
-
-export default MyApp;

examples/create-next-app/pages/_document.js

@@ -1,26 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { CssBaseline } from '@nextui-org/react';
-
-class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return {
-      ...initialProps,
-      styles: <>{initialProps.styles}</>
-    };
-  }
-
-  render() {
-    return (
-      <Html>
-        <Head>{CssBaseline.flush()}</Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;

examples/create-next-app/pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
-}

examples/create-next-app/pages/index.js

@@ -1,72 +0,0 @@
-import Head from 'next/head';
-import Image from 'next/image';
-import styles from '../styles/Home.module.css';
-import {
-  Container,
-  Button,
-  Input,
-  Spacer,
-  Text,
-  Link
-} from '@nextui-org/react';
-
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>NextUI | Create Next App</title>
-        <meta
-          name="description"
-          content="Generated by create next app and using NextUI as a react UI library"
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <Container
-        as="main"
-        display="flex"
-        direction="column"
-        justify="center"
-        alignItems="center"
-        style={{ height: '100vh' }}
-      >
-        <Spacer />
-        <Image src="/logo.svg" alt="Vercel Logo" width={200} height={200} />
-        <Spacer />
-        <Text h1 className={styles.title}>
-          Welcome to&nbsp;
-          <Link
-            color
-            href="https://nextjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Next.js
-          </Link>
-          &nbsp;&&nbsp;
-          <Link
-            color
-            href="https://nextui.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            NextUI
-          </Link>
-        </Text>
-        <Spacer />
-        <Input clearable labelPlaceholder="Type something" />
-        <Spacer />
-        <Button>
-          <a
-            className={styles.button}
-            href="https://github.com/nextui-org/nextui"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Show on Github
-          </a>
-        </Button>
-      </Container>
-    </div>
-  );
-}

examples/create-next-app/public/logo.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="374" height="374" viewBox="0 0 374 374">
-  <g id="Group_1" data-name="Group 1" transform="translate(-773 -353)">
-    <rect id="Rectangle_1" data-name="Rectangle 1" width="374" height="374" rx="99" transform="translate(773 353)"/>
-    <path id="Path_2" data-name="Path 2" d="M127.309-159.273h14.543V-53.817a55.656,55.656,0,0,1-7.621,29.047A54.131,54.131,0,0,1,113.039-4.627Q99.468,2.722,81.5,2.722q-17.887,0-31.5-7.388A54.429,54.429,0,0,1,28.775-24.809a55.451,55.451,0,0,1-7.621-29.008V-159.273H35.7V-54.828a44.65,44.65,0,0,0,5.677,22.592A40.568,40.568,0,0,0,57.355-16.643q10.3,5.677,24.148,5.677t24.186-5.677a40.232,40.232,0,0,0,15.982-15.593,44.893,44.893,0,0,0,5.638-22.592Zm71.393,0V0H184.159V-159.273Z" transform="translate(851 620)" fill="#fff"/>
-  </g>
-</svg>

examples/create-next-app/public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

examples/create-next-app/styles/Home.module.css

@@ -1,6 +0,0 @@
-.button {
-    color: white;
-}
-
-
-  

examples/create-next-app/styles/globals.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}

examples/create-react-app/.gitignore

@@ -1,23 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

examples/create-react-app/README.md

@@ -1,70 +0,0 @@
-# create-react-app demo for NextUI React
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

examples/create-react-app/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "create-react-app",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@nextui-org/react": "2.0.0-beta.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "react": "^18.0.0"
-    "react": "^18.0.0",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/create-react-app/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

examples/create-react-app/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

examples/create-react-app/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

examples/create-react-app/src/App.css

@@ -1,22 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}

examples/create-react-app/src/App.js

@@ -1,26 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-import { Text, Spacer, Button, Link } from '@nextui-org/react';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Text>NextUI example with create-react-app</Text>
-        <Link
-          color
-          href="https://nextui.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Show NextUI React
-        </Link>
-        <Spacer />
-        <Button>Action</Button>
-      </header>
-    </div>
-  );
-}
-
-export default App;

examples/create-react-app/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

examples/create-react-app/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

examples/create-react-app/src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

examples/create-react-app/src/logo.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="374" height="374" viewBox="0 0 374 374">
-  <g id="Group_1" data-name="Group 1" transform="translate(-773 -353)">
-    <rect id="Rectangle_1" data-name="Rectangle 1" width="374" height="374" rx="99" transform="translate(773 353)"/>
-    <path id="Path_2" data-name="Path 2" d="M127.309-159.273h14.543V-53.817a55.656,55.656,0,0,1-7.621,29.047A54.131,54.131,0,0,1,113.039-4.627Q99.468,2.722,81.5,2.722q-17.887,0-31.5-7.388A54.429,54.429,0,0,1,28.775-24.809a55.451,55.451,0,0,1-7.621-29.008V-159.273H35.7V-54.828a44.65,44.65,0,0,0,5.677,22.592A40.568,40.568,0,0,0,57.355-16.643q10.3,5.677,24.148,5.677t24.186-5.677a40.232,40.232,0,0,0,15.982-15.593,44.893,44.893,0,0,0,5.638-22.592Zm71.393,0V0H184.159V-159.273Z" transform="translate(851 620)" fill="#fff"/>
-  </g>
-</svg>

examples/create-react-app/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

examples/create-react-app/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

examples/create-remix-app/.gitignore

@@ -1,12 +0,0 @@
-node_modules
-
-.cache
-.env
-.vercel
-.output
-
-/build/
-/public/build
-/api/index.js
-
-package-lock.json

examples/create-remix-app/README.md

@@ -1,34 +0,0 @@
-# Welcome to Remix!
-
-- [Remix Docs](https://remix.run/docs)
-
-## Deployment
-
-After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
-
-If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
-
-```sh
-npm i -g vercel
-vercel
-```
-
-It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
-
-## Development
-
-To run your Remix app locally, make sure your project's local dependencies are installed:
-
-```sh
-npm install
-```
-
-Afterwards, start the Remix development server like so:
-
-```sh
-npm run dev
-```
-
-Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
-
-If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

examples/create-remix-app/api/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["<stdin>", "../node_modules/@remix-run/dev/compiler/shims/react.ts", "../app/entry.server.tsx", "/Users/ryan/Documents/nextui/examples/create-remix-app/app/root.tsx", "/Users/ryan/Documents/nextui/examples/create-remix-app/app/routes/index.tsx", "server-assets-manifest:@remix-run/dev/assets-manifest", "server-entry-module:@remix-run/dev/server-build"],
-  "sourcesContent": ["export * from \"@remix-run/dev/server-build\";", "// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as React from \"react\";\nexport { React };\n", "import type { EntryContext } from \"@remix-run/node\";\nimport { RemixServer } from \"@remix-run/react\";\nimport { renderToString } from \"react-dom/server\";\nimport { CssBaseline } from \"@nextui-org/react\";\n\nexport default function handleRequest(\n  request: Request,\n  responseStatusCode: number,\n  responseHeaders: Headers,\n  remixContext: EntryContext\n) {\n  const styles = CssBaseline.flush();\n  let html = renderToString(\n    <RemixServer context={remixContext} url={request.url} />\n  ).replace(\n    /<\\/head>/,\n    `<style id=\"stitches\">${styles.props.dangerouslySetInnerHTML.__html}</style></head>`\n  );\n\n  responseHeaders.set(\"Content-Type\", \"text/html\");\n\n  return new Response(\"<!DOCTYPE html>\" + html, {\n    status: responseStatusCode,\n    headers: responseHeaders,\n  });\n}\n", "import type { MetaFunction } from \"@remix-run/node\";\nimport {\n  Links,\n  LiveReload,\n  Meta,\n  Outlet,\n  Scripts,\n  ScrollRestoration,\n} from \"@remix-run/react\";\nimport { createTheme, NextUIProvider } from \"@nextui-org/react\";\nimport useDarkMode from \"use-dark-mode\";\n\nconst lightTheme = createTheme({\n  type: \"light\",\n  theme: {},\n});\n\nconst darkTheme = createTheme({\n  type: \"dark\",\n  theme: {},\n});\n\nexport const meta: MetaFunction = () => ({\n  charset: \"utf-8\",\n  title: \"Remix with NextUI\",\n  viewport: \"width=device-width,initial-scale=1\",\n});\n\nexport default function App() {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <html lang=\"en\">\n      <head>\n        <Meta />\n        <Links />\n      </head>\n      <body>\n        <NextUIProvider theme={darkMode.value ? darkTheme : lightTheme}>\n          <Outlet />\n          <ScrollRestoration />\n          <Scripts />\n          <LiveReload />\n        </NextUIProvider>\n      </body>\n    </html>\n  );\n}\n", "import {\n  Container,\n  Grid,\n  Switch,\n  Text,\n  useTheme,\n  Link,\n} from \"@nextui-org/react\";\nimport useDarkMode from \"use-dark-mode\";\n\nexport default function Index() {\n  const darkMode = useDarkMode(false);\n  const { isDark } = useTheme();\n  return (\n    <Container>\n      <Text h1 margin={\"0 0 $4 0\"} css={{ ta: \"center\" }}>\n        Welcome to <Link href=\"https://remix.run/\">Remix</Link> with{\" \"}\n        <Link color={\"secondary\"} href=\"https://nextui.org/\">\n          NextUI\n        </Link>\n      </Text>\n      <Grid.Container\n        justify=\"center\"\n        alignContent=\"center\"\n        css={{ gap: \"$8\", mb: \"$8\" }}\n      >\n        <Text>Enable {isDark ? \"light\" : \"dark\"} mode</Text>\n        <Switch\n          shadow\n          color=\"primary\"\n          checked={isDark}\n          onChange={() => darkMode.toggle()}\n        />\n      </Grid.Container>\n    </Container>\n  );\n}\n", "export default {'version':'78f9df5e','entry':{'module':'/build/entry.client-7FMK5Z5F.js','imports':['/build/_shared/chunk-QQ53KUNF.js','/build/_shared/chunk-IYRIQ6PI.js']},'routes':{'root':{'id':'root','parentId':undefined,'path':'','index':undefined,'caseSensitive':undefined,'module':'/build/root-JYFVDJUT.js','imports':['/build/_shared/chunk-G3OQTDJE.js'],'hasAction':false,'hasLoader':false,'hasCatchBoundary':false,'hasErrorBoundary':false},'routes/index':{'id':'routes/index','parentId':'root','path':undefined,'index':true,'caseSensitive':undefined,'module':'/build/routes/index-FD5CD3US.js','imports':undefined,'hasAction':false,'hasLoader':false,'hasCatchBoundary':false,'hasErrorBoundary':false}},'url':'/build/manifest-78F9DF5E.js'};", "\nimport * as entryServer from \"/Users/ryan/Documents/nextui/examples/create-remix-app/app/entry.server.tsx\";\nimport * as route0 from \"/Users/ryan/Documents/nextui/examples/create-remix-app/app/root.tsx\";\nimport * as route1 from \"/Users/ryan/Documents/nextui/examples/create-remix-app/app/routes/index.tsx\";\n  export { default as assets } from \"@remix-run/dev/assets-manifest\";\n  export const entry = { module: entryServer };\n  export const routes = {\n    \"root\": {\n      id: \"root\",\n      parentId: undefined,\n      path: \"\",\n      index: undefined,\n      caseSensitive: undefined,\n      module: route0\n    },\n  \"routes/index\": {\n      id: \"routes/index\",\n      parentId: \"root\",\n      path: undefined,\n      index: true,\n      caseSensitive: undefined,\n      module: route1\n    }\n  };"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,YAAuB;;;ACDvB;AAAA;AAAA;AAAA;AACA,mBAA4B;AAC5B,oBAA+B;AAC/B,oBAA4B;AAEb,uBACb,SACA,oBACA,iBACA,cACA;AACA,QAAM,SAAS,0BAAY;AAC3B,MAAI,OAAO,kCACT,oCAAC,0BAAD;AAAA,IAAa,SAAS;AAAA,IAAc,KAAK,QAAQ;AAAA,MACjD,QACA,YACA,wBAAwB,OAAO,MAAM,wBAAwB;AAG/D,kBAAgB,IAAI,gBAAgB;AAEpC,SAAO,IAAI,SAAS,oBAAoB,MAAM;AAAA,IAC5C,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA;;;ACvBb;AAAA;AAAA;AAAA;AAAA;AACA,oBAOO;AACP,oBAA4C;AAC5C,2BAAwB;AAExB,IAAM,aAAa,+BAAY;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,IAAM,YAAY,+BAAY;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA;AAGF,IAAM,OAAqB,MAAO;AAAA,EACvC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA;AAGG,eAAe;AAC5B,QAAM,WAAW,kCAAY;AAE7B,SACE,oCAAC,QAAD;AAAA,IAAM,MAAK;AAAA,KACT,oCAAC,QAAD,MACE,oCAAC,oBAAD,OACA,oCAAC,qBAAD,QAEF,oCAAC,QAAD,MACE,oCAAC,8BAAD;AAAA,IAAgB,OAAO,SAAS,QAAQ,YAAY;AAAA,KAClD,oCAAC,sBAAD,OACA,oCAAC,iCAAD,OACA,oCAAC,uBAAD,OACA,oCAAC,0BAAD;AAAA;;;AC1CV;AAAA;AAAA;AAAA;AAAA,oBAOO;AACP,4BAAwB;AAET,iBAAiB;AAC9B,QAAM,WAAW,mCAAY;AAC7B,QAAM,EAAE,WAAW;AACnB,SACE,oCAAC,yBAAD,MACE,oCAAC,oBAAD;AAAA,IAAM,IAAE;AAAA,IAAC,QAAQ;AAAA,IAAY,KAAK,EAAE,IAAI;AAAA,KAAY,eACvC,oCAAC,oBAAD;AAAA,IAAM,MAAK;AAAA,KAAqB,UAAY,SAAM,KAC7D,oCAAC,oBAAD;AAAA,IAAM,OAAO;AAAA,IAAa,MAAK;AAAA,KAAsB,YAIvD,oCAAC,mBAAK,WAAN;AAAA,IACE,SAAQ;AAAA,IACR,cAAa;AAAA,IACb,KAAK,EAAE,KAAK,MAAM,IAAI;AAAA,KAEtB,oCAAC,oBAAD,MAAM,WAAQ,SAAS,UAAU,QAAO,UACxC,oCAAC,sBAAD;AAAA,IACE,QAAM;AAAA,IACN,OAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU,MAAM,SAAS;AAAA;AAAA;;;AC/BnC,IAAO,0BAAQ,EAAC,WAAU,YAAW,SAAQ,EAAC,UAAS,mCAAkC,WAAU,CAAC,oCAAmC,uCAAqC,UAAS,EAAC,QAAO,EAAC,MAAK,QAAO,YAAW,QAAU,QAAO,IAAG,SAAQ,QAAU,iBAAgB,QAAU,UAAS,2BAA0B,WAAU,CAAC,qCAAoC,aAAY,OAAM,aAAY,OAAM,oBAAmB,OAAM,oBAAmB,SAAO,gBAAe,EAAC,MAAK,gBAAe,YAAW,QAAO,QAAO,QAAU,SAAQ,MAAK,iBAAgB,QAAU,UAAS,mCAAkC,WAAU,QAAU,aAAY,OAAM,aAAY,OAAM,oBAAmB,OAAM,oBAAmB,WAAQ,OAAM;;;ACKhsB,IAAM,QAAQ,EAAE,QAAQ;AACxB,IAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,eAAe;AAAA,IACf,QAAQ;AAAA;AAAA,EAEZ,gBAAgB;AAAA,IACZ,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,eAAe;AAAA,IACf,QAAQ;AAAA;AAAA;",
-  "names": []
-}

examples/create-remix-app/app/entry.client.tsx

@@ -1,4 +0,0 @@
-import { RemixBrowser } from "@remix-run/react";
-import { hydrate } from "react-dom";
-
-hydrate(<RemixBrowser />, document);

examples/create-remix-app/app/entry.server.tsx

@@ -1,26 +0,0 @@
-import type { EntryContext } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
-import { CssBaseline } from "@nextui-org/react";
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  const styles = CssBaseline.flush();
-  let html = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  ).replace(
-    /<\/head>/,
-    `<style id="stitches">${styles.props.dangerouslySetInnerHTML.__html}</style></head>`
-  );
-
-  responseHeaders.set("Content-Type", "text/html");
-
-  return new Response("<!DOCTYPE html>" + html, {
-    status: responseStatusCode,
-    headers: responseHeaders,
-  });
-}

examples/create-remix-app/app/root.tsx

@@ -1,48 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
-import { createTheme, NextUIProvider } from "@nextui-org/react";
-import useDarkMode from "use-dark-mode";
-
-const lightTheme = createTheme({
-  type: "light",
-  theme: {},
-});
-
-const darkTheme = createTheme({
-  type: "dark",
-  theme: {},
-});
-
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "Remix with NextUI",
-  viewport: "width=device-width,initial-scale=1",
-});
-
-export default function App() {
-  const darkMode = useDarkMode(false);
-
-  return (
-    <html lang="en">
-      <head>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <NextUIProvider theme={darkMode.value ? darkTheme : lightTheme}>
-          <Outlet />
-          <ScrollRestoration />
-          <Scripts />
-          <LiveReload />
-        </NextUIProvider>
-      </body>
-    </html>
-  );
-}

examples/create-remix-app/app/routes/index.tsx

@@ -1,37 +0,0 @@
-import {
-  Container,
-  Grid,
-  Switch,
-  Text,
-  useTheme,
-  Link,
-} from "@nextui-org/react";
-import useDarkMode from "use-dark-mode";
-
-export default function Index() {
-  const darkMode = useDarkMode(false);
-  const { isDark } = useTheme();
-  return (
-    <Container>
-      <Text h1 margin={"0 0 $4 0"} css={{ ta: "center" }}>
-        Welcome to <Link href="https://remix.run/">Remix</Link> with{" "}
-        <Link color={"secondary"} href="https://nextui.org/">
-          NextUI
-        </Link>
-      </Text>
-      <Grid.Container
-        justify="center"
-        alignContent="center"
-        css={{ gap: "$8", mb: "$8" }}
-      >
-        <Text>Enable {isDark ? "light" : "dark"} mode</Text>
-        <Switch
-          shadow
-          color="primary"
-          checked={isDark}
-          onChange={() => darkMode.toggle()}
-        />
-      </Grid.Container>
-    </Container>
-  );
-}

examples/create-remix-app/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "create-remix-app",
-  "private": true,
-  "description": "",
-  "license": "",
-  "sideEffects": false,
-  "scripts": {
-    "build": "remix build",
-    "dev": "remix dev"
-  },
-  "dependencies": {
-    "@nextui-org/react": "^1.0.8-beta.5",
-    "@remix-run/node": "^1.4.0",
-    "@remix-run/react": "^1.4.0",
-    "@remix-run/vercel": "^1.4.0",
-    "@vercel/node": "^1.14.0",
-    "add": "^2.0.6",
-    "react": "^18.0.0",
-    "use-dark-mode": "^2.3.1",
-    "yarn": "^1.22.18"
-  },
-  "devDependencies": {
-    "@remix-run/dev": "^1.4.0",
-    "@remix-run/eslint-config": "^1.4.0",
-    "@remix-run/serve": "^1.4.0",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
-    "eslint": "^8.11.0",
-    "typescript": "^4.9.5"
-  },
-  "engines": {
-    "node": ">=14"
-  }
-}

examples/create-remix-app/remix.config.js

@@ -1,15 +0,0 @@
-/**
- * @type {import('@remix-run/dev').AppConfig}
- */
-module.exports = {
-  serverBuildTarget: "vercel",
-  // When running locally in development mode, we use the built in remix
-  // server. This does not understand the vercel lambda module format,
-  // so we default back to the standard build output.
-  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
-  ignoredRouteFiles: [".*"],
-  // appDirectory: "app",
-  // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "api/index.js",
-  // publicPath: "/build/",
-};

examples/create-remix-app/remix.env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node/globals" />

examples/create-remix-app/server.js

@@ -1,4 +0,0 @@
-import { createRequestHandler } from "@remix-run/vercel";
-import * as build from "@remix-run/dev/server-build";
-
-export default createRequestHandler({ build, mode: process.env.NODE_ENV });

examples/create-remix-app/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "target": "ES2019",
-    "strict": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
-  }
-}

examples/create-remix-app/vercel.json

@@ -1,7 +0,0 @@
-{
-  "build": {
-    "env": {
-      "ENABLE_FILE_SYSTEM_API": "1"
-    }
-  }
-}

examples/vite-react-typescript/.gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

examples/vite-react-typescript/README.md

@@ -1,41 +0,0 @@
-This is a [Vite React TypeScript](https://reactjs.org/) project bootstrapped with [`create vite`](https://stackblitz.com/edit/vitejs-vite-9rgerc?file=index.html&terminal=dev).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm install
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `src/App.tsx`. The page auto-updates as you edit the file.
-
-
-
-## Learn More
-
-To learn more about React.js, take a look at the following resources:
-
-- [React.js Documentation](https://reactjs.org/docs/getting-started.html) - learn about React.js features and API.
-- [Learn Vite](https://vitejs.dev/guide/) - Next Generation Frontend Tooling.
-- [Learn Next UI](https://nextui.org/) - Beautiful, fast and modern React UI library.
-
-You can check out [the Next UI GitHub repository](https://github.com/nextui-org/nextui) - your feedback and contributions are welcome!
-
-## Creating Production Build
-
-Run
-
-```bash
-npm run build
-```
-
-To Serve the Production App Locally 
-
-```bash
-npm install -g serve
-serve -s dist
-```

examples/vite-react-typescript/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>NextUI | Vite App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

examples/vite-react-typescript/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "vite-react-typescript",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@nextui-org/react": "2.0.0-beta.1",
-    "react": "^18.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "@vitejs/plugin-react": "^1.0.7",
-    "typescript": "^4.9.5",
-    "vite": "^2.8.0"
-  }
-}

examples/vite-react-typescript/src/App.tsx

@@ -1,61 +0,0 @@
-import { useState } from 'react';
-import {
-  Button,
-  Text,
-  Link,
-  NextUIProvider,
-  createTheme,
-  Container,
-  Spacer
-} from '@nextui-org/react';
-
-const theme = createTheme({
-  type: 'light'
-});
-
-function App() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <NextUIProvider theme={theme}>
-      <Container
-        className="App"
-        css={{
-          dflex: 'center',
-          flexDirection: 'column',
-          minHeight: '100vh'
-        }}
-      >
-        <img src="/logo.png" className="App-logo" alt="NextUI logo" />
-        <Spacer y={0.5} />
-        <Text h1>Hello Vite + NextUI!</Text>
-        <Spacer y={0.5} />
-        <Button type="button" onClick={() => setCount((count) => count + 1)}>
-          Count is: {count}
-        </Button>
-        <Text css={{ my: '$8' }}>
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </Text>
-        <Text>
-          <Link block href="https://reactjs.org">
-            Learn React
-          </Link>
-          {' | '}
-          <Link
-            block
-            color="primary"
-            href="https://vitejs.dev/guide/features.html"
-          >
-            Vite Docs
-          </Link>
-          {' | '}
-          <Link block href="https://nextui.org/">
-            NextUI Docs
-          </Link>
-        </Text>
-      </Container>
-    </NextUIProvider>
-  );
-}
-
-export default App;

examples/vite-react-typescript/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);

examples/vite-react-typescript/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

examples/vite-react-typescript/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

examples/vite-react-typescript/tsconfig.node.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}

examples/vite-react-typescript/vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()]
-});

packages/components/accordion/CHANGELOG.md

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

packages/components/accordion/package.json

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

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/avatar
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/use-image@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/avatar/package.json

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

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/badge
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/badge/package.json

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

packages/components/button/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/button
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/spinner@0.0.0-dev-v2-20230605023127
+  - @nextui-org/drip@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/button/package.json

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

packages/components/card/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/drip@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/card/package.json

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

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/checkbox
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/checkbox/package.json

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

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/chip
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230605023127
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/chip/package.json

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

packages/components/code/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/code
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/code/package.json

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

packages/components/divider/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/divider
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/divider/package.json

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

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/drip/package.json

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

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/dropdown
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/popover@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/dropdown/package.json

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

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -63,7 +63,7 @@ export default {
         ],
       },
     },
-    backdropVariant: {
+    backdrop: {
       control: {
         type: "select",
         options: ["transparent", "blur", "opaque"],

packages/components/image/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/image
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/use-image@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/image/package.json

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

packages/components/input/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230605023127
+
+### Patch Changes
+
+- Popover and Tooltip API simplified
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230605023127
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230605023127
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230605023127
+  - @nextui-org/system@0.0.0-dev-v2-20230605023127
+  - @nextui-org/theme@0.0.0-dev-v2-20230605023127
+
 ## 0.0.0-dev-v2-20230604204500
 
 ### Patch Changes

packages/components/input/package.json

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

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

@@ -58,7 +58,9 @@ export interface Props extends HTMLNextUIProps<"input"> {
   onValueChange?: AriaTextFieldProps["onChange"];
 }
 
-export type UseInputProps = Props & InputVariantProps & Omit<AriaTextFieldProps, "onChange">;
+export type UseInputProps = Omit<Props, keyof InputVariantProps> &
+  Omit<AriaTextFieldProps, "onChange"> &
+  InputVariantProps;
 
 export function useInput(originalProps: UseInputProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, input.variantKeys);