4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T995,import React from 'react'; import { Slot } from '@radix-ui/react-slot'; import { bubbleStyleKeys, getBubbleStyleKeys } from '../lib/core'; import type { BubbleBaseProps, BubbleContentBaseProps, BubbleReactionsBaseProps } from '../lib/core'; import styles from './bubble.module.scss'; export interface BubbleGroupProps extends React.HTMLAttributes {} const BubbleGroup = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); BubbleGroup.displayName = 'BubbleGroup'; export interface BubbleProps extends React.HTMLAttributes, BubbleBaseProps {} const Bubble = React.forwardRef(({ className = '', variant = 'default', align = 'start', children, ...props }, ref) => { const styleKeys = getBubbleStyleKeys(variant); return (

{children}

); }); Bubble.displayName = 'Bubble'; export interface BubbleContentProps extends React.HTMLAttributes, BubbleContentBaseProps {} const BubbleContent = React.forwardRef(({ className = '', asChild = false, children, ...props }, ref) => { const Comp = asChild ? Slot : 'div'; return ( {children} ); }); BubbleContent.displayName = 'BubbleContent'; export interface BubbleReactionsProps extends React.HTMLAttributes, BubbleReactionsBaseProps {} const BubbleReactions = React.forwardRef(({ className = '', side = 'bottom', align = 'end', children, ...props }, ref) => { return (

{children}

); }); BubbleReactions.displayName = 'BubbleReactions'; export { BubbleGroup, Bubble, BubbleContent, BubbleReactions }; export default Bubble; 4e:Tc3a,@use '../../../styles/variables/colors' as *; // 气泡组 .group { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: $spacing-2; } // 气泡根容器 .bubble { position: relative; display: flex; width: fit-content; max-width: 80%; min-width: 0; flex-direction: column; gap: $spacing-1; &[data-align='end'] { align-self: flex-end; .content { align-self: flex-end; } } &[data-variant='ghost'] { max-width: 100%; } &:has(.reactions[data-side='top']) { margin-top: $spacing-3; } &:has(.reactions[data-side='bottom']) { margin-bottom: $spacing-3; } // 变体 &.variantDefault .content { background-color: $primary; color: $primary-foreground; } &.variantSecondary .content { background-color: $secondary; color: $secondary-foreground; } &.variantMuted .content { background-color: $muted; color: $foreground; } &.variantTinted .content { background-color: color-mix(in srgb, $primary 15%, $background); color: $foreground; } &.variantOutline .content { border-color: $border; background-color: $background; color: $foreground; } &.variantGhost .content { border: none; border-radius: 0; background-color: transparent; padding: 0; } &.variantDestructive .content { background-color: color-mix(in srgb, $destructive 10%, transparent); color: $destructive; } // 按钮/链接形态的内容悬停效果 &.variantDefault .content:is(button, a):hover { background-color: color-mix(in srgb, $primary 80%, transparent); } &.variantSecondary .content:is(button, a):hover, &.variantMuted .content:is(button, a):hover, &.variantGhost .content:is(button, a):hover, &.variantOutline .content:is(button, a):hover { background-color: $muted; color: $foreground; } &.variantDestructive .content:is(button, a):hover { background-color: color-mix(in srgb, $destructive 20%, transparent); } } // 气泡内容 .content { display: block; width: fit-content; max-width: 100%; min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: $radius; padding: $spacing-2 $spacing-3; font-size: $text-sm; line-height: $leading-relaxed; overflow-wrap: anywhere; word-break: break-word; &:is(button, a) { text-align: left; transition: background-color $transition-fast, border-color $transition-fast, box-shadow $transition-fast; outline: none; } &:is(button, a):focus-visible { border-color: $ring; box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent); } } // 气泡反应区 (绝对定位于气泡边缘) .reactions { position: absolute; z-index: 10; display: flex; width: fit-content; flex-shrink: 0; align-items: center; justify-content: center; gap: $spacing-1; border-radius: $radius-full; background-color: $muted; padding: 0.125rem $spacing-1_5; font-size: $text-sm; box-shadow: 0 0 0 3px $card; &[data-side='top'] { top: 0; transform: translateY(-75%); } &[data-side='bottom'] { bottom: 0; transform: translateY(75%); } &[data-align='start'] { left: $spacing-3; } &[data-align='end'] { right: $spacing-3; } } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}]]}],["$","$L4b",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"packages/react/src/components/bubble/bubble.tsx","content":"$4d","type":"registry:ui","target":"components/ui/bubble/bubble.tsx"},{"path":"packages/styles/scss/components/bubble.module.scss","content":"$4e","type":"registry:file","target":"components/ui/bubble/bubble.module.scss"},{"path":"packages/react/src/components/bubble/index.ts","content":"export { BubbleGroup, Bubble, BubbleContent, BubbleReactions, type BubbleGroupProps, type BubbleProps, type BubbleContentProps, type BubbleReactionsProps } from './bubble';\n","type":"registry:ui","target":"components/ui/bubble/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]