Merge branch 'main' of https://github.com/ecklf/tailwindcss-radix

ecklf · Jan 24, 2023 · f42c1da · f42c1da
2 parents 4507ffa + e494b90
commit f42c1da
Show file tree

Hide file tree

Showing 31 changed files with 231 additions and 233 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -13,8 +13,9 @@ 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";
 
 interface RadixMenuItem {
   label: string;
@@ -68,24 +69,22 @@ 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);
 
   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>
           <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"
@@ -94,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"
                 )}
@@ -116,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"
               )}
@@ -141,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"
               )}
@@ -168,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"
                 )}
@@ -185,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"
                 )}
@@ -198,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"
@@ -207,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"
                       )}
@@ -235,4 +234,4 @@ const ContextMenu = (props: Props) => {
   );
 };
 
-export default ContextMenu;
+export { ContextMenu };