{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable",
  "title": "Resizable",
  "description": "Panels glide to a new size on a spring, and the handle's grip stretches while you drag.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/resizable.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/resizable`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours.\n   - Panels glide to a new size on a spring after a key step, a collapse or a change from the\n     controller. A drag writes sizes on every frame, so nothing eases then.\n   - The handle's `::after` is its active line: it grows out from the middle on hover and drag.\n     Give it a colour and thickness with `after:` classes.\n   - `ResizableGrip` is extra: a small key for the middle of the handle whose surface (its\n     `::before`) stretches along the line while the handle is hovered, and further while dragged. */\n\nimport {\n  ResizableHandle as ResizableHandlePart,\n  ResizablePanel as ResizablePanelPart,\n} from \"@ui-sdk/react/resizable\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/resizable\"\n\nfunction ResizablePanel({ className, ...props }: React.ComponentProps<typeof ResizablePanelPart>) {\n  return (\n    <ResizablePanelPart\n      className={cn(\n        \"transition-[flex-basis,flex-grow] duration-[calc(460ms*var(--kf-speed,1))] ease-spring\",\n        \"in-data-dragging:transition-none motion-reduce:transition-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizableHandle({ className, ...props }: React.ComponentProps<typeof ResizableHandlePart>) {\n  return (\n    <ResizableHandlePart\n      className={cn(\n        \"group/kf-handle\",\n        \"after:pointer-events-none after:opacity-0 after:[scale:var(--kf-line-x,1)_var(--kf-line-y,1)]\",\n        \"data-[orientation=horizontal]:[--kf-line-y:0] data-[orientation=vertical]:[--kf-line-x:0]\",\n        \"data-hovering:after:opacity-100 data-dragging:after:opacity-100 focus-visible:after:opacity-100\",\n        \"data-[orientation=horizontal]:data-hovering:[--kf-line-y:1] data-[orientation=horizontal]:data-dragging:[--kf-line-y:1] data-[orientation=horizontal]:focus-visible:[--kf-line-y:1]\",\n        \"data-[orientation=vertical]:data-hovering:[--kf-line-x:1] data-[orientation=vertical]:data-dragging:[--kf-line-x:1] data-[orientation=vertical]:focus-visible:[--kf-line-x:1]\",\n        \"after:[transition:scale_calc(520ms*var(--kf-speed,1))_var(--ease-spring),opacity_calc(160ms*var(--kf-speed,1))_var(--ease-house)]\",\n        \"not-data-hovering:not-data-dragging:after:[transition:scale_calc(260ms*var(--kf-speed,1))_var(--ease-house),opacity_calc(260ms*var(--kf-speed,1))_var(--ease-house)]\",\n        \"data-disabled:after:hidden motion-reduce:after:[transition:none]!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Put it inside a ResizableHandle. Its children (the dots) stay still; the surface behind them stretches. */\nfunction ResizableGrip({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"resizable-grip\"\n      aria-hidden\n      className={cn(\n        \"relative isolate before:absolute before:inset-0 before:-z-10\",\n        \"before:[transition:top_calc(420ms*var(--kf-speed,1))_var(--ease-spring),bottom_calc(420ms*var(--kf-speed,1))_var(--ease-spring),left_calc(420ms*var(--kf-speed,1))_var(--ease-spring),right_calc(420ms*var(--kf-speed,1))_var(--ease-spring)]\",\n        \"group-data-[orientation=horizontal]/kf-handle:group-data-hovering/kf-handle:group-not-data-dragging/kf-handle:before:-inset-y-1\",\n        \"group-data-[orientation=horizontal]/kf-handle:group-data-dragging/kf-handle:before:-inset-y-3\",\n        \"group-data-[orientation=vertical]/kf-handle:group-data-hovering/kf-handle:group-not-data-dragging/kf-handle:before:-inset-x-1\",\n        \"group-data-[orientation=vertical]/kf-handle:group-data-dragging/kf-handle:before:-inset-x-3\",\n        \"motion-reduce:before:[transition:none]!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { ResizableGrip, ResizableHandle, ResizablePanel }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/resizable.tsx"
    },
    {
      "path": "registry/components/keyframery/resizable.tsx",
      "content": "\"use client\"\n\n/* Styled resizable: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Resizable as ResizableRoot,\n  ResizableGrip,\n  ResizableHandle as ResizableHandlePart,\n  ResizablePanel as ResizablePanelPart,\n} from \"@/components/keyframery/primitives/resizable\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Resizable({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizableRoot>) {\n  return <ResizableRoot className={cn(\"size-full\", className)} {...props} />\n}\n\nfunction ResizablePanel({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePanelPart>) {\n  return (\n    <ResizablePanelPart\n      className={cn(\"overflow-hidden\", className)}\n      {...props}\n    />\n  )\n}\n\n/* A hairline between two panels. Under the pointer, while dragged or focused a line in the\n   ring colour grows out of its middle. The grip is a small key that stretches along the line\n   while you drag; pass `children` to replace it, or `null` to leave the line bare. */\nfunction ResizableHandle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ResizableHandlePart>) {\n  return (\n    <ResizableHandlePart\n      className={cn(\n        \"group/handle relative z-10 flex items-center justify-center bg-border outline-none\",\n        \"data-[orientation=horizontal]:w-px data-[orientation=vertical]:h-px\",\n        /* The active line, in the ring colour. The primitive grows it from the middle. */\n        \"after:absolute after:rounded-full after:bg-ring\",\n        \"data-[orientation=horizontal]:after:inset-y-0 data-[orientation=horizontal]:after:left-1/2 data-[orientation=horizontal]:after:w-[3px] data-[orientation=horizontal]:after:-translate-x-1/2\",\n        \"data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:top-1/2 data-[orientation=vertical]:after:h-[3px] data-[orientation=vertical]:after:-translate-y-1/2\",\n        className,\n      )}\n      {...props}\n    >\n      {children === undefined ? (\n        <ResizableGrip\n          className={cn(\n            \"z-10 grid shrink-0 place-items-center text-muted-foreground\",\n            \"group-data-[orientation=horizontal]/handle:h-6 group-data-[orientation=horizontal]/handle:w-3\",\n            \"group-data-[orientation=vertical]/handle:h-3 group-data-[orientation=vertical]/handle:w-6\",\n            \"transition-[color] duration-[calc(150ms*var(--kf-speed,1))] motion-reduce:transition-none!\",\n            \"group-data-dragging/handle:text-foreground group-data-hovering/handle:text-foreground\",\n            /* The key's surface: the primitive stretches it along the line. */\n            \"before:rounded-[5px] before:bg-background\",\n            \"before:shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_1px_1px_rgb(0_0_0/0.05),0_3px_6px_-2px_rgb(0_0_0/0.1)]\",\n            \"dark:before:bg-accent dark:before:shadow-[0_0_0_1px_rgb(255_255_255/0.07),inset_0_1px_0_rgb(255_255_255/0.08),0_2px_6px_-1px_rgb(0_0_0/0.6)]\",\n            \"group-data-dragging/handle:before:shadow-[0_0_0_1px_var(--ring),0_1px_1px_rgb(0_0_0/0.04),0_2px_4px_-1px_rgb(0_0_0/0.1)]\",\n            \"dark:group-data-dragging/handle:before:shadow-[0_0_0_1px_var(--ring),inset_0_1px_0_rgb(255_255_255/0.08),0_2px_6px_-1px_rgb(0_0_0/0.6)]\",\n            \"group-focus-visible/handle:ring-2 group-focus-visible/handle:ring-ring group-focus-visible/handle:ring-offset-2 group-focus-visible/handle:ring-offset-background\",\n            \"group-data-disabled/handle:hidden\",\n          )}\n        >\n          <svg\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden\n            className=\"size-3 group-data-[orientation=vertical]/handle:rotate-90\"\n          >\n            <path d=\"M6 4h.01M6 8h.01M6 12h.01M10 4h.01M10 8h.01M10 12h.01\" />\n          </svg>\n        </ResizableGrip>\n      ) : (\n        children\n      )}\n    </ResizableHandlePart>\n  )\n}\n\nexport { createResizableController } from \"@/components/keyframery/primitives/resizable\"\nexport { Resizable, ResizableHandle, ResizablePanel }\n",
      "type": "registry:component",
      "target": "components/keyframery/resizable.tsx"
    }
  ],
  "type": "registry:component"
}