@tensor_1/react 2.14.2 → 2.15.0

package/dist/components/Sidebar.js

@@ -1,13 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const ChevronIcon = () => /* @__PURE__ */ jsx("svg", { className: "uix-navgroup__chevron", 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 Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("nav", { className: cx("uix-sidebar", className), "data-collapsed": collapsed || void 0, ...props, children: [
+function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", className, ...props }) {
+  const isCollapsed = collapsed ?? nav === "rail";
+  return /* @__PURE__ */ jsxs("nav", { className: cx("uix-sidebar", className), "data-collapsed": isCollapsed || void 0, "data-nav": nav, ...props, children: [
     (brand != null || onToggle) && /* @__PURE__ */ jsxs("div", { className: "uix-sidebar__head", children: [
       brand && /* @__PURE__ */ jsx("div", { className: "uix-sidebar__brand", children: brand }),
-      onToggle && /* @__PURE__ */ jsx("button", { className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", children: toggleIcon ?? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
+      onToggle && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": isCollapsed ? expandLabel : collapseLabel, children: toggleIcon ?? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "12", height: "1.5", rx: ".75" }),
         /* @__PURE__ */ jsx("rect", { x: "3", y: "8.25", width: "8", height: "1.5", rx: ".75" }),
         /* @__PURE__ */ jsx("rect", { x: "3", y: "12.5", width: "12", height: "1.5", rx: ".75" })
@@ -28,6 +29,7 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         className: cx("uix-navitem", className),
         "aria-current": active ? "page" : void 0,
         ...btnProps,
@@ -53,15 +55,31 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
     }
   );
 }
-function NavGroup({ icon, label, children, defaultExpanded = true }) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
+function NavGroup({ icon, label, children, defaultExpanded = true, expanded: controlledExpanded, onExpandedChange }) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expanded = controlledExpanded ?? internalExpanded;
+  const panelId = useId();
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    panelRef.current?.toggleAttribute("inert", !expanded);
+    if (!expanded && panelRef.current?.contains(document.activeElement)) triggerRef.current?.focus();
+  }, [expanded]);
+  const setExpanded = (next) => {
+    if (!next && panelRef.current?.contains(document.activeElement)) triggerRef.current?.focus();
+    if (controlledExpanded == null) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "uix-navgroup", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
+        type: "button",
         className: "uix-navitem uix-navgroup__trigger",
         "aria-expanded": expanded,
-        onClick: () => setExpanded((v) => !v),
+        "aria-controls": panelId,
+        onClick: () => setExpanded(!expanded),
         children: [
           icon && /* @__PURE__ */ jsx("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
           /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children: label }),
@@ -69,14 +87,14 @@ function NavGroup({ icon, label, children, defaultExpanded = true }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "uix-navgroup__panel", children: /* @__PURE__ */ jsx("div", { children }) })
+    /* @__PURE__ */ jsx("div", { ref: panelRef, id: panelId, className: "uix-navgroup__panel", "aria-hidden": !expanded, children: /* @__PURE__ */ jsx("div", { children }) })
   ] });
 }
 function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
   const cls = cx("uix-navitem uix-subitem", className);
   if (Tag === "button") {
     const { href: _href, ...btnProps } = props;
-    return /* @__PURE__ */ jsx("button", { className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
+    return /* @__PURE__ */ jsx("button", { type: "button", className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
   }
   return /* @__PURE__ */ jsx("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ jsx("span", { className: "uix-navitem__label", children }) });
 }

package/dist/components/States.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+type StateVariant = 'section' | 'inline' | 'drawer' | 'page' | 'full-page';
 interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     icon?: ReactNode;
     title?: ReactNode;
@@ -8,9 +9,11 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     children?: ReactNode;
     /** Primary action (e.g. a Button) shown under the body. */
     action?: ReactNode;
+    /** Layout context changes spacing without changing semantics. */
+    variant?: StateVariant;
 }
 /** Centered empty state over `.uix-empty`. */
-declare function EmptyState({ icon, title, children, action, className, ...props }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ icon, title, children, action, variant, className, ...props }: EmptyStateProps): react.JSX.Element;
 interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     icon?: ReactNode;
     title?: ReactNode;
@@ -18,9 +21,23 @@ interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     detail?: ReactNode;
     /** Recovery action (e.g. a Retry Button). */
     action?: ReactNode;
+    variant?: StateVariant;
 }
 /** Error state over `.uix-empty` with a danger-toned icon; `role="alert"`. */
-declare function ErrorState({ icon, title, detail, action, className, ...props }: ErrorStateProps): react.JSX.Element;
+declare function ErrorState({ icon, title, detail, action, variant, className, ...props }: ErrorStateProps): react.JSX.Element;
+interface AccessStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    detail?: ReactNode;
+    action?: ReactNode;
+    variant?: StateVariant;
+}
+/** Permission-denied state. Copy and recovery controls stay application-owned. */
+declare function ForbiddenState({ icon, title, detail, action, variant, className, ...props }: AccessStateProps): react.JSX.Element;
+/** Not-found state. Copy and navigation remain application-owned. */
+declare function NotFoundState({ icon, title, detail, action, variant, className, ...props }: AccessStateProps): react.JSX.Element;
+/** Empty-result state for an active search or filter, kept distinct for analytics and recovery copy. */
+declare function FilteredEmptyState(props: EmptyStateProps): react.JSX.Element;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     variant?: 'block' | 'text' | 'circle';
     width?: number | string;
@@ -31,8 +48,10 @@ declare function Skeleton({ variant, width, height, className, style, ...props }
 interface LoadingStateProps extends HTMLAttributes<HTMLDivElement> {
     /** Number of skeleton rows to render. */
     rows?: number;
+    density?: 'compact' | 'comfortable';
+    label?: string;
 }
 /** A stack of skeleton rows for list/section loading. `role="status"`. */
-declare function LoadingState({ rows, className, ...props }: LoadingStateProps): react.JSX.Element;
+declare function LoadingState({ rows, density, label, className, ...props }: LoadingStateProps): react.JSX.Element;
 
-export { EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, LoadingState, type LoadingStateProps, Skeleton, type SkeletonProps };
+export { type AccessStateProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FilteredEmptyState, ForbiddenState, LoadingState, type LoadingStateProps, NotFoundState, Skeleton, type SkeletonProps, type StateVariant };

package/dist/components/States.js

@@ -1,21 +1,40 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function EmptyState({ icon, title, children, action, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", className), ...props, children: [
+function EmptyState({ icon, title, children, action, variant = "section", className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
     icon != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__icon", children: icon }),
     title != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__title", children: title }),
     children,
     action
   ] });
 }
-function ErrorState({ icon, title, detail, action, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
+function ErrorState({ icon, title, detail, action, variant = "section", className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", "uix-empty--danger", `uix-empty--${variant}`, className), role: "alert", ...props, children: [
     icon != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
     title != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__title", children: title }),
     detail != null && /* @__PURE__ */ jsx("p", { children: detail }),
     action
   ] });
 }
+function ForbiddenState({ icon, title, detail, action, variant = "section", className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", "uix-empty--warning", `uix-empty--${variant}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__icon uix-empty__icon--warning", children: icon }),
+    title != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__title", children: title }),
+    detail != null && /* @__PURE__ */ jsx("p", { children: detail }),
+    action
+  ] });
+}
+function NotFoundState({ icon, title, detail, action, variant = "section", className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__icon", children: icon }),
+    title != null && /* @__PURE__ */ jsx("div", { className: "uix-empty__title", children: title }),
+    detail != null && /* @__PURE__ */ jsx("p", { children: detail }),
+    action
+  ] });
+}
+function FilteredEmptyState(props) {
+  return /* @__PURE__ */ jsx(EmptyState, { "data-filtered": "true", ...props });
+}
 function Skeleton({ variant = "block", width, height, className, style, ...props }) {
   const dims = { width, height, ...style };
   return /* @__PURE__ */ jsx(
@@ -32,12 +51,15 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
     }
   );
 }
-function LoadingState({ rows = 3, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
+function LoadingState({ rows = 3, density = "comfortable", label, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", "aria-busy": "true", "aria-label": label, ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
 }
 export {
   EmptyState,
   ErrorState,
+  FilteredEmptyState,
+  ForbiddenState,
   LoadingState,
+  NotFoundState,
   Skeleton
 };

package/dist/components/TableControls.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ViewMenuColumn {
+    id: string;
+    label: ReactNode;
+    visible: boolean;
+    disabled?: boolean;
+}
+interface ViewMenuProps {
+    density: string;
+    densityLabel: ReactNode;
+    densityOptions: readonly {
+        value: string;
+        label: ReactNode;
+    }[];
+    onDensityChange: (value: string) => void;
+    zebra?: {
+        checked: boolean;
+        label: ReactNode;
+        onChange: (checked: boolean) => void;
+    };
+    freeze?: {
+        checked: boolean;
+        label: ReactNode;
+        onChange: (checked: boolean) => void;
+    };
+    columns?: readonly ViewMenuColumn[];
+    columnsLabel?: ReactNode;
+    onColumnVisibilityChange?: (id: string, visible: boolean) => void;
+}
+/** Controlled table presentation menu; wrap it with Popover when trigger behavior is needed. */
+declare function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }: ViewMenuProps): react.JSX.Element;
+interface FilterOption {
+    value: string;
+    label: string;
+}
+interface FilterPopoverProps {
+    label: ReactNode;
+    type?: 'text' | 'number' | 'date' | 'select' | 'enum' | 'boolean';
+    value: string;
+    onValueChange: (value: string) => void;
+    options?: readonly FilterOption[];
+    applyLabel: ReactNode;
+    clearLabel: ReactNode;
+    onApply: () => void;
+    onClear: () => void;
+    placeholder?: string;
+}
+/** Controlled filter editor content; applications own query serialization and the popover trigger. */
+declare function FilterPopover({ label, type, value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }: FilterPopoverProps): react.JSX.Element;
+interface SavedViewItem {
+    id: string;
+    label: ReactNode;
+    active?: boolean;
+    pinned?: boolean;
+}
+interface SavedViewMenuBaseProps {
+    items: readonly SavedViewItem[];
+    onSelect: (id: string) => void;
+    emptyLabel?: ReactNode;
+    actions?: (item: SavedViewItem) => ReactNode;
+    footer?: ReactNode;
+}
+type SavedViewMenuProps = SavedViewMenuBaseProps & ({
+    onPinChange: (id: string, pinned: boolean) => void;
+    pinLabel: string;
+    unpinLabel: string;
+} | {
+    onPinChange?: undefined;
+    pinLabel?: never;
+    unpinLabel?: never;
+});
+/** Generic saved-view selector. Persistence, ownership and authorization remain application concerns. */
+declare function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }: SavedViewMenuProps): react.JSX.Element;
+
+export { type FilterOption, FilterPopover, type FilterPopoverProps, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, ViewMenu, type ViewMenuColumn, type ViewMenuProps };

package/dist/components/TableControls.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Button } from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import { Input } from "./Input.js";
+import { Segmented, SegmentedOption } from "./Segmented.js";
+import { Switch } from "./Switch.js";
+function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
+  const densityLabelId = useId();
+  const zebraLabelId = useId();
+  const freezeLabelId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "uix-view-menu", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      /* @__PURE__ */ jsx("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
+      /* @__PURE__ */ jsx(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
+    ] }),
+    (zebra || freeze) && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      zebra && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__row", children: [
+        /* @__PURE__ */ jsx("span", { id: zebraLabelId, children: zebra.label }),
+        /* @__PURE__ */ jsx(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
+      ] }),
+      freeze && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__row", children: [
+        /* @__PURE__ */ jsx("span", { id: freezeLabelId, children: freeze.label }),
+        /* @__PURE__ */ jsx(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
+      ] })
+    ] }),
+    columns && columns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      columnsLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: columnsLabel }),
+      /* @__PURE__ */ jsx("div", { className: "uix-view-menu__cols", children: columns.map((column) => /* @__PURE__ */ jsx(Checkbox, { label: column.label, checked: column.visible, disabled: column.disabled, onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked) }, column.id)) })
+    ] })
+  ] });
+}
+function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
+  return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover", children: [
+    /* @__PURE__ */ jsxs("label", { className: "uix-label", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ jsx("select", { className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ jsx(Input, { type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover__actions", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onClear, children: clearLabel }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: onApply, children: applyLabel })
+    ] })
+  ] });
+}
+function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }) {
+  return /* @__PURE__ */ jsxs("ul", { className: "uix-menu uix-saved-views", children: [
+    items.length === 0 && emptyLabel != null && /* @__PURE__ */ jsx("li", { className: "uix-menu__label", children: emptyLabel }),
+    items.map((item) => /* @__PURE__ */ jsxs("li", { className: "uix-saved-views__row", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-menu__item", "data-active": item.active || void 0, onClick: () => onSelect(item.id), children: item.label }),
+      onPinChange && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
+      actions?.(item)
+    ] }, item.id)),
+    footer != null && /* @__PURE__ */ jsx("li", { className: "uix-saved-views__footer", children: footer })
+  ] });
+}
+export {
+  FilterPopover,
+  SavedViewMenu,
+  ViewMenu
+};

package/dist/components/ToggleRow.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ToggleRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    label: ReactNode;
+    description?: ReactNode;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    accessibleLabel: string;
+}
+declare function ToggleRow({ label, description, checked, onCheckedChange, disabled, accessibleLabel, className, ...props }: ToggleRowProps): react.JSX.Element;
+
+export { ToggleRow, type ToggleRowProps };

package/dist/components/ToggleRow.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { Switch } from "./Switch.js";
+function ToggleRow({ label, description, checked, onCheckedChange, disabled, accessibleLabel, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-toggle-row", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-toggle-row__copy", children: [
+      /* @__PURE__ */ jsx("div", { className: "uix-toggle-row__label", children: label }),
+      description != null && /* @__PURE__ */ jsx("div", { className: "uix-toggle-row__description", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Switch, { checked, disabled, "aria-label": accessibleLabel, onChange: (event) => onCheckedChange(event.currentTarget.checked) })
+  ] });
+}
+export {
+  ToggleRow
+};