Update shopify collection

components/ui/collapsible.tsx

@@ -1,192 +1,32 @@
 "use client"
 
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-interface CollapsibleContextValue {
-  open: boolean
-  setOpen: (open: boolean) => void
-  contentId: string
-}
-
-const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
-
-function useCollapsible() {
-  const context = React.useContext(CollapsibleContext)
-  if (!context) {
-    throw new Error("useCollapsible must be used within a Collapsible")
-  }
-  return context
-}
-
-interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  disabled?: boolean
-}
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 function Collapsible({
-  children,
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  disabled,
-  className,
   ...props
-}: CollapsibleProps) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
-  const contentId = React.useId()
-
-  const isControlled = controlledOpen !== undefined
-  const open = isControlled ? controlledOpen : uncontrolledOpen
-
-  const setOpen = React.useCallback(
-    (value: boolean) => {
-      if (disabled) return
-      if (!isControlled) {
-        setUncontrolledOpen(value)
-      }
-      onOpenChange?.(value)
-    },
-    [disabled, isControlled, onOpenChange]
-  )
-
-  return (
-    <CollapsibleContext.Provider value={{ open, setOpen, contentId }}>
-      <div
-        data-slot="collapsible"
-        data-state={open ? "open" : "closed"}
-        data-disabled={disabled || undefined}
-        className={className}
-        {...props}
-      >
-        {children}
-      </div>
-    </CollapsibleContext.Provider>
-  )
-}
-
-interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  asChild?: boolean
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
 }
 
 function CollapsibleTrigger({
-  children,
-  asChild,
-  className,
   ...props
-}: CollapsibleTriggerProps) {
-  const { open, setOpen, contentId } = useCollapsible()
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    props.onClick?.(e)
-    if (!e.defaultPrevented) {
-      setOpen(!open)
-    }
-  }
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement<any>, {
-      onClick: handleClick,
-      "aria-expanded": open,
-      "aria-controls": contentId,
-      "data-state": open ? "open" : "closed",
-      "data-slot": "collapsible-trigger",
-    })
-  }
-
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
   return (
-    <button
-      type="button"
+    <CollapsiblePrimitive.CollapsibleTrigger
       data-slot="collapsible-trigger"
-      data-state={open ? "open" : "closed"}
-      aria-expanded={open}
-      aria-controls={contentId}
-      className={className}
-      onClick={handleClick}
       {...props}
-    >
-      {children}
-    </button>
+    />
   )
 }
 
-interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  forceMount?: boolean
-}
-
 function CollapsibleContent({
-  children,
-  className,
-  forceMount,
   ...props
-}: CollapsibleContentProps) {
-  const { open, contentId } = useCollapsible()
-  const contentRef = React.useRef<HTMLDivElement>(null)
-  const [height, setHeight] = React.useState<number | undefined>(undefined)
-  const [isAnimating, setIsAnimating] = React.useState(false)
-
-  React.useLayoutEffect(() => {
-    const content = contentRef.current
-    if (!content) return
-
-    if (open) {
-      // Opening: measure and animate
-      setIsAnimating(true)
-      const contentHeight = content.scrollHeight
-      setHeight(contentHeight)
-
-      const timer = setTimeout(() => {
-        setIsAnimating(false)
-        setHeight(undefined)
-      }, 200) // Match animation duration
-
-      return () => clearTimeout(timer)
-    } else {
-      // Closing: set current height first, then animate to 0
-      const contentHeight = content.scrollHeight
-      setHeight(contentHeight)
-      setIsAnimating(true)
-
-      // Force reflow then set to 0
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setHeight(0)
-        })
-      })
-
-      const timer = setTimeout(() => {
-        setIsAnimating(false)
-      }, 200)
-
-      return () => clearTimeout(timer)
-    }
-  }, [open])
-
-  if (!open && !isAnimating && !forceMount) {
-    return null
-  }
-
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
   return (
-    <div
-      ref={contentRef}
-      id={contentId}
+    <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"
-      data-state={open ? "open" : "closed"}
-      hidden={!open && !isAnimating && !forceMount}
-      className={cn(
-        "overflow-hidden transition-[height] duration-200 ease-out",
-        className
-      )}
-      style={{
-        height: isAnimating ? height : open ? "auto" : 0,
-      }}
       {...props}
-    >
-      {children}
-    </div>
+    />
   )
 }