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:T42b0,"use client"; import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"; import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; import { cn } from "@/lib/utils"; import { X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ComponentProps, isValidElement, type ReactElement, type ReactNode, useCallback, useEffect, useRef, useState, } from "react"; import { DURATION, OVERLAY_ENTER, OVERLAY_ENTER_INITIAL, OVERLAY_EXIT, OVERLAY_TRANSITION, } from "@/components/smoothui/lib/animation"; /* ------------------------------------------------------------------ */ /* Types */ /* ------------------------------------------------------------------ */ export interface DialogProps { /** Dialog content */ children?: ReactNode; /** Additional CSS class names for the content */ className?: string; /** Description displayed below the title */ description?: string; /** Footer content */ footer?: ReactNode; /** Callback when the open state changes */ onOpenChange?: (open: boolean) => void; /** Whether the dialog is open */ open?: boolean; /** Whether to show the close button */ showCloseButton?: boolean; /** Title displayed in the dialog header */ title?: string; /** Trigger element that opens the dialog */ trigger?: ReactNode; } export interface AlertDialogProps { /** Alert dialog content */ children?: ReactNode; /** Additional CSS class names for the content */ className?: string; /** Description displayed below the title */ description?: string; /** Footer content (typically AlertDialogAction + AlertDialogCancel) */ footer?: ReactNode; /** Callback when the open state changes */ onOpenChange?: (open: boolean) => void; /** Whether the alert dialog is open */ open?: boolean; /** Title displayed in the alert dialog header */ title?: string; /** Trigger element that opens the alert dialog */ trigger?: ReactNode; } const STAGGER_DELAY = 0.06; const PANEL_CLASS = "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg"; const ACTION_CLASS = "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"; const CANCEL_CLASS = "inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"; /* ------------------------------------------------------------------ */ /* Layout helpers (shadcn-parity, no @repo/shadcn-ui) */ /* ------------------------------------------------------------------ */ export const DialogHeader = ({ className, ...props }: ComponentProps<"div">) => (

); export const DialogFooter = ({ className, ...props }: ComponentProps<"div">) => (

); export const DialogTitle = ({ className, ...props }: ComponentProps) => ( ); export const DialogDescription = ({ className, ...props }: ComponentProps) => ( ); export const DialogTrigger = DialogPrimitive.Trigger; export const DialogClose = DialogPrimitive.Close; export const AlertDialogHeader = ({ className, ...props }: ComponentProps<"div">) => (

); export const AlertDialogFooter = ({ className, ...props }: ComponentProps<"div">) => (

); export const AlertDialogTitle = ({ className, ...props }: ComponentProps) => ( ); export const AlertDialogDescription = ({ className, ...props }: ComponentProps) => ( ); export const AlertDialogTrigger = AlertDialogPrimitive.Trigger; /** Confirm action — Base UI has no Action part; maps to Close. */ export const AlertDialogAction = ({ className, ...props }: ComponentProps) => ( ); /** Cancel action — Base UI has no Cancel part; maps to Close. */ export const AlertDialogCancel = ({ className, ...props }: ComponentProps) => ( ); /* ------------------------------------------------------------------ */ /* Shared pieces */ /* ------------------------------------------------------------------ */ const StaggerChild = ({ children, index, shouldReduceMotion, }: { children: ReactNode; index: number; shouldReduceMotion: boolean | null; }) => ( {children} ); const AnimatedCloseButton = ({ shouldReduceMotion, }: { shouldReduceMotion: boolean | null; }) => ( } > ); type TriggerComponent = (props: { children?: ReactNode; nativeButton?: boolean; render?: ReactElement; }) => ReactElement | null; const renderTrigger = (Trigger: TriggerComponent, trigger: ReactNode) => { if (!trigger) { return null; } if (isValidElement(trigger)) { const element = trigger as ReactElement; const nativeButton = typeof element.type === "string" ? element.type === "button" : true; return ; } return {trigger}; }; const useDialogOpenState = ( open: boolean | undefined, onOpenChange?: (open: boolean) => void ) => { const [internalOpen, setInternalOpen] = useState(false); const isControlled = open !== undefined; const isOpen = isControlled ? open : internalOpen; const handleOpenChange = useCallback( (next: boolean) => { if (!isControlled) { setInternalOpen(next); } onOpenChange?.(next); }, [isControlled, onOpenChange] ); const [showContent, setShowContent] = useState(false); const prevOpenRef = useRef(false); useEffect(() => { if (isOpen && !prevOpenRef.current) { setShowContent(true); } prevOpenRef.current = !!isOpen; }, [isOpen]); const handleAnimationComplete = useCallback(() => { if (!isOpen) { setShowContent(false); } }, [isOpen]); return { handleAnimationComplete, handleOpenChange, isOpen, setShowContent, showContent, }; }; /* ------------------------------------------------------------------ */ /* Dialog */ /* ------------------------------------------------------------------ */ /** * SmoothUI Dialog — Base UI twin (default). * Same public props as the Radix twin; headless via `@base-ui/react/dialog`. */ export default function Dialog({ open, onOpenChange, title, description, showCloseButton = true, className, children, trigger, footer, }: DialogProps) { const shouldReduceMotion = useReducedMotion(); const { isOpen, showContent, handleOpenChange, handleAnimationComplete, setShowContent, } = useDialogOpenState(open, onOpenChange); return ( {renderTrigger(DialogPrimitive.Trigger, trigger)} setShowContent(false)}> {isOpen ? ( } /> } > {title || description ? ( {title ? {title} : null} {description ? ( {description} ) : null} ) : null} {children ? ( {children} ) : null} {footer ? ( {footer} ) : null} {showCloseButton ? ( ) : null} ) : null} ); } /* ------------------------------------------------------------------ */ /* AlertDialog */ /* ------------------------------------------------------------------ */ export function AlertDialog({ open, onOpenChange, title, description, className, children, trigger, footer, }: AlertDialogProps) { const shouldReduceMotion = useReducedMotion(); const { isOpen, showContent, handleOpenChange, handleAnimationComplete, setShowContent, } = useDialogOpenState(open, onOpenChange); return ( {renderTrigger(AlertDialogPrimitive.Trigger, trigger)} setShowContent(false)}> {isOpen ? ( } /> } > {title || description ? ( {title ? ( {title} ) : null} {description ? ( {description} ) : null} ) : null} {children ? ( {children} ) : null} {footer ? ( {footer} ) : null} ) : null} ); } 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",{"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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/lib.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/smoothui/dialog/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]