{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "bubble",
"type": "registry:block",
"title": "Bubble",
"description": "Bubble with Crafter styling. Explore the live example and use the source in your project.",
"dependencies": [
"@base-ui/react@^1.8.0",
"class-variance-authority@^0.7.1",
"cn@^0.2.6"
],
"files": [
{
"path": "components/ui/bubble.tsx",
"type": "registry:ui",
"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 { cn } from \"cn\";\nimport type * as React from \"react\";\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return ();\n}\nconst bubbleVariants = cva(\"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 variants: {\n 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)] *: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 outline: \"*: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 ghost: \"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 destructive: \"*: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 },\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\nfunction Bubble({ variant = \"default\", align = \"start\", className, ...props }: React.ComponentProps<\"div\"> & VariantProps & {\n align?: \"start\" | \"end\";\n}) {\n return ();\n}\nfunction BubbleContent({ className, render, ...props }: useRender.ComponentProps<\"div\">) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">({\n className: cn(\"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/50\", className),\n }, props),\n render,\n state: {\n slot: \"bubble-content\",\n },\n });\n}\nconst bubbleReactionsVariants = cva(\"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 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});\nfunction BubbleReactions({ side = \"bottom\", align = \"end\", className, ...props }: React.ComponentProps<\"div\"> & {\n align?: \"start\" | \"end\";\n side?: \"top\" | \"bottom\";\n}) {\n return ();\n}\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions };\n"
}
],
"cssVars": {
"light": {
"background": "#ffffff",
"foreground": "#141414",
"card": "#ffffff",
"card-foreground": "#141414",
"popover": "#ffffff",
"popover-foreground": "#141414",
"secondary": "#f5f5f5",
"secondary-foreground": "#141414",
"muted": "#f5f5f5",
"muted-foreground": "#6b6b6b",
"accent": "#f0f0f0",
"accent-foreground": "#141414",
"border": "#e6e6e6",
"input": "#cccccc",
"destructive": "#b91c1c",
"syntax-text": "#242424",
"syntax-keyword": "#754399",
"syntax-string": "#326348",
"syntax-function": "#315d89",
"syntax-number": "#86551f",
"syntax-comment": "#6b6b6b",
"syntax-punctuation": "#616161",
"syntax-type": "#7c464c",
"syntax-background": "#f8f8f8",
"sidebar": "#f5f5f5",
"sidebar-foreground": "#141414",
"sidebar-primary": "#141414",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#f0f0f0",
"sidebar-accent-foreground": "#141414",
"sidebar-border": "#e6e6e6",
"sidebar-ring": "#141414",
"chart-1": "#141414",
"chart-2": "#525252",
"chart-3": "#737373",
"chart-4": "#a3a3a3",
"chart-5": "#d4d4d4",
"primary": "#141414",
"primary-foreground": "#ffffff",
"ring": "#141414",
"radius": "0rem",
"font-sans": "ui-sans-serif, system-ui, sans-serif",
"control-height": "2rem"
},
"dark": {
"background": "#141414",
"foreground": "#fafafa",
"card": "#1c1c1c",
"card-foreground": "#fafafa",
"popover": "#1c1c1c",
"popover-foreground": "#fafafa",
"secondary": "#262626",
"secondary-foreground": "#fafafa",
"muted": "#262626",
"muted-foreground": "#a3a3a3",
"accent": "#303030",
"accent-foreground": "#fafafa",
"border": "#404040",
"input": "#404040",
"destructive": "#ff9d9d",
"syntax-text": "#ededed",
"syntax-keyword": "#c6a3df",
"syntax-string": "#98c4a4",
"syntax-function": "#9cbedf",
"syntax-number": "#d7b27d",
"syntax-comment": "#a3a3a3",
"syntax-punctuation": "#b0b0b0",
"syntax-type": "#dda2aa",
"syntax-background": "#1b1b1b",
"sidebar": "#262626",
"sidebar-foreground": "#fafafa",
"sidebar-primary": "#fafafa",
"sidebar-primary-foreground": "#141414",
"sidebar-accent": "#303030",
"sidebar-accent-foreground": "#fafafa",
"sidebar-border": "#404040",
"sidebar-ring": "#fafafa",
"chart-1": "#fafafa",
"chart-2": "#d4d4d4",
"chart-3": "#a3a3a3",
"chart-4": "#737373",
"chart-5": "#525252",
"primary": "#fafafa",
"primary-foreground": "#141414",
"ring": "#fafafa",
"radius": "0rem",
"font-sans": "ui-sans-serif, system-ui, sans-serif",
"control-height": "2rem"
}
}
}