{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Sheet",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Button",
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Sheet.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@@directive(\"'use client'\")\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@react.componentWithProps(BaseUi.Dialog.Root.props)\nlet make = (props: BaseUi.Dialog.Root.props<'payload>) =>\n  <BaseUi.Dialog.Root {...props} dataSlot={props.dataSlot->Option.getOr(\"sheet\")} />\n\nmodule Trigger = {\n  @react.componentWithProps(BaseUi.Dialog.Trigger.props)\n  let make = (props: BaseUi.Dialog.Trigger.props<'payload>) =>\n    <BaseUi.Dialog.Trigger {...props} dataSlot={props.dataSlot->Option.getOr(\"sheet-trigger\")} />\n}\n\nmodule Close = {\n  @react.componentWithProps(BaseUi.Dialog.Close.props)\n  let make = (props: BaseUi.Dialog.Close.props) =>\n    <BaseUi.Dialog.Close {...props} dataSlot={props.dataSlot->Option.getOr(\"sheet-close\")} />\n}\n\nmodule Portal = {\n  @react.componentWithProps(BaseUi.Dialog.Portal.props)\n  let make = (props: BaseUi.Dialog.Portal.props) =>\n    <BaseUi.Dialog.Portal {...props} dataSlot={props.dataSlot->Option.getOr(\"sheet-portal\")} />\n}\n\nmodule Overlay = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Dialog.Backdrop\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"sheet-overlay\")}\n      className={cn(\n        \"bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        props.className,\n      )}\n    />\n}\n\nmodule Side = {\n  @unboxed\n  type t =\n    | @as(\"top\") Top\n    | @as(\"right\") Right\n    | @as(\"bottom\") Bottom\n    | @as(\"left\") Left\n}\n\nmodule Content = {\n  type props = {\n    ...BaseUi.Types.BaseUIComponentProps.t,\n    side?: Side.t,\n    showCloseButton?: bool,\n  }\n\n  let toBaseUiProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({side, showCloseButton, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let children = props.children->Option.getOr(React.null)\n    let dataSlot = props.dataSlot->Option.getOr(\"sheet-content\")\n    let side = props.side->Option.getOr(Side.Right)\n    let showCloseButton = props.showCloseButton->Option.getOr(true)\n    <Portal>\n      <Overlay />\n      <BaseUi.Dialog.Popup\n        {...props->toBaseUiProps}\n        dataSlot\n        dataSide={(side :> string)}\n        className={cn(\n          \"bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem]\",\n          props.className,\n        )}\n      >\n        {children}\n        {showCloseButton\n          ? <BaseUi.Dialog.Close\n              dataSlot=\"sheet-close\"\n              render={<Button\n                variant=Ghost size=IconSm className=\"absolute top-3 right-3\" dataSlot=\"sheet-close\"\n              />}\n            >\n              <Icons.X />\n              <span className=\"sr-only\"> {\"Close\"->React.string} </span>\n            </BaseUi.Dialog.Close>\n          : React.null}\n      </BaseUi.Dialog.Popup>\n    </Portal>\n  }\n}\n\nmodule Header = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"sheet-header\")}\n      className={cn(\"gap-0.5 p-4 flex flex-col\", props.className)}\n    />\n}\n\nmodule Footer = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"sheet-footer\")}\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", props.className)}\n    />\n}\n\nmodule Title = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Dialog.Title\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"sheet-title\")}\n      className={cn(\"text-foreground text-base font-medium font-heading\", props.className)}\n    />\n}\n\nmodule Description = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Dialog.Description\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"sheet-description\")}\n      className={cn(\"text-muted-foreground text-sm\", props.className)}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Sheet.res"
    }
  ],
  "type": "registry:ui"
}