{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Bubble",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Bubble.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Variant = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"secondary\") Secondary\n    | @as(\"muted\") Muted\n    | @as(\"tinted\") Tinted\n    | @as(\"outline\") Outline\n    | @as(\"ghost\") Ghost\n    | @as(\"destructive\") Destructive\n}\n\nmodule Align = {\n  @unboxed\n  type t =\n    | @as(\"start\") Start\n    | @as(\"end\") End\n}\n\nmodule Side = {\n  @unboxed\n  type t =\n    | @as(\"top\") Top\n    | @as(\"bottom\") Bottom\n}\n\nlet variantClass = (~variant: Variant.t) =>\n  switch variant {\n  | Default => \"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80\"\n  | Secondary => \"*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]\"\n  | Muted => \"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]\"\n  | Tinted => \"*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]\"\n  | Outline => \"*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30\"\n  | Ghost => \"*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none\"\n  | Destructive => \"*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30\"\n  }\n\ntype props = {\n  variant?: Variant.t,\n  align?: Align.t,\n  ...BaseUi.Types.DomProps.t,\n}\nlet domProps: props => BaseUi.Types.DomProps.t = %raw(`({variant, align, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n  let variant = props.variant->Option.getOr(Default)\n  let align = props.align->Option.getOr(Start)\n  <div\n    {...props->domProps}\n    dataSlot={props.dataSlot->Option.getOr(\"bubble\")}\n    dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n    dataAlign={props.dataAlign->Option.getOr((align :> string))}\n    className={cn(\n      `gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end group/bubble relative flex w-fit min-w-0 flex-col ${variantClass(\n          ~variant,\n        )}`,\n      props.className,\n    )}\n  />\n}\n\nmodule Group = {\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(\"bubble-group\")}\n      className={cn(\"gap-2 flex min-w-0 flex-col\", props.className)}\n    />\n}\n\nmodule Content = {\n  type renderState = {slot: string}\n  let toDomProps: BaseUi.Types.BaseUIComponentProps.t => BaseUi.Types.DomProps.t = %raw(`({className, render, ...props}) => props`)\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    BaseUi.Render.use({\n      defaultTagName: \"div\",\n      props: BaseUi.Render.mergeProps(\n        {\n          className: cn(\n            \"rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50 group-data-[align=end]/bubble:self-end w-fit max-w-full min-w-0 overflow-hidden wrap-break-word [button]:text-left [button,a]:transition-colors\",\n            props.className,\n          ),\n        },\n        toDomProps(props),\n      ),\n      render: ?props.render,\n      state: {slot: \"bubble-content\"},\n    })\n}\n\nmodule Reactions = {\n  let sideClass = (~side: Side.t) =>\n    switch side {\n    | Top => \"top-0 -translate-y-3/4\"\n    | Bottom => \"bottom-0 translate-y-3/4\"\n    }\n\n  let alignClass = (~align: Align.t) =>\n    switch align {\n    | Start => \"left-3\"\n    | End => \"right-3\"\n    }\n\n  type props = {side?: Side.t, align?: Align.t, ...BaseUi.Types.DomProps.t}\n  let domProps: props => BaseUi.Types.DomProps.t = %raw(`({side, align, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let side = props.side->Option.getOr(Bottom)\n    let align = props.align->Option.getOr(End)\n    <div\n      {...props->domProps}\n      dataSlot={props.dataSlot->Option.getOr(\"bubble-reactions\")}\n      dataSide={props.dataSide->Option.getOr((side :> string))}\n      dataAlign={props.dataAlign->Option.getOr((align :> string))}\n      className={cn(\n        `rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm absolute z-10 flex w-fit items-center justify-center ${sideClass(\n            ~side,\n          )} ${alignClass(~align)}`,\n        props.className,\n      )}\n    />\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Bubble.res"
    }
  ],
  "type": "registry:ui"
}