@godxjp/ui 22.0.0 → 23.0.0

package/README.md

@@ -55,7 +55,7 @@ A value is defined **once** as a CSS var (`--primary`), mapped to a utility in t
 | **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                         |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
-| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |
+| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                                                              |
 | **App**            | `@godxjp/ui/app`          | `AppProvider`, `useDateTime` (adapter — i18n/datetime singleton)                                                                                                                                                                        |
 | **Datetime**       | `@godxjp/ui/datetime`     | `formatDate` (mandatory for display)                                                                                                                                                                                                    |
 | **Form**           | `@godxjp/ui/form`         | `useZodForm`, `FormRoot` (adapter subpath — pulls react-hook-form)                                                                                                                                                                      |
@@ -155,9 +155,9 @@ pnpm release --ui <patch|minor|major> --mcp <…|skip>   # publish lib + MCP in
 | `check:mcp-orphans`     | every public component HAS a catalog entry (catalog can't rot)       |
 | `check:core-isolation`  | the root export pulls no foreign runtime (adapters stay on subpaths) |
 
-### Runtime visual audit (Playwright + axe-core)
+### Runtime visual audit (Playwright)
 
-`scripts/visual-audit.mjs` drives a **real browser** over a running app and runs axe-core plus computed-style heuristics (target size, OKLCH accent chroma, rendered emoji, mis-laid-out alerts) — catching what the static `pnpm audit` (source regexes) can't see. Playwright + `@axe-core/playwright` are **optional peers**, installed only by apps that run the audit.
+`scripts/visual-audit.mjs` drives a **real browser** over a running app and runs computed-style heuristics (target size, OKLCH accent chroma, rendered emoji, mis-laid-out alerts) — catching what the static `pnpm audit` (source regexes) can't see. Playwright + `@axe-core/playwright` are **optional peers**, installed only by apps that run the audit.
 
 ```bash
 # from a consumer, against its running dev/preview server:
@@ -166,7 +166,7 @@ node node_modules/@godxjp/ui/scripts/visual-audit.mjs http://localhost:5173 --fo
 node node_modules/@godxjp/ui/scripts/visual-audit.mjs --strict http://localhost:5173       # CI gate
 ```
 
-**Tested peer range** (pin one of these): `playwright >=1.55 <2` (tested 1.61.1) · `@axe-core/playwright >=4.10 <5` (tested 4.12.1) · `axe-core >=4.10 <5` (tested 4.12.1). Playwright 1.55+ is required for the `browser.newContext()` → `context.newPage()` flow axe expects; older `browser.newPage()` throws _"Please use browser.newContext()"_.
+**Tested peer range** (pin one of these): `playwright >=1.55 <2` (tested 1.61.1)
 
 `--format json` **always** emits valid JSON — even on bootstrap failure — with a `status` (`ok` · `partial` · `error`) that separates **infrastructure errors** (missing peers, page won't load, axe won't inject → `errors[]`, `summary: null`/flagged) from **product findings** (`findings[]`). A tool failure can therefore never be misread as "zero violations". `pnpm check:visual-audit` is the CI smoke test: it serves a fixture page tripping all five rule families and asserts each one fires.
 

package/dist/components/data-display/scroll-area.d.ts

@@ -1,6 +1,26 @@
 import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import type { ScrollAreaProp } from "../../props/components/data-display.prop.js";
-export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, keyof ScrollAreaProp>;
-export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
-export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<"div">, keyof ScrollAreaProp>;
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Deliberately NOT exported: a deprecated no-op must not grow the package's public type surface.
+ * Nothing was exported for it before either — it used to be typed straight off Radix.
+ */
+type ScrollBarProps = {
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+};
+/**
+ * @deprecated Renders nothing. Native scrolling has no separate bar element to mount: the browser
+ * draws the scrollbar for whichever axis overflows, and WHICH axes may overflow is
+ * `<ScrollArea orientation="vertical | horizontal | both">`.
+ *
+ * Under Radix, mounting a `ScrollBar` was what ENABLED its axis (Radix read `scrollbarXEnabled` /
+ * `scrollbarYEnabled` from these children and wrote the viewport's inline `overflowX`/`overflowY`
+ * from them), so `<ScrollBar orientation="horizontal" />` was load-bearing rather than decorative.
+ * It is kept as an inert export so existing call sites keep compiling; move the intent to
+ * `orientation` — `<ScrollArea orientation="both">` is the replacement for a vertical area that
+ * also mounted a horizontal bar.
+ */
+export declare function ScrollBar(_props: ScrollBarProps): null;
+export {};

package/dist/components/data-display/scroll-area.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect } from "@react-aria/utils";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
 const ANCHOR_OFFSET_TOKEN = "--scroll-area-anchor-offset";
 const ANCHOR_OFFSET_FALLBACK_PX = 48;
@@ -113,18 +111,6 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
     };
   }, [viewport, enabled, offset]);
 }
-function useAmbientDirection(root, provided) {
-  const [ambient, setAmbient] = React.useState(void 0);
-  useLayoutEffect(() => {
-    if (provided !== void 0) return;
-    const parent = root?.parentElement;
-    if (!parent || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
-      return;
-    }
-    setAmbient(window.getComputedStyle(parent).direction === "rtl" ? "rtl" : "ltr");
-  }, [root, provided]);
-  return provided ?? ambient;
-}
 const ScrollArea = React.forwardRef(
   ({
     className,
@@ -134,75 +120,51 @@ const ScrollArea = React.forwardRef(
     anchorOffset,
     onAnchoredChange,
     orientation = "vertical",
-    dir,
     ...props
   }, ref) => {
     const [viewport, setViewport] = React.useState(null);
-    const [root, setRoot] = React.useState(null);
-    const attachRoot = React.useCallback(
-      (node) => {
-        setRoot(node);
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
-      [ref]
-    );
-    const direction = useAmbientDirection(root, dir);
     const attachViewport = React.useCallback(
       (node) => {
         setViewport(node);
-        if (typeof viewportRef === "function") viewportRef(node);
-        else if (viewportRef)
-          viewportRef.current = node;
+        for (const target of [ref, viewportRef]) {
+          if (typeof target === "function") target(node);
+          else if (target) target.current = node;
+        }
       },
-      [viewportRef]
+      [ref, viewportRef]
     );
     useBottomAnchor(viewport, anchor === "bottom", anchorOffset, onAnchoredChange);
-    return /* @__PURE__ */ jsxs(
-      ScrollAreaPrimitive.Root,
-      {
-        ref: attachRoot,
-        dir: direction,
-        className: cn("relative overflow-hidden", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            ScrollAreaPrimitive.Viewport,
-            {
-              ref: attachViewport,
-              tabIndex: 0,
-              "data-slot": "scroll-area-viewport",
-              "data-anchor": anchor,
-              "data-orientation": orientation,
-              className: "size-full rounded-[inherit]",
-              children
-            }
-          ),
-          orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
-          orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
-          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-        ]
-      }
+    return (
+      // `tabIndex={0}` keeps the scroll viewport keyboard-reachable so overflowing content can be
+      // scrolled without a pointer (WCAG 2.1.1 / axe scrollable-region-focusable).
+      //
+      // NO `dir` IS STAMPED HERE, deliberately. Radix's Root called `useDirection(dir)`, which
+      // falls back to the literal "ltr" and writes it onto the element — and a `dir` attribute is
+      // not advisory: it resets the inline axis for the whole subtree, so every `margin-inline-*`,
+      // `text-align: start` and `align-items: flex-end` inside resolved LTR on an RTL page
+      // (measured in Chromium: a chat feed inside `dir="rtl"` kept its own bubbles on the wrong
+      // side). A plain element inherits the page's direction, which is the correct answer and
+      // needs no code. A caller may still pass `dir` explicitly; it rides through with the rest.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: attachViewport,
+          tabIndex: 0,
+          "data-slot": "scroll-area-viewport",
+          "data-anchor": anchor,
+          "data-orientation": orientation,
+          className: cn("ui-scroll-area", className),
+          ...props,
+          children: /* @__PURE__ */ jsx("div", { "data-slot": "scroll-area-content", className: "ui-scroll-area-content", children })
+        }
+      )
     );
   }
 );
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "ui-scroll-area-bar flex touch-none transition-colors select-none",
-      orientation === "vertical" && "ui-scroll-area-bar--vertical h-full border-s border-s-transparent",
-      orientation === "horizontal" && "ui-scroll-area-bar--horizontal flex-col border-t border-t-transparent",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "ui-scroll-area-thumb bg-border relative flex-1" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollArea.displayName = "ScrollArea";
+function ScrollBar(_props) {
+  return null;
+}
 export {
   ScrollArea,
   ScrollBar

package/dist/components/data-entry/cascader.js

@@ -13,7 +13,7 @@ import {
   resolveAriaInvalid
 } from "./control-surface.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
-import { ScrollArea, ScrollBar } from "../data-display/scroll-area.js";
+import { ScrollArea } from "../data-display/scroll-area.js";
 import { Command, CommandInput } from "./command.js";
 import {
   filterTreeOptions,
@@ -311,8 +311,11 @@ function Cascader({
     if (multiple) commitMulti([]);
     else commitSingle([]);
   };
-  const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+  const renderCascadeColumns = () => (
+    // `both`: the columns strip overflows sideways, and a tall column scrolls down. Under Radix
+    // this was a vertical area plus a mounted `<ScrollBar orientation="horizontal" />`, which was
+    // how Radix was told to open the second axis at all.
+    /* @__PURE__ */ jsx(ScrollArea, { className: "w-full", orientation: "both", children: /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
       "ul",
       {
         role: "listbox",
@@ -371,9 +374,8 @@ function Cascader({
         })
       },
       colIndex
-    )) }),
-    /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
-  ] });
+    )) }) })
+  );
   const clearControl = resolveAllowClear(allowClear, true, t("dataEntry.cascader.clear"));
   const showClear = clearControl.enabled && hasValue && !disabled && !readOnly && !loading;
   const surface = controlSurfaceAttrs({ variant, status, size });

package/dist/components/data-entry/checkbox.js

@@ -6,6 +6,7 @@ import { Check, Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity } from "../../lib/field-a11y.js";
 import { CheckboxGroup } from "./checkbox-group.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 function CheckboxGlyph({ state }) {
   return state === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" });
 }
@@ -96,6 +97,7 @@ const CheckboxRoot = React.forwardRef((props, ref) => {
         "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
         className
       ),
+      render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, children: withOwnHitTarget(domProps.children) }),
       onChange: (next) => {
         setUncontrolled(next);
         onCheckedChange?.(next);

package/dist/components/data-entry/choice-hit-target.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * THE PAINTED BOX OF A CHOICE CONTROL IS ITS OWN HIT TARGET (gh#476).
+ *
+ * react-aria-components renders the real `<input>` inside a `VisuallyHidden` span, and that span
+ * carries its geometry as an INLINE style: `position:absolute; width:1px; height:1px;
+ * clip:rect(0 0 0 0); clip-path:inset(50%)`, pinned at the label's top-left. The thing a user
+ * sees and aims at is the `<label>` wrapped around it, so every pointer landing on the control
+ * hits the LABEL, and the input's own hit area is a 13x13 box at a different origin than the
+ * 16x16 one that is painted.
+ *
+ * Measured on `data-entry-checkbox` before this helper existed: of 49 points scanned across the
+ * box, **0** reached the input, 46 reached the label; Playwright `check()` / `uncheck()` without
+ * `force` timed out on `<label data-slot="checkbox"> intercepts pointer events`, the same check a
+ * browser applies to a real pointer. `force: true` passed, which is the tell: the control is
+ * functional, it is simply covered.
+ *
+ * An inline style can only be beaten with `!important`, so the WRAPPER is replaced instead of
+ * fought. The `render` prop hands over the DOM children react-aria built; the VisuallyHidden
+ * element among them becomes a `.ui-choice-input` span that control.css sizes to the painted box.
+ * The `<input>` itself — its props, its ref, its keyboard handling, its place in the a11y tree —
+ * is passed through untouched, so this is a geometry change and nothing else.
+ */
+export declare function withOwnHitTarget(children: React.ReactNode): React.ReactNode;

package/dist/components/data-entry/choice-hit-target.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { VisuallyHidden } from "react-aria-components";
+function withOwnHitTarget(children) {
+  return React.Children.map(
+    children,
+    (child) => React.isValidElement(child) && child.type === VisuallyHidden ? /* @__PURE__ */ jsx("span", { "data-slot": "choice-input", className: "ui-choice-input", children: child.props.children }) : child
+  );
+}
+export {
+  withOwnHitTarget
+};

package/dist/components/data-entry/control-surface.d.ts

@@ -59,3 +59,11 @@ export declare function applyMaxTagCount<T extends {
     omitted: T[];
     overflow: React.ReactNode | undefined;
 };
+/**
+ * Split a run of text on antd's `tokenSeparators` — the contract behind "paste a column out of a
+ * spreadsheet and get one value per line".
+ *
+ * Shared by `TagInput` and the tags/multiple `Select`: they are the two controls that turn typing
+ * into several values, and two copies of this would be two answers to "what is a separator".
+ */
+export declare function splitByTokenSeparators(text: string, separators: string[]): string[];

package/dist/components/data-entry/control-surface.js

@@ -31,9 +31,18 @@ function applyMaxTagCount(items, maxTagCount, maxTagPlaceholder) {
   const overflow = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omitted.map(({ value, label }) => ({ value, label }))) : maxTagPlaceholder;
   return { visible, omitted, overflow };
 }
+function escapeForCharClass(character) {
+  return character.replace(/[\\\]^-]/g, "\\$&");
+}
+function splitByTokenSeparators(text, separators) {
+  if (!separators.length) return [text];
+  const pattern = new RegExp(`[${separators.map(escapeForCharClass).join("")}]`);
+  return text.split(pattern);
+}
 export {
   applyMaxTagCount,
   controlSurfaceAttrs,
   resolveAllowClear,
-  resolveAriaInvalid
+  resolveAriaInvalid,
+  splitByTokenSeparators
 };

package/dist/components/data-entry/form-field.js

@@ -69,6 +69,7 @@ function FormField({
     [fieldKey, emitFieldNames]
   );
   const childProps = React.isValidElement(children) ? children.props : void 0;
+  const controlId = childProps?.id ?? resolvedId;
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
     // read-only FormField row and a Descriptions value are indistinguishable when mixed. That
@@ -78,7 +79,7 @@ function FormField({
     // The label is associated via aria-labelledby (not <label for>): composite
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
-    id: childProps?.id ?? resolvedId,
+    id: controlId,
     ...form?.disabled && childProps?.disabled !== false ? { disabled: true } : {},
     ...validationStatus === "validating" ? { "aria-busy": true } : {},
     // Read the child's own value first in BOTH cases: cloneElement
@@ -133,7 +134,7 @@ function FormField({
                 "span",
                 {
                   onClick: () => {
-                    const el = document.getElementById(resolvedId);
+                    const el = document.getElementById(controlId);
                     if (!(el instanceof HTMLElement)) return;
                     const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
                     (focusable ?? el).focus();

package/dist/components/data-entry/radio.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { pickFieldA11y, useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
 import { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 function checkedState(isSelected) {
   return isSelected ? "checked" : "unchecked";
 }
@@ -65,7 +66,7 @@ const RadioItem = React.forwardRef(
           className
         ),
         ...props,
-        render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected) }),
+        render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected), children: withOwnHitTarget(domProps.children) }),
         children: /* @__PURE__ */ jsx("span", { "data-slot": "radio-group-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Circle, { className: "ui-radio-icon", "aria-hidden": "true" }) })
       }
     );
@@ -87,7 +88,7 @@ function RadioBarButton({
       isDisabled: option.disabled,
       "data-slot": "radio-button",
       className: "ui-radio-button ui-focus-ring",
-      render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected) }),
+      render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected), children: withOwnHitTarget(domProps.children) }),
       children: /* @__PURE__ */ jsx("span", { className: "ui-radio-button-label", children: option.label })
     }
   );