{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-panels",
  "title": "Motion Panels",
  "description": "Resizable panels animated with Motion. A group, a panel, and a separator that draws the seam it drags.",
  "dependencies": [
    "motion-panels",
    "motion",
    "cn"
  ],
  "files": [
    {
      "path": "registry/motion-panels/motion-panels.tsx",
      "content": "'use client'\n\nimport { cn } from 'cn'\nimport type { SeparatorProps } from 'motion-panels/react'\nimport { Separator } from 'motion-panels/react'\n\nconst SEPARATOR =\n  \"relative flex items-center justify-center outline-hidden after:absolute after:bg-border after:transition-colors after:content-[''] focus-visible:ring-[3px] focus-visible:ring-ring/50 hover:after:bg-muted-foreground aria-[orientation=horizontal]:h-3 aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:h-px aria-[orientation=vertical]:w-3 aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:w-px data-crossing:after:bg-muted-foreground data-resizing:after:bg-ring [&[aria-orientation=horizontal]>div]:rotate-90\"\n\nconst HANDLE =\n  'z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border'\n\nconst Grip = () => (\n  <svg\n    aria-hidden=\"true\"\n    className=\"text-muted-foreground size-2.5\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 10 10\"\n  >\n    <circle cx=\"4\" cy=\"2\" r=\"0.75\" />\n    <circle cx=\"4\" cy=\"5\" r=\"0.75\" />\n    <circle cx=\"4\" cy=\"8\" r=\"0.75\" />\n    <circle cx=\"7\" cy=\"2\" r=\"0.75\" />\n    <circle cx=\"7\" cy=\"5\" r=\"0.75\" />\n    <circle cx=\"7\" cy=\"8\" r=\"0.75\" />\n  </svg>\n)\n\nfunction PanelSeparator({\n  className,\n  withHandle,\n  ...props\n}: Omit<SeparatorProps, 'children'> & { withHandle?: boolean }) {\n  return (\n    <Separator\n      data-slot=\"panel-separator\"\n      className={cn(SEPARATOR, className)}\n      {...props}\n    >\n      {withHandle ? (\n        <div className={HANDLE}>\n          <Grip />\n        </div>\n      ) : null}\n    </Separator>\n  )\n}\n\nexport { Group as PanelGroup, Panel } from 'motion-panels/react'\nexport { PanelSeparator }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}