Date and time input

import { DateTimeInput } from "@bosunkit/components/date-time-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A log entry's time in UTC, which cannot be after the current time, and a crew member's flight home in the " +
  "device's own zone, printed with its offset. Each reports the instant in UTC.";

export default function Showcase(): ReactElement {
  const [entry, setEntry]: [string, Dispatch<SetStateAction<string>>] = useState<string>("2026-10-11T09:30:00.000Z");
  const [flight, setFlight]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  return (
    <div style={{ width: "100%", display: "grid", gap: "var(--space-xl)" }}>
      <DateTimeInput
        label="Time of the entry"
        now={Date.parse("2026-10-11T12:00:00.000Z")}
        max="2026-10-11T12:00:00.000Z"
        value={entry}
        onValueChange={setEntry}
      />
      <DateTimeInput
        label="Flight home"
        zone="local"
        now={Date.parse("2026-10-11T12:00:00.000Z")}
        value={flight}
        onValueChange={setFlight}
      />
    </div>
  );
}

import { DateTimeInput } from "@bosunkit/components/date-time-input";
import type { ReactElement } from "react";

export const description: string = "Empty: a date and a time to type or choose, the time with UTC beside it.";

export default function Empty(): ReactElement {
  return <DateTimeInput label="Departure" now={Date.parse("2026-10-11T12:00:00.000Z")} />;
}

import { DateTimeInput } from "@bosunkit/components/date-time-input";
import type { ReactElement } from "react";

export const description: string =
  "With `max` set to the current time, for an entry that records what has happened: a later instant is named with " +
  "its reference and not reported.";

export default function Latest(): ReactElement {
  return (
    <DateTimeInput
      label="Time of the entry"
      now={Date.parse("2026-10-11T12:00:00.000Z")}
      max="2026-10-11T12:00:00.000Z"
      defaultValue="2026-10-11T11:40:00.000Z"
    />
  );
}

import { DateTimeInput } from "@bosunkit/components/date-time-input";
import type { ReactElement } from "react";

export const description: string =
  '`zone="local"` reads and writes the device\'s own time and prints its offset from UTC beside it, for a time that ' +
  "belongs to a person ashore.";

export default function LocalZone(): ReactElement {
  return <DateTimeInput label="Taxi to the airport" zone="local" now={Date.parse("2026-10-11T12:00:00.000Z")} />;
}

import { DateTimeInput } from "@bosunkit/components/date-time-input";
import type { ReactElement } from "react";

export const description: string =
  "A date without a time, a time without a date, or an instant past the bounds is named under the group once the " +
  "crew leave it.";

export default function Invalid(): ReactElement {
  return (
    <DateTimeInput
      label="Departure"
      now={Date.parse("2026-10-11T12:00:00.000Z")}
      defaultValue="2026-10-14T06:15:00.000Z"
      error="Choose a time from 15 October 2026, 00:00 UTC on."
    />
  );
}

import { DateTimeInput } from "@bosunkit/components/date-time-input";
import type { ReactElement } from "react";

export const description: string = "Read-only: the instant shown in its parts, with dashed outlines.";

export default function ReadOnly(): ReactElement {
  return (
    <DateTimeInput
      label="Anchored"
      readOnly
      now={Date.parse("2026-10-11T12:00:00.000Z")}
      defaultValue="2026-10-10T17:20:00.000Z"
    />
  );
}