4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T2f3b,"use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { Portal } from "radix-ui"; import type { ButtonHTMLAttributes, Dispatch, HTMLAttributes, MouseEvent, MouseEventHandler, ReactElement, SetStateAction, } from "react"; import { Children, cloneElement, createContext, useCallback, useContext, useEffect, useState, } from "react"; import { cn } from "@/lib/utils"; type DialogStackContextType = { activeIndex: number; setActiveIndex: Dispatch>; totalDialogs: number; setTotalDialogs: Dispatch>; isOpen: boolean; setIsOpen: Dispatch>; clickable: boolean; }; const DialogStackContext = createContext({ activeIndex: 0, setActiveIndex: () => {}, totalDialogs: 0, setTotalDialogs: () => {}, isOpen: false, setIsOpen: () => {}, clickable: false, }); type DialogStackChildProps = { index?: number; }; export type DialogStackProps = HTMLAttributes & { open?: boolean; clickable?: boolean; onOpenChange?: (open: boolean) => void; defaultOpen?: boolean; }; export const DialogStack = ({ children, className, open, defaultOpen = false, onOpenChange, clickable = false, ...props }: DialogStackProps) => { const [activeIndex, setActiveIndex] = useState(0); const [isOpen, setIsOpen] = useControllableState({ defaultProp: defaultOpen, prop: open, onChange: onOpenChange, }); useEffect(() => { if (onOpenChange && isOpen !== undefined) { onOpenChange(isOpen); } }, [isOpen, onOpenChange]); return ( {}, isOpen: isOpen ?? false, setIsOpen: (value) => setIsOpen(Boolean(value)), clickable, }} >

{children}

); }; export type DialogStackTriggerProps = ButtonHTMLAttributes & { asChild?: boolean; }; export const DialogStackTrigger = ({ children, className, onClick, asChild, ...props }: DialogStackTriggerProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackTrigger must be used within a DialogStack"); } const handleClick: MouseEventHandler = (e) => { context.setIsOpen(true); onClick?.(e); }; if (asChild && children) { const child = children as ReactElement<{ onClick: MouseEventHandler; className?: string; }>; return cloneElement(child, { onClick: (e: MouseEvent) => { handleClick(e); child.props.onClick?.(e); }, className: cn(className, child.props.className), ...props, }); } return ( ); }; export type DialogStackOverlayProps = HTMLAttributes; export const DialogStackOverlay = ({ className, ...props }: DialogStackOverlayProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackOverlay must be used within a DialogStack"); } const handleClick = useCallback(() => { context.setIsOpen(false); }, [context.setIsOpen]); if (!context.isOpen) { return null; } return ( // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable overlay" // biome-ignore lint/a11y/useKeyWithClickEvents: "This is a clickable overlay"

); }; export type DialogStackBodyProps = HTMLAttributes & { children: | ReactElement[] | ReactElement; }; export const DialogStackBody = ({ children, className, ...props }: DialogStackBodyProps) => { const context = useContext(DialogStackContext); const [totalDialogs, setTotalDialogs] = useState(Children.count(children)); if (!context) { throw new Error("DialogStackBody must be used within a DialogStack"); } if (!context.isOpen) { return null; } return (

{Children.map(children, (child, index) => { const childElement = child as ReactElement<{ index: number; onClick: MouseEventHandler; className?: string; }>; return cloneElement(childElement, { ...childElement.props, index, }); })}

); }; export type DialogStackContentProps = HTMLAttributes & { index?: number; offset?: number; }; export const DialogStackContent = ({ children, className, index = 0, offset = 10, ...props }: DialogStackContentProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackContent must be used within a DialogStack"); } if (!context.isOpen) { return null; } const handleClick = () => { if (context.clickable && context.activeIndex > index) { context.setActiveIndex(index ?? 0); } }; const distanceFromActive = index - context.activeIndex; const translateY = distanceFromActive < 0 ? `-${Math.abs(distanceFromActive) * offset}px` : `${Math.abs(distanceFromActive) * offset}px`; return ( // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable dialog" // biome-ignore lint/a11y/useKeyWithClickEvents: "This is a clickable dialog"

0 ? 0 : 1, cursor: context.clickable && context.activeIndex > index ? "pointer" : "default", }} {...props} >

{children}

); }; export type DialogStackTitleProps = HTMLAttributes; export const DialogStackTitle = ({ children, className, ...props }: DialogStackTitleProps) => (

{children}

); export type DialogStackDescriptionProps = HTMLAttributes; export const DialogStackDescription = ({ children, className, ...props }: DialogStackDescriptionProps) => (

{children}

); export type DialogStackHeaderProps = HTMLAttributes; export const DialogStackHeader = ({ className, ...props }: DialogStackHeaderProps) => (

); export type DialogStackFooterProps = HTMLAttributes; export const DialogStackFooter = ({ children, className, ...props }: DialogStackFooterProps) => (

{children}

); export type DialogStackNextProps = ButtonHTMLAttributes & { asChild?: boolean; }; export const DialogStackNext = ({ children, className, asChild, ...props }: DialogStackNextProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackNext must be used within a DialogStack"); } const handleNext = () => { if (context.activeIndex < context.totalDialogs - 1) { context.setActiveIndex(context.activeIndex + 1); } }; if (asChild && children) { const child = children as ReactElement<{ onClick: MouseEventHandler; className?: string; }>; return cloneElement(child, { onClick: (e: MouseEvent) => { handleNext(); child.props.onClick?.(e); }, className: cn(className, child.props.className), ...props, }); } return ( ); }; export type DialogStackPreviousProps = ButtonHTMLAttributes & { asChild?: boolean; }; export const DialogStackPrevious = ({ children, className, asChild, ...props }: DialogStackPreviousProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackPrevious must be used within a DialogStack"); } const handlePrevious = () => { if (context.activeIndex > 0) { context.setActiveIndex(context.activeIndex - 1); } }; if (asChild && children) { const child = children as ReactElement<{ onClick: MouseEventHandler; className?: string; }>; return cloneElement(child, { onClick: (e: MouseEvent) => { handlePrevious(); child.props.onClick?.(e); }, className: cn(className, child.props.className), ...props, }); } return ( ); }; 4e:["$","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","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","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":"@radix-ui/react-use-controllable-state"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/dialog-stack/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]