{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ButtonGroup",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Separator"
  ],
  "files": [
    {
      "path": "registry/base/ui/ButtonGroup.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\nopen BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nlet buttonGroupVariants = (~orientation=BaseUi.Types.Orientation.Horizontal) => {\n  let base = \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\"\n  let orientationClass = switch orientation {\n  | Horizontal => \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! *:data-slot:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\"\n  | Vertical => \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col *:data-slot:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\"\n  }\n  cn(base, Some(orientationClass))\n}\n\nlet toDomProps: BaseUi.Types.DomProps.t => BaseUi.Types.DomProps.t = %raw(`({orientation, ...props}) => props`)\n\n@react.componentWithProps(BaseUi.Types.DomProps.t)\nlet make = ({?role, ?orientation, ?dataSlot, ?className} as props: BaseUi.Types.DomProps.t) => {\n  <div\n    {...props->toDomProps}\n    role={role->Option.getOr(\"group\")}\n    dataOrientation=?{props.dataOrientation->Option.orElse((orientation :> option<string>))}\n    dataSlot={dataSlot->Option.getOr(\"button-group\")}\n    className={cn(buttonGroupVariants(~orientation?), className)}\n  />\n}\n\nmodule Text = {\n  module State = {\n    type t = {\n      slot: string,\n    }\n  }\n  let toDomProps: BaseUi.Types.BaseUIComponentProps.t => BaseUi.Types.DomProps.t = %raw(`({className, render, ...props}) => props`)\n\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) => {\n    let domProps: BaseUi.Types.DomProps.t = {\n      className: cn(\n        \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        props.className,\n      ),\n    }\n    BaseUi.Render.use({\n      defaultTagName: \"div\",\n      render: ?props.render,\n      props: BaseUi.Render.mergeProps(domProps, toDomProps(props)),\n      state: {State.slot: \"button-group-text\"},\n    })\n  }\n}\n\nmodule Separator = {\n  @react.componentWithProps(BaseUIComponentProps.t)\n  let make = (props: BaseUIComponentProps.t) =>\n    <Separator\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"button-group-separator\")}\n      orientation={props.orientation->Option.getOr(Vertical)}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        props.className,\n      )}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/ButtonGroup.res"
    }
  ],
  "type": "registry:ui"
}