Money input

import { MoneyInput, type Money } from "@bosunkit/components/money-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A diesel receipt in Turkish lira on a vessel that keeps its accounts in euros: the currency is chosen at the start " +
  "of the field, the amount takes a comma or a dot before the kuruş, and the amount in euros at the ECB rate shows " +
  "under it.";

// The European Central Bank's reference rates bosund holds for the day: how many units one euro buys.
const RATES: Readonly<Record<string, number>> = { GBP: 0.8571, TRY: 35.62, USD: 1.0843, THB: 38.9, CHF: 0.9402 };

export default function Showcase(): ReactElement {
  const [value, setValue]: [Money, Dispatch<SetStateAction<Money>>] = useState<Money>({
    amount: 5385.5,
    currency: "TRY",
  });
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <MoneyInput
        label="Amount"
        required
        value={value}
        onValueChange={setValue}
        localCurrency="EUR"
        rates={RATES}
        ratesDate="2026-10-16"
      />
    </div>
  );
}

import { MoneyInput, type Money } from "@bosunkit/components/money-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "An amount typed either way: 151,20 and 151.20 are the same euros, 1.234,50 and 1,234.50 the same thousand, and " +
  "the field writes it back the crew's way once they leave it. The page shows what it receives.";

export default function CommaOrDot(): ReactElement {
  const [value, setValue]: [Money, Dispatch<SetStateAction<Money>>] = useState<Money>({ amount: null, currency: "EUR" });
  return (
    <div style={{ width: "100%", maxWidth: 400, display: "grid", gap: "var(--space-sm)" }}>
      <MoneyInput label="Mooring fee" value={value} onValueChange={setValue} placeholder="151,20" />
      <p style={{ margin: 0, color: "var(--text-dim)" }}>
        The page receives: {value.amount === null ? "no amount yet" : `${String(value.amount)} ${value.currency}`}
      </p>
    </div>
  );
}

import { MoneyInput } from "@bosunkit/components/money-input";
import type { ReactElement } from "react";

export const description: string =
  "A receipt in a currency the day's rates do not cover: the field says so, and keeps the amount in that currency.";

// The European Central Bank's reference rates bosund holds for the day: how many units one euro buys.
const RATES: Readonly<Record<string, number>> = { GBP: 0.8571, TRY: 35.62, USD: 1.0843, CHF: 0.9402 };

export default function NoRate(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <MoneyInput
        label="Amount"
        defaultValue={{ amount: 1200, currency: "XCD" }}
        currencies={["EUR", "GBP", "USD", "XCD"]}
        localCurrency="EUR"
        rates={RATES}
        ratesDate="2026-10-16"
      />
    </div>
  );
}

import { MoneyInput } from "@bosunkit/components/money-input";
import type { ReactElement } from "react";

export const description: string =
  "An amount with three decimals in euros, as the field shows it once the crew leave it: the error says how many " +
  "decimal places the currency has.";

export default function Invalid(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <MoneyInput
        label="Amount"
        defaultValue={{ amount: null, currency: "EUR" }}
        error="Euro amounts have 2 decimal places. Remove the extra digits."
      />
    </div>
  );
}

import { MoneyInput } from "@bosunkit/components/money-input";
import type { ReactElement } from "react";

export const description: string = "A reconciled expense: the amount and its currency shown, neither changeable.";

export default function ReadOnly(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <MoneyInput label="Amount" readOnly defaultValue={{ amount: 182.4, currency: "EUR" }} />
    </div>
  );
}

import { MoneyInput } from "@bosunkit/components/money-input";
import type { ReactElement } from "react";

export const description: string = "A field that cannot be used while the form saves.";

export default function Disabled(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <MoneyInput label="Amount" disabled defaultValue={{ amount: 64, currency: "GBP" }} />
    </div>
  );
}