@vitavision/ui 0.9.0 → 0.11.0

package/src/components/ui/SegmentedControl.tsx

@@ -17,9 +17,21 @@
 
 import { useId } from "react";
 
+import type { ButtonSize } from "./Button";
 import { useFieldDescription } from "./Field";
 import { cn } from "./cn";
 
+/**
+ * The segment's own box, by size. `sm` is the toolbar size and the default. `md` sets the
+ * height explicitly rather than leaving it to padding plus line-height: the strip around it
+ * is `h-8` with a 1px border and `p-0.5`, which leaves 26px of content box, and `h-full`
+ * fills exactly that whatever the font's line height turns out to be.
+ */
+const SEGMENT_SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: "px-2.5 py-1 text-xs",
+  md: "flex h-full items-center px-3.5 text-sm",
+};
+
 /**
  * A choice among two or three, shown as a strip of segments (native radios in one group, so
  * arrow keys move between them).
@@ -28,6 +40,9 @@ import { cn } from "./cn";
  * or `defaultValue` while `value` is `""` — and choosing the segment that matches
  * `defaultValue` reports `""`, so the default stays defined in one place. Each segment
  * carries `data-state="checked"` or `"unchecked"`; the group carries `data-disabled`.
+ *
+ * Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+ * `Button`, pass `size="md"` and the strip's outer height matches theirs.
  */
 export function SegmentedControl({
   value,
@@ -36,6 +51,7 @@ export function SegmentedControl({
   onValueChange,
   disabled = false,
   "aria-label": ariaLabel,
+  size = "sm",
   className,
 }: {
   /** `""` when the field is untouched. */
@@ -50,6 +66,13 @@ export function SegmentedControl({
   disabled?: boolean | undefined;
   /** Names the radio group. */
   "aria-label"?: string | undefined;
+  /**
+   * The strip's height: `sm` (the default) is the toolbar size, about 30px with `text-xs`
+   * labels; `md` is exactly 32px (`h-8`) outside, border included, with `text-sm` labels, the
+   * height of a comfortable-density `Input` or `Button`. Not derived from the density in
+   * force, so a consumer that never passes it renders as it always did.
+   */
+  size?: ButtonSize | undefined;
   /** Merged with the strip's own classes through `cn`. */
   className?: string | undefined;
 }) {
@@ -68,6 +91,7 @@ export function SegmentedControl({
         // its default `1 1 auto` gives up width first, and the segment labels are what pay for
         // it. Let the row scroll instead of squeezing the choice.
         "inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-control border border-line-strong bg-raised p-0.5",
+        size === "md" && "h-8",
         disabled && "opacity-50",
         className,
       )}
@@ -82,7 +106,9 @@ export function SegmentedControl({
               // `whitespace-nowrap` or a two-word label's min-content width is its longest
               // *word*, and "Side by side" is free to stack onto three lines inside a
               // fixed-height strip that then clips it.
-              "relative cursor-pointer whitespace-nowrap rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors",
+              "relative cursor-pointer whitespace-nowrap rounded-[0.3rem]",
+              SEGMENT_SIZE_CLASSES[size],
+              "font-medium transition-colors",
               "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal",
               checked
                 ? "bg-surface text-fg shadow-sm"

package/src/components/ui/ToggleChip.tsx

@@ -14,13 +14,32 @@
 
 import type { ReactNode } from "react";
 
+import type { ButtonSize } from "./Button";
 import { cn, focusRing } from "./cn";
 
+/**
+ * The chip's box, by size. `sm` is the toolbar size and the default. `md` sets the height
+ * explicitly (`h-8`, border included) rather than leaving it to padding plus line-height.
+ */
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: "px-2 py-1 text-xs",
+  md: "h-8 px-3 text-sm",
+};
+
+/** The swatch dot, by size: a little larger beside `text-sm` so it keeps its weight against the label. */
+const SWATCH_SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: "size-2",
+  md: "size-2.5",
+};
+
 /**
  * A dense on/off chip for a layer drawn on screen, with an optional swatch in the layer's
  * colour: a toolbar-sized `Switch` (`role="switch"`, `aria-checked`).
  *
  * Controlled. State is exposed as `data-state` (`checked`/`unchecked`).
+ *
+ * Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+ * `Button`, pass `size="md"` and the chip's outer height matches theirs.
  */
 export function ToggleChip({
   checked,
@@ -29,6 +48,7 @@ export function ToggleChip({
   swatch,
   disabled = false,
   title,
+  size = "sm",
   className,
 }: {
   /** Whether the layer is shown. */
@@ -43,6 +63,14 @@ export function ToggleChip({
   disabled?: boolean | undefined;
   /** Why the control is disabled, or what the layer is. Never the only explanation. */
   title?: string | undefined;
+  /**
+   * The chip's height: `sm` (the default) is the toolbar size, about 26px with `text-xs`
+   * text; `md` is exactly 32px (`h-8`) outside, border included, with `text-sm` text and a
+   * slightly larger swatch, the height of a comfortable-density `Input` or `Button`. Not
+   * derived from the density in force, so a consumer that never passes it renders as it
+   * always did.
+   */
+  size?: ButtonSize | undefined;
   /** Merged with the chip's own classes through `cn`. */
   className?: string | undefined;
 }) {
@@ -56,7 +84,9 @@ export function ToggleChip({
       title={title}
       onClick={() => onCheckedChange(!checked)}
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-control border px-2 py-1 text-xs whitespace-nowrap transition-colors",
+        "inline-flex items-center gap-1.5 rounded-control border",
+        SIZE_CLASSES[size],
+        "whitespace-nowrap transition-colors",
         checked
           ? "border-line-strong bg-raised text-fg"
           : "border-line bg-transparent text-fg-muted hover:text-fg",
@@ -69,7 +99,8 @@ export function ToggleChip({
         <span
           aria-hidden
           className={cn(
-            "size-2 shrink-0 rounded-full border transition-opacity",
+            SWATCH_SIZE_CLASSES[size],
+            "shrink-0 rounded-full border transition-opacity",
             checked ? "opacity-100" : "opacity-30",
           )}
           style={{ backgroundColor: swatch, borderColor: swatch }}

package/src/components/ui/VectorInput.tsx

@@ -52,8 +52,8 @@ export interface VectorInputProps {
  * A row of number fields editing one small vector, with the axis labels before the fields
  * and the unit once after them.
  *
- * Controlled. A `role="group"` named by `aria-label`, each field named by its label and
- * described by the unit. While a field has focus it shows what is typed; on blur or Enter it
+ * Controlled. A `role="group"` named by `aria-label`. Each field is named by the group and its
+ * label ("Translation x"), so two vectors on one screen stay apart, and is described by the unit. While a field has focus it shows what is typed; on blur or Enter it
  * shows the value at `precision`; Escape restores the value it had on focus. With `readOnly`
  * it renders a `ReadoutStrip` (`x 0.100 m · y …`) instead. The row carries `data-readonly`
  * and `data-disabled`.
@@ -106,6 +106,7 @@ export function VectorInput({
         <label key={index} className="flex min-w-0 flex-1 items-center gap-1">
           <span className="shrink-0 font-mono text-[11px] text-fg-subtle">{labelOf(index)}</span>
           <ComponentField
+            name={`${ariaLabel} ${labelOf(index)}`}
             value={component}
             precision={precision}
             step={step}
@@ -128,6 +129,7 @@ export function VectorInput({
 
 /** One component: formatted at rest, the typed text while focused. */
 function ComponentField({
+  name,
   value,
   precision,
   step,
@@ -137,6 +139,7 @@ function ComponentField({
   describedBy,
   onCommit,
 }: {
+  name: string;
   value: number;
   precision: number;
   step: number | undefined;
@@ -167,6 +170,7 @@ function ComponentField({
       min={min}
       max={max}
       disabled={disabled}
+      aria-label={name}
       aria-describedby={describedBy}
       onFocus={() => setDraft({ text: formatted, initial: value })}
       onBlur={() => setDraft(null)}

package/src/components/ui/index.ts

@@ -12,6 +12,16 @@ export { Button, ButtonLink, buttonClasses, type ButtonSize, type ButtonVariant
 export { DensityProvider, byDensity, useDensity, type Density } from "./Density";
 export { ConfirmDialog, Dialog, DialogClose } from "./Dialog";
 export { Disclosure } from "./Disclosure";
+export {
+  DropdownMenu,
+  MenuCheckboxItem,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  type DropdownMenuProps,
+  type MenuCheckboxItemProps,
+  type MenuItemProps,
+} from "./DropdownMenu";
 export {
   Callout,
   type CalloutTone,
@@ -31,6 +41,14 @@ export {
   useControlHeight,
   type NumberInputProps,
 } from "./Input";
+export { Kbd } from "./Kbd";
+export {
+  Listbox,
+  type ListboxOption,
+  type ListboxOptionState,
+  type ListboxProps,
+} from "./Listbox";
+export { formatNumber, parseNumber } from "./numberText";
 export {
   PageHeader,
   type BackLink,
@@ -39,6 +57,7 @@ export {
   Section,
   type ReadoutItem,
 } from "./Panel";
+export { Popover, PopoverClose, type PopoverProps } from "./Popover";
 export {
   PoseInput,
   type PoseInputProps,

package/src/components/ui/listboxModel.ts

@@ -0,0 +1,63 @@
+/*
+ * Keyboard movement in a single-select listbox, as a pure function so it is tested without a
+ * DOM. `Listbox` calls it on every key press.
+ */
+
+/** The keys that move the active option. */
+export type ListboxKey = "ArrowDown" | "ArrowUp" | "Home" | "End" | "PageDown" | "PageUp";
+
+/**
+ * The option a key moves the active one to, skipping disabled options.
+ *
+ * Arrows move by one and stop at the ends (no wrap: a long list that wraps loses its place).
+ * Home and End go to the first and last enabled option. Page keys move by `page` options.
+ * From no active option (`-1`), Down and Page Down go to the first enabled option, and Up and
+ * Page Up to the last.
+ *
+ * @param disabled - Per option, whether it is disabled.
+ * @param from - The active index, or -1.
+ * @param key - The key pressed.
+ * @param page - Options per page, for Page Up/Down. Defaults to 10.
+ * @returns The new active index; `from` when there is nowhere to go; -1 when every option is
+ *   disabled.
+ */
+export function moveActive(
+  disabled: readonly boolean[],
+  from: number,
+  key: ListboxKey,
+  page = 10,
+): number {
+  const enabled = disabled.flatMap((off, index) => (off ? [] : [index]));
+  if (enabled.length === 0) return -1;
+  const first = enabled[0]!;
+  const last = enabled[enabled.length - 1]!;
+  if (key === "Home") return first;
+  if (key === "End") return last;
+  if (from < 0) return key === "ArrowDown" || key === "PageDown" ? first : last;
+
+  const forward = key === "ArrowDown" || key === "PageDown";
+  const steps = key === "PageDown" || key === "PageUp" ? Math.max(1, page) : 1;
+  let target = from;
+  let moved = 0;
+  for (let index = from + (forward ? 1 : -1); index >= 0 && index < disabled.length; index += forward ? 1 : -1) {
+    if (disabled[index]) continue;
+    target = index;
+    moved += 1;
+    if (moved === steps) break;
+  }
+  return target;
+}
+
+/**
+ * The first enabled option at or after `index`, or before it when none is after. Used to place
+ * the active option when the list opens or changes.
+ *
+ * @param disabled - Per option, whether it is disabled.
+ * @param index - The preferred index.
+ * @returns An enabled index, or -1 when every option is disabled.
+ */
+export function nearestEnabled(disabled: readonly boolean[], index: number): number {
+  for (let i = Math.max(0, index); i < disabled.length; i += 1) if (!disabled[i]) return i;
+  for (let i = Math.min(index, disabled.length) - 1; i >= 0; i -= 1) if (!disabled[i]) return i;
+  return -1;
+}

package/src/components/ui/numberText.ts

@@ -1,6 +1,6 @@
 /*
- * Numbers as a field shows them and as a person types them. Internal to this package (used by
- * `VectorInput` and `PoseInput`); not exported.
+ * Numbers as a field shows them and as a person types them. Used by `NumberInput`'s
+ * number-valued mode, `VectorInput` and `PoseInput`, and exported for an app's own fields.
  *
  * A field bound straight to a number re-formats under the cursor: typing `0.` into a field
  * showing `0.000` becomes `0` before the next digit arrives. So the multi-number fields keep