remove animate presence

components/commerce/cart-drawer.tsx

@@ -4,17 +4,39 @@ import React from 'react';
 import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
+import {
+  RiCloseLine,
+  RiImageLine,
+  RiSubtractLine,
+  RiAddLine,
+} from '@remixicon/react';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
-  SheetBody,
-  SheetFooter,
 } from '@/components/ui/sheet';
 
 const CartDrawer: React.FC = () => {
-  const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
+  const {
+    isOpen,
+    closeCart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading,
+    removeItem,
+    updateItemQuantity,
+  } = useShopifyCart();
 
   const handleCheckout = () => {
     if (checkoutUrl) {
@@ -22,42 +44,57 @@ const CartDrawer: React.FC = () => {
     }
   };
 
-  const getItemImage = (item: typeof items[0]) => {
+  const getItemImage = (item: (typeof items)[0]) => {
     return item.merchandise.image?.url;
   };
 
-  const getSelectedOptions = (item: typeof items[0]) => {
+  const getSelectedOptions = (item: (typeof items)[0]) => {
     return item.merchandise.selectedOptions ?? [];
   };
 
   return (
-    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()} side="right">
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
-      <SheetContent className="w-full sm:max-w-md">
+      <SheetContent
+        side="right"
+        className="w-full max-w-md"
+        showCloseButton={false}
+      >
         {/* Header */}
-        <SheetHeader>
+        <SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center border-b border-border">
+          <div className="flex items-center justify-between w-full">
             <SheetTitle className="text-base">
               Shopping Cart ({itemCount})
             </SheetTitle>
+            <Button onClick={closeCart} variant="ghost" size="icon-sm">
+              <RiCloseLine size={20} />
+            </Button>
+          </div>
         </SheetHeader>
 
         {/* Cart Items */}
-        <SheetBody>
+        <div className="flex-1 overflow-y-auto px-6 py-4">
           {loading && items.length === 0 ? (
             <div className="flex items-center justify-center py-12">
               <Spinner size="lg" />
             </div>
           ) : items.length === 0 ? (
-            <div className="text-center py-12">
+            <Empty className="border-0">
-              <i className="ri-shopping-cart-line text-6xl text-gray-300 mb-4 block"></i>
+              <EmptyContent>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
+                <EmptyHeader>
-              <p className="text-gray-500 mb-6">Add some products to get started!</p>
+                  <EmptyTitle>Your cart is empty</EmptyTitle>
+                  <EmptyDescription>
+                    Add some products to get started!
+                  </EmptyDescription>
+                </EmptyHeader>
                 <Button
                   onClick={closeCart}
-                className="font-heading"
+                  variant="outline"
+                  className="rounded-full"
                 >
                   Continue Shopping
                 </Button>
-            </div>
+              </EmptyContent>
+            </Empty>
           ) : (
             <div className="space-y-6">
               {items.map((item) => {
@@ -65,7 +102,10 @@ const CartDrawer: React.FC = () => {
                 const selectedOptions = getSelectedOptions(item);
 
                 return (
-                  <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
+                  <div
+                    key={item.id}
+                    className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0"
+                  >
                     {/* Product Image */}
                     <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                       {image ? (
@@ -76,7 +116,7 @@ const CartDrawer: React.FC = () => {
                         />
                       ) : (
                         <div className="w-full h-full flex items-center justify-center text-gray-400">
-                          <i className="ri-image-line text-2xl"></i>
+                          <RiImageLine size={24} />
                         </div>
                       )}
                     </div>
@@ -93,7 +133,9 @@ const CartDrawer: React.FC = () => {
                           {selectedOptions.map((option, index) => (
                             <span key={option.name}>
                               {option.value}
-                              {index < selectedOptions.length - 1 ? ' / ' : ''}
+                              {index < selectedOptions.length - 1
+                                ? ' / '
+                                : ''}
                             </span>
                           ))}
                         </div>
@@ -103,25 +145,29 @@ const CartDrawer: React.FC = () => {
                       <div className="flex items-center mt-3">
                         <div className="flex items-center border border-gray-300 rounded-lg">
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity - 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={item.quantity <= 1 || loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-subtract-line text-sm"></i>
+                            <RiSubtractLine size={14} />
                           </Button>
                           <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                             {item.quantity}
                           </span>
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity + 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-add-line text-sm"></i>
+                            <RiAddLine size={14} />
                           </Button>
                         </div>
                       </div>
@@ -141,9 +187,9 @@ const CartDrawer: React.FC = () => {
                         variant="ghost"
                         size="icon-sm"
                         disabled={loading}
-                        className="text-gray-400 hover:text-red-500"
+                        className="text-gray-400 hover:text-gray-700"
                       >
-                        <i className="ri-delete-bin-line text-lg"></i>
+                        <RiCloseLine size={18} />
                       </Button>
                     </div>
                   </div>
@@ -151,11 +197,11 @@ const CartDrawer: React.FC = () => {
               })}
             </div>
           )}
-        </SheetBody>
+        </div>
 
         {/* Footer - Checkout Section */}
         {items.length > 0 && (
-          <SheetFooter className="flex-col sm:flex-col sm:justify-start gap-0">
+          <div className="border-t border-border p-6">
             {/* Subtotal */}
             <div className="flex items-center justify-between mb-4">
               <span className="text-base font-semibold">Subtotal</span>
@@ -178,7 +224,7 @@ const CartDrawer: React.FC = () => {
               >
                 {loading ? (
                   <span className="flex items-center justify-center space-x-2">
-                    <Spinner size="sm" />
+                    <Loader size={16} />
                     <span>Processing...</span>
                   </span>
                 ) : (
@@ -186,15 +232,11 @@ const CartDrawer: React.FC = () => {
                 )}
               </Button>
 
-              <Button
+              <Button onClick={closeCart} variant="link" className="w-full">
-                onClick={closeCart}
-                variant="link"
-                className="w-full"
-              >
                 Continue Shopping
               </Button>
             </div>
-          </SheetFooter>
+          </div>
         )}
       </SheetContent>
     </Sheet>

components/ui/sheet.tsx

@@ -1,303 +1,134 @@
-"use client";
+"use client"
 
-import React, { useState, useCallback, useContext, createContext } from 'react';
+import * as React from "react"
-import { createPortal } from 'react-dom';
+import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { motion, AnimatePresence } from 'framer-motion';
+import { XIcon } from "lucide-react"
-import { cn } from '@/lib/utils';
 
-interface SheetContextType {
+import { cn } from "@/lib/utils"
-  open: boolean;
+
-  setOpen: (open: boolean) => void;
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  side: 'top' | 'right' | 'bottom' | 'left';
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-const SheetContext = createContext<SheetContextType | undefined>(undefined);
+function SheetTrigger({
-
+  ...props
-function useSheet() {
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  const context = useContext(SheetContext);
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-  if (!context) {
-    throw new Error('Sheet components must be used within a Sheet');
-  }
-  return context;
 }
 
-interface SheetProps {
+function SheetClose({
-  open?: boolean;
+  ...props
-  onOpenChange?: (open: boolean) => void;
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  children: React.ReactNode;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-  side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-function Sheet({
+function SheetPortal({
-  open: controlledOpen,
+  ...props
-  onOpenChange,
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  children,
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-  side = 'right',
-}: SheetProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : internalOpen;
-
-  const setOpen = useCallback(
-    (newOpen: boolean) => {
-      if (!isControlled) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-
-  return (
-    <SheetContext.Provider value={{ open, setOpen, side }}>
-      {children}
-    </SheetContext.Provider>
-  );
-}
-
-function SheetTrigger(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(true);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-trigger"
-      {...rest}
-      onClick={(e) => {
-        setOpen(true);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetPortal({ children }: { children: React.ReactNode }) {
-  if (typeof document === 'undefined') return null;
-  return createPortal(children, document.body);
 }
 
 function SheetOverlay({
   className,
-  onClick,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  const { setOpen } = useSheet();
-
   return (
-    <motion.div
+    <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
-      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      className={cn(
-      initial={{ opacity: 0 }}
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-      animate={{ opacity: 1 }}
+        className
-      exit={{ opacity: 0 }}
+      )}
-      transition={{ duration: 0.3 }}
-      onClick={(e) => {
-        setOpen(false);
-        onClick?.(e);
-      }}
       {...props}
     />
-  );
+  )
-}
-
-interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  showCloseButton?: boolean;
 }
 
 function SheetContent({
   className,
   children,
+  side = "right",
   showCloseButton = true,
   ...props
-}: SheetContentProps) {
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  const { open, setOpen, side } = useSheet();
+  side?: "top" | "right" | "bottom" | "left"
-
+  showCloseButton?: boolean
-  const sideClasses = {
+}) {
-    right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
-    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
-    top: 'inset-x-0 top-0 h-auto border-b',
-    bottom: 'inset-x-0 bottom-0 h-auto border-t',
-  };
-
-  const slideVariants = {
-    right: {
-      initial: { x: 400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: 400, opacity: 0 },
-    },
-    left: {
-      initial: { x: -400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: -400, opacity: 0 },
-    },
-    top: {
-      initial: { y: -400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: -400, opacity: 0 },
-    },
-    bottom: {
-      initial: { y: 400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: 400, opacity: 0 },
-    },
-  };
-
   return (
     <SheetPortal>
-      <AnimatePresence>
-        {open ? (
-          <>
       <SheetOverlay />
-            <motion.div
+      <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-                'bg-background fixed z-50 flex flex-col gap-0 shadow-lg',
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-                sideClasses[side],
+          side === "right" &&
-                className,
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
         )}
-              variants={slideVariants[side]}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
         {...props}
       >
         {children}
         {showCloseButton && (
-                <button
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-                  data-slot="sheet-close"
+            <XIcon className="size-4" />
-                  onClick={() => setOpen(false)}
+            <span className="sr-only">Close</span>
-                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+          </SheetPrimitive.Close>
-                  aria-label="Close"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="size-4"
-                  >
-                    <path d="M18 6l-12 12M6 6l12 12" />
-                  </svg>
-                </button>
         )}
-            </motion.div>
+      </SheetPrimitive.Content>
-          </>
-        ) : null}
-      </AnimatePresence>
     </SheetPortal>
-  );
+  )
 }
 
-function SheetClose(
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(false);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-close"
-      {...rest}
-      onClick={(e) => {
-        setOpen(false);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn(
+      className={cn("flex flex-col gap-1.5 p-4", className)}
-        'flex flex-col gap-1.5 p-6 border-b border-border',
-        className
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn(
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-        'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
-        className
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
-    <h2
+    <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
-    <p
+    <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
-}
-
-interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-function SheetBody({ className, children, ...props }: SheetBodyProps) {
-  return (
-    <div
-      data-slot="sheet-body"
-      className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
 }
 
 export {
@@ -309,8 +140,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-  SheetBody,
+}
-  SheetPortal,
-  SheetOverlay,
-  AnimatePresence,
-};