Outlined field

import { FormField } from "@bosunkit/components/form-field";
import { OutlinedField, OutlinedInput } from "@bosunkit/components/outlined-field";
import { CircleHelp, Ship } from "lucide-react";
import { useState, type ChangeEvent, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A vessel's registration: a required name the crew fill, a call sign that is wrong until it has four to seven " +
  "letters and digits, a read-only home port, a disabled tonnage, a field with an icon at the start and a help " +
  "button at the end that shows its help, and the same input inside a form field.";

function callSignError(callSign: string): string | undefined {
  return callSign === "" || /^[A-Z0-9]{4,7}$/.test(callSign)
    ? undefined
    : "A call sign has 4 to 7 letters and digits, such as MXYZ7. Check it on the ship radio licence.";
}

export default function Showcase(): ReactElement {
  const [name, setName]: [string, Dispatch<SetStateAction<string>>] = useState<string>("Althea");
  const [callSign, setCallSign]: [string, Dispatch<SetStateAction<string>>] = useState<string>("MX7");
  const [helpShown, setHelpShown]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  return (
    <div
      style={{
        width: "100%",
        maxWidth: 560,
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: "var(--space-lg)",
      }}
    >
      <OutlinedInput
        label="Vessel name"
        required
        value={name}
        onChange={(event: ChangeEvent<HTMLInputElement>): void => {
          setName(event.target.value);
        }}
      />
      <OutlinedInput
        label="Call sign"
        hint="Four to seven letters and digits."
        value={callSign}
        error={callSignError(callSign)}
        autoCapitalize="characters"
        onChange={(event: ChangeEvent<HTMLInputElement>): void => {
          setCallSign(event.target.value.toUpperCase());
        }}
      />
      <OutlinedInput label="Home port" defaultValue="Falmouth" readOnly />
      <OutlinedInput label="Gross tonnage" defaultValue="18" disabled />
      <OutlinedField
        label="Hull identification number"
        labelFor="showcase-hin"
        filled
        start={<Ship size={18} aria-hidden="true" />}
        end={
          <button
            type="button"
            className="outlined-field__icon-button"
            aria-label="Help"
            aria-expanded={helpShown}
            onClick={(): void => {
              setHelpShown(!helpShown);
            }}
          >
            <CircleHelp size={20} aria-hidden="true" />
          </button>
        }
        hint={helpShown ? "Fourteen characters, moulded into the transom on the starboard side." : undefined}
        hintId="showcase-hin-help"
      >
        <input
          id="showcase-hin"
          className="outlined-field__control"
          defaultValue="GB-HAN46012K526"
          aria-describedby={helpShown ? "showcase-hin-help" : undefined}
        />
      </OutlinedField>
      <FormField label="Owner">
        <OutlinedInput aria-label="Owner" defaultValue="Mara Quist" />
      </FormField>
    </div>
  );
}

import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string =
  "An empty field: the label rests inside the outline until the field takes focus, then moves onto its edge and " +
  "the placeholder shows.";

export default function Empty(): ReactElement {
  return <OutlinedInput label="Given names" placeholder="e.g. MARIA LOPEZ" />;
}

import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string = "A field with a value: the label sits in a gap in the outline's top edge.";

export default function Filled(): ReactElement {
  return <OutlinedInput label="Family name" defaultValue="Quist" />;
}

import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string =
  "A required field: a red asterisk after the label, which the accessible name leaves out, and `required` on the input.";

export default function Required(): ReactElement {
  return <OutlinedInput label="Given names" required />;
}

import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string =
  "An error turns the outline and label red, marks the input `aria-invalid` and is announced; it takes the hint's place.";

export default function Invalid(): ReactElement {
  return (
    <OutlinedInput
      label="Passport number"
      defaultValue="X12"
      hint="As printed on the passport's photo page."
      error="This passport number is too short. Check it against the photo page."
    />
  );
}

import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string = "A read-only field draws a dashed outline; the value can be selected and copied.";

export default function ReadOnly(): ReactElement {
  return <OutlinedInput label="Home port" defaultValue="Falmouth" readOnly />;
}

import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string = "A disabled field is dimmed and takes no focus.";

export default function Disabled(): ReactElement {
  return <OutlinedInput label="Gross tonnage" defaultValue="18" disabled />;
}

import { FormField } from "@bosunkit/components/form-field";
import { OutlinedInput } from "@bosunkit/components/outlined-field";
import type { ReactElement } from "react";

export const description: string =
  "Inside a form field, the field draws no label of its own and takes its name from `aria-label`; the form field " +
  "carries the error.";

export default function InFormField(): ReactElement {
  return (
    <FormField label="Owner" error="Enter the owner's name as on the registration.">
      <OutlinedInput aria-label="Owner" aria-invalid />
    </FormField>
  );
}