{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Resizable",
  "dependencies": [
    "cn",
    "react-resizable-panels",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Resizable.res",
      "content": "@@directive(\"'use client'\")\n\nopen BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule ResizablePrimitive = {\n  module Layout = {\n    type t = {\n      id: int,\n    }\n  }\n  module ResizeTargetMinimumSize = {\n    type t = {\n      coarse: float,\n      fine: float,\n    }\n  }\n  module Group = {\n    type props = {\n      ...DomProps.t,\n      defaultLayout?: Layout.t,\n      disableCursor?: bool,\n      elementRef?: ReactDOM.domRef,\n      onLayoutChange?: Layout.t => unit,\n      onLayoutChanged?: Layout.t => unit,\n      resizeTargetMinimumSize?: ResizeTargetMinimumSize.t,\n    }\n    @module(\"react-resizable-panels\")\n    external make: React.component<props> = \"Group\"\n  }\n\n  module Panel = {\n    type props = {\n      ...DomProps.t,\n      collapsedSize?: string,\n      collapsible?: bool,\n      defaultSize?: string,\n      elementRef?: ReactDOM.domRef,\n      groupResizeBehavior?: [#\"preserve-relative-size\" | #\"preserve-pixel-size\"],\n      minSize?: string,\n      maxSize?: string,\n      onResize?: (~panelSize: string, ~id: string=?, ~prevPanelSize: string=?) => unit,\n    }\n    @module(\"react-resizable-panels\")\n    external make: React.component<props> = \"Panel\"\n  }\n\n  module Separator = {\n    type props = {\n      ...DomProps.t,\n      elementRef?: ReactDOM.domRef,\n    }\n    @module(\"react-resizable-panels\")\n    external make: React.component<props> = \"Separator\"\n  }\n}\n\n@react.componentWithProps(ResizablePrimitive.Group.props)\nlet make = (props: ResizablePrimitive.Group.props) => {\n  let dataSlot = props.dataSlot->Option.getOr(\"resizable-panel-group\")\n  <ResizablePrimitive.Group\n    {...props}\n    dataSlot\n    className={cn(\" flex h-full w-full aria-[orientation=vertical]:flex-col\", props.className)}\n  />\n}\nmodule Panel = {\n  @react.componentWithProps(ResizablePrimitive.Panel.props)\n  let make = (props: ResizablePrimitive.Panel.props) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"resizable-panel\")\n    <ResizablePrimitive.Panel {...props} dataSlot />\n  }\n}\n\nmodule Handle = {\n  type props = {\n    ...ResizablePrimitive.Separator.props,\n    withHandle?: bool,\n  }\n\n  let toBaseUiProps: props => ResizablePrimitive.Separator.props = %raw(`({withHandle, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let withHandle = props.withHandle->Option.getOr(false)\n    <ResizablePrimitive.Separator\n      {...props->toBaseUiProps}\n      dataSlot={props.dataSlot->Option.getOr(\"resizable-handle\")}\n      className={cn(\n        \" relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        props.className,\n      )}\n    >\n      {withHandle\n        ? <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n        : React.null}\n    </ResizablePrimitive.Separator>\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Resizable.res"
    }
  ],
  "type": "registry:ui"
}