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:T24f2,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const breakpointDisplayVariants = cva( "pointer-events-none select-none bg-foreground text-background px-2 py-1 z-50 rounded-b", { variants: { position: { fixed: "fixed top-0 right-[50%] translate-x-1/2", relative: "relative", absolute: "absolute top-0 right-[50%] translate-x-1/2", }, }, defaultVariants: { position: "fixed", }, }, ) // Canonical ordering of breakpoints from smallest to largest // This defines the semantic order - actual pixel values are defined in Tailwind config const BREAKPOINT_ORDER = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const type BreakpointKey = (typeof BREAKPOINT_ORDER)[number] // Map breakpoint keys to their display labels const BREAKPOINT_LABELS: Record = { xxs: "XXS", xs: "XS", sm: "SM", md: "MD", lg: "LG", xl: "XL", "2xl": "2XL", "3xl": "3XL", } // Default Tailwind breakpoints (standard v3/v4) const DEFAULT_BREAKPOINTS: BreakpointKey[] = ["sm", "md", "lg", "xl", "2xl"] interface BreakpointDisplayProps extends React.HTMLAttributes, VariantProps { /** * Additional breakpoints to include beyond the default Tailwind breakpoints. * These will be automatically sorted by semantic order (xxs < xs < sm < md < lg < xl < 2xl < 3xl). * Actual pixel values are defined in your Tailwind configuration. * @example extraBreakpoints={["xxs", "xs", "3xl"]} */ extraBreakpoints?: BreakpointKey[] } function BreakpointDisplay({ className, position, extraBreakpoints = [], ...props }: BreakpointDisplayProps) { // Combine default and extra breakpoints, remove duplicates, and sort by semantic order const activeBreakpoints = React.useMemo(() => { const combined = [...DEFAULT_BREAKPOINTS, ...extraBreakpoints] const unique = Array.from(new Set(combined)) // Sort by their position in the canonical BREAKPOINT_ORDER array return unique.sort((a, b) => { return BREAKPOINT_ORDER.indexOf(a) - BREAKPOINT_ORDER.indexOf(b) }) }, [extraBreakpoints]) // Create a Set for O(1) lookup const activeSet = React.useMemo(() => new Set(activeBreakpoints), [activeBreakpoints]) // Determine the first and last active breakpoints const firstBreakpoint = activeBreakpoints[0] const lastBreakpoint = activeBreakpoints[activeBreakpoints.length - 1] // Helper to check if a breakpoint is the next active one after current const getNextActiveBreakpoint = (current: BreakpointKey): BreakpointKey | null => { const currentIndex = BREAKPOINT_ORDER.indexOf(current) for (let i = currentIndex + 1; i < BREAKPOINT_ORDER.length; i++) { if (activeSet.has(BREAKPOINT_ORDER[i])) { return BREAKPOINT_ORDER[i] } } return null } return (

{/* Minimum - shows below the first breakpoint */} {firstBreakpoint === "xxs" &&

Minimum

} {firstBreakpoint === "xs" &&

Minimum

} {firstBreakpoint === "sm" &&

Minimum

} {firstBreakpoint === "md" &&

Minimum

} {firstBreakpoint === "lg" &&

Minimum

} {firstBreakpoint === "xl" &&

Minimum

} {firstBreakpoint === "2xl" &&

Minimum

} {firstBreakpoint === "3xl" &&

Minimum

} {/* XXS breakpoint */} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "xs" && (

XXS

)} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "sm" && (

XXS

)} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "md" && (

XXS

)} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "lg" && (

XXS

)} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "xl" && (

XXS

)} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "2xl" && (

XXS

)} {activeSet.has("xxs") && getNextActiveBreakpoint("xxs") === "3xl" && (

XXS

)} {activeSet.has("xxs") && lastBreakpoint === "xxs" &&

XXS

} {/* XS breakpoint */} {activeSet.has("xs") && getNextActiveBreakpoint("xs") === "sm" && (

)} {activeSet.has("xs") && getNextActiveBreakpoint("xs") === "md" && (

)} {activeSet.has("xs") && getNextActiveBreakpoint("xs") === "lg" && (

)} {activeSet.has("xs") && getNextActiveBreakpoint("xs") === "xl" && (

)} {activeSet.has("xs") && getNextActiveBreakpoint("xs") === "2xl" && (

)} {activeSet.has("xs") && getNextActiveBreakpoint("xs") === "3xl" && (

)} {activeSet.has("xs") && lastBreakpoint === "xs" &&

} {/* SM breakpoint */} {activeSet.has("sm") && getNextActiveBreakpoint("sm") === "md" && (

)} {activeSet.has("sm") && getNextActiveBreakpoint("sm") === "lg" && (

)} {activeSet.has("sm") && getNextActiveBreakpoint("sm") === "xl" && (

)} {activeSet.has("sm") && getNextActiveBreakpoint("sm") === "2xl" && (

)} {activeSet.has("sm") && getNextActiveBreakpoint("sm") === "3xl" && (

)} {activeSet.has("sm") && lastBreakpoint === "sm" &&

} {/* MD breakpoint */} {activeSet.has("md") && getNextActiveBreakpoint("md") === "lg" && (

)} {activeSet.has("md") && getNextActiveBreakpoint("md") === "xl" && (

)} {activeSet.has("md") && getNextActiveBreakpoint("md") === "2xl" && (

)} {activeSet.has("md") && getNextActiveBreakpoint("md") === "3xl" && (

)} {activeSet.has("md") && lastBreakpoint === "md" &&

} {/* LG breakpoint */} {activeSet.has("lg") && getNextActiveBreakpoint("lg") === "xl" && (

)} {activeSet.has("lg") && getNextActiveBreakpoint("lg") === "2xl" && (

)} {activeSet.has("lg") && getNextActiveBreakpoint("lg") === "3xl" && (

)} {activeSet.has("lg") && lastBreakpoint === "lg" &&

} {/* XL breakpoint */} {activeSet.has("xl") && getNextActiveBreakpoint("xl") === "2xl" && (

)} {activeSet.has("xl") && getNextActiveBreakpoint("xl") === "3xl" && (

)} {activeSet.has("xl") && lastBreakpoint === "xl" &&

} {/* 2XL breakpoint */} {activeSet.has("2xl") && getNextActiveBreakpoint("2xl") === "3xl" && (

2XL

)} {activeSet.has("2xl") && lastBreakpoint === "2xl" &&

2XL

} {/* 3XL breakpoint */} {activeSet.has("3xl") && lastBreakpoint === "3xl" &&

3XL

}

) } export { BreakpointDisplay, breakpointDisplayVariants } export type { BreakpointDisplayProps, BreakpointKey } 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":"@abui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/abui/utils/breakpoint-display.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]