Duration input

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

export const description: string =
  "A watch length held in minutes: typed as the crew say it, written back in hours and minutes, stepped by 30 min.";

export default function Showcase(): ReactElement {
  const [minutes, setMinutes]: [number | null, Dispatch<SetStateAction<number | null>>] = useState<number | null>(240);
  return (
    <div style={{ display: "grid", gap: "var(--space-sm)", maxInlineSize: "22rem" }}>
      <DurationInput
        appearance="outlined"
        label="Watch length"
        unit="min"
        min={60}
        max={480}
        step={30}
        value={minutes}
        onValueChange={setMinutes}
        hint="Between 1 and 8 hours."
      />
      <p style={{ margin: 0, color: "var(--text-dim)" }}>
        The page receives: {minutes === null ? "no duration" : `${String(minutes)} minutes`}
      </p>
    </div>
  );
}

import { DurationInput } from "@bosunkit/components/duration-input";
import type { ReactElement } from "react";

export const description: string = "A watch length held in hours, with the three lengths a rotation uses as chips.";

export default function Presets(): ReactElement {
  return (
    <div style={{ maxInlineSize: "22rem" }}>
      <DurationInput appearance="outlined" label="Watch length" unit="h" defaultValue={3} presets={[2, 3, 4]} />
    </div>
  );
}

import { DurationInput } from "@bosunkit/components/duration-input";
import type { ReactElement } from "react";

export const description: string = "An anchor alarm's delay, held in seconds and written in minutes and seconds.";

export default function Seconds(): ReactElement {
  return (
    <div style={{ maxInlineSize: "22rem" }}>
      <DurationInput appearance="outlined" label="Alarm delay" unit="s" defaultValue={90} step={15} min={0} max={600} />
    </div>
  );
}

import { DurationInput } from "@bosunkit/components/duration-input";
import { FormField } from "@bosunkit/components/form-field";
import type { ReactElement } from "react";

export const description: string = "Plain, inside a form field that gives it its label and hint.";

export default function Plain(): ReactElement {
  return (
    <div style={{ maxInlineSize: "22rem" }}>
      <FormField label="Service interval" hint="Engine hours between oil changes.">
        <DurationInput unit="h" defaultValue={250} fields={["h"]} />
      </FormField>
    </div>
  );
}

import { DurationInput } from "@bosunkit/components/duration-input";
import type { ReactElement } from "react";

export const description: string = "A caller's error under the outlined field, as a form shows one bosund returned.";

export default function Invalid(): ReactElement {
  return (
    <div style={{ maxInlineSize: "22rem" }}>
      <DurationInput
        appearance="outlined"
        label="Rest between watches"
        unit="min"
        defaultValue={90}
        error="The rotation needs at least 2 hr between watches. Make it longer."
      />
    </div>
  );
}

import { DurationInput } from "@bosunkit/components/duration-input";
import type { ReactElement } from "react";

export const description: string = "Read-only: the value without step buttons or presets.";

export default function ReadOnly(): ReactElement {
  return (
    <div style={{ maxInlineSize: "22rem" }}>
      <DurationInput appearance="outlined" label="Engine run time" unit="min" defaultValue={135} readOnly step={5} />
    </div>
  );
}