@eifi1/ui-kit 0.6.1 → 0.7.0

package/dist/components/ui.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref, SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
 
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
 /**
@@ -15,6 +15,10 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** In a flex row next to a taller labelled field, fill the field's height so the
      *  two line up. No effect outside a flex row. */
     stretch?: boolean;
+    /** The `<button>` element. React 19 passes `ref` to a function component as an
+     *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
+     *  declared here only because `ButtonHTMLAttributes` does not carry it. */
+    ref?: Ref<HTMLButtonElement>;
 }
 declare function Button({ variant, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
 type IconButtonSize = "md" | "sm" | "xs" | "2xs";
@@ -108,7 +112,10 @@ type FieldChevronProps = Omit<ComponentPropsWithoutRef<"svg">, "children">;
  * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)
  * pushes that box's midline down — so a labelled currency/multi-select chevron
  * sat visibly lower than the native select's right beside it (feedback #400).
- * Pair it with `pr-9` on the trigger so the value can't run underneath. */
+ * Pair it with `pe-9` on the trigger so the value can't run underneath. At the
+ * inline END, not the right: a right-to-left form reads the value from the right,
+ * and a chevron parked on top of its first word hid exactly the part that says
+ * what was picked. */
 declare function FieldChevron({ className, ...rest }: FieldChevronProps): react.JSX.Element;
 declare const FLOATING_LABEL_CLASS: string;
 declare const FLOATING_LABEL_STATIC: string;
@@ -136,7 +143,7 @@ interface FloatingFieldProps extends ComponentPropsWithoutRef<"div"> {
      *  It rides an ANIMATED label too, and the two cases place it differently on
      *  purpose. A static label has a field-wide strip to itself, so the hint sits
      *  at the far end of it and a long label truncates into the gap. An animated
-     *  one belongs to a control with something at the right edge of the field — a
+     *  one belongs to a control with something at the end edge of the field — a
      *  calculator, a stepper — so the hint follows the label instead, and it is
      *  the label that gives way (steering-design feedback #48). */
     hint?: ReactNode;
@@ -264,7 +271,9 @@ interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "siz
      * 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.
+     * 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
@@ -465,7 +474,8 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
      */
     panelId?: string;
     /**
-     * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab.
+     * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab
+     * (only on the open one with `removeOn="active"`).
      *
      * The × is on the open tab only — a row of tabs each carrying one is a row of
      * things to hit by accident, and the tab you can remove should be the one you
@@ -473,7 +483,7 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
      * tab never widens it and never pushes the rest of the strip along (lenkbank
      * feedback #72). It is named "Remove <tab>" and is not a tab stop of its own: the
      * strip stays one stop, and the keyboard path is Delete (announced through
-     * `aria-keyshortcuts`), which removes whichever tab has focus.
+     * `aria-keyshortcuts`), which removes whichever tab has focus (see `removeOn`).
      *
      * The strip only ASKS: it calls this, and the tab goes when the caller drops it
      * from `tabs` — after a confirmation, a request, whatever it needs. When it does,
@@ -481,6 +491,20 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
      * removed one was open, else to its neighbour, instead of falling to the page.
      */
     onRemove?: (id: T) => void;
+    /**
+     * Which tabs the Delete key removes.
+     *
+     * - `"every"` (default): any focused removable tab — the ARIA pattern's reading.
+     * - `"active"`: only the OPEN tab, the same one that wears the ×. For a strip whose
+     *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement
+     *   sheet at once), so arrowing across the strip and pressing Delete cannot take
+     *   out a sheet the user is not looking at. Delete on a closed tab does nothing,
+     *   and only the open tab announces the shortcut (`aria-keyshortcuts`).
+     *
+     * Either way the × is drawn on the open tab only and its room stays reserved on
+     * every removable tab, so the strip never relayouts when the selection moves.
+     */
+    removeOn?: "every" | "active";
     /** Renders an "add" button after the last tab, outside the tablist — it is an
      *  action, not a tab, and a tablist may own only tabs. */
     onAdd?: () => void;
@@ -493,6 +517,6 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
      *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */
     busy?: boolean;
 }
-declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, onAdd, addLabel, labels, busy, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
 
 export { Button, type ButtonProps, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };

package/dist/components/ui.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
@@ -80,7 +81,7 @@ const PHONE_QUERY = "(max-width: 767px)";
 const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
 const FIELD_TRIGGER = cn(
   FIELD_BASE,
-  "relative flex items-center justify-between gap-2 text-left hover:bg-[var(--bg-hover)]"
+  "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]"
 );
 function FieldChevron({ className, ...rest }) {
   return /* @__PURE__ */ jsx(
@@ -89,21 +90,21 @@ function FieldChevron({ className, ...rest }) {
       ...rest,
       "aria-hidden": true,
       className: cn(
-        "pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+        "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
         className
       )
     }
   );
 }
 const FLOATING_LABEL_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
+  "pointer-events-none absolute start-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
   "max-w-[calc(100%-1.5rem)] truncate",
   "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
   "peer-disabled:opacity-50"
 );
 const FLOATING_ROW_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 flex items-center gap-1 transition-all",
+  "pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all",
   "max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]",
   "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
@@ -111,7 +112,7 @@ const FLOATING_ROW_CLASS = cn(
 );
 const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
 const FLOATING_LABEL_STATIC = cn(
-  "pointer-events-none absolute left-3 top-1",
+  "pointer-events-none absolute start-3 top-1",
   STATIC_LABEL_TYPE,
   "max-w-[calc(100%-1.5rem)] truncate"
 );
@@ -143,8 +144,8 @@ function FloatingField({
     /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
       children,
       withHint ? (
-        // Static: `inset-x-3` rather than `left-3`, so a long label truncates at
-        // the field's own right padding instead of running under the chevron.
+        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at
+        // the field's own end padding instead of running under the chevron.
         // Animated: the row floats with the label and is only as wide as it needs
         // to be. Either way the hint keeps its width (`shrink-0`) and the label
         // is the one that gives way.
@@ -273,7 +274,7 @@ const Input = forwardRef(function Input2({
       disabled: rest.disabled,
       "aria-label": revealed ? passwordText.hide : passwordText.show,
       "aria-pressed": revealed,
-      className: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50",
+      className: "absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50",
       children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
     }
   ) : null;
@@ -305,7 +306,7 @@ const Input = forwardRef(function Input2({
           ...rest,
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
-          className: cn(FIELD_BASE, "pr-9", inputClassName, isInvalid && FIELD_INVALID)
+          className: cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID)
         }
       ),
       revealToggle
@@ -325,7 +326,7 @@ const Input = forwardRef(function Input2({
         onClick: handleClick,
         className: cn(
           asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : FLOATING_INPUT_CLASS,
-          isPassword && "pr-9",
+          isPassword && "pe-9",
           inputClassName,
           isInvalid && FIELD_INVALID
         )
@@ -335,10 +336,11 @@ const Input = forwardRef(function Input2({
   ] }) });
 });
 Input.displayName = "Input";
-const SELECT_SM = "h-7 py-0 pl-2 pr-7 text-xs";
+const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
 const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, size, selectClassName, ...rest }, ref) {
   const generated = useId();
   const nativeSize = typeof size === "number" ? size : void 0;
+  const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
   const small = size === "sm" && label === void 0;
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -347,7 +349,8 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
     rest["aria-describedby"],
     rest["aria-invalid"]
   );
-  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "right-1.5 size-3.5" : void 0 });
+  const chevron = rest.disabled || listBox ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
+  const dress = listBox ? "overflow-y-auto" : "appearance-none pe-9";
   if (label === void 0) {
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
@@ -361,7 +364,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
           "aria-describedby": describedBy,
           className: cn(
             FIELD_BASE,
-            "appearance-none pr-9",
+            dress,
             small && SELECT_SM,
             selectClassName,
             isInvalid && FIELD_INVALID
@@ -384,8 +387,11 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
         "aria-describedby": describedBy,
         className: cn(
           FIELD_BASE,
-          FIELD_FLOATING_PAD,
-          "peer appearance-none pr-9",
+          // The floated label takes the top strip of a list box too, so its first
+          // row starts under the label rather than behind it.
+          listBox ? "pt-5 pb-1" : FIELD_FLOATING_PAD,
+          "peer",
+          dress,
           selectClassName,
           isInvalid && FIELD_INVALID
         ),
@@ -563,6 +569,7 @@ function Tabs({
   label,
   panelId,
   onRemove,
+  removeOn = "every",
   onAdd,
   addLabel,
   labels,
@@ -573,6 +580,7 @@ function Tabs({
   const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
   const stripRef = useRef(null);
   const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
+  const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
   const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
   const pendingFocus = useRef(null);
   const requestRemove = (id) => {
@@ -597,12 +605,12 @@ function Tabs({
     strip.querySelectorAll('[role="tab"]')[index]?.focus();
   }, [tabs, active]);
   const onTabKeyDown = (e, tab) => {
-    if (e.key === "Delete" && isRemovable(tab)) {
+    if (e.key === "Delete" && deletesOnKey(tab)) {
       e.preventDefault();
       if (!busy) requestRemove(tab.id);
       return;
     }
-    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    const step = horizontalStep(e.key, e.currentTarget);
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
     if (!strip) return;
@@ -646,7 +654,7 @@ function Tabs({
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : void 0,
           id: isActive && panelId ? `${panelId}-tab` : void 0,
-          "aria-keyshortcuts": removable ? "Delete" : void 0,
+          "aria-keyshortcuts": deletesOnKey(tab) ? "Delete" : void 0,
           onKeyDown: (e) => onTabKeyDown(e, tab),
           className: cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,