Quantity input

import { QuantityInput } from "@bosunkit/components/quantity-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A vessel's draft and air draft typed in feet and held in meters, each rounded up so it never understates the " +
  "vessel, and a fuel tank typed in US gallons and held in liters. The unit button switches the unit.";

export default function Showcase(): ReactElement {
  const [draft, setDraft]: [number | null, Dispatch<SetStateAction<number | null>>] = useState<number | null>(1.99);
  const [air, setAir]: [number | null, Dispatch<SetStateAction<number | null>>] = useState<number | null>(19.2);
  const [fuel, setFuel]: [number | null, Dispatch<SetStateAction<number | null>>] = useState<number | null>(400);
  return (
    <div style={{ width: "100%", display: "flex", flexWrap: "wrap", gap: "var(--space-lg)" }}>
      <QuantityInput
        label="Draft"
        kind="length"
        defaultUnit="ft"
        rounding="up"
        max={50}
        value={draft}
        onValueChange={setDraft}
      />
      <QuantityInput
        label="Air draft"
        kind="length"
        defaultUnit="ft"
        rounding="up"
        value={air}
        onValueChange={setAir}
      />
      <QuantityInput
        label="Fuel tank"
        kind="volume"
        defaultUnit="us_gal"
        decimals={0}
        value={fuel}
        onValueChange={setFuel}
      />
    </div>
  );
}

import { QuantityInput } from "@bosunkit/components/quantity-input";
import type { ReactElement } from "react";

export const description: string = "In the base unit, the value is written to its decimals and nothing is converted.";

export default function BaseUnit(): ReactElement {
  return <QuantityInput label="Length overall" kind="length" defaultValue={13.95} />;
}

import { QuantityInput } from "@bosunkit/components/quantity-input";
import type { ReactElement } from "react";

export const description: string =
  "`rounding` decides which way a converted value is cut to its decimals: down for a depth or a clearance under the " +
  "keel, so it never overstates the water; up for a draft or an air draft, so it never understates the vessel.";

export default function Rounding(): ReactElement {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-lg)" }}>
      <QuantityInput label="Least depth on the bar" kind="length" defaultUnit="ft" rounding="down" defaultValue={2.4} />
      <QuantityInput label="Draft" kind="length" defaultUnit="ft" rounding="up" defaultValue={2.4} />
    </div>
  );
}

import { QuantityInput } from "@bosunkit/components/quantity-input";
import type { ReactElement } from "react";

export const description: string =
  "A speed is held in knots and can be typed in km/h or m/s, as a river or canal authority posts its limit.";

export default function Speed(): ReactElement {
  return <QuantityInput label="Canal speed limit" kind="speed" defaultUnit="kmh" decimals={1} defaultValue={4.3} />;
}

import { QuantityInput } from "@bosunkit/components/quantity-input";
import type { ReactElement } from "react";

export const description: string =
  "`min` and `max` are in the base unit, and the error names them in the unit shown, rounded inward so the limit it " +
  "states is one the field takes.";

export default function Bounds(): ReactElement {
  return (
    <QuantityInput
      label="Draft"
      kind="length"
      defaultUnit="ft"
      max={50}
      error="Enter at most 164.04 ft."
      defaultValue={null}
    />
  );
}

import { QuantityInput } from "@bosunkit/components/quantity-input";
import type { ReactElement } from "react";

export const description: string = "Read-only: the value and its unit written, the unit not offered.";

export default function ReadOnly(): ReactElement {
  return <QuantityInput label="Water tank" kind="volume" readOnly decimals={0} defaultValue={300} />;
}