金額入力CurrencyInputExperimental

import * as React from "react";
import { CurrencyInput, formatCurrency } from "@gunjo/ui";

export function InvoiceAmountField() {
  const [amount, setAmount] = React.useState<number | undefined>(1200000);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <CurrencyInput
        id="invoice-amount"
        label="請求金額"
        description="入力値は数値として保持し、表示時だけ通貨表記にします。"
        value={amount}
        onValueChange={setAmount}
        min={0}
        max={5000000}
        currency="JPY"
        locale="ja-JP"
      />
      <p className="text-sm text-muted-foreground">
        表示: {amount !== undefined ? formatCurrency(amount) : "未入力"}
      </p>
    </div>
  );
}