"use client"; import * as React from "react"; import { cn } from "cn"; export type AmountPanelContextValue = { value: number; setValue: (value: number) => void; }; type InternalAmountPanelContextValue = AmountPanelContextValue & { inputId: string; }; const AmountPanelContext = React.createContext(null); function useAmountPanelContext() { const context = React.useContext(AmountPanelContext); if (context === null) { throw new Error("AmountPanel components must be used inside AmountPanel"); } return context; } function useAmountPanel(): AmountPanelContextValue { return useAmountPanelContext(); } export type AmountPanelProps = Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" > & { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; }; function AmountPanelRoot({ value, defaultValue = 0, onValueChange, className, children, ...props }: AmountPanelProps) { const [internalValue, setInternalValue] = React.useState(defaultValue); const inputId = React.useId(); const currentValue = value ?? internalValue; const setValue = React.useCallback( (next: number) => { if (value === undefined) setInternalValue(next); onValueChange?.(next); }, [onValueChange, value], ); return (

{children}

); } export type AmountPanelHeaderProps = React.ComponentProps<"div">; function AmountPanelHeader({ className, ...props }: AmountPanelHeaderProps) { return (

); } export type AmountPanelLabelProps = React.ComponentProps<"label">; function AmountPanelLabel({ className, htmlFor, ...props }: AmountPanelLabelProps) { const { inputId } = useAmountPanelContext(); return ( ); } export type AmountPanelInputProps = Omit< React.ComponentProps<"input">, "defaultValue" | "value" | "onChange" | "type" > & { prefix?: React.ReactNode; suffix?: React.ReactNode; }; function parseAmountInput(input: string) { if (input.trim() === "") return undefined; const value = Number(input); return Number.isFinite(value) ? value : undefined; } function formatAmount(value: number) { return new Intl.NumberFormat(undefined, { maximumFractionDigits: 20, }).format(value); } function AmountPanelInput({ prefix, suffix, className, id, onBlur, onFocus, ...props }: AmountPanelInputProps) { const { value, setValue, inputId } = useAmountPanelContext(); const [inputValue, setInputValue] = React.useState(null); return (

{prefix !== undefined && ( {prefix} )} { setInputValue((current) => current ?? String(value)); onFocus?.(event); }} onBlur={(event) => { const next = parseAmountInput(inputValue ?? String(value)); if (next !== undefined) setValue(next); setInputValue(null); onBlur?.(event); }} onChange={(event) => { const next = event.currentTarget.value; setInputValue(next); const parsed = parseAmountInput(next); if (parsed !== undefined) setValue(parsed); }} className={cn( "min-w-[1ch] max-w-full flex-none bg-transparent text-right text-4xl font-medium text-foreground tabular-nums outline-none [field-sizing:content] sm:text-5xl", "focus-visible:rounded-md focus-visible:ring-0 focus-visible:ring-ring/30", className, )} {...props} /> {suffix !== undefined && ( {suffix} )}

); } export type AmountPanelActionsProps = React.ComponentProps<"div">; function AmountPanelActions({ className, ...props }: AmountPanelActionsProps) { return (

); } export type AmountPanelActionProps = { transform: (value: number) => number; children: React.ReactElement<{ onClick?: React.MouseEventHandler; "data-slot"?: string; }>; }; function AmountPanelAction({ transform, children }: AmountPanelActionProps) { const { value, setValue } = useAmountPanel(); const child = React.Children.only(children); return React.cloneElement(child, { "data-slot": "amount-panel-action", onClick: (event) => { const next = transform(value); if (Number.isFinite(next)) setValue(next); child.props.onClick?.(event); }, }); } const AmountPanel = Object.assign(AmountPanelRoot, { Header: AmountPanelHeader, Label: AmountPanelLabel, Input: AmountPanelInput, Actions: AmountPanelActions, Action: AmountPanelAction, }); export { AmountPanel, useAmountPanel };

Default

Code