Date range picker

import { DateRangePicker, type DateRange } from "@bosunkit/components/date-range-picker";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Two ranges with limits: a log export of at most 31 UTC days that cannot end after the current one, and a charter " +
  "of at least two days inside the season. The calendar takes the first day and then the last, and offers only last " +
  "days the limits allow.";

export default function Showcase(): ReactElement {
  const [logExport, setExport]: [DateRange, Dispatch<SetStateAction<DateRange>>] = useState<DateRange>({
    start: "2026-10-01",
    end: "2026-10-11",
  });
  const [charter, setCharter]: [DateRange, Dispatch<SetStateAction<DateRange>>] = useState<DateRange>({
    start: "",
    end: "",
  });
  return (
    <div style={{ width: "100%", display: "flex", flexWrap: "wrap", gap: "var(--space-lg)" }}>
      <DateRangePicker
        label="Log export"
        today="2026-10-11"
        max="2026-10-11"
        maxDays={31}
        value={logExport}
        onValueChange={setExport}
      />
      <DateRangePicker
        label="Charter"
        today="2026-10-11"
        min="2026-10-11"
        max="2026-11-30"
        minDays={2}
        maxDays={14}
        value={charter}
        onValueChange={setCharter}
      />
    </div>
  );
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string = "Empty: a first and a last day to type, and the calendar button at the end.";

export default function Empty(): ReactElement {
  return <DateRangePicker label="Passage window" today="2026-10-11" />;
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string = "Filled: the range written out under the field with the number of days it holds.";

export default function Filled(): ReactElement {
  return (
    <DateRangePicker label="Passage window" today="2026-10-11" defaultValue={{ start: "2026-10-14", end: "2026-10-20" }} />
  );
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string =
  "With `minDays` and `maxDays`, both ends counted: once the first day is chosen, the calendar disables every last " +
  "day that would make the range too short or too long, and states the limits under the grid.";

export default function SpanLimits(): ReactElement {
  return <DateRangePicker label="Crew rotation" today="2026-10-11" minDays={7} maxDays={28} />;
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string =
  "With `min` and `max`, neither end can fall outside them: their days are disabled in the grid and a typed day past " +
  "them is named.";

export default function Bounds(): ReactElement {
  return <DateRangePicker label="Yard period" today="2026-10-11" min="2026-11-01" max="2027-03-31" />;
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string =
  "A range the field cannot take keeps its text and says why once the crew leave the field: a last day before the " +
  "first, more or fewer days than the limits allow, a missing end, or a day outside the bounds.";

export default function Invalid(): ReactElement {
  return (
    <DateRangePicker
      label="Log export"
      today="2026-10-11"
      maxDays={31}
      defaultValue={{ start: "2026-08-01", end: "2026-10-11" }}
      error="A range can be at most 31 days. Choose a last day up to 31 August 2026."
    />
  );
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string = "Read-only: the range shown with a dashed outline, and no calendar.";

export default function ReadOnly(): ReactElement {
  return (
    <DateRangePicker label="Insured period" today="2026-10-11" readOnly defaultValue={{ start: "2026-04-01", end: "2027-03-31" }} />
  );
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import type { ReactElement } from "react";

export const description: string = "Disabled: dimmed, and takes no input.";

export default function Disabled(): ReactElement {
  return <DateRangePicker label="Passage window" today="2026-10-11" disabled />;
}

import { DateRangePicker } from "@bosunkit/components/date-range-picker";
import { FormField } from "@bosunkit/components/form-field";
import type { ReactElement } from "react";

export const description: string = "Inside a form field, the group named by `aria-label`.";

export default function InFormField(): ReactElement {
  return (
    <FormField label="Engine log period">
      <DateRangePicker aria-label="Engine log period" today="2026-10-11" maxDays={92} />
    </FormField>
  );
}