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/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"] 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/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"] 51:T1d69,"use client" import { useState, useRef, useEffect, useMemo } from "react" import { Button } from "@/components/ui/button" import { Minus, Plus } from "lucide-react" import { cn } from "@/lib/utils" import { demoAmountPresets } from "./demo/payment" /** * ═══════════════════════════════════════════════════════════════════════════ * AmountInputProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for an amount input with increment/decrement buttons and preset values. * Supports direct text editing by clicking on the amount. */ export interface AmountInputProps { data?: { /** Quick-select preset amounts displayed as buttons. */ presets?: number[] } actions?: { /** Called when user confirms the selected amount. */ onConfirm?: (value: number) => void } appearance?: { /** * Minimum allowed value. * @default 0 */ min?: number /** * Maximum allowed value. * @default 10000 */ max?: number /** * Increment/decrement step size for the +/- buttons. * @default 10 */ step?: number /** * Currency code for formatting the amount display. * @default "EUR" */ currency?: string /** * Label text displayed above the input. * @default "Amount" */ label?: string } control?: { /** * Controlled value for the amount input. * @default 50 */ value?: number } } /** * An amount input with increment/decrement buttons and preset values. * Supports direct text editing by clicking on the amount. * * Features: * - Large centered amount display * - Plus/minus increment buttons * - Preset amount quick-select buttons * - Click-to-edit direct input * - Min/max value clamping * - Configurable step size * - Optional confirm button * * @component * @example * ```tsx * console.log("Amount changed:", value), * onConfirm: (value) => console.log("Confirmed:", value) * }} * appearance={{ * min: 10, * max: 500, * step: 5, * currency: "USD", * label: "Donation Amount" * }} * control={{ value: 50 }} * /> * ``` */ export function AmountInput({ data, actions, appearance, control }: AmountInputProps) { const resolved: NonNullable = data ?? { presets: demoAmountPresets } const presets = resolved.presets ?? [] const onConfirm = actions?.onConfirm const min = appearance?.min ?? 0 const max = appearance?.max ?? 10000 const step = appearance?.step ?? 10 const currency = appearance?.currency ?? "EUR" const label = appearance?.label ?? "Amount" const value = control?.value ?? 0 const [amount, setAmount] = useState(value) const [isEditing, setIsEditing] = useState(false) const inputRef = useRef(null) // Sync internal state when controlled value changes useEffect(() => { setAmount(value) }, [value]) const currencySymbol = useMemo(() => { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 0, }) .formatToParts(0) .find((part) => part.type === "currency")?.value || currency }, [currency]) const handleChange = (newValue: number) => { const clamped = Math.max(min, Math.min(max, newValue)) setAmount(clamped) } const handlePreset = (preset: number) => { setAmount(preset) } const handleInputChange = (e: React.ChangeEvent) => { const val = parseInt(e.target.value.replace(/[^0-9]/g, ""), 10) if (!isNaN(val)) { handleChange(val) } } const handleInputBlur = () => { setIsEditing(false) } const handleInputKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { setIsEditing(false) } } useEffect(() => { if (isEditing && inputRef.current) { inputRef.current.focus() inputRef.current.select() } }, [isEditing]) return (

{/* Amount display with +/- controls */}

{label}

{isEditing ? (

{currencySymbol}

) : ( )}

{/* Presets and confirm */}

{presets.map((preset) => ( ))}

{onConfirm && ( )}

) } 52:T452,// Demo data for Payment category components // This file contains sample data used for component previews and documentation import type { OrderItem } from '../types' // Default order items for OrderSummary export const demoOrderItems: OrderItem[] = [ { id: '1', name: 'Premium Headphones', quantity: 1, price: 199.99 }, { id: '2', name: 'Wireless Charger', quantity: 2, price: 29.99 } ] // Default order data for OrderSummary export const demoOrderData = { items: demoOrderItems, subtotal: 259.97, shipping: 9.99, tax: 21.58, discount: 25.0, discountCode: 'SAVE10', total: 266.54, } // OrderConfirm component data export const demoOrderConfirm = { productName: "Air Force 1 '07", productImage: 'https://ui.manifest.build/demo/shoe-1.png', price: 299, deliveryDate: 'Jan 20, 2024', } // AmountInput presets export const demoAmountPresets = [10, 25, 50, 100] // PaymentConfirmed component data export const demoPaymentConfirmed = { productName: "Air Force 1 '07", productImage: 'https://ui.manifest.build/demo/shoe-1.png', price: 299, deliveryDate: 'Jan 20, 2024', } 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","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@manifest","registryDependencies":["button","https://ui.manifest.build/r/manifest-types.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/payment/amount-input.tsx","content":"$51","type":"registry:block","target":"components/ui/amount-input.tsx"},{"path":"registry/payment/demo/payment.ts","content":"$52","type":"registry:lib","target":"components/ui/demo/payment.ts"}],"className":"h-[70svh] min-h-80"}]]}]