{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "side-panel",
  "type": "registry:ui",
  "description": "Sliding side panel component with customizable positioning and animations",
  "files": [
    {
      "path": "registry/default/ui/side-panel.tsx",
      "content": "\"use client\"\n\nimport React, { forwardRef, ReactNode } from \"react\"\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\"\nimport useMeasure from \"react-use-measure\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype PanelContainerProps = {\n  panelOpen: boolean\n  handlePanelOpen: () => void\n  className?: string\n  videoUrl?: string\n  renderButton?: (handleToggle: () => void) => ReactNode\n  children: ReactNode\n}\n\nconst sectionVariants = {\n  open: {\n    width: \"97%\",\n    transition: {\n      duration: 0.3,\n      ease: [0.42, 0, 0.58, 1] as const,\n      delayChildren: 0.3,\n      staggerChildren: 0.2,\n    },\n  },\n  closed: {\n    transition: { duration: 0.2, ease: [0.42, 0, 0.58, 1] as const },\n  },\n}\n\nconst sharedTransition = { duration: 0.6, ease: [0.42, 0, 0.58, 1] as const }\n\nexport const SidePanel = forwardRef<HTMLDivElement, PanelContainerProps>(\n  ({ panelOpen, handlePanelOpen, className, renderButton, children }, ref) => {\n    const [measureRef, bounds] = useMeasure()\n\n    return (\n      <ResizablePanel>\n        <motion.div\n          className={cn(\n            \"bg-neutral-900 rounded-r-[44px] w-[160px] md:w-[260px]\",\n            className\n          )}\n          animate={panelOpen ? \"open\" : \"closed\"}\n          variants={sectionVariants}\n          transition={{ duration: 0.2, ease: [0.42, 0, 0.58, 1] as const }}\n        >\n          <motion.div\n            animate={{ height: bounds.height > 0 ? bounds.height : 0.1 }}\n            className=\"h-auto\"\n            transition={{ type: \"spring\", bounce: 0.02, duration: 0.65 }}\n          >\n            <div ref={measureRef}>\n              <AnimatePresence mode=\"popLayout\">\n                <motion.div\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    ...sharedTransition,\n                    duration: sharedTransition.duration / 2,\n                  }}\n                  key=\"form\"\n                >\n                  <div\n                    className={cn(\n                      \"flex items-center w-full justify-start pl-4 md:pl-4 py-1 md:py-3\",\n                      panelOpen ? \"pr-3\" : \"\"\n                    )}\n                  >\n                    {renderButton && renderButton(handlePanelOpen)}\n                  </div>\n\n                  {panelOpen && (\n                    <motion.div\n                      exit={{ opacity: 0 }}\n                      transition={sharedTransition}\n                    >\n                      {children}\n                    </motion.div>\n                  )}\n                </motion.div>\n              </AnimatePresence>\n            </div>\n          </motion.div>\n        </motion.div>\n      </ResizablePanel>\n    )\n  }\n)\n\nSidePanel.displayName = \"SidePanel\"\n\nexport default SidePanel\n\ntype ResizablePanelProps = {\n  children: React.ReactNode\n}\n\nconst ResizablePanel = React.forwardRef<HTMLDivElement, ResizablePanelProps>(\n  ({ children }, ref) => {\n    const transition = {\n      type: \"tween\" as const,\n      ease: [0.42, 0, 0.58, 1] as const,\n      duration: 0.4,\n    }\n\n    return (\n      <MotionConfig transition={transition}>\n        <div className=\"flex w-full flex-col items-start\">\n          <div className=\"mx-auto w-full\">\n            <div\n              ref={ref}\n              className={cn(\n                children ? \"rounded-r-none\" : \"rounded-sm\",\n                \"relative overflow-hidden\"\n              )}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </MotionConfig>\n    )\n  }\n)\n\nResizablePanel.displayName = \"ResizablePanel\"\n",
      "type": "registry:ui"
    }
  ]
}