@tensor_1/react 2.10.0 → 2.12.0

package/dist/components/Chart.js

@@ -1,90 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useId } from "react";
+import { jsx } from "react/jsx-runtime";
 import * as echarts from "echarts";
-import { cx } from "../cx.js";
-function readToken(name) {
-  if (typeof getComputedStyle === "undefined") return "";
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-}
-function uixChartPalette() {
-  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
-}
-function motionSafe(option) {
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
-    return { ...option, animation: false };
-  }
-  return option;
-}
-function Chart({
-  option,
-  title,
-  subtitle,
-  height = 280,
-  className,
-  style,
-  ariaLabel,
-  tableData,
-  tableHeaders,
-  onReady,
-  header
-}) {
-  const containerRef = useRef(null);
-  const chartRef = useRef(null);
-  const tableId = useId();
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const chart = echarts.init(el, null, { renderer: "svg" });
-    chartRef.current = chart;
-    chart.setOption(motionSafe(option));
-    onReady?.(chart);
-    if (!ariaLabel && !title && !(tableData && tableData.length > 0)) {
-      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
-    }
-    const ro = new ResizeObserver(() => chart.resize());
-    ro.observe(el);
-    return () => {
-      ro.disconnect();
-      chart.dispose();
-      chartRef.current = null;
-    };
-  }, []);
-  useEffect(() => {
-    chartRef.current?.setOption(motionSafe(option), { notMerge: false });
-  }, [option]);
-  const heightVal = typeof height === "number" ? `${height}px` : height;
-  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
-  const hasTable = tableData && tableData.length > 0 && tableHeaders && tableHeaders.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
-    (title != null || subtitle != null || header != null) && /* @__PURE__ */ jsxs("div", { children: [
-      header,
-      title && /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }),
-      subtitle && /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        style: { height: heightVal },
-        role: "img",
-        "aria-label": effectiveAriaLabel,
-        "aria-describedby": hasTable ? tableId : void 0
-      }
-    ),
-    hasTable && /* @__PURE__ */ jsxs(
-      "table",
-      {
-        id: tableId,
-        className: "uix-visually-hidden",
-        "aria-label": `${effectiveAriaLabel} \u2014 data table`,
-        children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ jsx("th", { scope: "col", children: h }, h)) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, i) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ jsx("td", { children: row[h] }, h)) }, i)) })
-        ]
-      }
-    )
-  ] });
+import { ChartCore } from "./ChartCore.js";
+import { uixChartPalette } from "./ChartCore.js";
+function Chart(props) {
+  return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: echarts });
 }
 export {
   Chart,

package/dist/components/ChartCore.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+interface ChartEngine {
+    init(element: HTMLElement, theme?: string | null, options?: {
+        renderer?: 'svg' | 'canvas';
+    }): ECharts;
+}
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+}
+interface ChartCoreProps extends ChartProps {
+    engine: ChartEngine;
+}
+/** Shared chart lifecycle. Runtime adapters only choose the ECharts build. */
+declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartCoreProps): react.JSX.Element;
+
+export { ChartCore, type ChartEngine, type ChartProps, type ChartTableRow, uixChartPalette };

package/dist/components/ChartCore.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "../cx.js";
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function ChartCore({
+  engine,
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  const appliedOptionRef = useRef(null);
+  const latestOptionRef = useRef(option);
+  const onReadyRef = useRef(onReady);
+  const tableId = useId();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      chart.dispose();
+      chartRef.current = null;
+      appliedOptionRef.current = null;
+    };
+  }, [engine]);
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
+  }, [option]);
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ jsxs("div", { children: [
+      header,
+      title ? /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightValue },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
+  ] });
+}
+export {
+  ChartCore,
+  uixChartPalette
+};

package/dist/components/CommandPalette.d.ts

@@ -8,9 +8,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * ⌘K command palette surface over `.uix-cmdk`. Presentational: mount it inside a
- * Modal/Popover and wire search + keyboard selection in the consumer. The input is
- * a combobox over the listbox of `CommandItem`s; spreads override every default, so
- * consumers already passing their own roles/labels keep working.
+ * Modal/Popover and wire search + keyboard selection in the consumer.
  */
 declare function CommandPalette({ inputProps, children, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
@@ -27,6 +25,6 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 /** A single command row over `.uix-cmdk__item`. */
-declare function CommandItem({ icon, shortcut, active, children, className, id, ...props }: CommandItemProps): react.JSX.Element;
+declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
 
 export { CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps };

package/dist/components/CommandPalette.js

@@ -1,76 +1,23 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-const CmdkContext = createContext(null);
 function CommandPalette({ inputProps, children, className, ...props }) {
-  const listId = useId();
-  const [activeId, setActiveId] = useState(null);
-  const [count, setCount] = useState(0);
-  const [announced, setAnnounced] = useState("");
-  const setActive = useCallback((id, active) => {
-    setActiveId((cur) => active ? id : cur === id ? null : cur);
-  }, []);
-  const registerItem = useCallback(() => {
-    setCount((c) => c + 1);
-    return () => setCount((c) => c - 1);
-  }, []);
-  useEffect(() => {
-    const t = window.setTimeout(() => setAnnounced(`${count} result${count === 1 ? "" : "s"}`), 150);
-    return () => clearTimeout(t);
-  }, [count]);
-  const ctx = useMemo(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);
-  return /* @__PURE__ */ jsx(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        className: "uix-cmdk__input",
-        role: "combobox",
-        "aria-expanded": "true",
-        "aria-autocomplete": "list",
-        "aria-controls": listId,
-        "aria-activedescendant": activeId ?? void 0,
-        "aria-label": "Command palette",
-        ...inputProps
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "uix-cmdk__list", role: "listbox", id: listId, children }),
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", children: announced })
-  ] }) });
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ jsx("input", { className: "uix-cmdk__input", ...inputProps }),
+    /* @__PURE__ */ jsx("div", { className: "uix-cmdk__list", children })
+  ] });
 }
 function CommandGroup({ label, children }) {
-  const labelId = useId();
-  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": label != null ? labelId : void 0, children: [
-    label != null && /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", id: labelId, children: label }),
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label != null && /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", children: label }),
     children
   ] });
 }
-function CommandItem({ icon, shortcut, active, children, className, id, ...props }) {
-  const ctx = useContext(CmdkContext);
-  const autoId = useId();
-  const itemId = id ?? autoId;
-  useEffect(() => ctx?.registerItem(), [ctx]);
-  useEffect(() => {
-    if (!ctx || !active) return;
-    ctx.setActive(itemId, true);
-    return () => ctx.setActive(itemId, false);
-  }, [ctx, itemId, active]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx("uix-cmdk__item", className),
-      "data-active": active || void 0,
-      id: itemId,
-      role: "option",
-      "aria-selected": !!active,
-      ...props,
-      children: [
-        icon,
-        /* @__PURE__ */ jsx("span", { children }),
-        shortcut
-      ]
-    }
-  );
+function CommandItem({ icon, shortcut, active, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { children }),
+    shortcut
+  ] });
 }
 export {
   CommandGroup,

package/dist/components/Comments.d.ts

@@ -4,11 +4,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 interface CommentsProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-/**
- * Comment thread container over `.uix-comments`. role="log" is an implicit polite
- * live region: comments appended after initial render are announced, the initial
- * list is not (UIX-A11Y-3). Pass `role` to override.
- */
+/** Comment thread container over `.uix-comments`. */
 declare function Comments({ children, className, ...props }: CommentsProps): react.JSX.Element;
 interface CommentProps extends HTMLAttributes<HTMLDivElement> {
     /** Usually an `<Avatar />` (the grid reserves the leading column). */

package/dist/components/Comments.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { role: "log", className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-comment", className), ...props, children: [

package/dist/components/Composer.d.ts

@@ -3,8 +3,6 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
-    /** Accessible name for the child `<textarea>`; applied as its `aria-label`. */
-    label?: string;
 }
 /**
  * Composer surface over `.uix-composer` — a single box that owns the
@@ -12,13 +10,8 @@ interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
  * `<ComposerBar>` inside; the descendant `textarea` picks up the composer's
  * padding/typography automatically, so the input never reads as a second
  * nested box.
- *
- * A placeholder is not an accessible name, so the composer labels a bare child
- * `<textarea>` with `label` (default "Add a comment"); a textarea that brings its
- * own `aria-label`/`aria-labelledby` — or an `id` (likely tied to an external
- * `<label htmlFor>`) — is left untouched (UIX-A11Y-3).
  */
-declare function Composer({ children, className, label, ...props }: ComposerProps): react.JSX.Element;
+declare function Composer({ children, className, ...props }: ComposerProps): react.JSX.Element;
 interface ComposerBarProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }

package/dist/components/Composer.js

@@ -1,12 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement } from "react";
 import { cx } from "../cx.js";
-function Composer({ children, className, label = "Add a comment", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-composer", className), ...props, children: Children.map(children, (child) => {
-    if (!isValidElement(child) || child.type !== "textarea") return child;
-    const p = child.props;
-    return p["aria-label"] || p["aria-labelledby"] || p.id ? child : cloneElement(child, { "aria-label": label });
-  }) });
+function Composer({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-composer", className), ...props, children });
 }
 function ComposerBar({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-composer__bar", className), ...props, children });

package/dist/components/DetailLayout.js

@@ -3,7 +3,7 @@ import { cx } from "../cx.js";
 function DetailLayout({ side, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-detail", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "uix-detail__main", children }),
-    side != null && /* @__PURE__ */ jsx("aside", { className: "uix-detail__side", children: side })
+    side != null && /* @__PURE__ */ jsx("div", { className: "uix-detail__side", children: side })
   ] });
 }
 export {

package/dist/components/Drawer.d.ts

@@ -1,13 +1,14 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
+interface DrawerProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
+    className?: string;
 }
-declare function Drawer({ open, onClose, title, children, footer, className, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, title, children, footer, className }: DrawerProps): react.JSX.Element;
 
 export { Drawer, type DrawerProps };

package/dist/components/Drawer.js

@@ -1,15 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, title, children, footer, className, ...rest }) {
-  const ref = useDialog(open, onClose);
-  const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+function Drawer({ open, onClose, title, children, footer, className }) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), onClose, children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-drawer__header", children: [
-      title && /* @__PURE__ */ jsx("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
+      title && /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: "var(--uix-text-h3)" }, children: title }),
       onClose && /* @__PURE__ */ jsx(
         "button",
         {

package/dist/components/Field.js

@@ -5,17 +5,14 @@ function Field({ label, hint, error, success, required, children, className, htm
   const uid = useId();
   const msgId = `${uid}-msg`;
   const describedBy = error || success || hint ? msgId : void 0;
-  const controlId = isValidElement(children) ? children.props.id ?? `${uid}-ctl` : void 0;
   const control = isValidElement(children) ? cloneElement(children, {
-    id: controlId,
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
-    "aria-invalid": error ? true : children.props["aria-invalid"],
-    "aria-required": children.props["aria-required"] ?? (required || void 0)
+    "aria-invalid": error ? true : children.props["aria-invalid"]
   }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-field", className), children: [
-    label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, "data-required": required || void 0, children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor, "data-required": required || void 0, children: label }),
     control,
-    /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ jsx("span", { className: "uix-field__success", role: "status", children: success }) : hint ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
+    /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ jsx("span", { className: "uix-field__success", children: success }) : hint ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
   ] });
 }
 export {

package/dist/components/Inbox.d.ts

@@ -2,24 +2,14 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface InboxProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Which pane a narrow viewport (<700px) shows: 'list' (default, matches the old
-     * behaviour) or 'detail'. Consumers should render a Back control in the detail pane
-     * on narrow viewports to return to the list (UIX-A11Y-2).
-     */
-    view?: 'list' | 'detail';
     children?: ReactNode;
 }
 /** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
-declare function Inbox({ view, children, className, ...props }: InboxProps): react.JSX.Element;
+declare function Inbox({ children, className, ...props }: InboxProps): react.JSX.Element;
 interface InboxListProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-/**
- * Left-pane item list. Place `<InboxItem>` children here. A keyboard listbox
- * (UIX-A11Y-2): the list is the single tab stop; ArrowUp/ArrowDown/Home/End move the
- * active option via `aria-activedescendant`, Enter/Space click it.
- */
+/** Left-pane item list. Place `<InboxItem>` children here. */
 declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
 interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
     /** Primary subject / title line. */
@@ -35,7 +25,7 @@ interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 /** A single inbox row with subject, preview excerpt, optional leading slot, and unread/selected states. */
-declare function InboxItem({ subject, preview, leading, unread, selected, children, className, id, ...props }: InboxItemProps): react.JSX.Element;
+declare function InboxItem({ subject, preview, leading, unread, selected, children, className, ...props }: InboxItemProps): react.JSX.Element;
 interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }

package/dist/components/Inbox.js

@@ -1,63 +1,10 @@
-"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
-function Inbox({ view, children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-inbox", className), "data-view": view, ...props, children });
+function Inbox({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-inbox", className), ...props, children });
 }
-const InboxListCtx = createContext({});
 function InboxList({ children, className, ...props }) {
-  const listRef = useRef(null);
-  const [activeId, setActiveId] = useState(void 0);
-  const ctx = useMemo(() => ({ activeId }), [activeId]);
-  const onKeyDown = (e) => {
-    const opts = Array.from(listRef.current?.querySelectorAll('[role="option"]') ?? []);
-    if (opts.length === 0) return;
-    const idx = opts.findIndex((el2) => el2.id === activeId);
-    let next;
-    switch (e.key) {
-      case "ArrowDown":
-        next = Math.min(idx + 1, opts.length - 1);
-        break;
-      case "ArrowUp":
-        next = idx < 0 ? 0 : Math.max(idx - 1, 0);
-        break;
-      case "Home":
-        next = 0;
-        break;
-      case "End":
-        next = opts.length - 1;
-        break;
-      case "Enter":
-      case " ":
-        if (idx >= 0) {
-          e.preventDefault();
-          opts[idx]?.click();
-        }
-        return;
-      default:
-        return;
-    }
-    e.preventDefault();
-    const el = opts[next];
-    if (!el || !el.id) return;
-    setActiveId(el.id);
-    el.scrollIntoView({ block: "nearest" });
-  };
-  return /* @__PURE__ */ jsx(InboxListCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: listRef,
-      className: cx("uix-inbox__list", className),
-      role: "listbox",
-      tabIndex: 0,
-      "aria-label": "Inbox",
-      "aria-activedescendant": activeId,
-      onKeyDown,
-      ...props,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
 }
 function InboxItem({
   subject,
@@ -67,19 +14,13 @@ function InboxItem({
   selected,
   children,
   className,
-  id,
   ...props
 }) {
-  const autoId = useId();
-  const itemId = id ?? autoId;
-  const { activeId } = useContext(InboxListCtx);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "option",
-      id: itemId,
       "aria-selected": selected ?? false,
-      "data-active": activeId === itemId ? "" : void 0,
       className: cx("uix-inbox__item", className),
       ...unread ? { "data-unread": "" } : {},
       ...props,

package/dist/components/Input.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, AriaAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: 'sm' | 'md';
@@ -12,18 +12,7 @@ interface InputGroupProps {
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
     className?: string;
-    /** Injected by `<Field>` when it wraps the group; forwarded onto the child control. */
-    id?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: AriaAttributes['aria-invalid'];
-    'aria-required'?: AriaAttributes['aria-required'];
 }
-/**
- * Icon-adorned wrapper for a child `<Input>`. The control is passed as `children`, so
- * `<Field>`'s injected `id`/`aria-*` land on this wrapper — they're forwarded onto the
- * single child element (the child's own props win) so label/message association survives
- * the extra div (UIX-A11Y-3).
- */
-declare function InputGroup({ children, leadingIcon, trailingIcon, className, id, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, }: InputGroupProps): react.JSX.Element;
+declare function InputGroup({ children, leadingIcon, trailingIcon, className }: InputGroupProps): react.JSX.Element;
 
 export { Input, InputGroup, type InputGroupProps, type InputProps };