@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/switch.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * An on/off switch that is still `<input type="checkbox">`, with `role="switch"`.
+ *
+ * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons
+ * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the
+ * one thing a checkbox is not: `role="switch"`, which screen readers announce as
+ * "on/off" rather than "checked/not checked". Use it for a setting that takes effect
+ * the moment it is flipped; a choice that waits for a Save button is a checkbox.
+ */
+/** Geometry per size. The thumb sits `2px` in from each end of the track, so its
+ *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a
+ *  `translate-x`: an inline-start offset follows the writing direction, so in a
+ *  right-to-left form the thumb travels right-to-left with no `rtl:` override to
+ *  keep in step. */
+declare const SIZES: {
+    readonly sm: {
+        readonly track: "h-4 w-7";
+        readonly thumb: "size-3 peer-checked:start-[14px]";
+    };
+    readonly md: {
+        readonly track: "h-5 w-9";
+        readonly thumb: "size-4 peer-checked:start-[18px]";
+    };
+};
+type SwitchSize = keyof typeof SIZES;
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "role"> {
+    /** `"md"` (36×20, default) or `"sm"` (28×16) — Kastlan's `default` and `sm`. */
+    size?: SwitchSize;
+    /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s
+     *  `label` for why it does not wrap the input. Without it, give the switch an
+     *  `aria-label`. */
+    label?: ReactNode;
+    /** Secondary text under the label, attached with `aria-describedby` (merged with
+     *  any the caller passed). */
+    description?: ReactNode;
+    /** Which end of the row the switch sits at when there is a label. `"end"` (the
+     *  default) is the settings-list shape Kastlan's profile page uses — the words at
+     *  the start, the control at the far end; `"start"` puts it before the words, like
+     *  a checkbox. Logical, so it follows the writing direction. */
+    switchPosition?: "start" | "end";
+    /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites
+     *  move without unwrapping the event. Fires alongside `onChange`. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Classes for the `<input>` (the track). `className` styles the outermost element:
+     *  the row when there is a label, the switch's own wrapper when there is not. */
+    inputClassName?: string;
+}
+/**
+ * A native checkbox drawn as a track and thumb, announced as a switch.
+ *
+ * Every other prop reaches the `<input>`, so it works controlled (`checked` +
+ * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain
+ * `<form>` (`name`, `value`).
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Switch, type SwitchProps, type SwitchSize };

package/dist/components/switch.js

@@ -0,0 +1,81 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+const SIZES = {
+  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.
+  sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:start-[14px]" },
+  // 36×20 track, 16px thumb.
+  md: { track: "h-5 w-9", thumb: "size-4 peer-checked:start-[18px]" }
+};
+const TRACK = "peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors checked:bg-[var(--brand)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed";
+const THUMB = "pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm transition-[inset-inline-start,background-color] motion-reduce:transition-none peer-checked:bg-[var(--brand-contrast)]";
+const Switch = forwardRef(function Switch2({
+  size = "md",
+  label,
+  description,
+  switchPosition = "end",
+  onCheckedChange,
+  onChange,
+  className,
+  inputClassName,
+  id,
+  disabled,
+  ...rest
+}, ref) {
+  const generated = useId();
+  const inputId = id ?? generated;
+  const descriptionId = `${inputId}-description`;
+  const showDescription = hasMessage(description);
+  const bare = label === void 0 && !showDescription;
+  const geometry = SIZES[size];
+  const control = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: bare ? id : inputId,
+        disabled,
+        ...rest,
+        type: "checkbox",
+        role: "switch",
+        "aria-describedby": mergeDescribedBy(rest["aria-describedby"], showDescription && descriptionId),
+        onChange: (e) => {
+          onChange?.(e);
+          onCheckedChange?.(e.target.checked);
+        },
+        className: cn(TRACK, geometry.track, inputClassName)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(THUMB, geometry.thumb) })
+  ] });
+  if (bare) return control;
+  const cell = /* @__PURE__ */ jsx("span", { className: "flex h-5 shrink-0 items-center", children: control });
+  const words = /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+    label !== void 0 && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "block text-sm leading-5 text-[var(--text-primary)]",
+          disabled ? "cursor-not-allowed" : "cursor-pointer select-none"
+        ),
+        children: label
+      }
+    ),
+    showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-[var(--text-muted)]", children: description })
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-3", disabled && "opacity-60", className), children: switchPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    words,
+    cell
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    cell,
+    words
+  ] }) });
+});
+Switch.displayName = "Switch";
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `2px` in from each end of the track, so its\n *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a\n *  `translate-x`: an inline-start offset follows the writing direction, so in a\n *  right-to-left form the thumb travels right-to-left with no `rtl:` override to\n *  keep in step. */\nconst SIZES = {\n  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-[14px]\" },\n  // 36×20 track, 16px thumb.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-[18px]\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const control = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        disabled={disabled}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-describedby={mergeDescribedBy(rest[\"aria-describedby\"], showDescription && descriptionId)}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 20px) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  const cell = <span className=\"flex h-5 shrink-0 items-center\">{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            disabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n          )}\n        >\n          {label}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n          {description}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", disabled && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":";AAyGI,SAmDI,UAlDF,KADF;AAzGJ,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAiB7C,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AAAA;AAAA,EAElE,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AACpE;AAWA,MAAM,QACJ;AASF,MAAM,QACJ;AAkCK,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,OAAO,UAAU,UAAa,CAAC;AACrC,QAAM,WAAW,MAAM,IAAI;AAE3B,QAAM,UACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,SAAS,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,OAAO,KAAK;AAAA,QAChB;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,oBAAkB,iBAAiB,KAAK,kBAAkB,GAAG,mBAAmB,aAAa;AAAA,QAC7F,UAAU,CAAC,MAAqC;AAC9C,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc;AAAA;AAAA,IACrD;AAAA,IACA,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,KAAK,GAAG;AAAA,KAC1D;AAGF,MAAI,KAAM,QAAO;AAKjB,QAAM,OAAO,oBAAC,UAAK,WAAU,kCAAkC,mBAAQ;AACvE,QAAM,QACJ,qBAAC,UAAK,WAAU,kBACb;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,QACpC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAU,iDAChC,uBACH;AAAA,KAEJ;AAGF,SACE,oBAAC,SAAI,WAAW,GAAG,0BAA0B,YAAY,cAAc,SAAS,GAC7E,6BAAmB,QAClB,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Switch"]}

package/dist/components/time-input.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { InputProps } from './ui.js';
+
+/**
+ * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).
+ *
+ * NATIVE `<input type="time">`, deliberately, rather than a pair of custom spinners.
+ * What the browser's control gives for free is the part a hand-rolled one gets wrong:
+ * 12- versus 24-hour display follows the user's OWN locale settings (not the page's —
+ * which is the right authority for "how do I read a clock"), a phone opens its
+ * platform wheel or dial, each segment is a spin button a screen reader already knows,
+ * and typing "1430" fills both segments. The price is that the display cannot be
+ * forced to 24h from here and the look of the segments is the browser's; neither is a
+ * reason for three apps to ship an unaudited widget. So this is {@link Input} with
+ * `type="time"` and a string contract, and everything else — the floating label, the
+ * `invalid`/`error` wiring, the click-anywhere `showPicker()` (feedback #224) — is
+ * Input's own, inherited rather than copied.
+ *
+ * Two things it adds over `<Input type="time">`:
+ *
+ *  - **A normalised value.** A time input's value is any valid time string, so a
+ *    browser may leave off a zero seconds segment with `step={1}` or report
+ *    milliseconds, and a stored value may carry seconds the field does not show.
+ *    `onValueChange` always hands back exactly the shape `step` implies, so the value
+ *    a form stores compares and sorts as a plain string.
+ *  - **Out-of-range painted, not just flagged.** A native time input outside
+ *    `min`/`max` matches `:invalid` and nothing styles that selector (see Input's
+ *    `invalid`), so an out-of-window time looked fine. Here it wears
+ *    {@link FIELD_INVALID} and `aria-invalid`. A reversed window (`min="22:00"
+ *    max="06:00"`, a night shift, quiet hours) is read the way the HTML spec reads it:
+ *    as wrapping past midnight.
+ */
+interface TimeInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant"> {
+    /** `"HH:mm"` (or `"HH:mm:ss"` with a sub-minute `step`); `""` is "no time". */
+    value: string;
+    /** The normalised value on every change the browser reports — which for a time
+     *  input is only once every segment holds a digit, or when the field is cleared
+     *  (`""`). Plain `onChange` still fires alongside it with the raw event. */
+    onValueChange?: (value: string) => void;
+    /** Earliest time, `"HH:mm"`. May be later than `max` for a window that wraps
+     *  midnight. */
+    min?: string;
+    /** Latest time, `"HH:mm"`. */
+    max?: string;
+    /** Granularity in SECONDS, as on the native input: 60 (the default) is minutes,
+     *  900 is quarter hours, anything not a whole minute (e.g. 1) shows seconds. */
+    step?: number;
+}
+/** Any `HH:mm[:ss[.sss]]` the browser reports → exactly the shape `step` implies.
+ *  Anything else (including `""`) comes back as it went in. */
+declare function normalizeTime(raw: string, seconds: boolean): string;
+/** Whether `value` lies inside `[min, max]`, wrapping midnight when `min > max`.
+ *  Zero-padded times compare as strings; both sides are padded to seconds first so
+ *  "14:30" and "14:30:00" are the same instant. */
+declare function isTimeInRange(value: string, min?: string, max?: string): boolean;
+declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { TimeInput, type TimeInputProps, isTimeInRange, normalizeTime };

package/dist/components/time-input.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Input } from "./ui.js";
+import { cn } from "../lib/cn.js";
+function withSeconds(step) {
+  return step !== void 0 && step % 60 !== 0;
+}
+function normalizeTime(raw, seconds) {
+  const m = /^(\d{2}):(\d{2})(?::(\d{2}))?/.exec(raw);
+  if (!m) return raw;
+  return seconds ? `${m[1]}:${m[2]}:${m[3] ?? "00"}` : `${m[1]}:${m[2]}`;
+}
+function isTimeInRange(value, min, max) {
+  if (value === "") return true;
+  const v = normalizeTime(value, true);
+  const lo = min ? normalizeTime(min, true) : void 0;
+  const hi = max ? normalizeTime(max, true) : void 0;
+  if (lo !== void 0 && hi !== void 0 && lo > hi) return v >= lo || v <= hi;
+  return (lo === void 0 || v >= lo) && (hi === void 0 || v <= hi);
+}
+const TimeInput = forwardRef(function TimeInput2({ value, onValueChange, onChange, min, max, step, invalid, inputClassName, ...rest }, ref) {
+  const seconds = withSeconds(step);
+  const outOfRange = !isTimeInRange(value, min, max);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      ...rest,
+      type: "time",
+      value: normalizeTime(value, seconds),
+      min,
+      max,
+      step,
+      invalid: invalid || outOfRange,
+      onChange: (e) => {
+        onChange?.(e);
+        onValueChange?.(normalizeTime(e.target.value, seconds));
+      },
+      inputClassName: cn("tabular-nums", inputClassName)
+    }
+  );
+});
+TimeInput.displayName = "TimeInput";
+export {
+  TimeInput,
+  isTimeInRange,
+  normalizeTime
+};
+//# sourceMappingURL=time-input.js.map

package/dist/components/time-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/time-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ChangeEvent } from \"react\";\nimport { Input, type InputProps } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * A time of day, as a `\"HH:mm\"` string (`\"HH:mm:ss\"` once `step` asks for seconds).\n *\n * NATIVE `<input type=\"time\">`, deliberately, rather than a pair of custom spinners.\n * What the browser's control gives for free is the part a hand-rolled one gets wrong:\n * 12- versus 24-hour display follows the user's OWN locale settings (not the page's —\n * which is the right authority for \"how do I read a clock\"), a phone opens its\n * platform wheel or dial, each segment is a spin button a screen reader already knows,\n * and typing \"1430\" fills both segments. The price is that the display cannot be\n * forced to 24h from here and the look of the segments is the browser's; neither is a\n * reason for three apps to ship an unaudited widget. So this is {@link Input} with\n * `type=\"time\"` and a string contract, and everything else — the floating label, the\n * `invalid`/`error` wiring, the click-anywhere `showPicker()` (feedback #224) — is\n * Input's own, inherited rather than copied.\n *\n * Two things it adds over `<Input type=\"time\">`:\n *\n *  - **A normalised value.** A time input's value is any valid time string, so a\n *    browser may leave off a zero seconds segment with `step={1}` or report\n *    milliseconds, and a stored value may carry seconds the field does not show.\n *    `onValueChange` always hands back exactly the shape `step` implies, so the value\n *    a form stores compares and sorts as a plain string.\n *  - **Out-of-range painted, not just flagged.** A native time input outside\n *    `min`/`max` matches `:invalid` and nothing styles that selector (see Input's\n *    `invalid`), so an out-of-window time looked fine. Here it wears\n *    {@link FIELD_INVALID} and `aria-invalid`. A reversed window (`min=\"22:00\"\n *    max=\"06:00\"`, a night shift, quiet hours) is read the way the HTML spec reads it:\n *    as wrapping past midnight.\n */\nexport interface TimeInputProps\n  extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\" | \"variant\"> {\n  /** `\"HH:mm\"` (or `\"HH:mm:ss\"` with a sub-minute `step`); `\"\"` is \"no time\". */\n  value: string;\n  /** The normalised value on every change the browser reports — which for a time\n   *  input is only once every segment holds a digit, or when the field is cleared\n   *  (`\"\"`). Plain `onChange` still fires alongside it with the raw event. */\n  onValueChange?: (value: string) => void;\n  /** Earliest time, `\"HH:mm\"`. May be later than `max` for a window that wraps\n   *  midnight. */\n  min?: string;\n  /** Latest time, `\"HH:mm\"`. */\n  max?: string;\n  /** Granularity in SECONDS, as on the native input: 60 (the default) is minutes,\n   *  900 is quarter hours, anything not a whole minute (e.g. 1) shows seconds. */\n  step?: number;\n}\n\n/** Seconds shown when `step` is not a whole number of minutes — the browser's own rule\n *  for whether the seconds segment appears. */\nfunction withSeconds(step: number | undefined): boolean {\n  return step !== undefined && step % 60 !== 0;\n}\n\n/** Any `HH:mm[:ss[.sss]]` the browser reports → exactly the shape `step` implies.\n *  Anything else (including `\"\"`) comes back as it went in. */\nexport function normalizeTime(raw: string, seconds: boolean): string {\n  const m = /^(\\d{2}):(\\d{2})(?::(\\d{2}))?/.exec(raw);\n  if (!m) return raw;\n  return seconds ? `${m[1]}:${m[2]}:${m[3] ?? \"00\"}` : `${m[1]}:${m[2]}`;\n}\n\n/** Whether `value` lies inside `[min, max]`, wrapping midnight when `min > max`.\n *  Zero-padded times compare as strings; both sides are padded to seconds first so\n *  \"14:30\" and \"14:30:00\" are the same instant. */\nexport function isTimeInRange(value: string, min?: string, max?: string): boolean {\n  if (value === \"\") return true;\n  const v = normalizeTime(value, true);\n  const lo = min ? normalizeTime(min, true) : undefined;\n  const hi = max ? normalizeTime(max, true) : undefined;\n  if (lo !== undefined && hi !== undefined && lo > hi) return v >= lo || v <= hi;\n  return (lo === undefined || v >= lo) && (hi === undefined || v <= hi);\n}\n\nexport const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(function TimeInput(\n  { value, onValueChange, onChange, min, max, step, invalid, inputClassName, ...rest },\n  ref,\n) {\n  const seconds = withSeconds(step);\n  const outOfRange = !isTimeInRange(value, min, max);\n  return (\n    <Input\n      ref={ref}\n      {...rest}\n      type=\"time\"\n      // Normalised on the way IN as well: a stored \"14:30:00\" handed to a minutes-only\n      // field would otherwise make the browser show a seconds segment nobody asked for.\n      value={normalizeTime(value, seconds)}\n      min={min}\n      max={max}\n      step={step}\n      invalid={invalid || outOfRange}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e);\n        onValueChange?.(normalizeTime(e.target.value, seconds));\n      }}\n      // The segments are digits that change under the caret as you spin them;\n      // proportional figures make the whole field jitter sideways on every step.\n      inputClassName={cn(\"tabular-nums\", inputClassName)}\n    />\n  );\n});\nTimeInput.displayName = \"TimeInput\";\n"],"mappings":";AAqFI;AArFJ,SAAS,kBAAkB;AAE3B,SAAS,aAA8B;AACvC,SAAS,UAAU;AAmDnB,SAAS,YAAY,MAAmC;AACtD,SAAO,SAAS,UAAa,OAAO,OAAO;AAC7C;AAIO,SAAS,cAAc,KAAa,SAA0B;AACnE,QAAM,IAAI,gCAAgC,KAAK,GAAG;AAClD,MAAI,CAAC,EAAG,QAAO;AACf,SAAO,UAAU,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;AACtE;AAKO,SAAS,cAAc,OAAe,KAAc,KAAuB;AAChF,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,IAAI,cAAc,OAAO,IAAI;AACnC,QAAM,KAAK,MAAM,cAAc,KAAK,IAAI,IAAI;AAC5C,QAAM,KAAK,MAAM,cAAc,KAAK,IAAI,IAAI;AAC5C,MAAI,OAAO,UAAa,OAAO,UAAa,KAAK,GAAI,QAAO,KAAK,MAAM,KAAK;AAC5E,UAAQ,OAAO,UAAa,KAAK,QAAQ,OAAO,UAAa,KAAK;AACpE;AAEO,MAAM,YAAY,WAA6C,SAASA,WAC7E,EAAE,OAAO,eAAe,UAAU,KAAK,KAAK,MAAM,SAAS,gBAAgB,GAAG,KAAK,GACnF,KACA;AACA,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,aAAa,CAAC,cAAc,OAAO,KAAK,GAAG;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MAGL,OAAO,cAAc,OAAO,OAAO;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,UAAU,CAAC,MAAqC;AAC9C,mBAAW,CAAC;AACZ,wBAAgB,cAAc,EAAE,OAAO,OAAO,OAAO,CAAC;AAAA,MACxD;AAAA,MAGA,gBAAgB,GAAG,gBAAgB,cAAc;AAAA;AAAA,EACnD;AAEJ,CAAC;AACD,UAAU,cAAc;","names":["TimeInput"]}

package/dist/components/toggle-group.d.ts

@@ -1,11 +1,21 @@
 import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 
 interface ToggleOption<T extends string> {
     value: T;
     label: string;
     className?: string;
 }
-interface ToggleGroupProps<T extends string> {
+/**
+ * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's
+ * `onChange` is omitted rather than shadowed: leaving both in scope would give the
+ * prop two incompatible meanings depending on which overload TypeScript picked.
+ *
+ * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type
+ * accepted and the component ignored would be a prop that silently does nothing —
+ * worse than one that does not compile.
+ */
+interface ToggleGroupProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
     value: T;
     onChange: (value: T) => void;
     options: ToggleOption<T>[];
@@ -13,6 +23,11 @@ interface ToggleGroupProps<T extends string> {
     /** Applied to every option button (e.g. to tune height/rounding to match
      *  adjacent fields). Per-option `className` still wins over this. */
     optionClassName?: string;
+    /**
+     * @deprecated Pass `aria-label` instead — the DOM spelling, which every other
+     * control in this kit now answers to. Kept working because three applications ship
+     * this one today; it names the group only when `aria-label` is absent.
+     */
     ariaLabel?: string;
     /**
      * Show, refuse the change (Keksdose live #288: a payment dated in the future has no
@@ -29,6 +44,6 @@ interface ToggleGroupProps<T extends string> {
      */
     disabled?: boolean;
 }
-declare function ToggleGroup<T extends string>({ value, onChange, options, className, optionClassName, ariaLabel, disabled, }: ToggleGroupProps<T>): react.JSX.Element;
+declare function ToggleGroup<T extends string>({ value, onChange, options, className, optionClassName, ariaLabel, disabled, "aria-label": ariaLabelAttr, ...rest }: ToggleGroupProps<T>): react.JSX.Element;
 
-export { ToggleGroup };
+export { ToggleGroup, type ToggleGroupProps, type ToggleOption };

package/dist/components/toggle-group.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 function ToggleGroup({
@@ -7,13 +8,16 @@ function ToggleGroup({
   className,
   optionClassName,
   ariaLabel,
-  disabled = false
+  disabled = false,
+  "aria-label": ariaLabelAttr,
+  ...rest
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       role: "radiogroup",
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabelAttr ?? ariaLabel,
       "aria-disabled": disabled || void 0,
       className: cn(
         // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
@@ -28,7 +32,7 @@ function ToggleGroup({
         // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every
         // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a
         // phone does see is the focus ring — see the segment's own note below.)
-        "inline-flex w-full gap-0.5 rounded-md border border-slate-300 bg-white p-0.5 shadow-sm dark:border-slate-700 dark:bg-slate-900",
+        "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
@@ -62,14 +66,14 @@ function ToggleGroup({
               //
               // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring
               // is a box-shadow that spreads OUTWARD, so on a flush group it painted
-              // 2px of slate over both neighbours and over the container's own border
+              // 2px of ring over both neighbours and over the container's own border
               // — and on a phone it appeared on every TAP, because a tap focuses the
               // button. That is the other half of what live #268's rework saw
               // overlaying the selected segment's boundary. Inset keeps the ring
               // inside the segment it belongs to; focus-visible keeps it for the
               // keyboard, which is the only input that needs it.
-              "min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-400",
-              active ? "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900" : "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
+              "min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+              active ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
               // No hover fill on a group that cannot be changed — a segment that
               // lights up under the pointer is an offer, and there is none here.
               disabled && "cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent",

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\ninterface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\ninterface ToggleGroupProps<T extends string> {\n  value: T;\n  onChange: (value: T) => void;\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n}\n\nexport function ToggleGroup<T extends string>({\n  value,\n  onChange,\n  options,\n  className,\n  optionClassName,\n  ariaLabel,\n  disabled = false,\n}: ToggleGroupProps<T>) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-slate-300 bg-white p-0.5 shadow-sm dark:border-slate-700 dark:bg-slate-900\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      {options.map((opt) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            disabled={disabled}\n            onClick={() => onChange(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of slate over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-400\",\n              active\n                ? \"bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900\"\n                : \"text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"AA0EU;AA1EV,SAAS,UAAU;AAiCZ,SAAS,YAA8B;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MAIZ,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,QAAQ;AACpB,cAAM,SAAS,IAAI,UAAU;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd;AAAA,YACA,SAAS,MAAM,SAAS,IAAI,KAAK;AAAA,YACjC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAuBT;AAAA,cACA,SACI,kEACA;AAAA;AAAA;AAAA,cAGJ,YAAY;AAAA,cACZ;AAAA,cACA,IAAI;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,UAxCA,IAAI;AAAA,QAyCX;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  value: T;\n  onChange: (value: T) => void;\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n}\n\nexport function ToggleGroup<T extends string>({\n  value,\n  onChange,\n  options,\n  className,\n  optionClassName,\n  ariaLabel,\n  disabled = false,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: ToggleGroupProps<T>) {\n  return (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role=\"radiogroup\"\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      {options.map((opt) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            disabled={disabled}\n            onClick={() => onChange(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAyGU;AAxGV,SAAS,UAAU;AAgDZ,SAAS,YAA8B;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MAWE,GAAG;AAAA,MACJ,MAAK;AAAA,MAGL,cAAY,iBAAiB;AAAA,MAI7B,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,QAAQ;AACpB,cAAM,SAAS,IAAI,UAAU;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd;AAAA,YACA,SAAS,MAAM,SAAS,IAAI,KAAK;AAAA,YACjC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAuBT;AAAA,cACA,SACI,sDACA;AAAA;AAAA;AAAA,cAGJ,YAAY;AAAA,cACZ;AAAA,cACA,IAAI;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,UAxCA,IAAI;AAAA,QAyCX;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/toggle-legend.d.ts

@@ -0,0 +1,115 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SeriesChartLabels } from './series-chart-labels.js';
+
+/**
+ * The strokes a reader can tell apart, in the order they are handed out.
+ *
+ * For the charts where the colour is already spoken for: a comparison draws each
+ * measurement in its own colour, so a chart carrying several CHANNELS of each has
+ * nothing left but the stroke — and "solid versus dashed" only gets you two.
+ *
+ * **Five, and the fifth is the last one.** They are the draughtsman's line types, in
+ * the draughtsman's order — continuous, dashed, dotted, dash-dot, dash-dot-dot — the
+ * one family of five a century of drawings has already proved legible at a hair's
+ * width. A sixth is not distinguishable from one of these at two pixels wide, so a
+ * chart needing one is a chart that should be split.
+ *
+ * Kept here, beside the legend's own mark, and read by `SeriesChart` from here — so
+ * the key under a chart and the lines on it cannot disagree.
+ */
+declare const STROKE_PATTERNS: readonly (string | undefined)[];
+/** The dash array for the nth pattern, wrapping past the fifth. */
+declare function strokeDash(order: number): string | undefined;
+/** Which of the patterns a `step` series is drawn in.
+ *
+ *  A whole-number channel that jumps rather than travels is drawn dashed, and it has
+ *  to be one of {@link STROKE_PATTERNS} rather than a dash array written out at the
+ *  call site: a legend entry says its pattern by index, so a step line drawn in
+ *  anything else would be a legend promising a solid line for a dashed one. */
+declare const STEP_DASH = 1;
+/**
+ * One key switched, as a new hidden set.
+ *
+ * Every caller writes `onToggle={(key) => setHidden(toggleHidden(hidden, key))}`. A
+ * new set rather than a mutated one, because the state is read during render and a
+ * mutation of something a component already holds is invisible to React.
+ */
+declare function toggleHidden(hidden: ReadonlySet<string>, key: string): ReadonlySet<string>;
+interface LegendEntry {
+    key: string;
+    label: ReactNode;
+    /** Any CSS colour — `paletteFor(i)` for the kit's own ramp. */
+    color: string;
+    /**
+     * What the entry's mark looks like. `swatch` — a filled square, the default — says
+     * WHICH MEASUREMENT. `stroke` says WHICH QUANTITY, for the charts that carry both at
+     * once and tell them apart by colour and by dash.
+     */
+    marker?: "swatch" | "stroke";
+    /** Which of {@link STROKE_PATTERNS}, when the marker is a stroke — the same index
+     *  `SeriesChartSeries.dash` takes, so a legend cannot promise a dot-dash the plot
+     *  draws dashed. */
+    dash?: number;
+}
+interface ToggleLegendProps {
+    entries: LegendEntry[];
+    /** The keys currently off the chart. */
+    hidden: ReadonlySet<string>;
+    onToggle: (key: string) => void;
+    /** `vertical` is for a legend standing BESIDE the charts rather than under them —
+     *  what a row of charts sharing one legend wants, since under two charts there is
+     *  no "under", and putting it under one says it belongs to that one. */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Draw a legend of ONE entry rather than nothing.
+     *
+     * A single line's legend is usually noise. It is not where the legend is the only
+     * SWITCH that line has — a series that starts hidden and has no entry to bring it
+     * back is gone for good.
+     */
+    showSingle?: boolean;
+    className?: string;
+    /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */
+    labels?: Partial<SeriesChartLabels>;
+}
+/**
+ * A legend whose entries are switches.
+ *
+ * `ChartLegendContent` with `onItemClick`/`activeKey` is the other kind: clicking an
+ * entry HIGHLIGHTS it and dims the rest, which is right when every series belongs on
+ * the chart and one of them is momentarily interesting. This is for the opposite —
+ * three coordinates on one axis where y runs to 800 and z barely moves, and the only
+ * way to see z is to take y off the chart entirely. Any number may be off at once.
+ *
+ * A hidden entry keeps its mark and its place. Removing it would reflow the legend on
+ * every click and lose the one thing it is for: saying what COULD be shown.
+ *
+ * Each entry is a real `<button>` with `aria-pressed` — pressed means "on the chart" —
+ * so Tab reaches every switch and Space/Enter flips it.
+ */
+declare function ToggleLegend({ entries, hidden, onToggle, orientation, showSingle, className, labels: labelsProp, }: ToggleLegendProps): react.JSX.Element | null;
+/**
+ * The column a vertical legend stands in: beside the charts, on their horizontal
+ * centre line. `h-full` + `justify-center`, so it centres in a grid cell or a flex row
+ * that stretches it — and stacks whatever it is given, which is what a panel showing
+ * two legends at once needs. The width is the caller's: how wide a legend column is
+ * is a fact about that screen's layout.
+ */
+declare function LegendColumn({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * A legend and what it is a legend OF, as a headed column.
+ *
+ * For legends that are several vocabularies at once — which measurement and which
+ * channel — so the entries are read down a group and the groups across. Wrapped rows
+ * would put the second half of one group on a line under the first half of the next.
+ */
+declare function LegendGroup({ title, children }: {
+    title: ReactNode;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { LegendColumn, type LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, ToggleLegend, type ToggleLegendProps, strokeDash, toggleHidden };