@tensor_1/react 2.10.0 → 2.12.0

package/dist/components/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, isValidElement } from "react";
+import { forwardRef } from "react";
 import { cx } from "../cx.js";
 const Input = forwardRef(
   ({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -14,22 +14,7 @@ const Input = forwardRef(
   )
 );
 Input.displayName = "Input";
-function InputGroup({
-  children,
-  leadingIcon,
-  trailingIcon,
-  className,
-  id,
-  "aria-describedby": describedBy,
-  "aria-invalid": invalid,
-  "aria-required": required
-}) {
-  const control = isValidElement(children) && (id ?? describedBy ?? invalid ?? required) != null ? cloneElement(children, {
-    id: children.props.id ?? id,
-    "aria-describedby": children.props["aria-describedby"] ?? describedBy,
-    "aria-invalid": children.props["aria-invalid"] ?? invalid,
-    "aria-required": children.props["aria-required"] ?? required
-  }) : children;
+function InputGroup({ children, leadingIcon, trailingIcon, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -40,9 +25,9 @@ function InputGroup({
         className
       ),
       children: [
-        leadingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon", "aria-hidden": "true", children: leadingIcon }),
-        control,
-        trailingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon uix-input-group__icon--trailing", "aria-hidden": "true", children: trailingIcon })
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon", children: leadingIcon }),
+        children,
+        trailingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon uix-input-group__icon--trailing", children: trailingIcon })
       ]
     }
   );

package/dist/components/Kanban.d.ts

@@ -2,32 +2,20 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Polite live-region text for keyboard moves (UIX-A11Y-2). `onMove` implementations
-     * should set it, e.g. "Card X moved to Doing, position 2 of 4".
-     */
-    announcement?: string;
     children?: ReactNode;
 }
-declare function Kanban({ announcement, children, className, ...props }: KanbanProps): react.JSX.Element;
+declare function Kanban({ children, className, ...props }: KanbanProps): react.JSX.Element;
 interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     count?: number;
     children?: ReactNode;
 }
 declare function KanbanColumn({ title, count, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
-type KanbanMoveDirection = 'up' | 'down' | 'left' | 'right';
 interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     meta?: ReactNode;
-    /**
-     * Keyboard move contract (UIX-A11Y-2): when provided, Alt+Arrow on the focused card
-     * calls it — the same accelerator convention as NavFavourites row moves. Pair with
-     * the board-level `announcement` so SR users hear the result.
-     */
-    onMove?: (dir: KanbanMoveDirection) => void;
     children?: ReactNode;
 }
-declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }: KanbanCardProps): react.JSX.Element;
+declare function KanbanCard({ title, meta, children, className, ...props }: KanbanCardProps): react.JSX.Element;
 
-export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps };
+export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps };

package/dist/components/Kanban.js

@@ -1,55 +1,23 @@
-"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 import { cx } from "../cx.js";
-function Kanban({ announcement, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban", className), ...props, children: [
-    announcement != null && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
-    children
-  ] });
+function Kanban({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-kanban", className), ...props, children });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
-  const headId = useId();
-  const hasHead = title != null || count != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    hasHead && /* @__PURE__ */ jsxs("div", { className: "uix-kanban__head", id: headId, children: [
+    (title != null || count != null) && /* @__PURE__ */ jsxs("div", { className: "uix-kanban__head", children: [
       title,
       count != null && /* @__PURE__ */ jsx("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
+    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", children })
   ] });
 }
-const MOVE_KEYS = {
-  ArrowUp: "up",
-  ArrowDown: "down",
-  ArrowLeft: "left",
-  ArrowRight: "right"
-};
-function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }) {
-  const handleKeyDown = (e) => {
-    onKeyDown?.(e);
-    if (!onMove || !e.altKey || e.defaultPrevented) return;
-    const dir = MOVE_KEYS[e.key];
-    if (dir) {
-      e.preventDefault();
-      onMove(dir);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "listitem",
-      tabIndex: 0,
-      className: cx("uix-kanban__card", className),
-      onKeyDown: handleKeyDown,
-      ...props,
-      children: [
-        title && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-title", children: title }),
-        meta && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-meta", children: meta }),
-        children
-      ]
-    }
-  );
+function KanbanCard({ title, meta, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban__card", className), ...props, children: [
+    title && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-title", children: title }),
+    meta && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-meta", children: meta }),
+    children
+  ] });
 }
 export {
   Kanban,

package/dist/components/Meter.d.ts

@@ -8,10 +8,8 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
     value?: number;
     /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
     tone?: MeterTone;
-    /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
-    label?: string;
 }
 /** Horizontal utilization / threshold bar backed by `.uix-meter`. */
-declare function Meter({ value, tone, label, className, ...props }: MeterProps): react.JSX.Element;
+declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
 
 export { Meter, type MeterProps, type MeterTone };

package/dist/components/Meter.js

@@ -1,13 +1,6 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-const toneText = {
-  warning: "warning",
-  danger: "critical",
-  attention: "needs attention",
-  overdue: "overdue"
-};
-function Meter({ value = 0, tone, label, className, ...props }) {
+function Meter({ value = 0, tone, className, ...props }) {
   const pct = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ jsx(
     "div",
@@ -16,8 +9,6 @@ function Meter({ value = 0, tone, label, className, ...props }) {
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuetext": tone && tone !== "success" ? `${pct}%, ${toneText[tone]}` : void 0,
-      "aria-label": label,
       className: cx("uix-meter", className),
       ...props,
       children: /* @__PURE__ */ jsx(

package/dist/components/Modal.d.ts

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

package/dist/components/Modal.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 Modal({ open, onClose, title, children, footer, className, ...rest }) {
-  const ref = useDialog(open, onClose);
-  const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+function Modal({ open, onClose, title, children, footer, className, style }) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), style, onClose, children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-dialog__header", children: [
-      title && /* @__PURE__ */ jsx("h2", { className: "uix-dialog__title", id: titleId, children: title }),
+      title && /* @__PURE__ */ jsx("div", { className: "uix-dialog__title", children: title }),
       onClose && /* @__PURE__ */ jsx("button", { className: "uix-dialog__close", onClick: onClose, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
     ] }),
     children != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__body", children }),

package/dist/components/NavFavourites.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const ChevronDownIcon = () => /* @__PURE__ */ jsx(
   "svg",
@@ -14,7 +14,7 @@ const ChevronDownIcon = () => /* @__PURE__ */ jsx(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    style: { flexShrink: 0 },
+    className: "uix-favourites__chevron",
     children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
   }
 );
@@ -30,7 +30,7 @@ const ChevronRightIcon = () => /* @__PURE__ */ jsx(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    style: { flexShrink: 0 },
+    className: "uix-favourites__chevron",
     children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
   }
 );
@@ -53,7 +53,6 @@ const MoreIcon = () => /* @__PURE__ */ jsxs(
     ]
   }
 );
-const MUTED = "color-mix(in srgb, var(--uix-text) 50%, transparent)";
 function NavFavourites({
   items,
   collapsed = false,
@@ -67,10 +66,9 @@ function NavFavourites({
   const regionId = useId();
   const headerRef = useRef(null);
   const regionRef = useRef(null);
-  const [announcement, setAnnouncement] = useState("");
   const focusAfterRef = useRef(null);
   const triggerRefs = useRef(/* @__PURE__ */ new Map());
-  const order = items.map((i) => i.id);
+  const order = useMemo(() => items.map((item) => item.id), [items]);
   useEffect(() => {
     const id = focusAfterRef.current;
     if (!id) return;
@@ -78,7 +76,7 @@ function NavFavourites({
     const el = triggerRefs.current.get(id);
     if (el) el.focus();
     else headerRef.current?.focus();
-  }, [order.join("|")]);
+  }, [order]);
   const handleToggle = () => {
     if (!collapsed) {
       const active = document.activeElement;
@@ -88,7 +86,7 @@ function NavFavourites({
     }
     onToggleCollapsed?.();
   };
-  const move = (id, dir) => {
+  const move = useCallback((id, dir) => {
     const idx = order.indexOf(id);
     const next = idx + dir;
     if (idx < 0 || next < 0 || next >= order.length) return;
@@ -97,18 +95,19 @@ function NavFavourites({
     if (it === void 0) return;
     reordered.splice(next, 0, it);
     focusAfterRef.current = id;
-    const moved = items.find((i) => i.id === id);
-    if (moved) setAnnouncement(`${moved.label} moved to position ${next + 1} of ${order.length}`);
     onReorder(reordered);
-  };
-  const remove = (id) => {
+  }, [onReorder, order]);
+  const remove = useCallback((id) => {
     const idx = order.indexOf(id);
     const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
     focusAfterRef.current = neighbour;
     onRemove(id);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-favourites", className), style: { marginBottom: "var(--uix-space-1)" }, children: [
-    /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+  }, [onRemove, order]);
+  const registerTrigger = useCallback((id, element) => {
+    if (element) triggerRefs.current.set(id, element);
+    else triggerRefs.current.delete(id);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-favourites", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -117,18 +116,7 @@ function NavFavourites({
         "aria-expanded": !collapsed,
         "aria-controls": regionId,
         onClick: handleToggle,
-        className: "uix-text-eyebrow",
-        style: {
-          display: "flex",
-          width: "100%",
-          alignItems: "center",
-          gap: "6px",
-          padding: "8px 4px 4px",
-          border: 0,
-          background: "transparent",
-          cursor: "pointer",
-          color: "inherit"
-        },
+        className: "uix-favourites__heading uix-text-eyebrow",
         children: [
           collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
           labels.heading
@@ -141,20 +129,12 @@ function NavFavourites({
         ref: regionRef,
         id: regionId,
         hidden: collapsed,
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "1px",
-          listStyle: "none",
-          margin: 0,
-          padding: 0
-        },
+        className: "uix-favourites__list",
         children: items.length === 0 ? /* @__PURE__ */ jsx(
           "li",
           {
-            className: "uix-text-meta",
+            className: "uix-favourites__empty uix-text-meta",
             "data-empty-reason": emptyReason,
-            style: { padding: "6px 8px", color: MUTED },
             children: labels.empty
           }
         ) : items.map((item, idx) => /* @__PURE__ */ jsx(
@@ -164,10 +144,9 @@ function NavFavourites({
             isFirst: idx === 0,
             isLast: idx === items.length - 1,
             labels,
-            onMoveUp: () => move(item.id, -1),
-            onMoveDown: () => move(item.id, 1),
-            onRemove: () => remove(item.id),
-            registerTrigger: (el) => triggerRefs.current.set(item.id, el)
+            onMove: move,
+            onRemove: remove,
+            registerTrigger
           },
           item.id
         ))
@@ -175,26 +154,24 @@ function NavFavourites({
     )
   ] });
 }
-function FavouriteRow({
+const FavouriteRow = memo(function FavouriteRow2({
   item,
   isFirst,
   isLast,
   labels,
-  onMoveUp,
-  onMoveDown,
+  onMove,
   onRemove,
   registerTrigger
 }) {
   const [open, setOpen] = useState(false);
-  const [revealed, setRevealed] = useState(false);
   const menuId = useId();
   const triggerRef = useRef(null);
   const itemRefs = useRef([]);
   const optionsTemplate = labels.options ?? "{label} favourite options";
   const actions = [
-    ...isFirst ? [] : [{ label: labels.moveUp, onSelect: onMoveUp }],
-    ...isLast ? [] : [{ label: labels.moveDown, onSelect: onMoveDown }],
-    { label: labels.remove.replace("{label}", item.label), onSelect: onRemove }
+    ...isFirst ? [] : [{ label: labels.moveUp, onSelect: () => onMove(item.id, -1) }],
+    ...isLast ? [] : [{ label: labels.moveDown, onSelect: () => onMove(item.id, 1) }],
+    { label: labels.remove.replace("{label}", item.label), onSelect: () => onRemove(item.id) }
   ];
   useEffect(() => {
     if (open) itemRefs.current[0]?.focus();
@@ -212,12 +189,6 @@ function FavouriteRow({
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       menuItems[(currentIdx - 1 + menuItems.length) % menuItems.length]?.focus();
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      menuItems[0]?.focus();
-    } else if (e.key === "End") {
-      e.preventDefault();
-      menuItems[menuItems.length - 1]?.focus();
     } else if (e.key === "Escape") {
       e.preventDefault();
       closeAndReturnFocus();
@@ -229,34 +200,27 @@ function FavouriteRow({
     if (!e.altKey) return;
     if (e.key === "ArrowUp" && !isFirst) {
       e.preventDefault();
-      onMoveUp();
+      onMove(item.id, -1);
     } else if (e.key === "ArrowDown" && !isLast) {
       e.preventDefault();
-      onMoveDown();
+      onMove(item.id, 1);
     }
   };
-  const triggerVisible = revealed || open;
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
     /* @__PURE__ */ jsxs(
       "li",
       {
-        style: { position: "relative", display: "flex", alignItems: "center" },
+        className: "uix-favourites__row",
         onKeyDown: onRowKeyDown,
-        onMouseEnter: () => setRevealed(true),
-        onMouseLeave: () => setRevealed(false),
-        onFocus: () => setRevealed(true),
-        onBlur: (e) => {
-          if (!e.currentTarget.contains(e.relatedTarget)) setRevealed(false);
-        },
         children: [
-          /* @__PURE__ */ jsx("div", { style: { minWidth: 0, flex: 1 }, children: item.link }),
+          /* @__PURE__ */ jsx("div", { className: "uix-favourites__link", children: item.link }),
           /* @__PURE__ */ jsx(
             "button",
             {
               ref: (el) => {
                 triggerRef.current = el;
-                registerTrigger(el);
+                registerTrigger(item.id, el);
               },
               type: "button",
               "aria-haspopup": "menu",
@@ -264,22 +228,7 @@ function FavouriteRow({
               "aria-controls": open ? menuId : void 0,
               "aria-label": optionsTemplate.replace("{label}", item.label),
               onClick: () => setOpen((v) => !v),
-              style: {
-                marginLeft: "auto",
-                display: "inline-flex",
-                height: "20px",
-                width: "20px",
-                flexShrink: 0,
-                alignItems: "center",
-                justifyContent: "center",
-                border: 0,
-                borderRadius: "2px",
-                background: "transparent",
-                cursor: "pointer",
-                color: MUTED,
-                opacity: triggerVisible ? 1 : 0,
-                transition: "opacity var(--uix-dur-fast) var(--uix-ease-out)"
-              },
+              className: "uix-favourites__menu-trigger",
               children: /* @__PURE__ */ jsx(MoreIcon, {})
             }
           ),
@@ -290,7 +239,7 @@ function FavouriteRow({
                 "aria-hidden": "true",
                 role: "presentation",
                 onClick: () => setOpen(false),
-                style: { position: "fixed", inset: 0, cursor: "default", background: "transparent", zIndex: 40 }
+                className: "uix-favourites__backdrop"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -298,23 +247,8 @@ function FavouriteRow({
               {
                 id: menuId,
                 role: "menu",
-                "aria-label": optionsTemplate.replace("{label}", item.label),
                 onKeyDown: onMenuKeyDown,
-                style: {
-                  position: "absolute",
-                  right: 0,
-                  top: "calc(100% + 2px)",
-                  zIndex: 50,
-                  minWidth: "160px",
-                  overflow: "hidden",
-                  margin: 0,
-                  padding: "4px 0",
-                  listStyle: "none",
-                  borderRadius: "6px",
-                  border: "1px solid var(--uix-border)",
-                  background: "var(--uix-surface)",
-                  boxShadow: "var(--uix-shadow-popover)"
-                },
+                className: "uix-favourites__menu",
                 children: actions.map((action, i) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -328,25 +262,7 @@ function FavouriteRow({
                       setOpen(false);
                       action.onSelect();
                     },
-                    style: {
-                      display: "flex",
-                      width: "100%",
-                      alignItems: "center",
-                      padding: "6px 12px",
-                      border: 0,
-                      background: "transparent",
-                      cursor: "pointer",
-                      textAlign: "left",
-                      fontSize: "13px",
-                      color: "color-mix(in srgb, var(--uix-text) 85%, transparent)",
-                      transition: "background-color var(--uix-dur-fast) var(--uix-ease-out)"
-                    },
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.background = "var(--uix-bg-hover)";
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.background = "transparent";
-                    },
+                    className: "uix-favourites__menu-item",
                     children: action.label
                   }
                 ) }, action.label))
@@ -357,7 +273,7 @@ function FavouriteRow({
       }
     )
   );
-}
+});
 export {
   NavFavourites
 };

package/dist/components/PageHeader.d.ts

@@ -4,8 +4,6 @@ import { HTMLAttributes, ReactNode } from 'react';
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow?: ReactNode;
     title: ReactNode;
-    /** Heading level for the title — drop to `h2` when the page already owns an `h1` (UIX-A11Y-4). */
-    as?: 'h1' | 'h2';
     /** Supporting copy under the title. */
     subtitle?: ReactNode;
     /** Right-aligned action area (buttons, menus). */
@@ -15,6 +13,6 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  * Page header — eyebrow / title / subtitle + actions row, over `.uix-page-header`.
  * The hairline + breathing room below come from the component CSS.
  */
-declare function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag, className, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }: PageHeaderProps): react.JSX.Element;
 
 export { PageHeader, type PageHeaderProps };

package/dist/components/PageHeader.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag = "h1", className, ...props }) {
+function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }) {
   return /* @__PURE__ */ jsxs("header", { className: cx("uix-page-header", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-page-header__titles", children: [
       eyebrow != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ jsx(TitleTag, { className: "uix-page-header__title", children: title }),
+      /* @__PURE__ */ jsx("h1", { className: "uix-page-header__title", children: title }),
       subtitle != null && /* @__PURE__ */ jsx("p", { className: "uix-page-header__subtitle", children: subtitle })
     ] }),
     actions != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__actions", children: actions })

package/dist/components/Peek.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
+interface PeekProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
@@ -10,7 +10,8 @@ interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     onNavPrev?: () => void;
     onNavNext?: () => void;
     hint?: string;
+    className?: string;
 }
-declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }: PeekProps): react.JSX.Element;
+declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }: PeekProps): react.JSX.Element;
 
 export { Peek, type PeekProps };

package/dist/components/Peek.js

@@ -1,30 +1,27 @@
 "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" }) });
 const ChevronUp = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 8l4-4 4 4" }) });
 const ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
-function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }) {
-  const ref = useDialog(open, onClose);
+function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }) {
+  const ref = useDialog(open);
   const hasNav = onNavPrev != null || onNavNext != null;
-  const titleId = useId();
   const onBackdropClick = (e) => {
-    onClick?.(e);
     if (!onClose || e.target !== e.currentTarget) return;
     const r = e.currentTarget.getBoundingClientRect();
     if (r.width === 0) return;
     const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
     if (outside) onClose();
   };
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), onClose, onClick: onBackdropClick, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ jsxs("div", { className: "uix-peek__nav", children: [
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": "Previous record", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": "Next record", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: onNavPrev, disabled: !onNavPrev, "aria-label": "Previous record", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: onNavNext, disabled: !onNavNext, "aria-label": "Next record", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
       ] }),
-      title && /* @__PURE__ */ jsx("h2", { className: "uix-peek__title", id: titleId, children: title }),
+      title && /* @__PURE__ */ jsx("div", { className: "uix-peek__title", children: title }),
       hint && /* @__PURE__ */ jsx("span", { className: "uix-peek__hint", children: hint }),
       onClose && /* @__PURE__ */ jsx("button", { className: "uix-peek__close", onClick: onClose, "aria-label": "Close preview", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
     ] }),

package/dist/components/Progress.d.ts

@@ -8,9 +8,7 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     max?: number;
     /** Continuous slide animation when the amount of work is unknown. */
     indeterminate?: boolean;
-    /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
-    label?: string;
 }
-declare function Progress({ value, max, indeterminate, label, className, ...props }: ProgressProps): react.JSX.Element;
+declare function Progress({ value, max, indeterminate, className, ...props }: ProgressProps): react.JSX.Element;
 
 export { Progress, type ProgressProps };