{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-panel",
  "type": "registry:ui",
  "description": "Floating panel component with backdrop blur and position-aware animations",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/floating-panel.tsx",
      "content": "\"use client\"\n\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\"\nimport { ArrowLeftIcon } from \"lucide-react\"\nimport { AnimatePresence, motion, MotionConfig, Variants } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TRANSITION = {\n  type: \"spring\" as const,\n  bounce: 0.1,\n  duration: 0.4,\n}\n\ninterface FloatingPanelContextType {\n  isOpen: boolean\n  openFloatingPanel: (rect: DOMRect) => void\n  closeFloatingPanel: () => void\n  uniqueId: string\n  note: string\n  setNote: (note: string) => void\n  triggerRect: DOMRect | null\n  title: string\n  setTitle: (title: string) => void\n}\n\nconst FloatingPanelContext = createContext<\n  FloatingPanelContextType | undefined\n>(undefined)\n\nfunction useFloatingPanel() {\n  const context = useContext(FloatingPanelContext)\n  if (!context) {\n    throw new Error(\n      \"useFloatingPanel must be used within a FloatingPanelProvider\"\n    )\n  }\n  return context\n}\n\nfunction useFloatingPanelLogic() {\n  const uniqueId = useId()\n  const [isOpen, setIsOpen] = useState(false)\n  const [note, setNote] = useState(\"\")\n  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null)\n  const [title, setTitle] = useState(\"\")\n\n  const openFloatingPanel = (rect: DOMRect) => {\n    setTriggerRect(rect)\n    setIsOpen(true)\n  }\n  const closeFloatingPanel = () => {\n    setIsOpen(false)\n    setNote(\"\")\n  }\n\n  return {\n    isOpen,\n    openFloatingPanel,\n    closeFloatingPanel,\n    uniqueId,\n    note,\n    setNote,\n    triggerRect,\n    title,\n    setTitle,\n  }\n}\n\ninterface FloatingPanelRootProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function FloatingPanelRoot({\n  children,\n  className,\n}: FloatingPanelRootProps) {\n  const floatingPanelLogic = useFloatingPanelLogic()\n\n  return (\n    <FloatingPanelContext.Provider value={floatingPanelLogic}>\n      <MotionConfig transition={TRANSITION}>\n        <div className={cn(\"relative\", className)}>{children}</div>\n      </MotionConfig>\n    </FloatingPanelContext.Provider>\n  )\n}\n\ninterface FloatingPanelTriggerProps {\n  children: React.ReactNode\n  className?: string\n  title: string\n}\n\nexport function FloatingPanelTrigger({\n  children,\n  className,\n  title,\n}: FloatingPanelTriggerProps) {\n  const { openFloatingPanel, uniqueId, setTitle } = useFloatingPanel()\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleClick = () => {\n    if (triggerRef.current) {\n      openFloatingPanel(triggerRef.current.getBoundingClientRect())\n      setTitle(title)\n    }\n  }\n\n  return (\n    <motion.button\n      ref={triggerRef}\n      layoutId={`floating-panel-trigger-${uniqueId}`}\n      className={cn(\n        \"flex h-9 items-center border border-zinc-950/10 bg-white px-3 text-zinc-950 dark:border-zinc-50/10 dark:bg-zinc-700 dark:text-zinc-50\",\n        className\n      )}\n      style={{ borderRadius: 8 }}\n      onClick={handleClick}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      aria-haspopup=\"dialog\"\n      aria-expanded={false}\n    >\n      <motion.div\n        layoutId={`floating-panel-label-container-${uniqueId}`}\n        className=\"flex items-center\"\n      >\n        <motion.span\n          layoutId={`floating-panel-label-${uniqueId}`}\n          className=\"text-sm font-semibold\"\n        >\n          {children}\n        </motion.span>\n      </motion.div>\n    </motion.button>\n  )\n}\n\ninterface FloatingPanelContentProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function FloatingPanelContent({\n  children,\n  className,\n}: FloatingPanelContentProps) {\n  const { isOpen, closeFloatingPanel, uniqueId, triggerRect, title } =\n    useFloatingPanel()\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        contentRef.current &&\n        !contentRef.current.contains(event.target as Node)\n      ) {\n        closeFloatingPanel()\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside)\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside)\n  }, [closeFloatingPanel])\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") closeFloatingPanel()\n    }\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => document.removeEventListener(\"keydown\", handleKeyDown)\n  }, [closeFloatingPanel])\n\n  const variants: Variants = {\n    hidden: { opacity: 0, scale: 0.9, y: 10 },\n    visible: { opacity: 1, scale: 1, y: 0 },\n  }\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <>\n          <motion.div\n            initial={{ backdropFilter: \"blur(0px)\" }}\n            animate={{ backdropFilter: \"blur(4px)\" }}\n            exit={{ backdropFilter: \"blur(0px)\" }}\n            className=\"fixed inset-0 z-40\"\n          />\n          <motion.div\n            ref={contentRef}\n            layoutId={`floating-panel-${uniqueId}`}\n            className={cn(\n              \"fixed z-50 overflow-hidden border border-zinc-950/10 bg-white shadow-lg outline-none dark:border-zinc-50/10 dark:bg-zinc-800\",\n              className\n            )}\n            style={{\n              borderRadius: 12,\n              left: triggerRect ? triggerRect.left : \"50%\",\n              top: triggerRect ? triggerRect.bottom + 8 : \"50%\",\n              transformOrigin: \"top left\",\n            }}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            variants={variants}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={`floating-panel-title-${uniqueId}`}\n          >\n            <FloatingPanelTitle>{title}</FloatingPanelTitle>\n            {children}\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  )\n}\n\ninterface FloatingPanelTitleProps {\n  children: React.ReactNode\n}\n\nfunction FloatingPanelTitle({ children }: FloatingPanelTitleProps) {\n  const { uniqueId } = useFloatingPanel()\n\n  return (\n    <motion.div\n      layoutId={`floating-panel-label-container-${uniqueId}`}\n      className=\"px-4 py-2 bg-white dark:bg-zinc-800\"\n    >\n      <motion.div\n        layoutId={`floating-panel-label-${uniqueId}`}\n        className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\"\n        id={`floating-panel-title-${uniqueId}`}\n      >\n        {children}\n      </motion.div>\n    </motion.div>\n  )\n}\n\ninterface FloatingPanelFormProps {\n  children: React.ReactNode\n  onSubmit?: (note: string) => void\n  className?: string\n}\n\nexport function FloatingPanelForm({\n  children,\n  onSubmit,\n  className,\n}: FloatingPanelFormProps) {\n  const { note, closeFloatingPanel } = useFloatingPanel()\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    onSubmit?.(note)\n    closeFloatingPanel()\n  }\n\n  return (\n    <form\n      className={cn(\"flex h-full flex-col\", className)}\n      onSubmit={handleSubmit}\n    >\n      {children}\n    </form>\n  )\n}\n\ninterface FloatingPanelLabelProps {\n  children: React.ReactNode\n  htmlFor: string\n  className?: string\n}\n\nexport function FloatingPanelLabel({\n  children,\n  htmlFor,\n  className,\n}: FloatingPanelLabelProps) {\n  const { note } = useFloatingPanel()\n\n  return (\n    <motion.label\n      htmlFor={htmlFor}\n      style={{ opacity: note ? 0 : 1 }}\n      className={cn(\n        \"block mb-2 text-sm font-medium text-zinc-900 dark:text-zinc-100\",\n        className\n      )}\n    >\n      {children}\n    </motion.label>\n  )\n}\n\ninterface FloatingPanelTextareaProps {\n  className?: string\n  id?: string\n}\n\nexport function FloatingPanelTextarea({\n  className,\n  id,\n}: FloatingPanelTextareaProps) {\n  const { note, setNote } = useFloatingPanel()\n\n  return (\n    <textarea\n      id={id}\n      className={cn(\n        \"h-full w-full resize-none rounded-md bg-transparent px-4 py-3 text-sm outline-none\",\n        className\n      )}\n      autoFocus\n      value={note}\n      onChange={(e) => setNote(e.target.value)}\n    />\n  )\n}\n\ninterface FloatingPanelHeaderProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function FloatingPanelHeader({\n  children,\n  className,\n}: FloatingPanelHeaderProps) {\n  return (\n    <motion.div\n      className={cn(\n        \"px-4 py-2 font-semibold text-zinc-900 dark:text-zinc-100\",\n        className\n      )}\n      initial={{ opacity: 0, y: -10 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ delay: 0.1 }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\ninterface FloatingPanelBodyProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function FloatingPanelBody({\n  children,\n  className,\n}: FloatingPanelBodyProps) {\n  return (\n    <motion.div\n      className={cn(\"p-4\", className)}\n      initial={{ opacity: 0, y: 10 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ delay: 0.2 }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\ninterface FloatingPanelFooterProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function FloatingPanelFooter({\n  children,\n  className,\n}: FloatingPanelFooterProps) {\n  return (\n    <motion.div\n      className={cn(\"flex justify-between px-4 py-3\", className)}\n      initial={{ opacity: 0, y: 10 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ delay: 0.3 }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\ninterface FloatingPanelCloseButtonProps {\n  className?: string\n}\n\nexport function FloatingPanelCloseButton({\n  className,\n}: FloatingPanelCloseButtonProps) {\n  const { closeFloatingPanel } = useFloatingPanel()\n\n  return (\n    <motion.button\n      type=\"button\"\n      className={cn(\"flex items-center\", className)}\n      onClick={closeFloatingPanel}\n      aria-label=\"Close floating panel\"\n      whileHover={{ scale: 1.1 }}\n      whileTap={{ scale: 0.9 }}\n    >\n      <ArrowLeftIcon size={16} className=\"text-zinc-900 dark:text-zinc-100\" />\n    </motion.button>\n  )\n}\n\ninterface FloatingPanelSubmitButtonProps {\n  className?: string\n}\n\nexport function FloatingPanelSubmitButton({\n  className,\n}: FloatingPanelSubmitButtonProps) {\n  return (\n    <motion.button\n      className={cn(\n        \"relative ml-1 flex h-8 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 bg-transparent px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98] dark:border-zinc-50/10 dark:text-zinc-50 dark:hover:bg-zinc-800\",\n        className\n      )}\n      type=\"submit\"\n      aria-label=\"Submit note\"\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n    >\n      Submit Note\n    </motion.button>\n  )\n}\n\ninterface FloatingPanelButtonProps {\n  children: React.ReactNode\n  onClick?: () => void\n  className?: string\n}\n\nexport function FloatingPanelButton({\n  children,\n  onClick,\n  className,\n}: FloatingPanelButtonProps) {\n  return (\n    <motion.button\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n        className\n      )}\n      onClick={onClick}\n      whileHover={{ backgroundColor: \"rgba(0, 0, 0, 0.05)\" }}\n      whileTap={{ scale: 0.98 }}\n    >\n      {children}\n    </motion.button>\n  )\n}\n\nexport default {\n  Root: FloatingPanelRoot,\n  Trigger: FloatingPanelTrigger,\n  Content: FloatingPanelContent,\n  Form: FloatingPanelForm,\n  Label: FloatingPanelLabel,\n  Textarea: FloatingPanelTextarea,\n  Header: FloatingPanelHeader,\n  Body: FloatingPanelBody,\n  Footer: FloatingPanelFooter,\n  CloseButton: FloatingPanelCloseButton,\n  SubmitButton: FloatingPanelSubmitButton,\n  Button: FloatingPanelButton,\n}\n// \"use client\"\n\n// import React, {\n//   createContext,\n//   useContext,\n//   useEffect,\n//   useId,\n//   useRef,\n//   useState,\n// } from \"react\"\n// import { AnimatePresence, MotionConfig, motion } from \"motion/react\"\n// import { ArrowLeftIcon } from \"lucide-react\"\n\n// import { cn } from \"@/lib/utils\"\n\n// const TRANSITION = {\n//   type: \"spring\",\n//   bounce: 0.1,\n//   duration: 0.4,\n// }\n\n// interface FloatingPanelContextType {\n//   isOpen: boolean\n//   openFloatingPanel: (rect: DOMRect) => void\n//   closeFloatingPanel: () => void\n//   uniqueId: string\n//   note: string\n//   setNote: (note: string) => void\n//   triggerRect: DOMRect | null\n//   title: string\n//   setTitle: (title: string) => void\n// }\n\n// const FloatingPanelContext = createContext<\n//   FloatingPanelContextType | undefined\n// >(undefined)\n\n// function useFloatingPanel() {\n//   const context = useContext(FloatingPanelContext)\n//   if (!context) {\n//     throw new Error(\n//       \"useFloatingPanel must be used within a FloatingPanelProvider\"\n//     )\n//   }\n//   return context\n// }\n\n// function useFloatingPanelLogic() {\n//   const uniqueId = useId()\n//   const [isOpen, setIsOpen] = useState(false)\n//   const [note, setNote] = useState(\"\")\n//   const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null)\n//   const [title, setTitle] = useState(\"\")\n\n//   const openFloatingPanel = (rect: DOMRect) => {\n//     setTriggerRect(rect)\n//     setIsOpen(true)\n//   }\n//   const closeFloatingPanel = () => {\n//     setIsOpen(false)\n//     setNote(\"\")\n//   }\n\n//   return {\n//     isOpen,\n//     openFloatingPanel,\n//     closeFloatingPanel,\n//     uniqueId,\n//     note,\n//     setNote,\n//     triggerRect,\n//     title,\n//     setTitle,\n//   }\n// }\n\n// interface FloatingPanelRootProps {\n//   children: React.ReactNode\n//   className?: string\n// }\n\n// export function FloatingPanelRoot({\n//   children,\n//   className,\n// }: FloatingPanelRootProps) {\n//   const floatingPanelLogic = useFloatingPanelLogic()\n\n//   return (\n//     <FloatingPanelContext.Provider value={floatingPanelLogic}>\n//       <MotionConfig transition={TRANSITION}>\n//         <div className={cn(\"relative\", className)}>{children}</div>\n//       </MotionConfig>\n//     </FloatingPanelContext.Provider>\n//   )\n// }\n\n// interface FloatingPanelTriggerProps {\n//   children: React.ReactNode\n//   className?: string\n//   title: string\n// }\n\n// export function FloatingPanelTrigger({\n//   children,\n//   className,\n//   title,\n// }: FloatingPanelTriggerProps) {\n//   const { openFloatingPanel, uniqueId, setTitle } = useFloatingPanel()\n//   const triggerRef = useRef<HTMLButtonElement>(null)\n\n//   const handleClick = () => {\n//     if (triggerRef.current) {\n//       openFloatingPanel(triggerRef.current.getBoundingClientRect())\n//       setTitle(title)\n//     }\n//   }\n\n//   return (\n//     <motion.button\n//       ref={triggerRef}\n//       layoutId={`floating-panel-trigger-${uniqueId}`}\n//       className={cn(\n//         \"flex h-9 items-center border border-zinc-950/10 bg-white px-3 text-zinc-950 dark:border-zinc-50/10 dark:bg-zinc-700 dark:text-zinc-50\",\n//         className\n//       )}\n//       style={{ borderRadius: 8 }}\n//       onClick={handleClick}\n//       whileHover={{ scale: 1.05 }}\n//       whileTap={{ scale: 0.95 }}\n//     >\n//       <motion.span\n//         layoutId={`floating-panel-label-${uniqueId}`}\n//         className=\"text-sm\"\n//       >\n//         {children}\n//       </motion.span>\n//     </motion.button>\n//   )\n// }\n\n// interface FloatingPanelContentProps {\n//   children: React.ReactNode\n//   className?: string\n// }\n\n// export function FloatingPanelContent({\n//   children,\n//   className,\n// }: FloatingPanelContentProps) {\n//   const { isOpen, closeFloatingPanel, uniqueId, triggerRect, title } =\n//     useFloatingPanel()\n//   const contentRef = useRef<HTMLDivElement>(null)\n\n//   useEffect(() => {\n//     const handleClickOutside = (event: MouseEvent) => {\n//       if (\n//         contentRef.current &&\n//         !contentRef.current.contains(event.target as Node)\n//       ) {\n//         closeFloatingPanel()\n//       }\n//     }\n//     document.addEventListener(\"mousedown\", handleClickOutside)\n//     return () => document.removeEventListener(\"mousedown\", handleClickOutside)\n//   }, [closeFloatingPanel])\n\n//   useEffect(() => {\n//     const handleKeyDown = (event: KeyboardEvent) => {\n//       if (event.key === \"Escape\") closeFloatingPanel()\n//     }\n//     document.addEventListener(\"keydown\", handleKeyDown)\n//     return () => document.removeEventListener(\"keydown\", handleKeyDown)\n//   }, [closeFloatingPanel])\n\n//   const variants = {\n//     hidden: { opacity: 0, scale: 0.9, y: 10 },\n//     visible: { opacity: 1, scale: 1, y: 0 },\n//   }\n\n//   return (\n//     <AnimatePresence>\n//       {isOpen && (\n//         <>\n//           <motion.div\n//             initial={{ backdropFilter: \"blur(0px)\" }}\n//             animate={{ backdropFilter: \"blur(4px)\" }}\n//             exit={{ backdropFilter: \"blur(0px)\" }}\n//             className=\"fixed inset-0 z-40\"\n//           />\n//           <motion.div\n//             ref={contentRef}\n//             layoutId={`floating-panel-${uniqueId}`}\n//             className={cn(\n//               \"fixed z-50 overflow-hidden border border-zinc-950/10 bg-white shadow-lg outline-none dark:border-zinc-50/10 dark:bg-zinc-800\",\n//               className\n//             )}\n//             style={{\n//               borderRadius: 12,\n//               left: triggerRect ? triggerRect.left : \"50%\",\n//               top: triggerRect ? triggerRect.bottom + 8 : \"50%\",\n//               transformOrigin: \"top left\",\n//             }}\n//             initial=\"hidden\"\n//             animate=\"visible\"\n//             exit=\"hidden\"\n//             variants={variants}\n//           >\n//             <FloatingPanelTitle>{title}</FloatingPanelTitle>\n//             {children}\n//           </motion.div>\n//         </>\n//       )}\n//     </AnimatePresence>\n//   )\n// }\n\n// interface FloatingPanelTitleProps {\n//   children: React.ReactNode\n// }\n\n// function FloatingPanelTitle({ children }: FloatingPanelTitleProps) {\n//   const { uniqueId } = useFloatingPanel()\n\n//   return (\n//     <motion.div\n//       layoutId={`floating-panel-label-${uniqueId}`}\n//       className=\"px-4 py-2 font-semibold text-zinc-900 dark:text-zinc-100\"\n//     >\n//       {children}\n//     </motion.div>\n//   )\n// }\n\n// interface FloatingPanelFormProps {\n//   children: React.ReactNode\n//   onSubmit?: (note: string) => void\n//   className?: string\n// }\n\n// export function FloatingPanelForm({\n//   children,\n//   onSubmit,\n//   className,\n// }: FloatingPanelFormProps) {\n//   const { note, closeFloatingPanel } = useFloatingPanel()\n\n//   const handleSubmit = (e: React.FormEvent) => {\n//     e.preventDefault()\n//     onSubmit?.(note)\n//     closeFloatingPanel()\n//   }\n\n//   return (\n//     <form\n//       className={cn(\"flex h-full flex-col\", className)}\n//       onSubmit={handleSubmit}\n//     >\n//       {children}\n//     </form>\n//   )\n// }\n\n// interface FloatingPanelLabelProps {\n//   children: React.ReactNode\n//   htmlFor: string\n//   className?: string\n// }\n\n// export function FloatingPanelLabel({\n//   children,\n//   htmlFor,\n//   className,\n// }: FloatingPanelLabelProps) {\n//   const { note } = useFloatingPanel()\n\n//   return (\n//     <motion.label\n//       htmlFor={htmlFor}\n//       style={{ opacity: note ? 0 : 1 }}\n//       className={cn(\n//         \"block mb-2 text-sm font-medium text-zinc-900 dark:text-zinc-100\",\n//         className\n//       )}\n//     >\n//       {children}\n//     </motion.label>\n//   )\n// }\n\n// interface FloatingPanelTextareaProps {\n//   className?: string\n//   id?: string\n// }\n\n// export function FloatingPanelTextarea({\n//   className,\n//   id,\n// }: FloatingPanelTextareaProps) {\n//   const { note, setNote } = useFloatingPanel()\n\n//   return (\n//     <textarea\n//       id={id}\n//       className={cn(\n//         \"h-full w-full resize-none rounded-md bg-transparent px-4 py-3 text-sm outline-none\",\n//         className\n//       )}\n//       autoFocus\n//       value={note}\n//       onChange={(e) => setNote(e.target.value)}\n//     />\n//   )\n// }\n\n// interface FloatingPanelHeaderProps {\n//   children: React.ReactNode\n//   className?: string\n// }\n\n// export function FloatingPanelHeader({\n//   children,\n//   className,\n// }: FloatingPanelHeaderProps) {\n//   return (\n//     <motion.div\n//       className={cn(\n//         \"px-4 py-2 font-semibold text-zinc-900 dark:text-zinc-100\",\n//         className\n//       )}\n//       initial={{ opacity: 0, y: -10 }}\n//       animate={{ opacity: 1, y: 0 }}\n//       transition={{ delay: 0.1 }}\n//     >\n//       {children}\n//     </motion.div>\n//   )\n// }\n\n// interface FloatingPanelBodyProps {\n//   children: React.ReactNode\n//   className?: string\n// }\n\n// export function FloatingPanelBody({\n//   children,\n//   className,\n// }: FloatingPanelBodyProps) {\n//   return (\n//     <motion.div\n//       className={cn(\"p-4\", className)}\n//       initial={{ opacity: 0, y: 10 }}\n//       animate={{ opacity: 1, y: 0 }}\n//       transition={{ delay: 0.2 }}\n//     >\n//       {children}\n//     </motion.div>\n//   )\n// }\n\n// interface FloatingPanelFooterProps {\n//   children: React.ReactNode\n//   className?: string\n// }\n\n// export function FloatingPanelFooter({\n//   children,\n//   className,\n// }: FloatingPanelFooterProps) {\n//   return (\n//     <motion.div\n//       className={cn(\"flex justify-between px-4 py-3\", className)}\n//       initial={{ opacity: 0, y: 10 }}\n//       animate={{ opacity: 1, y: 0 }}\n//       transition={{ delay: 0.3 }}\n//     >\n//       {children}\n//     </motion.div>\n//   )\n// }\n\n// interface FloatingPanelCloseButtonProps {\n//   className?: string\n// }\n\n// export function FloatingPanelCloseButton({\n//   className,\n// }: FloatingPanelCloseButtonProps) {\n//   const { closeFloatingPanel } = useFloatingPanel()\n\n//   return (\n//     <motion.button\n//       type=\"button\"\n//       className={cn(\"flex items-center\", className)}\n//       onClick={closeFloatingPanel}\n//       aria-label=\"Close floating panel\"\n//       whileHover={{ scale: 1.1 }}\n//       whileTap={{ scale: 0.9 }}\n//     >\n//       <ArrowLeftIcon size={16} className=\"text-zinc-900 dark:text-zinc-100\" />\n//     </motion.button>\n//   )\n// }\n\n// interface FloatingPanelSubmitButtonProps {\n//   className?: string\n// }\n\n// export function FloatingPanelSubmitButton({\n//   className,\n// }: FloatingPanelSubmitButtonProps) {\n//   return (\n//     <motion.button\n//       className={cn(\n//         \"relative ml-1 flex h-8 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 bg-transparent px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98] dark:border-zinc-50/10 dark:text-zinc-50 dark:hover:bg-zinc-800\",\n//         className\n//       )}\n//       type=\"submit\"\n//       aria-label=\"Submit note\"\n//       whileHover={{ scale: 1.05 }}\n//       whileTap={{ scale: 0.95 }}\n//     >\n//       Submit Note\n//     </motion.button>\n//   )\n// }\n\n// interface FloatingPanelButtonProps {\n//   children: React.ReactNode\n//   onClick?: () => void\n//   className?: string\n// }\n\n// export function FloatingPanelButton({\n//   children,\n//   onClick,\n//   className,\n// }: FloatingPanelButtonProps) {\n//   return (\n//     <motion.button\n//       className={cn(\n//         \"flex w-full items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n//         className\n//       )}\n//       onClick={onClick}\n//       whileHover={{ backgroundColor: \"rgba(0, 0, 0, 0.05)\" }}\n//       whileTap={{ scale: 0.98 }}\n//     >\n//       {children}\n//     </motion.button>\n//   )\n// }\n\n// export default {\n//   Root: FloatingPanelRoot,\n//   Trigger: FloatingPanelTrigger,\n//   Content: FloatingPanelContent,\n//   Form: FloatingPanelForm,\n//   Label: FloatingPanelLabel,\n//   Textarea: FloatingPanelTextarea,\n//   Header: FloatingPanelHeader,\n//   Body: FloatingPanelBody,\n//   Footer: FloatingPanelFooter,\n//   CloseButton: FloatingPanelCloseButton,\n//   SubmitButton: FloatingPanelSubmitButton,\n//   Button: FloatingPanelButton,\n// }\n",
      "type": "registry:ui"
    }
  ]
}