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:T15c7,"use client"; import type { ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; export interface UpgradePlan { /** Plan name, e.g. "Launch". */ name: string; /** Monthly price in dollars. */ price: number; /** What the plan unlocks, in display order. */ features: string[]; /** One quiet line under the action, e.g. billing terms. */ note?: string; } export interface UpgradeDialogProps { open: boolean; onOpenChange: (open: boolean) => void; /** Starts the upgrade; drive isProcessing while it flies. */ onUpgrade: () => void; plan: UpgradePlan; /** Locks the dialog and shimmers the action label. */ isProcessing?: boolean; /** Structured failure spoken through the description slot. */ error?: string | null; title?: string; description?: ReactNode; } /* ───────────────────────────────────────────────────────── * UPGRADE STORYBOARD * * open the panel rises; the price answers first * (number large, cadence mono), then the * checklist introduces itself one line at a * time, 50ms apart, each check drawing in * action the CTA arrives already charged — neon fill * and the house glow; this is the one place * the color was always going * processing everything locks; the label shimmers * ("Upgrading…") until the flight lands and * the parent closes the dialog * error the description slot speaks the failure in * destructive — same row, zero shift * ───────────────────────────────────────────────────────── */ const FEATURE_STAGGER_MS = 50; const RISE = "fill-mode-backwards fade-in-0 slide-in-from-bottom-2 animate-in duration-500 motion-reduce:animate-none"; /* The charged CTA speaks through color and the sweep alone — no glow. */ const CTA_GLOW = ""; const FeatureRow = ({ feature, index }: { feature: string; index: number }) => (

{feature}

); export const UpgradeDialog = ({ description, error = null, isProcessing = false, onOpenChange, onUpgrade, open, plan, title, }: UpgradeDialogProps) => { const heading = title ?? `Upgrade to ${plan.name}`; const handleOpenChange = (next: boolean) => { if (isProcessing) { return; } onOpenChange(next); }; return ( ); }; 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":[null,["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/button.json","https://ui.neon.com/r/dialog.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/upgrade-dialog/upgrade-dialog.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]