@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/tile-radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * A row of square tiles that behaves as ONE radio group — the machinery\n * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the\n * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles\n * show something of the app's own — a mark, a pattern, a symbol set the kit does not\n * ship).\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n *\n * ## The container is yours\n *\n * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns\n * (a wrapping row, a grid, a row beside a search box). That element must carry the\n * group's semantics, as SwatchPicker's does:\n *\n * ```tsx\n * <div role=\"radiogroup\" aria-labelledby={headingId} className=\"flex flex-wrap gap-1.5\">\n *   <TileRadioGroup\n *     items={[{ key: \"dots\", label: \"Dots\" }, { key: \"lines\", label: \"Lines\" }]}\n *     checked={pattern}\n *     onSelect={(key) => key && setPattern(key)}\n *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}\n *   />\n * </div>\n * ```\n *\n * `role=\"radiogroup\"` and a name (`aria-label` or `aria-labelledby`) — without them a\n * screen reader hears radios that belong to nothing, and no \"2 of 7\". Set\n * `aria-disabled` on it as well when the whole group is `disabled`.\n *\n * ## What a tile is\n *\n * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by\n * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing\n * that label in a bubble on hover and focus — a row of unlabelled squares is the\n * complaint that put the bubble there. It is for choices that are SEEN: a colour, a\n * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines\n * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}\n * (`type=\"radio\"`): a card names its option by its title and describes it by its text,\n * where a tile would hide the text behind a bubble and repeat it.\n *\n * No strings of its own: every name is an item's `label`, the \"none\" tile's included.\n *\n * ## A tile that cannot be chosen\n *\n * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it\n * and Tab never lands on it, so a dimmed square says nothing about why. Give it a\n * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in\n * its bubble and its description — and choosing it does nothing (0.23, the kit's later\n * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).\n */\n\n/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`\n *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them\n *  in `renderTile` so a tile of the app's own matches theirs. */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry — a tile of its\n *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,\n   *  never the tab stop. */\n  disabled?: boolean;\n  /**\n   * Why this tile cannot be chosen right now — a colour another category already wears,\n   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not\n   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble\n   * under its name (and its `note`) and describes it, and a click, Space / Enter or an\n   * arrow under automatic activation chooses nothing — the focus moves, the checked\n   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's\n   * `disabled` still wins over it.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  /** The tiles, in reading order. Render them inside a `role=\"radiogroup\"` element\n   *  with a name — see the module note. */\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\" (default): an arrow key moves AND checks, the APG default. \"manual\":\n   *  arrows move focus only, Space or Enter checks — for a picker whose change is\n   *  expensive (a bulk edit that saves on every change). */\n  activation?: \"automatic\" | \"manual\";\n  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */\n  disabled?: boolean;\n  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default \"md\"; \"lg\" is the touch-target\n   *  size a phone surface wants. */\n  size?: TileSize;\n  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by\n   *  `label`. Not called for the `null` (\"none\") item, which shows the kit's \"no\"\n   *  glyph. The frame, the tick and the note's dot are drawn around it. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here\n   *  beats `size`'s (a tile that grows in a narrow card). */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none \" +\n  FOCUS_RING +\n  \" focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */\nconst TILE_LOCKED = \"cursor-not-allowed opacity-50\";\n/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected\n *  tile, whose frame IS its state. */\nconst TILE_LOCKED_IDLE = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\n/** `undefined`, `null`, `false` and `\"\"` are no reason — what `cond && \"…\"` gives. */\nfunction isLocked(item: TileItem<string>): boolean {\n  const r = item.disabledReason;\n  return r !== undefined && r !== null && r !== false && r !== \"\";\n}\n\n/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */\nfunction isOff(item: TileItem<string>): boolean {\n  return Boolean(item.disabled) && !isLocked(item);\n}\n\n/**\n * The tiles of one radio group, without the group element — render them inside a\n * `role=\"radiogroup\"` with a name (the module note above has the example). One tab stop\n * (the checked tile, else the first that can be chosen), arrows to move — left and\n * right follow the page's direction — Home and End to the ends, and by default the\n * arrows choose as they go.\n */\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation = \"automatic\",\n  disabled = false,\n  size = \"md\",\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const reasonId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be reached — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere. A locked\n  // tile is reachable: landing on it is how its reason is read.\n  const tabStop =\n    checkedIndex >= 0 && !isOff(items[checkedIndex])\n      ? checkedIndex\n      : items.findIndex((it) => !isOff(it));\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    // Locked tiles are in the walk; natively disabled ones are not.\n    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    // Onto a locked tile the focus moves and the choice does not: the checked tile\n    // stays checked, and the next arrow walks on from here.\n    if (activation === \"automatic\" && !isLocked(items[target])) onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const locked = isLocked(item);\n        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(\" \");\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's. So\n            // is a lock's reason, after the note.\n            aria-describedby={describedBy || undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            // A reason wins over the tile's own `disabled` (as on Button): reachable,\n            // and refusing. The whole group's `disabled` still wins over both.\n            disabled={disabled || isOff(item)}\n            aria-disabled={(locked && !disabled) || undefined}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own. A locked\n            // tile is never chosen.\n            onClick={() => !selected && !locked && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              locked && TILE_LOCKED,\n              locked && !selected && TILE_LOCKED_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {/* The reason's description is a `hidden` copy, as on a locked Button: the\n                bubble exists only while hovered or focused once portalled, and a\n                description that comes and goes is read inconsistently. */}\n            {locked && (\n              <span id={`${reasonId}-${i}`} hidden>\n                {item.disabledReason}\n              </span>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note || locked ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  {item.note && <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>}\n                  {/* The reason in the body colour: it is the news, the note is\n                      standing context. */}\n                  {locked && <span className=\"block font-normal\">{item.disabledReason}</span>}\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * A row of square tiles that behaves as ONE radio group — the machinery\n * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the\n * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles\n * show something of the app's own — a mark, a pattern, a symbol set the kit does not\n * ship).\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n *\n * ## The container is yours\n *\n * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns\n * (a wrapping row, a grid, a row beside a search box). That element must carry the\n * group's semantics, as SwatchPicker's does:\n *\n * ```tsx\n * <div role=\"radiogroup\" aria-labelledby={headingId} className=\"flex flex-wrap gap-1.5\">\n *   <TileRadioGroup\n *     items={[{ key: \"dots\", label: \"Dots\" }, { key: \"lines\", label: \"Lines\" }]}\n *     checked={pattern}\n *     onSelect={(key) => key && setPattern(key)}\n *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}\n *   />\n * </div>\n * ```\n *\n * `role=\"radiogroup\"` and a name (`aria-label` or `aria-labelledby`) — without them a\n * screen reader hears radios that belong to nothing, and no \"2 of 7\". Set\n * `aria-disabled` on it as well when the whole group is `disabled`.\n *\n * ## What a tile is\n *\n * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by\n * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing\n * that label in a bubble on hover and focus — a row of unlabelled squares is the\n * complaint that put the bubble there. It is for choices that are SEEN: a colour, a\n * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines\n * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}\n * (`type=\"radio\"`): a card names its option by its title and describes it by its text,\n * where a tile would hide the text behind a bubble and repeat it.\n *\n * No strings of its own: every name is an item's `label`, the \"none\" tile's included.\n *\n * ## A tile that cannot be chosen\n *\n * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it\n * and Tab never lands on it, so a dimmed square says nothing about why. Give it a\n * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in\n * its bubble and its description — and choosing it does nothing (0.23, the kit's later\n * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).\n */\n\n/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`\n *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them\n *  in `renderTile` so a tile of the app's own matches theirs. */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry — a tile of its\n *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,\n   *  never the tab stop. */\n  disabled?: boolean;\n  /**\n   * Why this tile cannot be chosen right now — a colour another category already wears,\n   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not\n   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble\n   * under its name (and its `note`) and describes it, and a click, Space / Enter or an\n   * arrow under automatic activation chooses nothing — the focus moves, the checked\n   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's\n   * `disabled` still wins over it.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  /** The tiles, in reading order. Render them inside a `role=\"radiogroup\"` element\n   *  with a name — see the module note. */\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\" (default): an arrow key moves AND checks, the APG default. \"manual\":\n   *  arrows move focus only, Space or Enter checks — for a picker whose change is\n   *  expensive (a bulk edit that saves on every change). */\n  activation?: \"automatic\" | \"manual\";\n  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */\n  disabled?: boolean;\n  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default \"md\"; \"lg\" is the touch-target\n   *  size a phone surface wants. */\n  size?: TileSize;\n  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by\n   *  `label`. Not called for the `null` (\"none\") item, which shows the kit's \"no\"\n   *  glyph. The frame, the tick and the note's dot are drawn around it. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here\n   *  beats `size`'s (a tile that grows in a narrow card). */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none \" +\n  FOCUS_RING +\n  \" focus-visible:ring-offset-2 focus-visible:ring-offset-surface \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-subtle bg-surface hover:border-strong hover:bg-hover\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]\";\n/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */\nconst TILE_LOCKED = \"cursor-not-allowed opacity-50\";\n/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected\n *  tile, whose frame IS its state. */\nconst TILE_LOCKED_IDLE = \"hover:border-subtle hover:bg-surface\";\n\n/** `undefined`, `null`, `false` and `\"\"` are no reason — what `cond && \"…\"` gives. */\nfunction isLocked(item: TileItem<string>): boolean {\n  const r = item.disabledReason;\n  return r !== undefined && r !== null && r !== false && r !== \"\";\n}\n\n/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */\nfunction isOff(item: TileItem<string>): boolean {\n  return Boolean(item.disabled) && !isLocked(item);\n}\n\n/**\n * The tiles of one radio group, without the group element — render them inside a\n * `role=\"radiogroup\"` with a name (the module note above has the example). One tab stop\n * (the checked tile, else the first that can be chosen), arrows to move — left and\n * right follow the page's direction — Home and End to the ends, and by default the\n * arrows choose as they go.\n */\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation = \"automatic\",\n  disabled = false,\n  size = \"md\",\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const reasonId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be reached — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere. A locked\n  // tile is reachable: landing on it is how its reason is read.\n  const tabStop =\n    checkedIndex >= 0 && !isOff(items[checkedIndex])\n      ? checkedIndex\n      : items.findIndex((it) => !isOff(it));\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    // Locked tiles are in the walk; natively disabled ones are not.\n    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    // Onto a locked tile the focus moves and the choice does not: the checked tile\n    // stays checked, and the next arrow walks on from here.\n    if (activation === \"automatic\" && !isLocked(items[target])) onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const locked = isLocked(item);\n        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(\" \");\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's. So\n            // is a lock's reason, after the note.\n            aria-describedby={describedBy || undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            // A reason wins over the tile's own `disabled` (as on Button): reachable,\n            // and refusing. The whole group's `disabled` still wins over both.\n            disabled={disabled || isOff(item)}\n            aria-disabled={(locked && !disabled) || undefined}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own. A locked\n            // tile is never chosen.\n            onClick={() => !selected && !locked && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              locked && TILE_LOCKED,\n              locked && !selected && TILE_LOCKED_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-muted\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {/* The reason's description is a `hidden` copy, as on a locked Button: the\n                bubble exists only while hovered or focused once portalled, and a\n                description that comes and goes is read inconsistently. */}\n            {locked && (\n              <span id={`${reasonId}-${i}`} hidden>\n                {item.disabledReason}\n              </span>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note || locked ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  {item.note && <span className=\"block font-normal text-muted\">{item.note}</span>}\n                  {/* The reason in the body colour: it is the news, the note is\n                      standing context. */}\n                  {locked && <span className=\"block font-normal\">{item.disabledReason}</span>}\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,104 +1,4 @@
-import * as react from 'react';
-import { dP as InputProps } from '../delete-account-setting-DiPX4Vue.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
-
+import { type InputProps } from "./input.js";
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).
  *
@@ -132,7 +32,7 @@ import './focus-ring.js';
  * at the site"), a {@link FieldHint} rides the label line. `showCount` is typed out — a
  * time has no length worth counting.
  */
-interface TimeInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"> {
+export interface TimeInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"> {
     /** `"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
@@ -150,11 +50,9 @@ interface TimeInputProps extends Omit<InputProps, "type" | "value" | "defaultVal
 }
 /** 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;
+export 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 };
+export declare function isTimeInRange(value: string, min?: string, max?: string): boolean;
+export declare function TimeInput({ ref, value, onValueChange, onChange, min, max, step, invalid, inputClassName, ...rest }: TimeInputProps): import("react").JSX.Element;

package/dist/components/time-input.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Input } from "./ui.js";
+import { Input } from "./input.js";
 import { cn } from "../lib/cn.js";
 function withSeconds(step) {
   return step !== void 0 && step % 60 !== 0;
@@ -19,7 +18,18 @@ function isTimeInRange(value, min, max) {
   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) {
+function TimeInput({
+  ref,
+  value,
+  onValueChange,
+  onChange,
+  min,
+  max,
+  step,
+  invalid,
+  inputClassName,
+  ...rest
+}) {
   const seconds = withSeconds(step);
   const outOfRange = !isTimeInRange(value, min, max);
   return /* @__PURE__ */ jsx(
@@ -40,8 +50,7 @@ const TimeInput = forwardRef(function TimeInput2({ value, onValueChange, onChang
       inputClassName: cn("tabular-nums", inputClassName)
     }
   );
-});
-TimeInput.displayName = "TimeInput";
+}
 export {
   TimeInput,
   isTimeInRange,

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

@@ -1 +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 *\n * `hint` is Input's too (keksdose K4): text is a caption under the field (\"Local time\n * at the site\"), a {@link FieldHint} rides the label line. `showCount` is typed out — a\n * time has no length worth counting.\n */\nexport interface TimeInputProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\" | \"variant\" | \"showCount\" | \"countLabels\"\n  > {\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":";AA4FI;AA5FJ,SAAS,kBAAkB;AAE3B,SAAS,aAA8B;AACvC,SAAS,UAAU;AA0DnB,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"]}
+{"version":3,"sources":["../../src/components/time-input.tsx"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport { Input, type InputProps } from \"./input\";\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 *\n * `hint` is Input's too (keksdose K4): text is a caption under the field (\"Local time\n * at the site\"), a {@link FieldHint} rides the label line. `showCount` is typed out — a\n * time has no length worth counting.\n */\nexport interface TimeInputProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\" | \"variant\" | \"showCount\" | \"countLabels\"\n  > {\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\n// `ref` (the `<input>`, InputProps') is a React 19 ref prop since 0.34 (MOD-4, refactor\n// audit 2026-10), where this was `forwardRef`.\nexport function TimeInput({\n  ref,\n  value,\n  onValueChange,\n  onChange,\n  min,\n  max,\n  step,\n  invalid,\n  inputClassName,\n  ...rest\n}: TimeInputProps) {\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}\n"],"mappings":";AAqGI;AApGJ,SAAS,aAA8B;AACvC,SAAS,UAAU;AA0DnB,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;AAIO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,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;","names":[]}

package/dist/components/toast-labels.d.ts

@@ -0,0 +1,2 @@
+import type { ToastLabels } from "./toast.js";
+export declare const DEFAULT_TOAST_LABELS: ToastLabels;

package/dist/components/toast-labels.js

@@ -0,0 +1,11 @@
+"use client";
+const DEFAULT_TOAST_LABELS = {
+  close: "Close notification",
+  notifications: "Notifications",
+  undo: "Undo",
+  redo: "Redo"
+};
+export {
+  DEFAULT_TOAST_LABELS
+};
+//# sourceMappingURL=toast-labels.js.map

package/dist/components/toast-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/toast-labels.ts"],"sourcesContent":["// The English words of ./toast, in a module with no component code: the English catalogue\n// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk\n// like the other languages (0.34, KS U8). ./toast re-exports them.\n\nimport type { ToastLabels } from \"./toast\";\n\nexport const DEFAULT_TOAST_LABELS: ToastLabels = {\n  close: \"Close notification\",\n  notifications: \"Notifications\",\n  undo: \"Undo\",\n  redo: \"Redo\",\n};\n"],"mappings":";AAMO,MAAM,uBAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}

package/dist/components/toast.d.ts

@@ -1,24 +1,24 @@
-import * as react from 'react';
-import { ReactNode, MouseEvent, CSSProperties, ReactElement } from 'react';
-
+import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_TOAST_LABELS } from "./toast-labels.js";
 /** The words the toast layer says. `close` and `notifications` are read by a screen
  *  reader (the close button's name, the toast region's name); `undo` and `redo` are
  *  the default action labels of {@link toast.undo} / {@link toast.redo}. */
-interface ToastLabels {
+export interface ToastLabels {
     close: string;
     notifications: string;
     undo: string;
     redo: string;
 }
-declare const DEFAULT_TOAST_LABELS: ToastLabels;
-type ToastId = string | number;
+export { DEFAULT_TOAST_LABELS };
+export type ToastId = string | number;
 /** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls
  *  `event.preventDefault()`. */
-interface ToastAction {
+export interface ToastAction {
     label: ReactNode;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-interface ToastOptions {
+export interface ToastOptions {
     /** Re-using an id REPLACES the toast on screen with that id (in place — it does not
      *  stack a second one), which is how a toast is updated. Default: a fresh id. */
     id?: ToastId;
@@ -51,9 +51,9 @@ interface ToastOptions {
     style?: CSSProperties;
 }
 /** The default duration of a toast that carries an action (8s rather than 4s). */
-declare const TOAST_ACTION_DURATION = 8000;
+export declare const TOAST_ACTION_DURATION = 8000;
 type Kind = "default" | "success" | "error" | "warning" | "info" | "loading";
-interface ToastPromiseOptions<T> extends ToastOptions {
+export interface ToastPromiseOptions<T> extends ToastOptions {
     loading: ReactNode;
     /** The success message, or a function of the resolved value. Omitted: the loading
      *  toast is dismissed. */
@@ -62,7 +62,7 @@ interface ToastPromiseOptions<T> extends ToastOptions {
     error?: ReactNode | ((error: unknown) => ReactNode);
     finally?: () => void;
 }
-interface ToastUndoOptions extends Omit<ToastOptions, "action"> {
+export interface ToastUndoOptions extends Omit<ToastOptions, "action"> {
     /** Called when the button is pressed. */
     onUndo: () => void;
     /** Default: `toast.undo` from `<UiKitProvider>` ("Undo"). */
@@ -70,7 +70,7 @@ interface ToastUndoOptions extends Omit<ToastOptions, "action"> {
     /** Default `success` — the step the toast reports worked. */
     tone?: Exclude<Kind, "loading">;
 }
-interface ToastRedoOptions extends Omit<ToastUndoOptions, "onUndo"> {
+export interface ToastRedoOptions extends Omit<ToastUndoOptions, "onUndo"> {
     onRedo: () => void;
 }
 /**
@@ -81,7 +81,7 @@ interface ToastRedoOptions extends Omit<ToastUndoOptions, "onUndo"> {
  *
  * Needs a mounted {@link Toaster}. Messages may be any ReactNode.
  */
-declare const toast: ((message: ReactNode, opts?: ToastOptions) => ToastId) & {
+export declare const toast: ((message: ReactNode, opts?: ToastOptions) => ToastId) & {
     message: (message: ReactNode, opts?: ToastOptions) => ToastId;
     success: (message: ReactNode, opts?: ToastOptions) => ToastId;
     error: (message: ReactNode, opts?: ToastOptions) => ToastId;
@@ -107,18 +107,18 @@ declare const toast: ((message: ReactNode, opts?: ToastOptions) => ToastId) & {
     /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */
     redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId;
 };
-type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
 /** sonner's offset: one value for every edge, or per edge. Numbers are px, which do not
  *  follow the text size — prefer a CSS length (rem, or a `calc()` on
  *  {@link TOASTER_OFFSET_TOP} / {@link TOASTER_OFFSET_BOTTOM}). */
-type ToasterOffset = string | number | {
+export type ToasterOffset = string | number | {
     top?: string | number;
     right?: string | number;
     bottom?: string | number;
     left?: string | number;
 };
-interface ToasterProps {
+export interface ToasterProps {
     /** Default: `bottom-center` on a phone (so the toast covers neither the header's
      *  buttons nor the bottom nav's), `top-center` from `md` up. */
     position?: ToastPosition;
@@ -129,7 +129,7 @@ interface ToasterProps {
     /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts
      *  on `<html>` — whichever store the app built, with nothing passed. */
     theme?: "light" | "dark" | "system";
-    labels?: Partial<ToastLabels>;
+    labels?: LabelOverride<ToastLabels>;
     /** Default 4s (8s for a toast with an action). */
     duration?: number;
     visibleToasts?: number;
@@ -169,13 +169,13 @@ interface ToasterProps {
  * app's `offset={{ top: 64 }}` (keksdose) did not. Pass it, or a `calc()` built on it,
  * instead of a px number.
  */
-declare const TOASTER_OFFSET_TOP = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+export declare const TOASTER_OFFSET_TOP = "calc(env(safe-area-inset-top, 0px) + 4rem)";
 /**
  * The Toaster's default distance from the bottom edge (phone), as a CSS length: above
  * AppShell's measured bottom nav (`--app-nav-h`) or the home indicator, whichever is
  * taller, with 0.75rem to spare.
  */
-declare const TOASTER_OFFSET_BOTTOM = "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.75rem)";
+export declare const TOASTER_OFFSET_BOTTOM = "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.75rem)";
 /**
  * Where the toasts appear, with the kit's defaults — mount ONE, near the root and
  * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a
@@ -187,6 +187,4 @@ declare const TOASTER_OFFSET_BOTTOM = "calc(max(var(--app-nav-h, 0px), env(safe-
  * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast
  * with an action stays up 8s by default, so the button can be reached.
  */
-declare function Toaster({ position, navOffset, theme, labels: labelsProp, closeButton, richColors, swipeDirections, offset, mobileOffset, dismissOnMiddleClick, className, style, ...rest }: ToasterProps): react.JSX.Element | null;
-
-export { DEFAULT_TOAST_LABELS, TOASTER_OFFSET_BOTTOM, TOASTER_OFFSET_TOP, TOAST_ACTION_DURATION, type ToastAction, type ToastId, type ToastLabels, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastRedoOptions, type ToastSwipeDirection, type ToastUndoOptions, Toaster, type ToasterOffset, type ToasterProps, toast };
+export declare function Toaster({ position, navOffset, theme, labels: labelsProp, closeButton, richColors, swipeDirections, offset, mobileOffset, dismissOnMiddleClick, className, style, ...rest }: ToasterProps): import("react").JSX.Element | null;

package/dist/components/toast.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import { DEFAULT_TOAST_LABELS } from "./toast-labels.js";
 let sonner = null;
 let loading = null;
 const queue = [];
@@ -33,12 +34,6 @@ function withSonner(fn) {
 }
 let counter = 0;
 const nextId = () => `kit-toast-${++counter}`;
-const DEFAULT_TOAST_LABELS = {
-  close: "Close notification",
-  notifications: "Notifications",
-  undo: "Undo",
-  redo: "Redo"
-};
 let activeLabels = DEFAULT_TOAST_LABELS;
 const TOAST_ACTION_DURATION = 8e3;
 const privately = (node) => /* @__PURE__ */ jsx("span", { "data-private": "", children: node });