4d: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"] 4e: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"] 4f:T1ba1,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { HeartIcon, ThumbsUpIcon, LaughIcon, FlameIcon, PlusIcon, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/ds-button" export const reactionBarVariants = cva( "relative flex items-center justify-center rounded-full transition-all", { variants: { size: { sm: "h-8", md: "h-10", lg: "h-12", }, intent: { default: "bg-muted text-muted-foreground", primary: "bg-primary text-primary-foreground", }, }, defaultVariants: { size: "md", intent: "default", }, } ) export const reactionMenuVariants = cva( "absolute bottom-full mb-2 flex items-center gap-1 rounded-full border bg-background p-1.5 shadow-xl ring-1 ring-black/5", { variants: { size: { sm: "h-10", md: "h-12", lg: "h-14", }, }, defaultVariants: { size: "md", }, } ) export interface ReactionType { id: string label: string icon: React.ReactNode colorClass?: string } const DEFAULT_REACTIONS: ReactionType[] = [ { id: "heart", label: "Love", icon: , colorClass: "text-destructive hover:text-destructive hover:bg-destructive/10", }, { id: "thumbs-up", label: "Like", icon: , colorClass: "text-highlight-sky hover:text-highlight-sky hover:bg-highlight-sky/10", }, { id: "laugh", label: "Haha", icon: , colorClass: "text-warning hover:text-warning hover:bg-warning/10", }, { id: "flame", label: "Fire", icon: , colorClass: "text-warning hover:text-warning hover:bg-warning/10", }, ] export interface ReactionBarProps extends React.HTMLAttributes, VariantProps { reactions?: ReactionType[] value?: string | null onReact?: (id: string | null) => void disabled?: boolean } export const ReactionBar = React.forwardRef( ( { className, size, intent, reactions = DEFAULT_REACTIONS, value = null, onReact, disabled = false, ...props }, ref ) => { const [isHovered, setIsHovered] = React.useState(false) const [isFocused, setIsFocused] = React.useState(false) const isOpen = !disabled && (isHovered || isFocused) const activeReaction = reactions.find((r) => r.id === value) const handleReact = (id: string) => { if (disabled) return if (value === id) { onReact?.(null) } else { onReact?.(id) } setIsFocused(false) setIsHovered(false) } const iconSizeClass = size === "sm" ? "size-3.5" : size === "md" ? "size-4" : "size-5" const menuIconSizeClass = size === "sm" ? "size-4" : size === "md" ? "size-5" : "size-6" return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} ref={ref} {...props} > {isOpen && (

{reactions.map((reaction, index) => (

))}

)}

) } ) ReactionBar.displayName = "ReactionBar" 4c:["$","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":[null,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["button"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/reaction-bar.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-reaction-bar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]