{"version":3,"file":"Bubble.cjs","names":[],"sources":["../src/components/ui/bubble.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\nimport { Slot as SlotPrimitive } from 'radix-ui';\r\nimport type * as React from 'react';\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot='bubble-group'\r\n      className={cn('flex min-w-0 flex-col gap-2', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nconst bubbleVariants = cva(\r\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',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        primary:\r\n          '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary-hover',\r\n        secondary:\r\n          '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-secondary-hover',\r\n        tertiary:\r\n          '*:data-[slot=bubble-content]:bg-tertiary *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-tertiary-hover',\r\n        quaternary:\r\n          '*:data-[slot=bubble-content]:bg-quaternary *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-quaternary-hover',\r\n        success:\r\n          '*:data-[slot=bubble-content]:bg-success *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-success-hover',\r\n        warning:\r\n          '*:data-[slot=bubble-content]:bg-warning *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-warning-hover',\r\n        info: '*:data-[slot=bubble-content]:bg-info *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-info-hover',\r\n        outline:\r\n          '*:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:border *:data-[slot=bubble-content]:border-stroke *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:border-stroke-hover',\r\n        error:\r\n          '*:data-[slot=bubble-content]:bg-error *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-error-hover',\r\n        surface:\r\n          '*:data-[slot=bubble-content]:bg-surface *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-hover',\r\n        'surface-2xs':\r\n          '*:data-[slot=bubble-content]:bg-surface-2xs *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-xs',\r\n        'surface-xs':\r\n          '*:data-[slot=bubble-content]:bg-surface-xs *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-sm',\r\n        'surface-sm':\r\n          '*:data-[slot=bubble-content]:bg-surface-sm *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-md',\r\n        'surface-md':\r\n          '*:data-[slot=bubble-content]:bg-surface-md *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-lg',\r\n        'surface-lg':\r\n          '*:data-[slot=bubble-content]:bg-surface-lg *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-xl',\r\n        'surface-xl':\r\n          '*:data-[slot=bubble-content]:bg-surface-xl *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-2xl',\r\n        'surface-2xl':\r\n          '*:data-[slot=bubble-content]:bg-surface-2xl *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-3xl',\r\n        'surface-3xl':\r\n          '*:data-[slot=bubble-content]:bg-surface-3xl *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-4xl',\r\n        'surface-4xl':\r\n          '*:data-[slot=bubble-content]:bg-surface-4xl *:data-[slot=bubble-content]:text-content-reverse',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'primary',\r\n    },\r\n  },\r\n);\r\nfunction Bubble({\r\n  variant,\r\n  align = 'start',\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<'div'> &\r\n  VariantProps<typeof bubbleVariants> & {\r\n    align?: 'start' | 'end';\r\n  }) {\r\n  return (\r\n    <div\r\n      data-slot='bubble'\r\n      data-variant={variant}\r\n      data-align={align}\r\n      className={cn(bubbleVariants({ variant }), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nfunction BubbleContent({\r\n  asChild = false,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<'div'> & {\r\n  asChild?: boolean;\r\n}) {\r\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\r\n  return (\r\n    <Comp\r\n      data-slot='bubble-content'\r\n      className={cn(\r\n        'wrap-break-word w-fit min-w-0 max-w-full overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-lg group-data-[align=end]/bubble:self-end [button,a]:outline-none [button,a]:transition-colors [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/30 [button]:text-left',\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nconst bubbleReactionsVariants = cva(\r\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-surface border border-stroke px-1.5 py-0.5 text-sm has-[button]:p-0',\r\n  {\r\n    variants: {\r\n      side: {\r\n        top: 'top-0 -translate-y-3/4',\r\n        bottom: 'bottom-0 translate-y-3/4',\r\n      },\r\n      align: {\r\n        start: 'left-3',\r\n        end: 'right-3',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      side: 'bottom',\r\n      align: 'end',\r\n    },\r\n  },\r\n);\r\nfunction BubbleReactions({\r\n  side = 'bottom',\r\n  align = 'end',\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<'div'> & {\r\n  align?: 'start' | 'end';\r\n  side?: 'top' | 'bottom';\r\n}) {\r\n  return (\r\n    <div\r\n      data-slot='bubble-reactions'\r\n      data-align={align}\r\n      data-side={side}\r\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions };\r\n"],"mappings":"gNAKA,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,eACV,UAAW,EAAA,EAAG,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CACA,IAAM,EAAiB,EAAA,EACrB,wKACA,CACE,SAAU,CACR,QAAS,CACP,QACE,+JACF,UACE,mKACF,SACE,iKACF,WACE,qKACF,QACE,+JACF,QACE,+JACF,KAAM,yJACN,QACE,qPACF,MACE,2JACF,QACE,+JACF,cACE,gKACF,aACE,+JACF,aACE,+JACF,aACE,+JACF,aACE,+JACF,aACE,gKACF,cACE,iKACF,cACE,iKACF,cACE,+FACJ,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CACF,EACA,SAAS,EAAO,CACd,UACA,QAAQ,QACR,YACA,GAAG,GAIA,CACH,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,SACV,eAAc,EACd,aAAY,EACZ,UAAW,EAAA,EAAG,EAAe,CAAE,SAAQ,CAAC,EAAG,CAAS,EACpD,GAAI,CACL,CAAA,CAEL,CACA,SAAS,EAAc,CACrB,UAAU,GACV,YACA,GAAG,GAGF,CAED,OACE,EAAA,EAAA,IAAA,CAFW,EAAA,EAAA,EAA+B,MAE1C,CACE,YAAU,iBACV,UAAW,EAAA,EACT,0VACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CACA,IAAM,EAA0B,EAAA,EAC9B,0JACA,CACE,SAAU,CACR,KAAM,CACJ,IAAK,yBACL,OAAQ,0BACV,EACA,MAAO,CACL,MAAO,SACP,IAAK,SACP,CACF,EACA,gBAAiB,CACf,KAAM,SACN,MAAO,KACT,CACF,CACF,EACA,SAAS,EAAgB,CACvB,OAAO,SACP,QAAQ,MACR,YACA,GAAG,GAIF,CACD,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,mBACV,aAAY,EACZ,YAAW,EACX,UAAW,EAAA,EAAG,EAAwB,CAAE,OAAM,OAAM,CAAC,EAAG,CAAS,EACjE,GAAI,CACL,CAAA,CAEL"}