{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bubble",
  "title": "Bubble",
  "description": "Chat message bubble with incoming and outgoing styles.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/bubble/bubble.tsx",
      "content": "import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn <div data-slot=\"bubble-group\" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />\n}\n\nconst bubbleVariants = cva(\n\t'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\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t'*: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\t\t\t\tsecondary:\n\t\t\t\t\t'*: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\t\t\t\tmuted:\n\t\t\t\t\t'*: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\t\t\t\ttinted:\n\t\t\t\t\t'*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[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\t\t\t\toutline:\n\t\t\t\t\t'*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[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\t\t\t\tghost:\n\t\t\t\t\t'border-none *: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',\n\t\t\t\tdestructive:\n\t\t\t\t\t'*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t},\n\t},\n)\n\nfunction Bubble({\n\tvariant = 'default',\n\talign = 'start',\n\tclassName,\n\t...props\n}: React.ComponentProps<'div'> &\n\tVariantProps<typeof bubbleVariants> & {\n\t\talign?: 'start' | 'end'\n\t}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"bubble\"\n\t\t\tdata-variant={variant}\n\t\t\tdata-align={align}\n\t\t\tclassName={cn(bubbleVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction BubbleContent({ className, render, ...props }: useRender.ComponentProps<'div'>) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tprops: mergeProps<'div'>(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring',\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: 'bubble-content',\n\t\t},\n\t})\n}\n\nconst bubbleReactionsVariants = cva(\n\t'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0',\n\t{\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: 'top-0 -translate-y-3/4',\n\t\t\t\tbottom: 'bottom-0 translate-y-3/4',\n\t\t\t},\n\t\t\talign: {\n\t\t\t\tstart: 'left-3',\n\t\t\t\tend: 'right-3',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: 'bottom',\n\t\t\talign: 'end',\n\t\t},\n\t},\n)\n\nfunction BubbleReactions({\n\tside = 'bottom',\n\talign = 'end',\n\tclassName,\n\t...props\n}: React.ComponentProps<'div'> & {\n\talign?: 'start' | 'end'\n\tside?: 'top' | 'bottom'\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"bubble-reactions\"\n\t\t\tdata-align={align}\n\t\t\tdata-side={side}\n\t\t\tclassName={cn(bubbleReactionsVariants({ side, align }), className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport { BubbleGroup, Bubble, BubbleContent, BubbleReactions }\n",
      "type": "registry:ui",
      "target": "components/ui/bubble.tsx"
    }
  ],
  "meta": {
    "new": true
  },
  "type": "registry:ui"
}