50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tf79,"use client"; import { forwardRef, type HTMLAttributes } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { useShape } from "@/lib/shape-context"; import { useSizeVariant } from "@/lib/size-context"; const badgeColors = { gray: "#a3a3a3", red: "#ef4444", orange: "#f97316", amber: "#f59e0b", yellow: "#eab308", lime: "#84cc16", green: "#22c55e", emerald: "#10b981", teal: "#14b8a6", cyan: "#06b6d4", blue: "#3b82f6", indigo: "#6366f1", violet: "#8b5cf6", purple: "#a855f7", fuchsia: "#d946ef", pink: "#ec4899", rose: "#f43f5e", } as const; type BadgeColor = keyof typeof badgeColors; const badgeVariants = cva( "inline-flex items-center font-medium whitespace-nowrap", { variants: { variant: { solid: "", dot: "border border-border text-foreground", }, // The two-step size ladder shared by every control — see /docs/sizes. size: { default: "h-6 px-2.5 text-[12px] gap-1.5", compact: "h-5 px-2 text-[11px] gap-1", }, }, defaultVariants: { variant: "solid", size: "default", }, } ); type BadgeSizeCanonical = "default" | "compact"; /** Public size values: the canonical two-size scale plus the pre-sizes-system * aliases, kept so existing call sites keep compiling. Aliases resolve onto * the canonical ladder (sm → compact; md/lg → default). */ type BadgeSize = BadgeSizeCanonical | "sm" | "md" | "lg"; const legacySizeAliases: Partial> = { sm: "compact", md: "default", lg: "default", }; interface BadgeProps extends Omit, "color">, Omit, "size"> { color?: BadgeColor; /** Omitted, the badge follows the surrounding SizeProvider. Legacy * sm/md/lg values still resolve. */ size?: BadgeSize; } const Badge = forwardRef( ( { className, variant = "solid", size: sizeProp, color = "gray", children, style, ...props }, ref ) => { const shape = useShape(); // Resolve the size: explicit prop (legacy aliases mapped onto the // canonical ladder) > surrounding SizeProvider > default. const contextSize = useSizeVariant(); const size: BadgeSizeCanonical = sizeProp ? legacySizeAliases[sizeProp] ?? (sizeProp as BadgeSizeCanonical) : contextSize === "compact" ? "compact" : "default"; const colorValue = badgeColors[color]; const isSolid = variant === "solid"; const dotSize = size === "compact" ? 6 : 7; const colorStyle = isSolid ? color === "gray" ? { backgroundColor: "var(--accent)", color: "var(--foreground)" } : { color: "var(--foreground)", backgroundColor: `color-mix(in srgb, ${colorValue} 15%, var(--background))`, } : {}; const dotColor = color === "gray" ? "var(--muted-foreground)" : colorValue; return ( {!isSolid && ( )} {/* text-box needs a block container — the badge root is a flex container, so the label gets its own span. Height is fixed (h-*), so trimming only recenters the letterforms. */} {children} ); } ); Badge.displayName = "Badge"; export { Badge, badgeVariants, badgeColors }; export type { BadgeProps, BadgeColor, BadgeSize }; 4f:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@fluid","registryDependencies":["utils","https://www.fluidfunctionalism.com/r/shape-context.json","https://www.fluidfunctionalism.com/r/size-context.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/badge.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]