51: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"] 52: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"] 53:T2e7b,"use client" import * as React from "react" import { DirectionProvider, useDirection, } from "@base-ui/react/direction-provider" import { Toggle as TogglePrimitive } from "@base-ui/react/toggle" import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group" import { type VariantProps } from "class-variance-authority" import { cn } from "cn" import { toggleVariants } from "@/components/ui/toggle" import { prefersReducedMotion } from "@/lib/motion" type ClassName = string | ((state: State) => string | undefined) | undefined function mergeClassName(base: string, className: ClassName) { return typeof className === "function" ? (state: State) => cn(base, className(state)) : cn(base, className) } type ToggleGroupVariant = NonNullable< VariantProps["variant"] > type ToggleGroupSize = NonNullable["size"]> type ToggleGroupSpacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 type ToggleGroupOrientation = "horizontal" | "vertical" const spacingClassNames: Record = { 0: "gap-0", 0.5: "gap-0.5", 1: "gap-1", 1.5: "gap-1.5", 2: "gap-2", 2.5: "gap-2.5", 3: "gap-3", 4: "gap-4", 5: "gap-5", 6: "gap-6", 8: "gap-8", } type ToggleGroupContextValue = { variant?: ToggleGroupVariant size?: ToggleGroupSize spacing: ToggleGroupSpacing orientation: ToggleGroupOrientation joined: boolean sliding: boolean } const ToggleGroupContext = React.createContext( null ) const pressedSelector = ":scope > [data-slot=toggle-group-item][data-pressed]" function useToggleGroupIndicator( rootRef: React.RefObject, indicatorRef: React.RefObject, enabled: boolean ) { React.useLayoutEffect(() => { const root = rootRef.current const indicator = indicatorRef.current if (!enabled || !root || !indicator) { return } let current: HTMLElement | null = null const place = (item: HTMLElement, instant: boolean) => { indicator.toggleAttribute( "data-instant", instant || prefersReducedMotion() ) indicator.toggleAttribute( "data-disabled", item.hasAttribute("data-disabled") ) const frame = root.getBoundingClientRect() const box = item.getBoundingClientRect() const layoutWidth = parseFloat(getComputedStyle(root).width) const scale = layoutWidth > 0 && frame.width > 0 ? frame.width / layoutWidth : 1 const style = getComputedStyle(item) const width = parseFloat(style.width) const height = parseFloat(style.height) indicator.style.width = `${Number.isFinite(width) ? width : box.width / scale}px` indicator.style.height = `${Number.isFinite(height) ? height : box.height / scale}px` indicator.style.translate = `${(box.left - frame.left) / scale - root.clientLeft}px ${(box.top - frame.top) / scale - root.clientTop}px` indicator.style.borderRadius = style.borderRadius } const sync = () => { const item = root.querySelector(pressedSelector) if (item === current) { if (item) { place(item, true) } return } const appearing = current === null current = item if (!item) { indicator.removeAttribute("data-visible") return } place(item, appearing) if (appearing) { void indicator.offsetWidth } indicator.setAttribute("data-visible", "") } sync() let second = 0 const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => indicator.setAttribute("data-ready", "") ) }) const mutations = new MutationObserver(sync) mutations.observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["data-pressed", "data-disabled", "data-size"], }) const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => { if (current) { place(current, true) } }) resize?.observe(root) return () => { cancelAnimationFrame(first) cancelAnimationFrame(second) mutations.disconnect() resize?.disconnect() indicator.removeAttribute("data-ready") indicator.removeAttribute("data-visible") } }, [rootRef, indicatorRef, enabled]) } function isFocusVisible(element: HTMLElement) { try { return element.matches(":focus-visible") } catch { return true } } function moveFocusToPressed(root: HTMLElement, event: React.FocusEvent) { const target = event.target as HTMLElement if ( target.parentElement !== root || target.getAttribute("data-slot") !== "toggle-group-item" || target.hasAttribute("data-pressed") || root.contains(event.relatedTarget as Node | null) || !isFocusVisible(target) ) { return } root .querySelector( ":scope > [data-slot=toggle-group-item][data-pressed]:not([data-disabled])" ) ?.focus() } type ToggleGroupProps = ToggleGroupPrimitive.Props & VariantProps & { spacing?: ToggleGroupSpacing orientation?: ToggleGroupOrientation } function ToggleGroup({ className, variant, size, spacing = 0, orientation = "horizontal", multiple = false, children, ref, onFocus, ...props }: ToggleGroupProps) { const rootRef = React.useRef(null) const indicatorRef = React.useRef(null) const inherited = useDirection() const [domDirection, setDomDirection] = React.useState<"ltr" | "rtl">() const direction = domDirection === "rtl" ? "rtl" : inherited const resolvedVariant = variant ?? "default" const joined = spacing === 0 const outlineJoined = joined && resolvedVariant === "outline" const sliding = !multiple && (joined || resolvedVariant !== "outline") useToggleGroupIndicator(rootRef, indicatorRef, sliding) const setRef = React.useCallback( (node: HTMLDivElement | null) => { rootRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) const context = React.useMemo( () => ({ variant: variant ?? undefined, size: size ?? undefined, spacing, orientation, joined, sliding, }), [variant, size, spacing, orientation, joined, sliding] ) const vertical = orientation === "vertical" return ( { onFocus?.(event) const next = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr" if (next !== domDirection) { setDomDirection(next) } if (!multiple) { moveFocusToPressed(event.currentTarget, event) } }} className={mergeClassName( cn( "group/toggle-group relative isolate flex w-fit max-w-full min-w-0 items-center [--toggle-group-radius:var(--radius-md)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", size === "sm" && "[--toggle-group-radius:min(var(--radius-md),10px)]", spacingClassNames[spacing] ?? "gap-0", !joined && !vertical && "flex-wrap", outlineJoined && "rounded-(--toggle-group-radius) bg-background dark:bg-input/30 [&>[data-slot=toggle-group-item]]:rounded-none", outlineJoined && !vertical && "[&>[data-slot=toggle-group-item]:not(:has(~[data-slot=toggle-group-item]))]:rounded-e-(--toggle-group-radius) [&>[data-slot=toggle-group-item]:not([data-slot=toggle-group-item]~*)]:rounded-s-(--toggle-group-radius) [&>[data-slot=toggle-group-item]~[data-slot=toggle-group-item]]:-ms-(--hairline)", outlineJoined && vertical && "[&>[data-slot=toggle-group-item]:not(:has(~[data-slot=toggle-group-item]))]:rounded-b-(--toggle-group-radius) [&>[data-slot=toggle-group-item]:not([data-slot=toggle-group-item]~*)]:rounded-t-(--toggle-group-radius) [&>[data-slot=toggle-group-item]~[data-slot=toggle-group-item]]:-mt-(--hairline)" ), className )} {...props} data-slot="toggle-group" data-variant={resolvedVariant} data-size={size ?? "default"} data-spacing={spacing} > {children} {sliding ? ( ) } type ToggleGroupItemProps = TogglePrimitive.Props & VariantProps function ToggleGroupItem({ className, variant, size, ...props }: ToggleGroupItemProps) { const context = React.useContext(ToggleGroupContext) if (!context) { throw new Error("ToggleGroupItem must be used within ToggleGroup.") } const resolvedVariant = context.variant ?? variant ?? "default" const resolvedSize = context.size ?? size ?? "default" const vertical = context.orientation === "vertical" const outlineJoined = context.joined && resolvedVariant === "outline" return ( [data-slot=toggle-group-indicator][data-visible]]/toggle-group:before:opacity-0 group-has-[>[data-slot=toggle-group-indicator][data-visible]]/toggle-group:before:transition-none data-pressed:hover:bg-transparent dark:data-pressed:hover:bg-transparent forced-colors:border-0" ), className )} {...props} data-slot="toggle-group-item" data-variant={resolvedVariant} data-size={resolvedSize} /> ) } export { ToggleGroup, ToggleGroupItem } export type { ToggleGroupItemProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSize, ToggleGroupSpacing, ToggleGroupVariant, } 50:["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/motion.json","https://hextaui.com/r/toggle.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/toggle-group.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]