@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/scroll-area.tsx

@@ -1,123 +0,0 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, Ref, RefObject } from "react";
-import { cn } from "../lib/cn";
-import { mergeRefs } from "./field-parts";
-
-/**
- * Whether `ref`'s element currently overflows its box — the one fact a scroll
- * container needs to decide whether it is a keyboard stop.
- *
- * Measured on every commit (cheap: two reads, and state is set only on a change) and
- * whenever the element or one of its direct children resizes, which covers both
- * "the panel got narrower" and "the rows arrived". Without `ResizeObserver` (jsdom,
- * very old engines) the per-commit measurement is what remains.
- *
- * Shared with {@link Table}'s overflow wrapper, which has the same obligation.
- */
-export function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean {
-  const [overflowing, setOverflowing] = useState(false);
-
-  const measure = useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
-    setOverflowing((prev) => (prev === next ? prev : next));
-  }, [ref]);
-
-  // No dependency list on purpose: content changes arrive as re-renders.
-  useLayoutEffect(() => {
-    measure();
-  });
-
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    for (const child of Array.from(el.children)) ro.observe(child);
-    return () => ro.disconnect();
-  }, [ref, measure]);
-
-  return overflowing;
-}
-
-/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the
- *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,
- *  which has neither. Where the standard pair applies, Chrome ignores the rest. */
-export const THIN_SCROLLBAR_CLASS = cn(
-  "[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]",
-  "[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent",
-  "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]",
-);
-
-const AXIS = {
-  vertical: "overflow-y-auto overflow-x-hidden",
-  horizontal: "overflow-x-auto overflow-y-hidden",
-  both: "overflow-auto",
-} as const;
-
-export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
-  /** Which way the content may scroll. Default `vertical`. */
-  orientation?: keyof typeof AXIS;
-  /**
-   * The region's accessible name. With it (or `aria-labelledby`) the container is a
-   * `role="region"` a reader can find and name; without it, it is a plain box.
-   * Name every ScrollArea whose content can overflow: once it is a tab stop, a
-   * reader announces it on focus, and an unnamed one is announced as nothing.
-   */
-  label?: string;
-  ref?: Ref<HTMLDivElement>;
-}
-
-/**
- * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,
- * and the keyboard access a plain `overflow-auto` div does not have.
- *
- * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a
- * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no
- * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.
- *
- * A container that scrolls but holds nothing focusable cannot be scrolled from the
- * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content
- * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and
- * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list
- * adds no empty stop to the tab order.
- */
-export function ScrollArea({
-  orientation = "vertical",
-  label,
-  className,
-  ref,
-  tabIndex,
-  "aria-labelledby": labelledBy,
-  ...rest
-}: ScrollAreaProps) {
-  const inner = useRef<HTMLDivElement | null>(null);
-  const overflowing = useScrollOverflow(inner);
-  const setRef = useMemo(() => mergeRefs(inner, ref), [ref]);
-  const named = label !== undefined || labelledBy !== undefined;
-
-  return (
-    <div
-      {...rest}
-      ref={setRef}
-      role={named ? "region" : undefined}
-      aria-label={label}
-      aria-labelledby={labelledBy}
-      tabIndex={tabIndex ?? (overflowing ? 0 : undefined)}
-      data-overflowing={overflowing || undefined}
-      data-orientation={orientation}
-      className={cn(
-        "relative min-h-0 min-w-0",
-        AXIS[orientation],
-        THIN_SCROLLBAR_CLASS,
-        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —
-        // a row with its own background would cover exactly the part of the ring that
-        // says where focus is. An outline paints above it, and the negative offset
-        // keeps it inside a parent that clips.
-        "focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
-        className,
-      )}
-    />
-  );
-}

package/src/components/search-field.tsx

@@ -1,192 +0,0 @@
-import { useMemo, useRef } from "react";
-import type { InputHTMLAttributes, Ref } from "react";
-import { Search, X } from "lucide-react";
-import { cn } from "../lib/cn";
-import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./field-base";
-import { mergeRefs } from "./field-parts";
-import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
-
-interface SearchFieldOwnProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "value" | "onChange" | "type" | "aria-label"
-> {
-  value: string;
-  /** The typed text. Emitted as a plain string, not an event: every caller of the
-   *  four this replaced wanted the string, and one of them held it in a URL param
-   *  rather than in state. */
-  onChange: (value: string) => void;
-  /** Names the clear button. Default: the catalogue's `common.clear`, in the
-   *  provider's language. */
-  clearLabel?: string;
-  /**
-   * Draw the "×" that empties the field once there is something in it. Default
-   * `true`.
-   *
-   * It used to appear only when a `clearLabel` was passed, and every kastlan call
-   * site passed one — lease-list-page.tsx:91, trial-balance-page.tsx:~196,
-   * account-ledger-page.tsx:~131 and data-table/resource-list-page.tsx:256 each
-   * spelled `clearLabel={t("table.clear")}` — so the opt-in was boilerplate: a filter
-   * you can type into and not untype is the complaint that produced the button in
-   * the first place, and the catalogue already names it. `false` is for a field
-   * whose clearing lives elsewhere (a "Reset filters" beside it).
-   */
-  clearable?: boolean;
-  /**
-   * `"field"` (default): the bordered filter box that sits on a page.
-   *
-   * `"inline"`: no box at all — no border, no fill, no padding of its own — and no
-   * type size of its own either, so it takes the size of the header it sits in.
-   * For a search that IS the header: a command-palette sheet, a picker's top line
-   * (Keksdose's transaction search, which lost its `text-base` headline to a
-   * bordered `text-sm` box when it moved onto this component). The container is
-   * what frames it, so give the container the focus cue if it needs one
-   * (`focus-within:`); the caret is the field's own.
-   */
-  variant?: "field" | "inline";
-  /** Classes for the `<input>` itself. `className` styles the wrapper — the box the
-   *  icon and the clear button are positioned against — so it could set a width
-   *  and nothing else. See {@link Input}'s `inputClassName`. */
-  inputClassName?: string;
-}
-
-// The inline look: FIELD_DISPLAY's idea (the chrome gone, the value the thing
-// itself) without even its baseline, because the header it sits in already draws
-// the line. No `text-*` size, on purpose — the input inherits the caller's.
-const SEARCH_INLINE =
-  "block w-full min-w-0 border-0 bg-transparent py-1 text-primary shadow-none placeholder:text-placeholder focus:outline-none focus:ring-0 " +
-  // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.
-  FIELD_TOUCH_TEXT;
-
-/**
- * `aria-label` is REQUIRED: the whole reason this component exists is that two of the
- * four boxes it replaced were named by nothing but their placeholder — which disappears
- * the moment someone types, i.e. exactly when a screen-reader user is working in the
- * field. The `label` spelling it also took from 0.5 was removed in 0.34.
- */
-export type SearchFieldProps = SearchFieldOwnProps & {
-  "aria-label": string;
-  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it
-   *  was `forwardRef`. */
-  ref?: Ref<HTMLInputElement>;
-};
-
-/**
- * The page-level filter box: a search icon, a `type="search"` input, and a clear
- * "×" that appears once there is something to clear.
- *
- * ## Why it is a component
- *
- * Keksdose had four of these and no two agreed. Two were character-identical
- * twenty-line copies (the settings catalogue filter and the tour list filter) —
- * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same
- * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear
- * button at `right-2` — differing only in which state setter they called. The
- * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`
- * with no clear button and no `type="search"`, so it had neither the `searchbox`
- * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input
- * placeholder="Search">`: no icon, no clear, and no accessible name at all once
- * the placeholder went away.
- *
- * None of that is a design decision anyone made; it is four people solving the
- * same problem on four days. A shared component is how the fourth screen gets the
- * clear button the first one earned.
- *
- * ## The two X's
- *
- * `type="search"` is what gives the field its `searchbox` role — and, in Chrome, a
- * NATIVE clear cross that paints right next to ours, so a non-empty box shows two
- * X's an inch apart. Ours is the one that survives: it carries an accessible name
- * and matches the app's other icon buttons, and it returns focus to the input so
- * the next query can be typed straight away.
- */
-export function SearchField({
-  ref,
-  value,
-  onChange,
-  clearLabel: clearLabelProp,
-  clearable = true,
-  className,
-  inputClassName,
-  placeholder,
-  variant = "field",
-  "aria-label": ariaLabel,
-  ...rest
-}: SearchFieldProps) {
-  const innerRef = useRef<HTMLInputElement>(null);
-  const setRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const clearLabel = clearable ? (clearLabelProp ?? common.clear) : undefined;
-  // The accessible name AND the placeholder fallback, so the box says what it is
-  // before anyone has typed in it.
-  const name = ariaLabel;
-  const inline = variant === "inline";
-  return (
-    <div className={cn("relative", className)}>
-      <Search
-        aria-hidden
-        className={cn(
-          "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-placeholder",
-          // Logical sides throughout, so a right-to-left page gets the icon at the
-          // start of the line and the clear button at its end.
-          inline ? "start-0" : "start-3",
-        )}
-      />
-      <input
-        ref={setRef}
-        type="search"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        aria-label={name}
-        placeholder={placeholder ?? name}
-        // Keksdose live #333: *"Entering the search here — is that set as password?
-        // … I got prompted for remembering my name or mail address"*, typed into the
-        // settings filter on a phone.
-        //
-        // A `type="search"` input with no `name` and no `autocomplete` is a field
-        // Chrome's autofill classifies by GUESSWORK, from the labels around it and
-        // the other fields on the page — and a settings page has an email and a
-        // password on it. Naming the field and declaring the intent is what takes it
-        // out of that guess: `autocomplete="off"` says it is not part of any profile,
-        // and a `name` of "search" is the strongest hint the heuristics take.
-        //
-        // The three that follow are not about autofill but about the same keyboard:
-        // a filter box that capitalises the first letter and autocorrects "2fa" to
-        // "2FA" is fighting the person typing into it. Declared BEFORE `{...rest}` so
-        // a caller with a reason can still override any of them.
-        name="search"
-        autoComplete="off"
-        autoCapitalize="none"
-        autoCorrect="off"
-        spellCheck={false}
-        {...rest}
-        className={cn(
-          inline ? SEARCH_INLINE : FIELD_BASE,
-          inline ? "ps-7" : "ps-9",
-          // Room for our own "×" only when there is one; a field that can't be
-          // cleared has no reason to reserve the space.
-          clearLabel === undefined ? (inline ? "pe-0" : "pe-3") : inline ? "pe-8" : "pe-9",
-          "[&::-webkit-search-cancel-button]:appearance-none",
-          inputClassName,
-        )}
-      />
-      {clearLabel !== undefined && value !== "" && (
-        <button
-          type="button"
-          onClick={() => {
-            onChange("");
-            // Clearing is the start of the next query far more often than it is the
-            // end of this one, so the caret stays where it can be typed into.
-            innerRef.current?.focus();
-          }}
-          aria-label={clearLabel}
-          className={cn(
-            "absolute top-1/2 -translate-y-1/2 rounded p-1 text-placeholder hover:text-secondary",
-            inline ? "end-0" : "end-2",
-          )}
-        >
-          <X className="size-4" />
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/select.tsx

@@ -1,294 +0,0 @@
-import { useId } from "react";
-import type { KeyboardEvent, MouseEvent, ReactNode, Ref, SelectHTMLAttributes } from "react";
-import { cn } from "../lib/cn";
-import type { CommitScope } from "./write-lock";
-import {
-  LockedReason,
-  mergeDescribedBy,
-  type DisabledReasonDisplay,
-  type FieldHelpProps,
-  useFieldError,
-  useFieldHint,
-  useLockReason,
-} from "./field-parts";
-import {
-  FIELD_BASE,
-  FIELD_FLOATING_PAD,
-  FIELD_INVALID,
-  FieldChevron,
-  FieldGroup,
-  FloatingField,
-  SELECT_MENU_DRESS,
-  SELECT_SM,
-  fieldBelow,
-} from "./field-base";
-
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">, FieldHelpProps {
-  label?: ReactNode;
-  /** See {@link Input}'s `invalid`. */
-  invalid?: boolean;
-  /** See {@link Input}'s `error`. */
-  error?: ReactNode;
-  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain
-   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field
-   *  like every other field's hint, attached through `aria-describedby`: the label
-   *  line is 11px of strip shared with the label, and a sentence placed there was
-   *  set in the value's type on top of both the label and the value. On an
-   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,
-   *  outside the box. Since 0.34 a FieldHint is the caption at Large and on a touch
-   *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a "?". Beside a
-   *  `help` (0.36) the hint is the caption at every size: the help's "?" is the only one. */
-  hint?: ReactNode;
-  /**
-   * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
-   * 36px field stands a head taller than the buttons beside it. `"md"` (default)
-   * is the field every form uses. Unlabelled selects only — a floating label needs
-   * the tall box to float in, so a labelled Select ignores `"sm"`.
-   *
-   * A NUMBER is still the native attribute (the rows of a list box) and is passed
-   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as
-   * with `multiple`) the browser draws a list box, and the Select drops its chevron
-   * and the end padding reserved for it.
-   */
-  size?: "sm" | "md" | number;
-  /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box
-   *  the chevron is positioned against — so it could set a width and nothing
-   *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */
-  selectClassName?: string;
-  /**
-   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select
-   * that SAVES on change (a role picker in a members table, a status in a row). keksdose
-   * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which
-   * took the field out of the tab order so the reason never reached a keyboard.
-   *
-   * With a reason the select is `aria-disabled` instead — still focusable, still showing
-   * its value — its list does not open (pointer and keys are swallowed, Tab and Escape
-   * excepted), `onChange` is never called, and the reason is a line under the field at
-   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),
-   * and on `aria-describedby`. It wears the settled look of a disabled field and drops
-   * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.
-   *
-   * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after
-   * the swallowed change. A touch platform's own picker may still open; nothing it picks
-   * is kept or reported.
-   */
-  disabledReason?: ReactNode;
-  /**
-   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line
-   * under the field at Large and on a touch screen, the tooltip otherwise (§4 "No fact
-   * only in a tooltip"; DUP-3, refactor audit 2026-10).
-   */
-  disabledReasonDisplay?: DisabledReasonDisplay;
-  /**
-   * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is
-   * locked the `disabledReason` way with the lock's reason (which wins over its own).
-   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3; a
-   * {@link CommitScope} since 0.33.
-   */
-  commit?: CommitScope;
-  /** The `<select>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */
-  ref?: Ref<HTMLSelectElement>;
-}
-
-/** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every
- *  other key would open the list or step the value. */
-const LOCKED_SELECT_KEYS = new Set(["Tab", "Escape", "Shift"]);
-
-/** FIELD_BASE's `disabled:` look, for a select that is locked without being `disabled`
- *  (the `:disabled` variants cannot match it). */
-const FIELD_LOCKED = "cursor-not-allowed bg-surface-2 text-muted";
-
-export function Select(props: SelectProps) {
-  const {
-    ref,
-    className,
-    label,
-    id,
-    children,
-    invalid,
-    error,
-    hint: hintProp,
-    help,
-    size,
-    selectClassName,
-    disabledReason,
-    disabledReasonDisplay,
-    commit,
-    onMouseDown,
-    onKeyDown,
-    onChange,
-    ...rest
-  } = props;
-  // See Input's `reserve`.
-  const reserve = "error" in props || "hint" in props || "showCount" in props;
-  const generated = useId();
-  const lock = useLockReason(commit, disabledReason);
-  const locked = lock.locked;
-  // Only a number reaches the DOM; the two words are this component's own.
-  const nativeSize = typeof size === "number" ? size : undefined;
-  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all
-  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the
-  // chevron was centred on a box several rows tall, sat on top of the rows' text
-  // at the end edge, and `pe-9` clipped every option nine units early. A list box
-  // gets the plain field instead — its own native scroll, no chevron, even padding.
-  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);
-  const small = size === "sm" && label === undefined;
-  const fieldId = id ?? generated;
-  // Text is a caption under the field; a FieldHint rides the label line — and at Large
-  // and on a touch screen is its words, a caption like any text (§4; a HelpPopover stays
-  // on the label line, §10.23). See `hint` above. Through useFieldHint since 0.34, not a
-  // copy of its rule (DUP-2, refactor audit 2026-10).
-  const hintParts = useFieldHint(hintProp, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
-  const hint = hintParts.labelHint;
-  const { isInvalid, describedBy, errorEl } = useFieldError(
-    error,
-    invalid,
-    // The caption goes in BEFORE the error — the standing advice first, the news
-    // second, the order useFieldError keeps for a caller's own description. A lock's
-    // reason sits between the two.
-    mergeDescribedBy(hintParts.describedBy, locked && lock.reasonId),
-    rest["aria-invalid"],
-  );
-  const below = fieldBelow(hintParts, null, errorEl);
-  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch
-  // in from the end border and matches both themes — feedback #223. A DISABLED
-  // select has no menu to drop, so it drops the chevron too: the arrow is the one
-  // thing on the control that promises a choice (Keksdose dev#474, where the
-  // account type became read-only and still looked exactly like a picker). A locked
-  // one has no menu either.
-  const chevron =
-    rest.disabled || listBox || locked ? null : <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />;
-  // `pe-9` is the room the chevron takes; a list box has none to make room for.
-  //
-  // A list box's height is `size` rows plus its padding, but its rows are clipped at
-  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next
-  // row through the bottom padding: `size={4}` drew four and a half. The vertical room
-  // moves onto the rows instead (option padding counts toward the row height the
-  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`
-  // whole rows, at any width.
-  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : SELECT_MENU_DRESS;
-  // Locked: focusable, but nothing opens the list or moves the value, and nothing is
-  // reported. The no-op `onChange` keeps a controlled select's value where React put
-  // it (and keeps React from warning about a `value` with no handler).
-  const interaction = locked
-    ? {
-        disabled: undefined,
-        "aria-disabled": true as const,
-        onMouseDown: (e: MouseEvent<HTMLSelectElement>) => e.preventDefault(),
-        onKeyDown: (e: KeyboardEvent<HTMLSelectElement>) => {
-          if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();
-        },
-        onChange: () => {},
-      }
-    : { onMouseDown, onKeyDown, onChange };
-  // While locked the field sits in the reason's frame (the line, or the Tooltip), which
-  // becomes the outermost box — so `className` (a width, a grid cell) moves onto it, and
-  // the form keeps its layout. `block` so a full-width field stays full width inside it.
-  const boxClass = locked ? undefined : className;
-  const withReason = (box: ReactNode) =>
-    locked ? (
-      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn("block", className)}>
-        {box}
-      </LockedReason>
-    ) : (
-      box
-    );
-  if (label === undefined) {
-    const select = (
-      <select
-        ref={ref}
-        // `id` is destructured out of the props to feed `fieldId`, and this branch
-        // never put it back — so an UNLABELLED Select swallowed it and the
-        // consumer's own `<label for="…">` pointed at nothing. The control stayed
-        // in the tab order with no accessible name at all: reachable, and silent
-        // when it was reached. Input and Textarea both forward it here; this is
-        // the third one doing the same thing.
-        id={id}
-        size={nativeSize}
-        {...rest}
-        {...interaction}
-        // OR-ed with the spread for the reason spelled out on Input's copy: this
-        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand
-        // to a Select — which is what a caller does when the validity is
-        // `"grammar"` or `"spelling"`, or when the paint is not wanted — had the
-        // attribute silently dropped. Input has never done that.
-        aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-        aria-describedby={describedBy}
-        className={cn(
-          FIELD_BASE,
-          dress,
-          listBox && "py-0",
-          small && SELECT_SM,
-          locked && FIELD_LOCKED,
-          selectClassName,
-          isInvalid && FIELD_INVALID,
-        )}
-      >
-        {children}
-      </select>
-    );
-    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named
-    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`
-    // without a trace, so the "?" a caller passed never rendered and a test looking
-    // for its button found none. It goes at the end of the field instead, outside the
-    // box, as the label line's own hint goes at the end of the label.
-    if (hint !== undefined) {
-      return (
-        <FieldGroup errorEl={below} reserve={reserve}>
-          {withReason(
-            <div className={cn("flex items-center gap-1.5", boxClass)}>
-              <div className="relative min-w-0 flex-1">
-                {select}
-                {chevron}
-              </div>
-              <span className="flex shrink-0 items-center">{hint}</span>
-            </div>,
-          )}
-        </FieldGroup>
-      );
-    }
-    return (
-      <FieldGroup errorEl={below} reserve={reserve}>
-        {withReason(
-          <div className={cn("relative", boxClass)}>
-            {select}
-            {chevron}
-          </div>,
-        )}
-      </FieldGroup>
-    );
-  }
-  return (
-    <FieldGroup errorEl={below} reserve={reserve}>
-      {withReason(
-        <FloatingField className={boxClass} htmlFor={fieldId} label={label} staticLabel hint={hint}>
-          <select
-            ref={ref}
-            id={fieldId}
-            size={nativeSize}
-            {...rest}
-            {...interaction}
-            aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-            aria-describedby={describedBy}
-            className={cn(
-              FIELD_BASE,
-              // The floated label takes the top strip of a list box too, so its first
-              // row starts under the label rather than behind it. No bottom padding — see
-              // `dress`.
-              // At Large the label stands above the field (§10.17): no strip.
-              listBox ? "pt-5 pb-0 large:pt-2" : FIELD_FLOATING_PAD,
-              "peer",
-              dress,
-              locked && FIELD_LOCKED,
-              selectClassName,
-              isInvalid && FIELD_INVALID,
-            )}
-          >
-            {children}
-          </select>
-          {chevron}
-        </FloatingField>,
-      )}
-    </FieldGroup>
-  );
-}

package/src/components/separator.tsx

@@ -1,33 +0,0 @@
-import type { ComponentPropsWithRef } from "react";
-import { cn } from "../lib/cn";
-
-export interface SeparatorProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
-  orientation?: "horizontal" | "vertical";
-  /**
-   * `false` (default, as in Radix): a real `role="separator"`, which a reader
-   * announces — right between groups of controls, a menu's sections, a toolbar's
-   * halves. `true`: a line for the eye only (`role="none"`), for a divider that
-   * separates nothing the structure does not already separate.
-   */
-  decorative?: boolean;
-}
-
-/**
- * A hairline between two things.
- *
- * kastlan's other Radix leftover. `aria-orientation` is set only when vertical:
- * horizontal is the role's default, and stating a default is noise in every reader's
- * verbose mode.
- */
-export function Separator({ orientation = "horizontal", decorative = false, className, ...rest }: SeparatorProps) {
-  const vertical = orientation === "vertical";
-  return (
-    <div
-      {...rest}
-      role={decorative ? "none" : "separator"}
-      aria-orientation={!decorative && vertical ? "vertical" : undefined}
-      data-orientation={orientation}
-      className={cn("shrink-0 bg-[var(--border)]", vertical ? "w-px self-stretch" : "h-px w-full", className)}
-    />
-  );
-}