Merge branch 'Weaverse:main' into main

Weaverse · Dec 10, 2024 · d308f38 · d308f38
2 parents 9459193 + 42fc2d5
commit d308f38
Show file tree

Hide file tree

Showing 11 changed files with 394 additions and 257 deletions.
diff --git a/app/components/checkbox.tsx b/app/components/checkbox.tsx
@@ -1,34 +1,27 @@
+import { Check } from "@phosphor-icons/react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
 import { cn } from "~/lib/cn";
-import { IconCheck } from "./icons";
 
 interface CheckboxProps
   extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-  label?: string;
+  label?: React.ReactNode;
 }
 
-const Checkbox = React.forwardRef<
+export let Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
 >(({ className, label, ...props }, ref) => (
-  <div className={cn("flex items-center space-x-2.5", className)}>
+  <div className={cn("flex items-center gap-2.5", className)}>
     <CheckboxPrimitive.Root
       ref={ref}
-      className={cn(
-        "peer w-5 h-5 shrink-0 border ring-offset-background focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background data-[state=checked]:text-body",
-      )}
+      className="w-5 h-5 shrink-0 border border-line focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
       {...props}
     >
-      <CheckboxPrimitive.Indicator
-        className={cn("flex items-center justify-center text-current")}
-      >
-        <IconCheck className="h-3 w-3" />
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check weight="bold" className="h-3 w-3" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-    {label ? <span>{label}</span> : null}
+    {label ? typeof label === "string" ? <span>{label}</span> : label : null}
   </div>
 ));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/app/components/scroll-area.tsx b/app/components/scroll-area.tsx
@@ -55,7 +55,7 @@ export let ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
         </Viewport>
         <Scrollbar
           className={cn(
-            "flex touch-none select-none rounded-lg data-[orientation=horizontal]:flex-col",
+            "flex touch-none select-none data-[orientation=horizontal]:flex-col",
             "bg-black/10 dark:bg-gray-700/50",
             "transition-colors duration-150 ease-out",
             variants({ size }),
@@ -65,7 +65,7 @@ export let ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
         >
           <Thumb
             className={cn(
-              "relative flex-1 rounded-lg shadow-intense",
+              "relative flex-1 shadow-intense",
               "bg-gray-500 dark:bg-gray-500",
               "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
               "before:h-full before:min-h-[20px] before:w-full before:min-w-[20px]",

diff --git a/app/components/tooltip.tsx b/app/components/tooltip.tsx
@@ -24,19 +24,25 @@ export let TooltipTrigger = ({
 }: TooltipTriggerProps) => <Trigger asChild={asChild} {...rest} />;
 
 export let TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
-  ({ children, className, sideOffset = 4, ...rest }, ref) => {
+  ({ children, className, sideOffset = 4, style, ...rest }, ref) => {
     return (
       <Content
         ref={ref}
         className={cn(
           "animate-slide-down-and-fade",
-          "z-50 px-4 rounded py-1 shadow-sm text-background bg-body opacity-0",
+          "z-50 px-4 rounded py-1 shadow-sm text-background bg-body",
           className,
         )}
         align="center"
         side="top"
         sideOffset={sideOffset}
         collisionPadding={8}
+        style={
+          {
+            "--slide-down-and-fade-duration": "0.3s",
+            ...style,
+          } as React.CSSProperties
+        }
         {...rest}
       >
         <Arrow asChild>

diff --git a/app/modules/product-form/options.tsx b/app/modules/product-form/options.tsx
@@ -6,38 +6,41 @@ import type { ProductVariantFragmentFragment } from "storefrontapi.generated";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";
 import { cn } from "~/lib/cn";
 
-let variants = cva("border border-line hover:border-body cursor-pointer", {
-  variants: {
-    colorSize: {
-      sm: "w-8 h-8",
-      md: "w-10 h-10",
-      lg: "w-12 h-12",
-    },
-    buttonSize: {
-      sm: "min-w-8 h-8",
-      md: "min-w-10 h-10",
-      lg: "min-w-12 h-12",
-    },
-    imageSize: {
-      sm: "w-12 h-auto",
-      md: "w-16 h-auto",
-      lg: "w-20 h-auto",
-    },
-    shape: {
-      square: "",
-      circle: "rounded-full",
-      round: "rounded-md",
-    },
-    selected: {
-      true: "border-body",
-      false: "",
-    },
-    disabled: {
-      true: "diagonal",
-      false: "",
+export let variants = cva(
+  "border border-line hover:border-body cursor-pointer",
+  {
+    variants: {
+      colorSize: {
+        sm: "w-8 h-8",
+        md: "w-10 h-10",
+        lg: "w-12 h-12",
+      },
+      buttonSize: {
+        sm: "min-w-8 h-8",
+        md: "min-w-10 h-10",
+        lg: "min-w-12 h-12",
+      },
+      imageSize: {
+        sm: "w-12 h-auto",
+        md: "w-16 h-auto",
+        lg: "w-20 h-auto",
+      },
+      shape: {
+        square: "",
+        circle: "rounded-full",
+        round: "rounded-md",
+      },
+      selected: {
+        true: "border-body",
+        false: "",
+      },
+      disabled: {
+        true: "diagonal",
+        false: "",
+      },
     },
   },
-});
+);
 
 interface VariantOptionProps {
   selectedOptionValue: string;