4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T17c4,"use client"; import { AlertDialog } from "@base-ui-components/react/alert-dialog"; import { useState } from "react"; import type { CSSProperties, ReactNode } from "react"; export interface ReactiveAlertDialogProps { triggerLabel?: ReactNode; title?: ReactNode; description?: ReactNode; /** Reject label — triggers the tumble-away exit. */ disagreeLabel?: ReactNode; /** Accept label — triggers the snappy exit. */ agreeLabel?: ReactNode; /** Fires when Agree is pressed (before the dialog closes). */ onAction?: () => void; /** Enter / Agree-exit duration in ms. Default 200. */ duration?: number; /** Disagree tumble-away duration in ms. Default 300. */ disagreeDuration?: number; /** Disagree rotation in degrees. Default 12. */ disagreeAngle?: number; /** Disagree vertical drop in px. Default 80. */ disagreeShift?: number; className?: string; } /** * Reactive — the exit branches on the action. Agree mirrors the entry with a * snappy scale-and-fade; Disagree pivots from its top-left corner, rotating and * dropping on an ease-in "gravity" curve before fading out. Controlled Base UI * AlertDialog with a two-layer popup (outer centers + fades, inner carries the * transform) so the exit transform never fights the centering translate. * Theme-token driven and honors prefers-reduced-motion. */ export function ReactiveAlertDialog({ triggerLabel = "Review terms", title = "Do you accept the terms?", description = "Agreeing continues to your account. Disagreeing discards this step and returns you to the start.", disagreeLabel = "Disagree", agreeLabel = "Agree", onAction, duration = 200, disagreeDuration = 150, disagreeAngle = 5, disagreeShift = 220, className = "", }: ReactiveAlertDialogProps = {}) { const [open, setOpen] = useState(false); const [exit, setExit] = useState<"agree" | "disagree">("agree"); // Every fresh open resets to the neutral mode, so the enter (and any // Escape/backdrop dismissal) always uses the snappy scale, never the tumble. const handleOpenChange = (next: boolean) => { if (next) setExit("agree"); setOpen(next); }; const handleAgree = () => { setExit("agree"); onAction?.(); setOpen(false); }; const handleDisagree = () => { setExit("disagree"); setOpen(false); }; const isDisagree = exit === "disagree"; // The enter always runs in "agree" mode, so this resolves to `duration` / // ease-out for the entrance; it only becomes the tumble values once Disagree // flips `exit`, right before the closing transition starts. const activeDuration = isDisagree ? disagreeDuration : duration; const ease = isDisagree ? "cubic-bezier(0.4,0,1,1)" // ease-in: accelerates like a drop : "cubic-bezier(0.22,1,0.36,1)"; // ease-out: snappy const innerStyle: CSSProperties = { transitionDuration: `${activeDuration}ms`, transitionTimingFunction: ease, transformOrigin: isDisagree ? "top left" : "center", }; if (isDisagree) { (innerStyle as Record)["--exit-transform"] = `rotate(${disagreeAngle}deg) translateY(${disagreeShift}px)`; } const layerStyle: CSSProperties = { transitionDuration: `${activeDuration}ms`, transitionTimingFunction: ease, }; return ( {triggerLabel}

{title} {description}

); } export default ReactiveAlertDialog; 4b:["$","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-components/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui-components%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-components/react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@craftui","registryDependencies":["https://www.craftui.space/r/craftui-base.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/craftui/ui/alert-dialog/reactive.tsx","content":"$4e","type":"registry:ui","target":"~/components/craftui/ui/alert-dialog/reactive.tsx"}],"className":"h-[70svh] min-h-80"}]]}]