From d0911aeb1c3d81cde91ea025bcf4de8b4ca9a9fb Mon Sep 17 00:00:00 2001
From: ecklf <ecklf@icloud.com>
Date: Thu, 19 Jan 2023 22:29:10 +0100
Subject: [PATCH 1/2] style(demo): fix centering

---
 demo/components/context-menu.tsx |  7 +++----
 demo/pages/index.tsx             | 10 ++--------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/demo/components/context-menu.tsx b/demo/components/context-menu.tsx
index 5ba37a2..d7f52d9 100644
--- a/demo/components/context-menu.tsx
+++ b/demo/components/context-menu.tsx
@@ -15,6 +15,7 @@ import {
 } from "@radix-ui/react-icons";
 import cx from "classnames";
 import React, { ReactNode, useState } from "react";
+import Button from "./shared/button";
 
 interface RadixMenuItem {
   label: string;
@@ -77,10 +78,8 @@ const ContextMenu = (props: Props) => {
   return (
     <div>
       <ContextMenuPrimitive.Root>
-        <ContextMenuPrimitive.Trigger className="inline-flex w-36 items-center justify-center rounded-md border-2 border-dashed border-gray-500 bg-white px-3 py-4 dark:border-gray-300 dark:bg-gray-800">
-          <span className="select-none text-sm font-medium text-gray-700 dark:text-gray-100">
-            Right Click
-          </span>
+        <ContextMenuPrimitive.Trigger asChild>
+          <Button>Right Click</Button>
         </ContextMenuPrimitive.Trigger>
 
         <ContextMenuPrimitive.Portal>
diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
index 15cf24e..7e09042 100644
--- a/demo/pages/index.tsx
+++ b/demo/pages/index.tsx
@@ -30,11 +30,6 @@ import ToggleGroup from "../components/toggle-group";
 import Toolbar from "../components/toolbar";
 import Tooltip from "../components/tooltip";
 import { CommandMenu } from "../components/shared/command-menu";
-import {
-  QuestionMarkCircledIcon,
-  QuestionMarkIcon,
-  SunIcon,
-} from "@radix-ui/react-icons";
 import cx from "classnames";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
@@ -125,7 +120,6 @@ const RADIX_COMPONENTS: RadixComponent[] = [
   {
     label: "Hover Card",
     link: `${REPO_URL}/components/hover-card.tsx`,
-    center: true,
     component: <HoverCard />,
   },
   {
@@ -199,7 +193,6 @@ const RADIX_COMPONENTS: RadixComponent[] = [
   {
     label: "Toast",
     link: `${REPO_URL}/components/toast.tsx`,
-    center: true,
     component: (
       <div>
         <Toast />
@@ -403,8 +396,9 @@ const Demo = () => {
       />
 
       <div className="mx-auto grid w-full max-w-screen-2xl grid-cols-1 gap-4 px-4 py-8 md:gap-6 md:px-6 lg:grid-cols-2">
-        {RADIX_COMPONENTS.map(({ label, link, component }, i) => (
+        {RADIX_COMPONENTS.map(({ label, link, component, center }, i) => (
           <DemoCard
+            variant={center && DemoCard.variant.JustifyCenter}
             key={`${label}-${i}`}
             data={{
               title: label,

From e494b90ae504e1efc3cee5e69f77446092159fdf Mon Sep 17 00:00:00 2001
From: ecklf <ecklf@icloud.com>
Date: Thu, 19 Jan 2023 23:17:26 +0100
Subject: [PATCH 2/2] refactor(demo): run code transformer

---
 demo/components/accordion.tsx             | 14 +++---
 demo/components/alert-dialog.tsx          | 14 +++---
 demo/components/aspect-ratio.tsx          | 10 ++--
 demo/components/avatar.tsx                | 18 ++++---
 demo/components/checkbox.tsx              | 10 ++--
 demo/components/collapsible.tsx           | 12 ++---
 demo/components/context-menu.tsx          | 24 +++++-----
 demo/components/dialog.tsx                | 18 +++----
 demo/components/dropdown-menu.tsx         | 24 +++++-----
 demo/components/hover-card.tsx            | 14 +++---
 demo/components/menubar.tsx               | 18 +++----
 demo/components/navigation-menu.tsx       | 28 +++++------
 demo/components/popover.tsx               | 14 +++---
 demo/components/progress.tsx              |  6 +--
 demo/components/radio-group.tsx           | 10 ++--
 demo/components/select.tsx                | 10 ++--
 demo/components/shared/button.tsx         |  4 +-
 demo/components/shared/command-menu.tsx   | 12 ++---
 demo/components/shared/demo-card.tsx      | 10 ++--
 demo/components/shared/theme-switcher.tsx | 14 +++---
 demo/components/slider.tsx                | 10 ++--
 demo/components/switch.tsx                | 12 ++---
 demo/components/tabs.tsx                  | 16 +++----
 demo/components/toast.tsx                 | 10 ++--
 demo/components/toggle-group.tsx          | 10 ++--
 demo/components/toggle.tsx                |  6 +--
 demo/components/toolbar.tsx               | 14 +++---
 demo/components/tooltip.tsx               | 10 ++--
 demo/package.json                         |  4 +-
 demo/pages/index.tsx                      | 58 +++++++++++------------
 demo/pnpm-lock.yaml                       | 13 ++---
 31 files changed, 226 insertions(+), 221 deletions(-)

diff --git a/demo/components/accordion.tsx b/demo/components/accordion.tsx
index 28efbf6..ea3ac84 100644
--- a/demo/components/accordion.tsx
+++ b/demo/components/accordion.tsx
@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
 interface AccordionItem {
@@ -25,14 +25,14 @@ const items: AccordionItem[] = [
   },
 ];
 
-interface Props {}
+interface AccordionProps {}
 
-const Accordion = (props: Props) => {
+const Accordion = (props: AccordionProps) => {
   return (
     <AccordionPrimitive.Root
       type="single"
       defaultValue="item-1"
-      className={cx("space-y-4")}
+      className={clsx("space-y-4")}
     >
       {items.map(({ header, content }, i) => (
         <AccordionPrimitive.Item
@@ -42,7 +42,7 @@ const Accordion = (props: Props) => {
         >
           <AccordionPrimitive.Header className="w-full">
             <AccordionPrimitive.Trigger
-              className={cx(
+              className={clsx(
                 "group",
                 "radix-state-open:rounded-t-lg radix-state-closed:rounded-lg",
                 "focus:outline-none",
@@ -53,7 +53,7 @@ const Accordion = (props: Props) => {
                 {header}
               </span>
               <ChevronDownIcon
-                className={cx(
+                className={clsx(
                   "ml-2 h-5 w-5 shrink-0 text-gray-700 ease-in-out dark:text-gray-400",
                   "group-radix-state-open:rotate-180 group-radix-state-open:duration-300"
                 )}
@@ -71,4 +71,4 @@ const Accordion = (props: Props) => {
   );
 };
 
-export default Accordion;
+export { Accordion };
diff --git a/demo/components/alert-dialog.tsx b/demo/components/alert-dialog.tsx
index 48f8fa6..c6d4943 100644
--- a/demo/components/alert-dialog.tsx
+++ b/demo/components/alert-dialog.tsx
@@ -1,12 +1,12 @@
 import { Transition } from "@headlessui/react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { Fragment, useState } from "react";
 import Button from "./shared/button";
 
-interface Props {}
+interface AlertDialogProps {}
 
-const AlertDialog = (props: Props) => {
+const AlertDialog = (props: AlertDialogProps) => {
   let [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -41,7 +41,7 @@ const AlertDialog = (props: Props) => {
           >
             <AlertDialogPrimitive.Content
               forceMount
-              className={cx(
+              className={clsx(
                 "fixed z-50",
                 "w-[95vw] max-w-md rounded-lg p-4 md:w-full",
                 "top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
@@ -58,7 +58,7 @@ const AlertDialog = (props: Props) => {
               </AlertDialogPrimitive.Description>
               <div className="mt-4 flex justify-end space-x-2">
                 <AlertDialogPrimitive.Cancel
-                  className={cx(
+                  className={clsx(
                     "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
                     "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 hover:dark:bg-gray-600",
                     "border border-gray-300 dark:border-transparent",
@@ -68,7 +68,7 @@ const AlertDialog = (props: Props) => {
                   Cancel
                 </AlertDialogPrimitive.Cancel>
                 <AlertDialogPrimitive.Action
-                  className={cx(
+                  className={clsx(
                     "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
                     "bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600",
                     "border border-transparent",
@@ -86,4 +86,4 @@ const AlertDialog = (props: Props) => {
   );
 };
 
-export default AlertDialog;
+export { AlertDialog };
diff --git a/demo/components/aspect-ratio.tsx b/demo/components/aspect-ratio.tsx
index c6ef380..4c6673a 100644
--- a/demo/components/aspect-ratio.tsx
+++ b/demo/components/aspect-ratio.tsx
@@ -1,10 +1,10 @@
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { Fragment } from "react";
 
-interface Props {}
+interface AspectRatioProps {}
 
-const AspectRatio = (props: Props) => {
+const AspectRatio = (props: AspectRatioProps) => {
   return (
     <Fragment>
       <AspectRatioPrimitive.Root
@@ -17,7 +17,7 @@ const AspectRatio = (props: Props) => {
           </h3>
         </div>
         <div
-          className={cx(
+          className={clsx(
             "absolute inset-0 bg-gray-600 object-cover group-hover:bg-gray-500",
             "transition-colors duration-300 ease-in-out"
           )}
@@ -34,4 +34,4 @@ const AspectRatio = (props: Props) => {
   );
 };
 
-export default AspectRatio;
+export { AspectRatio };
diff --git a/demo/components/avatar.tsx b/demo/components/avatar.tsx
index 292efcb..e679068 100644
--- a/demo/components/avatar.tsx
+++ b/demo/components/avatar.tsx
@@ -1,5 +1,5 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { Fragment } from "react";
 import { getRandomInitials } from "../utils/random";
 
@@ -8,7 +8,7 @@ enum Variant {
   Rounded,
 }
 
-type Props = {
+type AvatarProps = {
   variant: Variant;
   renderInvalidUrls?: boolean;
   isOnline?: boolean;
@@ -21,7 +21,11 @@ let users = [
   "https://images.unsplash.com/photo-1546456073-ea246a7bd25f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
 ];
 
-const Avatar = ({ variant, isOnline, renderInvalidUrls = false }: Props) => {
+const Avatar = ({
+  variant,
+  isOnline,
+  renderInvalidUrls = false,
+}: AvatarProps) => {
   const urls = renderInvalidUrls
     ? Array.from({ length: users.length }, () => "")
     : users;
@@ -36,7 +40,7 @@ const Avatar = ({ variant, isOnline, renderInvalidUrls = false }: Props) => {
           <AvatarPrimitive.Image
             src={src}
             alt="Avatar"
-            className={cx(
+            className={clsx(
               "h-full w-full object-cover",
               {
                 [Variant.Circle]: "rounded-full",
@@ -46,7 +50,7 @@ const Avatar = ({ variant, isOnline, renderInvalidUrls = false }: Props) => {
           />
           {isOnline && (
             <div
-              className={cx(
+              className={clsx(
                 "absolute bottom-0 right-0 h-2 w-2",
                 {
                   [Variant.Circle]: "-translate-x-1/2 -translate-y-1/2",
@@ -58,7 +62,7 @@ const Avatar = ({ variant, isOnline, renderInvalidUrls = false }: Props) => {
             </div>
           )}
           <AvatarPrimitive.Fallback
-            className={cx(
+            className={clsx(
               "flex h-full w-full items-center justify-center bg-white dark:bg-gray-800",
               {
                 [Variant.Circle]: "rounded-full",
@@ -78,4 +82,4 @@ const Avatar = ({ variant, isOnline, renderInvalidUrls = false }: Props) => {
 };
 
 Avatar.variant = Variant;
-export default Avatar;
+export { Avatar };
diff --git a/demo/components/checkbox.tsx b/demo/components/checkbox.tsx
index fcd5ffe..19e93b3 100644
--- a/demo/components/checkbox.tsx
+++ b/demo/components/checkbox.tsx
@@ -1,18 +1,18 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@radix-ui/react-icons";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
-interface Props {}
+interface CheckboxProps {}
 
-const Checkbox = (props: Props) => {
+const Checkbox = (props: CheckboxProps) => {
   return (
     <form className="flex items-center">
       <CheckboxPrimitive.Root
         id="c1"
         defaultChecked
-        className={cx(
+        className={clsx(
           "flex h-5 w-5 items-center justify-center rounded",
           "radix-state-checked:bg-purple-600 radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900",
           "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
@@ -33,4 +33,4 @@ const Checkbox = (props: Props) => {
   );
 };
 
-export default Checkbox;
+export { Checkbox };
diff --git a/demo/components/collapsible.tsx b/demo/components/collapsible.tsx
index 8e64e11..1613ec4 100644
--- a/demo/components/collapsible.tsx
+++ b/demo/components/collapsible.tsx
@@ -1,17 +1,17 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { PlayIcon, Share2Icon, TriangleRightIcon } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
-interface Props {}
+interface CollapsibleProps {}
 
-const Collapsible = (props: Props) => {
+const Collapsible = (props: CollapsibleProps) => {
   const [isOpen, setIsOpen] = React.useState(true);
 
   return (
     <CollapsiblePrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
       <CollapsiblePrimitive.Trigger
-        className={cx(
+        className={clsx(
           "group flex w-full select-none items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium",
           "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
           "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
@@ -25,7 +25,7 @@ const Collapsible = (props: Props) => {
           (title, i) => (
             <div
               key={`collapsible-${title}-${i}`}
-              className={cx(
+              className={clsx(
                 "group",
                 "ml-12 flex select-none items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium",
                 "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-900"
@@ -44,4 +44,4 @@ const Collapsible = (props: Props) => {
   );
 };
 
-export default Collapsible;
+export { Collapsible };
diff --git a/demo/components/context-menu.tsx b/demo/components/context-menu.tsx
index d7f52d9..c9ec9b4 100644
--- a/demo/components/context-menu.tsx
+++ b/demo/components/context-menu.tsx
@@ -13,7 +13,7 @@ import {
   PersonIcon,
   TransparencyGridIcon,
 } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { ReactNode, useState } from "react";
 import Button from "./shared/button";
 
@@ -69,9 +69,9 @@ const users: User[] = [
   },
 ];
 
-interface Props {}
+interface ContextMenuProps {}
 
-const ContextMenu = (props: Props) => {
+const ContextMenu = (props: ContextMenuProps) => {
   const [showGrid, setShowGrid] = useState(false);
   const [showUi, setShowUi] = useState(false);
 
@@ -84,7 +84,7 @@ const ContextMenu = (props: Props) => {
 
         <ContextMenuPrimitive.Portal>
           <ContextMenuPrimitive.Content
-            className={cx(
+            className={clsx(
               "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down",
               "w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56",
               "bg-white dark:bg-gray-800"
@@ -93,7 +93,7 @@ const ContextMenu = (props: Props) => {
             {generalMenuItems.map(({ label, icon, shortcut }, i) => (
               <ContextMenuPrimitive.Item
                 key={`${label}-${i}`}
-                className={cx(
+                className={clsx(
                   "flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                   "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                 )}
@@ -115,7 +115,7 @@ const ContextMenu = (props: Props) => {
                   setShowGrid(state);
                 }
               }}
-              className={cx(
+              className={clsx(
                 "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                 "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
               )}
@@ -140,7 +140,7 @@ const ContextMenu = (props: Props) => {
                   setShowUi(state);
                 }
               }}
-              className={cx(
+              className={clsx(
                 "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                 "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
               )}
@@ -167,7 +167,7 @@ const ContextMenu = (props: Props) => {
             {regionToolMenuItems.map(({ label, icon, shortcut }, i) => (
               <ContextMenuPrimitive.Item
                 key={`${label}-${i}`}
-                className={cx(
+                className={clsx(
                   "flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                   "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                 )}
@@ -184,7 +184,7 @@ const ContextMenu = (props: Props) => {
 
             <ContextMenuPrimitive.Sub>
               <ContextMenuPrimitive.SubTrigger
-                className={cx(
+                className={clsx(
                   "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                   "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                 )}
@@ -197,7 +197,7 @@ const ContextMenu = (props: Props) => {
               </ContextMenuPrimitive.SubTrigger>
               <ContextMenuPrimitive.Portal>
                 <ContextMenuPrimitive.SubContent
-                  className={cx(
+                  className={clsx(
                     "origin-radix-context-menu radix-side-right:animate-scale-in",
                     "w-full rounded-md px-1 py-1 text-xs shadow-md",
                     "bg-white dark:bg-gray-800"
@@ -206,7 +206,7 @@ const ContextMenu = (props: Props) => {
                   {users.map(({ name, url }, i) => (
                     <ContextMenuPrimitive.Item
                       key={`${name}-${i}`}
-                      className={cx(
+                      className={clsx(
                         "flex w-28 cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none md:w-32",
                         "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                       )}
@@ -234,4 +234,4 @@ const ContextMenu = (props: Props) => {
   );
 };
 
-export default ContextMenu;
+export { ContextMenu };
diff --git a/demo/components/dialog.tsx b/demo/components/dialog.tsx
index 25ed2fd..f224457 100644
--- a/demo/components/dialog.tsx
+++ b/demo/components/dialog.tsx
@@ -1,13 +1,13 @@
 import { Transition } from "@headlessui/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { Fragment, useState } from "react";
 import Button from "./shared/button";
 
-interface Props {}
+interface DialogProps {}
 
-const Dialog = (props: Props) => {
+const Dialog = (props: DialogProps) => {
   let [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -42,7 +42,7 @@ const Dialog = (props: Props) => {
           >
             <DialogPrimitive.Content
               forceMount
-              className={cx(
+              className={clsx(
                 "fixed z-50",
                 "w-[95vw] max-w-md rounded-lg p-4 md:w-full",
                 "top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
@@ -71,7 +71,7 @@ const Dialog = (props: Props) => {
                     type="text"
                     placeholder="Tim"
                     autoComplete="given-name"
-                    className={cx(
+                    className={clsx(
                       "mt-1 block w-full rounded-md",
                       "text-sm text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600",
                       "border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800",
@@ -91,7 +91,7 @@ const Dialog = (props: Props) => {
                     type="text"
                     placeholder="Cook"
                     autoComplete="family-name"
-                    className={cx(
+                    className={clsx(
                       "mt-1 block w-full rounded-md",
                       "text-sm text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600",
                       "border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800",
@@ -103,7 +103,7 @@ const Dialog = (props: Props) => {
 
               <div className="mt-4 flex justify-end">
                 <DialogPrimitive.Close
-                  className={cx(
+                  className={clsx(
                     "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
                     "bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600",
                     "border border-transparent",
@@ -115,7 +115,7 @@ const Dialog = (props: Props) => {
               </div>
 
               <DialogPrimitive.Close
-                className={cx(
+                className={clsx(
                   "absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1",
                   "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
                 )}
@@ -130,4 +130,4 @@ const Dialog = (props: Props) => {
   );
 };
 
-export default Dialog;
+export { Dialog };
diff --git a/demo/components/dropdown-menu.tsx b/demo/components/dropdown-menu.tsx
index b1c37d5..d1dddaf 100644
--- a/demo/components/dropdown-menu.tsx
+++ b/demo/components/dropdown-menu.tsx
@@ -13,7 +13,7 @@ import {
   PersonIcon,
   TransparencyGridIcon,
 } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { ReactNode, useState } from "react";
 import Button from "./shared/button";
 
@@ -69,9 +69,9 @@ const users: User[] = [
   },
 ];
 
-interface Props {}
+interface DropdownMenuProps {}
 
-const DropdownMenu = (props: Props) => {
+const DropdownMenu = (props: DropdownMenuProps) => {
   const [showGrid, setShowGrid] = useState(false);
   const [showUi, setShowUi] = useState(false);
 
@@ -86,7 +86,7 @@ const DropdownMenu = (props: Props) => {
           <DropdownMenuPrimitive.Content
             align="end"
             sideOffset={5}
-            className={cx(
+            className={clsx(
               "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down",
               "w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56",
               "bg-white dark:bg-gray-800"
@@ -95,7 +95,7 @@ const DropdownMenu = (props: Props) => {
             {generalMenuItems.map(({ label, icon, shortcut }, i) => (
               <DropdownMenuPrimitive.Item
                 key={`${label}-${i}`}
-                className={cx(
+                className={clsx(
                   "flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                   "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                 )}
@@ -117,7 +117,7 @@ const DropdownMenu = (props: Props) => {
                   setShowGrid(state);
                 }
               }}
-              className={cx(
+              className={clsx(
                 "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                 "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
               )}
@@ -142,7 +142,7 @@ const DropdownMenu = (props: Props) => {
                   setShowUi(state);
                 }
               }}
-              className={cx(
+              className={clsx(
                 "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                 "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
               )}
@@ -169,7 +169,7 @@ const DropdownMenu = (props: Props) => {
             {regionToolMenuItems.map(({ label, icon, shortcut }, i) => (
               <DropdownMenuPrimitive.Item
                 key={`${label}-${i}`}
-                className={cx(
+                className={clsx(
                   "flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                   "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                 )}
@@ -186,7 +186,7 @@ const DropdownMenu = (props: Props) => {
 
             <DropdownMenuPrimitive.Sub>
               <DropdownMenuPrimitive.SubTrigger
-                className={cx(
+                className={clsx(
                   "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                   "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                 )}
@@ -199,7 +199,7 @@ const DropdownMenu = (props: Props) => {
               </DropdownMenuPrimitive.SubTrigger>
               <DropdownMenuPrimitive.Portal>
                 <DropdownMenuPrimitive.SubContent
-                  className={cx(
+                  className={clsx(
                     "origin-radix-dropdown-menu radix-side-right:animate-scale-in",
                     "w-full rounded-md px-1 py-1 text-xs shadow-md",
                     "bg-white dark:bg-gray-800"
@@ -208,7 +208,7 @@ const DropdownMenu = (props: Props) => {
                   {users.map(({ name, url }, i) => (
                     <DropdownMenuPrimitive.Item
                       key={`${name}-${i}`}
-                      className={cx(
+                      className={clsx(
                         "flex w-28 cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none md:w-32",
                         "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
                       )}
@@ -236,4 +236,4 @@ const DropdownMenu = (props: Props) => {
   );
 };
 
-export default DropdownMenu;
+export { DropdownMenu };
diff --git a/demo/components/hover-card.tsx b/demo/components/hover-card.tsx
index 445fb93..3e06980 100644
--- a/demo/components/hover-card.tsx
+++ b/demo/components/hover-card.tsx
@@ -1,5 +1,5 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
 const TailwindLogo = () => (
@@ -16,14 +16,14 @@ const TailwindLogo = () => (
   </svg>
 );
 
-interface Props {}
+interface HoverCardProps {}
 
-const HoverCard = (props: Props) => {
+const HoverCard = (props: HoverCardProps) => {
   return (
     <HoverCardPrimitive.Root>
       <HoverCardPrimitive.Trigger asChild>
         <div
-          className={cx(
+          className={clsx(
             "inline-flex h-12 w-12 items-center justify-center rounded-full bg-white p-2.5 dark:bg-gray-900"
           )}
         >
@@ -33,7 +33,7 @@ const HoverCard = (props: Props) => {
       <HoverCardPrimitive.Content
         align="center"
         sideOffset={4}
-        className={cx(
+        className={clsx(
           " radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down",
           "max-w-md rounded-lg p-4 md:w-full",
           "bg-white dark:bg-gray-800",
@@ -44,7 +44,7 @@ const HoverCard = (props: Props) => {
 
         <div className="flex h-full w-full space-x-4">
           <div
-            className={cx(
+            className={clsx(
               "flex h-12 w-12 shrink-0 items-center justify-center rounded-full shadow-inner bg-gray-50/60 p-2.5 dark:bg-gray-900"
             )}
           >
@@ -67,4 +67,4 @@ const HoverCard = (props: Props) => {
   );
 };
 
-export default HoverCard;
+export { HoverCard };
diff --git a/demo/components/menubar.tsx b/demo/components/menubar.tsx
index 0440cd6..8243814 100644
--- a/demo/components/menubar.tsx
+++ b/demo/components/menubar.tsx
@@ -4,7 +4,7 @@ import {
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
 type MenubarSeparatorProps = Omit<
@@ -28,7 +28,7 @@ type MenubarTriggerProps = Omit<
 
 const MenubarTrigger = ({ children, ...rest }: MenubarTriggerProps) => (
   <MenubarPrimitive.Trigger
-    className={cx(
+    className={clsx(
       "cursor-default radix-disabled:opacity-50 radix-disabled:cursor-not-allowed",
       "radix-state-open:bg-gray-100 dark:radix-state-open:bg-gray-900",
       "px-4 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
@@ -49,7 +49,7 @@ type MenubarSubTriggerProps = Omit<
 
 const MenubarSubTrigger = ({ children, ...rest }: MenubarSubTriggerProps) => (
   <MenubarPrimitive.SubTrigger
-    className={cx(
+    className={clsx(
       "cursor-default radix-disabled:opacity-50 radix-disabled:cursor-not-allowed",
       "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
       "text-sm font-medium",
@@ -73,7 +73,7 @@ type MenubarItemProps = Omit<
 
 const MenubarItem = ({ children, shortcut, ...rest }: MenubarItemProps) => (
   <MenubarPrimitive.Item
-    className={cx(
+    className={clsx(
       "cursor-default radix-disabled:opacity-50 radix-disabled:cursor-not-allowed",
       "w-full flex items-center justify-between",
       "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
@@ -105,7 +105,7 @@ const MenubarCheckboxItem = ({
   ...rest
 }: MenubarCheckboxItemProps) => (
   <MenubarPrimitive.CheckboxItem
-    className={cx(
+    className={clsx(
       "cursor-default radix-disabled:opacity-50 radix-disabled:cursor-not-allowed",
       "w-full flex items-center justify-between",
       "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
@@ -133,7 +133,7 @@ type MenubarRadioItemProps = Omit<
 
 const MenubarRadioItem = ({ children, ...rest }: MenubarRadioItemProps) => (
   <MenubarPrimitive.RadioItem
-    className={cx(
+    className={clsx(
       "cursor-default radix-disabled:opacity-50 radix-disabled:cursor-not-allowed",
       "w-full flex items-center justify-between",
       "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
@@ -154,12 +154,12 @@ const MenubarRadioItem = ({ children, ...rest }: MenubarRadioItemProps) => (
   </MenubarPrimitive.RadioItem>
 );
 
-type Props = {};
+type MenubarProps = {};
 
 const RADIO_ITEMS = ["rauchg", "steventey", "0xca0a"];
 const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"];
 
-const Menubar = (props: Props) => {
+const Menubar = (props: MenubarProps) => {
   const [checkedSelection, setCheckedSelection] = React.useState([
     CHECK_ITEMS[1],
   ]);
@@ -309,4 +309,4 @@ const Menubar = (props: Props) => {
   );
 };
 
-export default Menubar;
+export { Menubar };
diff --git a/demo/components/navigation-menu.tsx b/demo/components/navigation-menu.tsx
index 12b0e52..2d39b96 100644
--- a/demo/components/navigation-menu.tsx
+++ b/demo/components/navigation-menu.tsx
@@ -1,16 +1,16 @@
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
-type Props = {};
+type NavigationMenuProps = {};
 
-const NavigationMenu = (props: Props) => {
+const NavigationMenu = (props: NavigationMenuProps) => {
   return (
     <NavigationMenuPrimitive.Root className="relative">
       <NavigationMenuPrimitive.List className="flex flex-row rounded-lg bg-white dark:bg-gray-800 p-2 space-x-2">
         <NavigationMenuPrimitive.Item>
           <NavigationMenuPrimitive.Trigger
-            className={cx(
+            className={clsx(
               "px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
               "text-sm font-medium",
               "text-gray-700 dark:text-gray-100",
@@ -21,7 +21,7 @@ const NavigationMenu = (props: Props) => {
           </NavigationMenuPrimitive.Trigger>
 
           <NavigationMenuPrimitive.Content
-            className={cx(
+            className={clsx(
               "absolute w-auto top-0 left-0 rounded-lg",
               "radix-motion-from-start:animate-enter-from-left",
               "radix-motion-from-end:animate-enter-from-right",
@@ -46,7 +46,7 @@ const NavigationMenu = (props: Props) => {
 
         <NavigationMenuPrimitive.Item>
           <NavigationMenuPrimitive.Trigger
-            className={cx(
+            className={clsx(
               "px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
               "text-sm font-medium text-gray-700 dark:text-gray-100",
               "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
@@ -56,7 +56,7 @@ const NavigationMenu = (props: Props) => {
           </NavigationMenuPrimitive.Trigger>
 
           <NavigationMenuPrimitive.Content
-            className={cx(
+            className={clsx(
               "absolute w-auto top-0 left-0 rounded-lg",
               "radix-motion-from-start:animate-enter-from-left",
               "radix-motion-from-end:animate-enter-from-right",
@@ -67,7 +67,7 @@ const NavigationMenu = (props: Props) => {
             <div className="w-[16rem] lg:w-[18rem] p-3">
               <div className="w-full flex flex-col space-y-2">
                 <NavigationMenuPrimitive.Link
-                  className={cx(
+                  className={clsx(
                     "w-full px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-900 rounded-md",
                     "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
                   )}
@@ -84,7 +84,7 @@ const NavigationMenu = (props: Props) => {
                 </NavigationMenuPrimitive.Link>
 
                 <NavigationMenuPrimitive.Link
-                  className={cx(
+                  className={clsx(
                     "w-full px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-900 rounded-md",
                     "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
                   )}
@@ -107,7 +107,7 @@ const NavigationMenu = (props: Props) => {
         <NavigationMenuPrimitive.Item asChild>
           <NavigationMenuPrimitive.Link
             href="https://github.com/ecklf/tailwindcss-radix"
-            className={cx(
+            className={clsx(
               "px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
               "text-sm font-medium text-gray-700 dark:text-gray-100"
             )}
@@ -117,7 +117,7 @@ const NavigationMenu = (props: Props) => {
         </NavigationMenuPrimitive.Item>
 
         <NavigationMenuPrimitive.Indicator
-          className={cx(
+          className={clsx(
             "z-10",
             "top-[100%] flex items-end justify-center h-2 overflow-hidden",
             "radix-state-visible:animate-fade-in",
@@ -130,7 +130,7 @@ const NavigationMenu = (props: Props) => {
       </NavigationMenuPrimitive.List>
 
       <div
-        className={cx(
+        className={clsx(
           "absolute flex justify-center",
           "w-[140%] left-[-20%] top-[100%]"
         )}
@@ -139,7 +139,7 @@ const NavigationMenu = (props: Props) => {
         }}
       >
         <NavigationMenuPrimitive.Viewport
-          className={cx(
+          className={clsx(
             "relative mt-2 shadow-lg rounded-md bg-white dark:bg-gray-800 overflow-hidden",
             "w-radix-navigation-menu-viewport",
             "h-radix-navigation-menu-viewport",
@@ -153,4 +153,4 @@ const NavigationMenu = (props: Props) => {
   );
 };
 
-export default NavigationMenu;
+export { NavigationMenu };
diff --git a/demo/components/popover.tsx b/demo/components/popover.tsx
index 11d58c1..4dae92b 100644
--- a/demo/components/popover.tsx
+++ b/demo/components/popover.tsx
@@ -1,10 +1,10 @@
 import { Cross1Icon } from "@radix-ui/react-icons";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 import Button from "./shared/button";
 
-interface Props {}
+interface PopoverProps {}
 
 const items = [
   {
@@ -29,7 +29,7 @@ const items = [
   },
 ];
 
-const Popover = (props: Props) => {
+const Popover = (props: PopoverProps) => {
   return (
     <div className="relative inline-block text-left">
       <PopoverPrimitive.Root>
@@ -39,7 +39,7 @@ const Popover = (props: Props) => {
         <PopoverPrimitive.Content
           align="center"
           sideOffset={4}
-          className={cx(
+          className={clsx(
             "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down",
             "w-48 rounded-lg p-4 shadow-md md:w-56",
             "bg-white dark:bg-gray-800"
@@ -69,7 +69,7 @@ const Popover = (props: Props) => {
                     type="text"
                     defaultValue={defaultValue}
                     autoComplete="given-name"
-                    className={cx(
+                    className={clsx(
                       "block w-1/2 rounded-md",
                       "text-xs text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600",
                       "border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800",
@@ -82,7 +82,7 @@ const Popover = (props: Props) => {
           </form>
 
           <PopoverPrimitive.Close
-            className={cx(
+            className={clsx(
               "absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1",
               "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
             )}
@@ -95,4 +95,4 @@ const Popover = (props: Props) => {
   );
 };
 
-export default Popover;
+export { Popover };
diff --git a/demo/components/progress.tsx b/demo/components/progress.tsx
index c1ac952..89a6c59 100644
--- a/demo/components/progress.tsx
+++ b/demo/components/progress.tsx
@@ -2,9 +2,9 @@ import * as ProgressPrimitive from "@radix-ui/react-progress";
 import React, { useEffect } from "react";
 import { getRandomArbitrary } from "../utils/math";
 
-interface Props {}
+interface ProgressProps {}
 
-const Progress = (props: Props) => {
+const Progress = (props: ProgressProps) => {
   const [progress, setProgress] = React.useState(60);
 
   useEffect(() => {
@@ -35,4 +35,4 @@ const Progress = (props: Props) => {
   );
 };
 
-export default Progress;
+export { Progress };
diff --git a/demo/components/radio-group.tsx b/demo/components/radio-group.tsx
index 7692bba..5d0a7be 100644
--- a/demo/components/radio-group.tsx
+++ b/demo/components/radio-group.tsx
@@ -1,8 +1,8 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
-interface Props {}
+interface RadioGroupProps {}
 
 const starters = [
   { id: "red", title: "Bulbasaur" },
@@ -10,7 +10,7 @@ const starters = [
   { id: "blue", title: "Squirtle" },
 ];
 
-const RadioGroup = (props: Props) => {
+const RadioGroup = (props: RadioGroupProps) => {
   const [value, setValue] = React.useState(starters[0].title);
 
   return (
@@ -29,7 +29,7 @@ const RadioGroup = (props: Props) => {
               <RadioGroupPrimitive.Item
                 id={pokemon.id}
                 value={pokemon.title}
-                className={cx(
+                className={clsx(
                   "peer relative w-4 h-4 rounded-full",
                   // Setting the background in dark properly requires a workaround (see css/tailwind.css)
                   "border border-transparent text-white",
@@ -56,4 +56,4 @@ const RadioGroup = (props: Props) => {
   );
 };
 
-export default RadioGroup;
+export { RadioGroup };
diff --git a/demo/components/select.tsx b/demo/components/select.tsx
index 89b3eb2..32803d3 100644
--- a/demo/components/select.tsx
+++ b/demo/components/select.tsx
@@ -4,13 +4,13 @@ import {
   ChevronUpIcon,
 } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 import Button from "./shared/button";
 
-type Props = {};
+type SelectProps = {};
 
-const Select = (props: Props) => {
+const Select = (props: SelectProps) => {
   return (
     <SelectPrimitive.Root defaultValue="blueberry">
       <SelectPrimitive.Trigger asChild aria-label="Food">
@@ -33,7 +33,7 @@ const Select = (props: Props) => {
                   disabled={f === "Grapes"}
                   key={`${f}-${i}`}
                   value={f.toLowerCase()}
-                  className={cx(
+                  className={clsx(
                     "relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900",
                     "radix-disabled:opacity-50",
                     "focus:outline-none select-none"
@@ -56,4 +56,4 @@ const Select = (props: Props) => {
   );
 };
 
-export default Select;
+export { Select };
diff --git a/demo/components/shared/button.tsx b/demo/components/shared/button.tsx
index 98d6214..b1e6a87 100644
--- a/demo/components/shared/button.tsx
+++ b/demo/components/shared/button.tsx
@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
 type Props = Omit<React.ComponentProps<"button">, "className"> & {};
@@ -8,7 +8,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
     <button
       ref={ref}
       {...props}
-      className={cx(
+      className={clsx(
         "inline-flex select-none items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
         "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-900",
         "hover:bg-gray-50",
diff --git a/demo/components/shared/command-menu.tsx b/demo/components/shared/command-menu.tsx
index c2db967..a07b699 100644
--- a/demo/components/shared/command-menu.tsx
+++ b/demo/components/shared/command-menu.tsx
@@ -1,10 +1,10 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { useEffect, useState } from "react";
 import { Command } from "cmdk";
 import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { DividerVerticalIcon } from "@radix-ui/react-icons";
 
-interface Props<T extends { label: string }> {
+interface CommandMenuProps<T extends { label: string }> {
   items: T[];
   onSelect?: (data: {
     item: T;
@@ -17,7 +17,7 @@ interface Props<T extends { label: string }> {
 function CommandMenu<T extends { label: string }>({
   items,
   onSelect,
-}: Props<T>) {
+}: CommandMenuProps<T>) {
   const [open, setOpen] = useState(false);
   const [isHoldingModifier, setIsHoldingModifier] = useState(false);
 
@@ -57,7 +57,7 @@ function CommandMenu<T extends { label: string }>({
 
   return (
     <Command.Dialog
-      className={cx(
+      className={clsx(
         "z-[50]",
         "fixed top-[20%] left-1/2 transform -translate-x-1/2",
         "w-full sm:max-w-lg md:max-w-xl",
@@ -71,7 +71,7 @@ function CommandMenu<T extends { label: string }>({
       <div className="relative mt-2 pl-1.5 ml-px">
         <Command.Input
           placeholder="Search for a component"
-          className={cx(
+          className={clsx(
             "bg-transparent",
             "block w-full",
             "text-sm font-medium text-gray-700 dark:text-gray-300 placeholder:text-gray-600 dark:placeholder:text-gray-500",
@@ -108,7 +108,7 @@ function CommandMenu<T extends { label: string }>({
               onSelect({ item, modifiers: { control: isHoldingModifier } });
               setOpen(false);
             }}
-            className={cx(
+            className={clsx(
               "px-3 py-3",
               "cursor-pointer",
               "flex items-center rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium",
diff --git a/demo/components/shared/demo-card.tsx b/demo/components/shared/demo-card.tsx
index 2244b40..3d590a4 100644
--- a/demo/components/shared/demo-card.tsx
+++ b/demo/components/shared/demo-card.tsx
@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { ReactNode } from "react";
 
 enum Variant {
@@ -7,7 +7,7 @@ enum Variant {
   JustifyCenter,
 }
 
-type Props = {
+type DemoCardProps = {
   variant?: Variant;
   isNew?: boolean;
   children: ReactNode;
@@ -22,13 +22,13 @@ const DemoCard = ({
   isNew,
   children,
   data: { title, link },
-}: Props) => {
+}: DemoCardProps) => {
   const id = title.replace(" ", "_").toLowerCase();
 
   return (
     <section id={id} className="h-[550px] w-full scroll-mt-6 ">
       <div
-        className={cx(
+        className={clsx(
           "relative flex h-full w-full p-6 rounded-xl shadow",
           // "bg-gradient-to-br from-pink-300 via-fuchsia-300 to-purple-400 dark:from-pink-800 dark:via-fuchsia-900 dark:to-purple-800"
           // "bg-gradient-to-br from-pink-400 via-fuchsia-300 to-purple-400 dark:from-pink-800 dark:via-fuchsia-900 dark:to-purple-800",
@@ -70,4 +70,4 @@ const DemoCard = ({
 };
 
 DemoCard.variant = Variant;
-export default DemoCard;
+export { DemoCard };
diff --git a/demo/components/shared/theme-switcher.tsx b/demo/components/shared/theme-switcher.tsx
index f706218..cd5b00b 100644
--- a/demo/components/shared/theme-switcher.tsx
+++ b/demo/components/shared/theme-switcher.tsx
@@ -8,7 +8,7 @@ import {
   MoonIcon,
   SunIcon,
 } from "@radix-ui/react-icons";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { ReactNode, useEffect, useState } from "react";
 
 interface RadixMenuItem {
@@ -63,7 +63,7 @@ const users: User[] = [
   },
 ];
 
-interface Props {}
+interface ThemeSwitcherProps {}
 
 const themes = [
   {
@@ -84,7 +84,7 @@ const themes = [
   },
 ];
 
-const ThemeSwitcher = (props: Props) => {
+const ThemeSwitcher = (props: ThemeSwitcherProps) => {
   const [preferredTheme, setPreferredTheme] = useState<null | string>(null);
 
   useEffect(() => {
@@ -110,7 +110,7 @@ const ThemeSwitcher = (props: Props) => {
     <div className="relative inline-block text-left">
       <DropdownMenuPrimitive.Root>
         <DropdownMenuPrimitive.Trigger
-          className={cx(
+          className={clsx(
             "inline-flex select-none justify-center rounded-md px-2.5 py-2 text-sm font-medium",
             "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 hover:dark:bg-gray-800",
             "border border-gray-300 dark:border-transparent",
@@ -140,7 +140,7 @@ const ThemeSwitcher = (props: Props) => {
           <DropdownMenuPrimitive.Content
             align="end"
             sideOffset={5}
-            className={cx(
+            className={clsx(
               "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down",
               "w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56",
               "bg-gray-50 dark:bg-gray-800"
@@ -150,7 +150,7 @@ const ThemeSwitcher = (props: Props) => {
               return (
                 <DropdownMenuPrimitive.Item
                   key={`theme-${i}`}
-                  className={cx(
+                  className={clsx(
                     "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
                     "text-gray-500 focus:bg-gray-200 dark:text-gray-400 dark:focus:bg-gray-700"
                   )}
@@ -175,4 +175,4 @@ const ThemeSwitcher = (props: Props) => {
   );
 };
 
-export default ThemeSwitcher;
+export { ThemeSwitcher };
diff --git a/demo/components/slider.tsx b/demo/components/slider.tsx
index f1de60c..0d431c9 100644
--- a/demo/components/slider.tsx
+++ b/demo/components/slider.tsx
@@ -1,10 +1,10 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
-interface Props {}
+interface SliderProps {}
 
-const Slider = (props: Props) => {
+const Slider = (props: SliderProps) => {
   return (
     <SliderPrimitive.Root
       defaultValue={[50]}
@@ -17,7 +17,7 @@ const Slider = (props: Props) => {
         <SliderPrimitive.Range className="absolute h-full rounded-full bg-purple-600 dark:bg-white" />
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb
-        className={cx(
+        className={clsx(
           "block h-5 w-5 rounded-full bg-purple-600 dark:bg-white",
           "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
         )}
@@ -26,4 +26,4 @@ const Slider = (props: Props) => {
   );
 };
 
-export default Slider;
+export { Slider };
diff --git a/demo/components/switch.tsx b/demo/components/switch.tsx
index b61cbcf..e6c76a9 100644
--- a/demo/components/switch.tsx
+++ b/demo/components/switch.tsx
@@ -1,13 +1,13 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
-interface Props {}
+interface SwitchProps {}
 
-const Switch = (props: Props) => {
+const Switch = (props: SwitchProps) => {
   return (
     <SwitchPrimitive.Root
-      className={cx(
+      className={clsx(
         "group",
         "radix-state-checked:bg-purple-600",
         "radix-state-unchecked:bg-gray-200 dark:radix-state-unchecked:bg-gray-800",
@@ -16,7 +16,7 @@ const Switch = (props: Props) => {
       )}
     >
       <SwitchPrimitive.Thumb
-        className={cx(
+        className={clsx(
           "group-radix-state-checked:translate-x-5",
           "group-radix-state-unchecked:translate-x-0",
           "pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
@@ -26,4 +26,4 @@ const Switch = (props: Props) => {
   );
 };
 
-export default Switch;
+export { Switch };
diff --git a/demo/components/tabs.tsx b/demo/components/tabs.tsx
index d965b91..63023b0 100644
--- a/demo/components/tabs.tsx
+++ b/demo/components/tabs.tsx
@@ -1,5 +1,5 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 
 interface Tab {
@@ -23,19 +23,19 @@ const tabs: Tab[] = [
   },
 ];
 
-interface Props {}
+interface TabsProps {}
 
-const Tabs = (props: Props) => {
+const Tabs = (props: TabsProps) => {
   return (
     <TabsPrimitive.Root defaultValue="tab1">
       <TabsPrimitive.List
-        className={cx("flex w-full rounded-t-lg bg-white dark:bg-gray-800")}
+        className={clsx("flex w-full rounded-t-lg bg-white dark:bg-gray-800")}
       >
         {tabs.map(({ title, value }) => (
           <TabsPrimitive.Trigger
             key={`tab-trigger-${value}`}
             value={value}
-            className={cx(
+            className={clsx(
               "group",
               "first:rounded-tl-lg last:rounded-tr-lg",
               "border-b first:border-r last:border-l",
@@ -47,7 +47,7 @@ const Tabs = (props: Props) => {
             )}
           >
             <span
-              className={cx(
+              className={clsx(
                 "text-sm font-medium",
                 "text-gray-700 dark:text-gray-100"
               )}
@@ -61,7 +61,7 @@ const Tabs = (props: Props) => {
         <TabsPrimitive.Content
           key={`tab-content-${value}`}
           value={value}
-          className={cx("rounded-b-lg bg-white px-6 py-4 dark:bg-gray-800")}
+          className={clsx("rounded-b-lg bg-white px-6 py-4 dark:bg-gray-800")}
         >
           <span className="text-sm text-gray-700 dark:text-gray-100">
             {
@@ -78,4 +78,4 @@ const Tabs = (props: Props) => {
   );
 };
 
-export default Tabs;
+export { Tabs };
diff --git a/demo/components/toast.tsx b/demo/components/toast.tsx
index 8cde8c4..02062fb 100644
--- a/demo/components/toast.tsx
+++ b/demo/components/toast.tsx
@@ -1,12 +1,12 @@
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 import { useMediaQuery } from "../hooks/use-media-query";
 import Button from "./shared/button";
 
-type Props = {};
+type ToastProps = {};
 
-const Toast = (props: Props) => {
+const Toast = (props: ToastProps) => {
   const [open, setOpen] = React.useState(false);
   const isMd = useMediaQuery("(min-width: 768px)");
 
@@ -29,7 +29,7 @@ const Toast = (props: Props) => {
       <ToastPrimitive.Root
         open={open}
         onOpenChange={setOpen}
-        className={cx(
+        className={clsx(
           "z-50 fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm shadow-lg rounded-lg",
           "bg-white dark:bg-gray-800",
           "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right",
@@ -83,4 +83,4 @@ const Toast = (props: Props) => {
   );
 };
 
-export default Toast;
+export { Toast };
diff --git a/demo/components/toggle-group.tsx b/demo/components/toggle-group.tsx
index 098f805..ee98fb1 100644
--- a/demo/components/toggle-group.tsx
+++ b/demo/components/toggle-group.tsx
@@ -4,7 +4,7 @@ import {
   UnderlineIcon,
 } from "@radix-ui/react-icons";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { ReactElement } from "react";
 
 interface ToggleItem {
@@ -31,9 +31,9 @@ const settings: ToggleItem[] = [
   },
 ];
 
-interface Props {}
+interface ToggleGroupProps {}
 
-const ToggleGroup = (props: Props) => {
+const ToggleGroup = (props: ToggleGroupProps) => {
   return (
     <ToggleGroupPrimitive.Root type="multiple" aria-label="Font settings">
       {settings.map(({ value, label, icon }, i) => (
@@ -41,7 +41,7 @@ const ToggleGroup = (props: Props) => {
           key={`group-item-${value}-${label}`}
           value={value}
           aria-label={label}
-          className={cx(
+          className={clsx(
             "group radix-state-on:bg-gray-50 dark:radix-state-on:bg-gray-900",
             "bg-white dark:bg-gray-800",
             "border-y px-2.5 py-2 first:rounded-l-md first:border-x last:rounded-r-md last:border-x",
@@ -58,4 +58,4 @@ const ToggleGroup = (props: Props) => {
   );
 };
 
-export default ToggleGroup;
+export { ToggleGroup };
diff --git a/demo/components/toggle.tsx b/demo/components/toggle.tsx
index 8d9b973..de180df 100644
--- a/demo/components/toggle.tsx
+++ b/demo/components/toggle.tsx
@@ -3,9 +3,9 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import React, { useState } from "react";
 import Button from "./shared/button";
 
-interface Props {}
+interface ToggleProps {}
 
-const Toggle = (props: Props) => {
+const Toggle = (props: ToggleProps) => {
   const [starred, setStarred] = useState(false);
 
   return (
@@ -26,4 +26,4 @@ const Toggle = (props: Props) => {
   );
 };
 
-export default Toggle;
+export { Toggle };
diff --git a/demo/components/toolbar.tsx b/demo/components/toolbar.tsx
index 2882fa2..4bf0e46 100644
--- a/demo/components/toolbar.tsx
+++ b/demo/components/toolbar.tsx
@@ -7,7 +7,7 @@ import {
   UnderlineIcon,
 } from "@radix-ui/react-icons";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React, { ReactElement } from "react";
 
 interface ToggleItem {
@@ -52,9 +52,9 @@ const textSettings: ToggleItem[] = [
   },
 ];
 
-interface Props {}
+interface ToolbarProps {}
 
-const Toolbar = (props: Props) => {
+const Toolbar = (props: ToolbarProps) => {
   return (
     <ToolbarPrimitive.Root className="flex space-x-4 rounded-lg bg-white px-2.5 py-2 dark:bg-gray-800">
       <ToolbarPrimitive.ToggleGroup type="multiple" aria-label="Font settings">
@@ -63,7 +63,7 @@ const Toolbar = (props: Props) => {
             key={`group-item-${value}-${label}`}
             value={value}
             aria-label={label}
-            className={cx(
+            className={clsx(
               "radix-state-on:bg-gray-50 dark:radix-state-on:bg-gray-900",
               "bg-white dark:bg-gray-800",
               "border-y px-2.5 py-2 first:rounded-l-md first:border-x last:rounded-r-md last:border-x",
@@ -88,7 +88,7 @@ const Toolbar = (props: Props) => {
             key={`group-item-${value}-${label}`}
             value={value}
             aria-label={label}
-            className={cx(
+            className={clsx(
               "radix-state-on:bg-gray-50 dark:radix-state-on:bg-gray-900",
               "bg-white dark:bg-gray-800",
               "border-y px-2.5 py-2 first:rounded-l-md first:border-x last:rounded-r-md last:border-x",
@@ -107,7 +107,7 @@ const Toolbar = (props: Props) => {
 
       <span className="hidden items-center pr-2 xl:flex">
         <ToolbarPrimitive.Link
-          className={cx(
+          className={clsx(
             "text-sm text-gray-500 dark:text-gray-400",
             "focus:outline-none focus-visible:z-20 focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
           )}
@@ -121,4 +121,4 @@ const Toolbar = (props: Props) => {
   );
 };
 
-export default Toolbar;
+export { Toolbar };
diff --git a/demo/components/tooltip.tsx b/demo/components/tooltip.tsx
index eb55d86..1f008c4 100644
--- a/demo/components/tooltip.tsx
+++ b/demo/components/tooltip.tsx
@@ -1,11 +1,11 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import cx from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 import Button from "./shared/button";
 
-interface Props {}
+interface TooltipProps {}
 
-const Tooltip = (props: Props) => {
+const Tooltip = (props: TooltipProps) => {
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
@@ -14,7 +14,7 @@ const Tooltip = (props: Props) => {
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Content
           sideOffset={4}
-          className={cx(
+          className={clsx(
             "radix-side-top:animate-slide-down-fade",
             "radix-side-right:animate-slide-left-fade",
             "radix-side-bottom:animate-slide-up-fade",
@@ -33,4 +33,4 @@ const Tooltip = (props: Props) => {
   );
 };
 
-export default Tooltip;
+export { Tooltip };
diff --git a/demo/package.json b/demo/package.json
index 915b970..25a7454 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -37,10 +37,10 @@
     "@radix-ui/react-toolbar": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.3",
     "@vercel/analytics": "^0.1.8",
-    "classnames": "^2.3.2",
+    "clsx": "^1.2.1",
+    "cmdk": "^0.1.21",
     "next": "13.1.2",
     "next-seo": "^5.15.0",
-    "cmdk": "^0.1.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0",
diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
index 7e09042..f932921 100644
--- a/demo/pages/index.tsx
+++ b/demo/pages/index.tsx
@@ -2,35 +2,35 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { NextSeo } from "next-seo";
 import Head from "next/head";
 import React, { Fragment } from "react";
+import { clsx } from "clsx";
 import GitHubButton from "react-github-btn";
-import Accordion from "../components/accordion";
-import AlertDialog from "../components/alert-dialog";
-import AspectRatio from "../components/aspect-ratio";
-import Avatar from "../components/avatar";
-import Checkbox from "../components/checkbox";
-import Collapsible from "../components/collapsible";
-import ContextMenu from "../components/context-menu";
-import Dialog from "../components/dialog";
-import DropdownMenu from "../components/dropdown-menu";
-import HoverCard from "../components/hover-card";
-import Menubar from "../components/menubar";
-import NavigationMenu from "../components/navigation-menu";
-import Popover from "../components/popover";
-import Progress from "../components/progress";
-import RadioGroup from "../components/radio-group";
-import Select from "../components/select";
-import DemoCard from "../components/shared/demo-card";
-import ThemeSwitcher from "../components/shared/theme-switcher";
-import Slider from "../components/slider";
-import Switch from "../components/switch";
-import Tabs from "../components/tabs";
-import Toast from "../components/toast";
-import Toggle from "../components/toggle";
-import ToggleGroup from "../components/toggle-group";
-import Toolbar from "../components/toolbar";
-import Tooltip from "../components/tooltip";
+import { Accordion } from "../components/accordion";
+import { AlertDialog } from "../components/alert-dialog";
+import { AspectRatio } from "../components/aspect-ratio";
+import { Avatar } from "../components/avatar";
+import { Checkbox } from "../components/checkbox";
+import { Collapsible } from "../components/collapsible";
+import { ContextMenu } from "../components/context-menu";
+import { Dialog } from "../components/dialog";
+import { DropdownMenu } from "../components/dropdown-menu";
+import { HoverCard } from "../components/hover-card";
+import { Menubar } from "../components/menubar";
+import { NavigationMenu } from "../components/navigation-menu";
+import { Popover } from "../components/popover";
+import { Progress } from "../components/progress";
+import { RadioGroup } from "../components/radio-group";
+import { Select } from "../components/select";
+import { DemoCard } from "../components/shared/demo-card";
+import { ThemeSwitcher } from "../components/shared/theme-switcher";
+import { Slider } from "../components/slider";
+import { Switch } from "../components/switch";
+import { Tabs } from "../components/tabs";
+import { Toast } from "../components/toast";
+import { Toggle } from "../components/toggle";
+import { ToggleGroup } from "../components/toggle-group";
+import { Toolbar } from "../components/toolbar";
+import { Tooltip } from "../components/tooltip";
 import { CommandMenu } from "../components/shared/command-menu";
-import cx from "classnames";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
 const REPO_URL = "https://github.com/ecklf/tailwindcss-radix/blob/main/demo";
@@ -295,7 +295,7 @@ const Hero = () => {
             <TooltipPrimitive.Root>
               <TooltipPrimitive.Trigger asChild>
                 <div
-                  className={cx(
+                  className={clsx(
                     "inline-flex select-none justify-center rounded-md px-2 py-1.5 text-sm font-medium",
                     "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 hover:dark:bg-gray-800",
                     "border border-gray-300 dark:border-transparent",
@@ -307,7 +307,7 @@ const Hero = () => {
               </TooltipPrimitive.Trigger>
               <TooltipPrimitive.Content
                 sideOffset={4}
-                className={cx(
+                className={clsx(
                   "radix-side-top:animate-slide-down-fade",
                   "radix-side-right:animate-slide-left-fade",
                   "radix-side-bottom:animate-slide-up-fade",
diff --git a/demo/pnpm-lock.yaml b/demo/pnpm-lock.yaml
index 9ba964c..e7beca2 100644
--- a/demo/pnpm-lock.yaml
+++ b/demo/pnpm-lock.yaml
@@ -36,7 +36,7 @@ specifiers:
   '@types/react': ^18.0.26
   '@vercel/analytics': ^0.1.8
   autoprefixer: ^10.4.13
-  classnames: ^2.3.2
+  clsx: ^1.2.1
   cmdk: ^0.1.21
   eslint: 8.32.0
   eslint-config-next: 13.1.2
@@ -85,7 +85,7 @@ dependencies:
   '@radix-ui/react-toolbar': 1.0.2_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-tooltip': 1.0.3_ib3m5ricvtkl2cll7qpr2f6lvq
   '@vercel/analytics': 0.1.8_react@18.2.0
-  classnames: 2.3.2
+  clsx: 1.2.1
   cmdk: 0.1.21_ib3m5ricvtkl2cll7qpr2f6lvq
   next: 13.1.2_biqbaboplfbrettd7655fr4n2y
   next-seo: 5.15.0_7jnwqgtpcnwg4nzft4b6xlzlfi
@@ -1696,14 +1696,15 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /classnames/2.3.2:
-    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
-    dev: false
-
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /cmdk/0.1.21_ib3m5ricvtkl2cll7qpr2f6lvq:
     resolution: {integrity: sha512-O5oiYmoBdcoqmax4RMOsnJHrseaXlnkzfCSWgNdyBxneTaSCmUByBF5MliJbsveoHJsjkyL2uNUs2kTBBMmIaw==}
     peerDependencies: