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:T351b,'use client' import type { ReactNode } from 'react' import { ArrowRight, Coffee, Mail, NfcIcon, User } from 'lucide-react' import { motion, type Variants, useMotionValue, useReducedMotion, useSpring, useTransform, } from 'motion/react' import { cn } from '@/lib/utils' const ENTRANCE_EASE: [number, number, number, number] = [0.22, 1, 0.36, 1] const PANEL_ENTRANCE_START = 0.62 const PANEL_STAGGER = 0.12 const cardEntranceVariants: Variants = { hidden: { opacity: 0, y: 52, scale: 0.97, }, visible: { opacity: 1, y: 0, scale: 1, transition: { delay: 0.05, duration: 0.72, ease: ENTRANCE_EASE, }, }, } const panelEntranceVariants: Variants = { hidden: { opacity: 0, y: 32, scale: 0.97, filter: 'blur(12px)', }, visible: (order: number = 0) => ({ opacity: 1, y: 0, scale: 1, filter: 'blur(0px)', transition: { delay: PANEL_ENTRANCE_START + order * PANEL_STAGGER, duration: 0.64, ease: ENTRANCE_EASE, }, }), } export type WorkflowStage = 'receipt' | 'policy' | 'category' | 'approval' type WorkflowPanelProps = { children: ReactNode className?: string isActive: boolean order: number shouldReduceMotion: boolean stage: WorkflowStage title: string } export function WorkflowPanel({ children, className, isActive, order, shouldReduceMotion, stage, title, }: WorkflowPanelProps) { return (

{title}

{children} ) } function PanelCornerMarkers() { const positions = [ '-top-1 -left-1', '-top-1 -right-1', '-bottom-1 -left-1', '-bottom-1 -right-1', ] as const return ( ) } function PanelInset({ children, className }: { children: ReactNode; className?: string }) { return (

{children}

) } export function PaymentCard({ isActive, shouldReduceMotion, }: { isActive: boolean shouldReduceMotion: boolean }) { const pointerX = useMotionValue(0) const pointerY = useMotionValue(0) const springX = useSpring(pointerX, { stiffness: 160, damping: 22, mass: 0.4, }) const springY = useSpring(pointerY, { stiffness: 160, damping: 22, mass: 0.4, }) const rotateY = useTransform(springX, [-1, 1], [-12, 12]) const rotateX = useTransform(springY, [-1, 1], [12, -12]) const resetTilt = () => { pointerX.set(0) pointerY.set(0) } return (

{ const hasFinePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches if (shouldReduceMotion || !hasFinePointer) { return } const rect = event.currentTarget.getBoundingClientRect() pointerX.set(((event.clientX - rect.left) / rect.width - 0.5) * 2) pointerY.set(((event.clientY - rect.top) / rect.height - 0.5) * 2) }} onPointerLeave={resetTilt} onPointerCancel={resetTilt} style={{ rotateX: shouldReduceMotion ? 0 : rotateX, rotateY: shouldReduceMotion ? 0 : rotateY, transformPerspective: 750, transformStyle: 'preserve-3d', }} className={cn( 'relative size-full transform-gpu overflow-hidden', 'rounded-[1.2rem] border border-white/10 bg-zinc-950', 'shadow-[0_28px_70px_rgba(15,23,42,0.2),0_10px_24px_rgba(15,23,42,0.14)]', 'sm:rounded-[1.35rem]', 'dark:shadow-[0_30px_80px_rgba(0,0,0,0.52)]', )} >

4821 {'\u2022\u2022\u2022\u2022'} 8830

) } function CardDecoration() { return ( <>

) } function CardChip() { return (

) } const receiptItems = [ { name: '1 \u00d7 Coffee', price: '$2.30', }, { name: '1 \u00d7 Classic Donut', price: '$3.59', }, ] as const function ReceiptItem({ name, price }: { name: string; price: string }) { return (

{name}

{price}

) } export function ReceiptPanelContent() { return (

{receiptItems.map((item) => ( ))}

TOTAL

$5.89

) } export function MatchingPanelContent({ isActive, shouldReduceMotion, }: { isActive: boolean shouldReduceMotion: boolean }) { return (

Business travel

) } function ProgressRow({ label, width }: { label: string; width: string }) { return (

{label}

) } const reportItems = [ { label: 'Action required', highlighted: false, }, { label: 'Expense report 1084', highlighted: true, }, { label: 'Missing receipt', highlighted: false, }, { label: 'Report 1280', highlighted: false, }, ] as const export function ReportPanelContent() { return (

{reportItems.map((item) => (

))}

) } export function ApprovalPanelContent() { return (

John Doe

Finance Manager

) } export function StandalonePanelFrame({ children, className, title, stage, }: { children: ReactNode className?: string title: string stage: WorkflowStage }) { const shouldReduceMotion = Boolean(useReducedMotion()) return (

{children}

) } 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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@navui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/illustrations/expense-workflow/expense-workflow-parts.tsx","content":"$53","type":"registry:component","target":"@components/illustrations/_expense-workflow-parts.tsx"},{"path":"src/registry/illustrations/matching-panel/matching-panel.tsx","content":"'use client'\n\nimport { useReducedMotion } from 'motion/react'\n\nimport {\n MatchingPanelContent,\n StandalonePanelFrame,\n} from '@/components/illustrations/_expense-workflow-parts'\n\ntype MatchingPanelIllustrationProps = {\n className?: string\n}\n\nexport function MatchingPanelIllustration({ className }: MatchingPanelIllustrationProps) {\n const shouldReduceMotion = Boolean(useReducedMotion())\n\n return (\n \n \n \n )\n}\n\nexport default MatchingPanelIllustration\n","type":"registry:component","target":"@components/illustrations/matching-panel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]