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:T37f7,"use client" import * as React from "react" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { IconX } from "@tabler/icons-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" import { easeOut, easeSpring } from "@/lib/motion" import { NumberFlow } from "@/components/ui/number-flow" const badgeVariants = cva( "group/badge relative inline-flex h-(--badge-height) w-fit max-w-full min-w-0 shrink-0 items-center justify-center gap-1 overflow-hidden rounded-(--badge-radius) align-middle leading-none font-medium whitespace-nowrap inset-ring-(length:--hairline) inset-ring-transparent transition-[background-color,border-color,color,box-shadow,scale] duration-150 ease-out-quint outline-none select-none [--badge-inset:3px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-current after:opacity-0 after:transition-opacity after:duration-150 focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:inset-ring-ring focus-visible:outline-hidden has-data-[slot=badge-close]:overflow-visible has-[>[data-slot=badge-close]]:pe-(--badge-inset) aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:inset-ring-destructive dark:aria-invalid:ring-destructive/40 forced-colors:border [&:is(a,button)]:cursor-pointer [&:is(a,button)]:hover:after:opacity-8 motion-safe:[&:is(a,button)]:active:scale-[0.97] [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-(--badge-accent) [&>svg:not([class*='size-'])]:size-3", { variants: { variant: { default: "[--badge-accent:var(--color-muted-foreground)]", success: "[--badge-accent:var(--color-success)]", info: "[--badge-accent:var(--color-info)]", warning: "[--badge-accent:var(--color-warning)]", destructive: "[--badge-accent:var(--color-destructive)]", }, appearance: { solid: "[--badge-accent:currentColor]", outline: "bg-background text-foreground inset-ring-border", }, size: { sm: "px-1.5 text-[0.6875rem] [--badge-height:1.125rem] [--badge-radius:min(var(--radius-sm),5px)] has-data-[icon=inline-end]:pe-1 has-data-[icon=inline-start]:ps-1 [&>svg:not([class*='size-'])]:size-2.5", default: "px-2 text-xs [--badge-height:1.25rem] [--badge-radius:min(var(--radius-sm),6px)] has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5", lg: "gap-1.5 px-2.5 text-sm [--badge-height:1.5rem] [--badge-inset:4px] [--badge-radius:min(var(--radius-md),7px)] has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&>svg:not([class*='size-'])]:size-3.5", }, }, compoundVariants: [ { appearance: "solid", variant: "default", className: "bg-primary text-primary-foreground", }, { appearance: "solid", variant: "success", className: "bg-success text-success-foreground", }, { appearance: "solid", variant: "info", className: "bg-info text-info-foreground", }, { appearance: "solid", variant: "warning", className: "bg-warning text-warning-foreground", }, { appearance: "solid", variant: "destructive", className: "bg-destructive text-destructive-foreground", }, ], defaultVariants: { variant: "default", appearance: "outline", size: "default", }, } ) type BadgeVariant = NonNullable["variant"]> type BadgeAppearance = NonNullable< VariantProps["appearance"] > type BadgeSize = NonNullable["size"]> const BadgeContext = React.createContext<{ close: () => void labelId: string | undefined } | null>(null) function useBadgeContext(part: string) { const context = React.useContext(BadgeContext) if (!context) { throw new Error(`<${part}> must be used within .`) } return context } function subscribe() { return () => {} } function prefersReducedMotion() { return ( typeof window.matchMedia !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches ) } function dataAttributes(slot: string, extra?: Record) { return { "data-slot": slot, ...extra } as Record } const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]' function focusNearest(from: HTMLElement) { const candidates = Array.from( document.querySelectorAll(focusableSelector) ).filter( (node) => !from.contains(node) && (typeof node.checkVisibility !== "function" || node.checkVisibility()) ) const target = candidates.find( (node) => from.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING ) ?? candidates.findLast( (node) => from.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING ) target?.focus() } function siblingCloses(element: HTMLElement) { const parent = element.parentElement if (!parent) { return { next: [], previous: [] } } const closes = Array.from( parent.querySelectorAll( ":scope > [data-slot=badge] > [data-slot=badge-close]" ) ).filter((close) => !element.contains(close)) return { next: closes.filter( (close) => element.compareDocumentPosition(close) & Node.DOCUMENT_POSITION_FOLLOWING ), previous: closes .filter( (close) => element.compareDocumentPosition(close) & Node.DOCUMENT_POSITION_PRECEDING ) .reverse(), } } function inlineGap(element: HTMLElement) { const parent = element.parentElement if (!parent) { return 0 } const style = getComputedStyle(parent) const flowsInline = style.display.includes("grid") || (style.display.includes("flex") && style.flexDirection.startsWith("row")) return flowsInline ? parseFloat(style.columnGap) || 0 : 0 } function isText(child: React.ReactNode) { return ( (typeof child === "string" || typeof child === "number") && String(child).trim() !== "" ) } function hasText(children: React.ReactNode) { return React.Children.toArray(children).some(isText) } function wrapText(children: React.ReactNode, labelId: string) { const items = React.Children.toArray(children) const first = items.findIndex(isText) return items.map((child, index) => isText(child) ? ( {child} ) : ( child ) ) } type BadgeProps = useRender.ComponentProps<"span"> & { variant?: BadgeVariant appearance?: BadgeAppearance size?: BadgeSize open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void onOpenChangeComplete?: (open: boolean) => void } function Badge({ className, variant = "default", appearance = "outline", size = "default", open: openProp, defaultOpen = true, onOpenChange, onOpenChangeComplete, render, ref, children, ...props }: BadgeProps) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const open = openProp ?? uncontrolledOpen const [present, setPresent] = React.useState(open) const elementRef = React.useRef(null) const closingRef = React.useRef(false) const labelId = React.useId() const onCompleteRef = React.useRef(onOpenChangeComplete) React.useLayoutEffect(() => { onCompleteRef.current = onOpenChangeComplete }) const isHydrating = React.useSyncExternalStore( subscribe, () => false, () => true ) const [animateIn, setAnimateIn] = React.useState(!isHydrating) if (open && !present) { setPresent(true) } React.useEffect(() => { if (open) { closingRef.current = false } }, [open]) React.useEffect(() => { const element = elementRef.current if (open || !present || !element) { return } const hadFocus = element.contains(document.activeElement) const { next, previous } = siblingCloses(element) const finish = () => { if (hadFocus) { const target = [...next, ...previous].find((close) => close.isConnected) if (target) { target.focus() } else { focusNearest(element) } } setAnimateIn(true) setPresent(false) onCompleteRef.current?.(false) } if (typeof element.animate !== "function") { finish() return } element.dataset.endingStyle = "" const animation = element.animate( [ { width: `${element.offsetWidth}px`, minWidth: "0px", }, { width: "0px", minWidth: "0px", paddingInline: "0px", borderInlineWidth: "0px", marginInlineEnd: `${-inlineGap(element)}px`, }, ], { duration: prefersReducedMotion() ? 0 : 260, easing: easeSpring, fill: "forwards", } ) const fade = element.animate( [ { opacity: 1, scale: 1 }, { opacity: 0, scale: 0.9 }, ], { duration: prefersReducedMotion() ? 0 : 140, easing: easeOut, fill: "forwards", } ) animation.onfinish = finish return () => { animation.onfinish = null animation.cancel() fade.cancel() delete element.dataset.endingStyle } }, [open, present]) const labelled = hasText(children) const context = React.useMemo( () => ({ close: () => { if (closingRef.current) { return } closingRef.current = true if (openProp === undefined) { setUncontrolledOpen(false) } onOpenChange?.(false) }, labelId: labelled ? labelId : undefined, }), [openProp, onOpenChange, labelled, labelId] ) const element = useRender({ defaultTagName: "span", render, ref: ref ? [elementRef, ref] : elementRef, enabled: present, props: mergeProps<"span">( { className: cn( badgeVariants({ variant, appearance, size }), animateIn && "motion-safe:animate-in motion-safe:ease-out-quint motion-safe:animation-duration-200 motion-safe:fade-in-0 motion-safe:zoom-in-90", className ), children: wrapText(children, labelId), }, props, dataAttributes("badge", { "data-variant": variant, "data-appearance": appearance, "data-size": size, }) ), }) return ( {element} ) } function BadgeDot({ className, pulse = false, ...props }: React.ComponentProps<"span"> & { pulse?: boolean }) { return ( ) } function BadgeClose({ className, children, onClick, onKeyDown, ...props }: React.ComponentProps<"button">) { const { close, labelId } = useBadgeContext("BadgeClose") const id = React.useId() const labelled = props["aria-label"] === undefined return ( ) } type BadgeCountProps = Omit< React.ComponentProps, "value" | "suffix" > & { value: number max?: number } function BadgeCount({ className, value, max = 99, ...props }: BadgeCountProps) { const safe = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0 const cap = max === Infinity ? Infinity : Number.isFinite(max) && max >= 1 ? Math.floor(max) : 99 const over = safe > cap return ( {safe} ) } export { Badge, BadgeDot, BadgeClose, BadgeCount, badgeVariants, type BadgeProps, type BadgeCountProps, type BadgeVariant, type BadgeAppearance, type 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","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/motion.json","https://hextaui.com/r/number-flow.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/badge.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]