{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bubble",
  "title": "Bubble",
  "description": "Message bubbles as in Messages: blue for what you send, grey for what you receive.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/bubble.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\n// Message bubbles as in Messages: blue for what you send, grey for what\n// you receive, tinted, outlined or plain.\nconst bubbleVariants = cva(\n  \"group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"*:data-[slot=bubble-content]:bg-mac-blue *:data-[slot=bubble-content]:text-white [&>[data-slot=bubble-content]:is(button,a):hover]:brightness-110\",\n        secondary:\n          \"*:data-[slot=bubble-content]:bg-[#e9e9eb] *:data-[slot=bubble-content]:text-mac-label dark:*:data-[slot=bubble-content]:bg-[#3b3b3d] [&>[data-slot=bubble-content]:is(button,a):hover]:brightness-95\",\n        muted:\n          \"*:data-[slot=bubble-content]:bg-mac-fill-secondary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-mac-fill-primary\",\n        tinted:\n          \"*:data-[slot=bubble-content]:bg-mac-accent/15 *:data-[slot=bubble-content]:text-mac-label [&>[data-slot=bubble-content]:is(button,a):hover]:bg-mac-accent/22\",\n        outline:\n          \"*:data-[slot=bubble-content]:bg-mac-window *:data-[slot=bubble-content]:shadow-[inset_0_0_0_1px_var(--mac-grid)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-mac-fill-tertiary\",\n        ghost:\n          \"*: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-mac-fill-tertiary\",\n        destructive:\n          \"*:data-[slot=bubble-content]:bg-mac-red/10 *:data-[slot=bubble-content]:text-mac-red [&>[data-slot=bubble-content]:is(button,a):hover]:bg-mac-red/20\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  }\n)\n\nfunction Bubble({\n  variant = \"default\",\n  align = \"start\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: \"start\" | \"end\"\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"w-fit max-w-full min-w-0 overflow-hidden rounded-[18px] px-3 py-1.5 text-mac-body leading-[17px] wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-[filter,background-color] [button,a]:outline-none [button,a]:focus-visible:mac-focus-ring\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"bubble-content\",\n    },\n  })\n}\n\nconst bubbleReactionsVariants = cva(\n  \"absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-mac-window px-1.5 py-0.5 text-mac-body ring-2 ring-mac-window shadow-[0_1px_2px_rgb(0_0_0/0.15)] has-[button]:p-0\",\n  {\n    variants: {\n      side: {\n        top: \"top-0 -translate-y-3/4\",\n        bottom: \"bottom-0 translate-y-3/4\",\n      },\n      align: {\n        start: \"left-3\",\n        end: \"right-3\",\n      },\n    },\n    defaultVariants: {\n      side: \"bottom\",\n      align: \"end\",\n    },\n  }\n)\n\nfunction BubbleReactions({\n  side = \"bottom\",\n  align = \"end\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\"\n  side?: \"top\" | \"bottom\"\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { BubbleGroup, Bubble, BubbleContent, BubbleReactions }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}