@tensor_1/react 2.3.0 → 2.5.0

package/dist/index.d.cts

@@ -262,6 +262,91 @@ interface SubNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare function SubNavItem({ active, as: Tag, children, className, ...props }: SubNavItemProps): react.JSX.Element;
 
+interface StarButtonProps {
+    /** Pinned state — drives the filled, warning-toned, always-visible look via `data-on`. */
+    pinned: boolean;
+    /** Item label, interpolated into the accessible name. */
+    label: string;
+    /**
+     * Accessible-name template carrying a `{label}` placeholder. ONE state model:
+     * a STATIC name ("Add {label} to favourites") plus `aria-pressed` reflecting
+     * the pinned state — never a dynamic Pin/Remove name AND `aria-pressed` (that
+     * double-encodes the state). Defaults to `Add {label} to favourites`.
+     */
+    addLabel?: string;
+    /** Called with the next pinned state when the control is activated. */
+    onToggle: (next: boolean) => void;
+    /** Extra classes — e.g. consumer-owned reveal triggers when the row is not a `.uix-navitem`. */
+    className?: string;
+}
+/**
+ * Controlled pin/unpin star for a nav item. UIx owns the look (the
+ * `.uix-navitem__star` contract: reveal-on-hover inside a `.uix-navitem`,
+ * warning-toned fill when pinned); the consumer owns the pinned state.
+ *
+ * Reveal-on-hover is opacity-only (zeroed under `prefers-reduced-motion`).
+ * When the star lives outside a `.uix-navitem` row, pass reveal triggers via
+ * `className`.
+ */
+declare function StarButton({ pinned, label, addLabel, onToggle, className, }: StarButtonProps): react.JSX.Element;
+
+interface NavFavouriteItem {
+    /** Stable identity used for reorder + remove (consumers typically pass the href). */
+    readonly id: string;
+    /** Display label, interpolated into the per-row remove / options accessible names. */
+    readonly label: string;
+    /** The destination control, rendered by the consumer so routing + link styling stay app-owned. */
+    readonly link: ReactNode;
+}
+interface NavFavouritesLabels {
+    /** Disclosure header, e.g. "Favourites". */
+    readonly heading: string;
+    /** Shown when there are no favourites. */
+    readonly empty: string;
+    readonly moveUp: string;
+    readonly moveDown: string;
+    /** Per-row remove action template with a `{label}` placeholder, e.g. "Remove {label} from favourites". */
+    readonly remove: string;
+    /** Per-row overflow-trigger accessible-name template with `{label}`. Defaults to "{label} favourite options". */
+    readonly options?: string;
+}
+interface NavFavouritesProps {
+    /** The already-resolved favourites, in display order. */
+    items: ReadonlyArray<NavFavouriteItem>;
+    collapsed?: boolean;
+    onToggleCollapsed?: () => void;
+    /** Called with the id of the favourite to unpin. */
+    onRemove: (id: string) => void;
+    /** Called with the full new id order after a move. */
+    onReorder: (orderedIds: string[]) => void;
+    labels: NavFavouritesLabels;
+    /** Optional telemetry hook emitted as `data-empty-reason` on the empty-state node. */
+    emptyReason?: string;
+    className?: string;
+}
+/**
+ * Controlled Favourites disclosure for a sidebar nav (UIx owns the look + the
+ * APG interaction contract; the consumer owns the favourites list + persistence).
+ *
+ * An ARIA disclosure exactly like a collapsible nav group: a header button with
+ * `aria-expanded`/`aria-controls`, the region always rendered with a stable id
+ * and toggled via `hidden`, focus pulled to the header before collapse.
+ *
+ * Each row carries the consumer-rendered destination link plus:
+ *   - an overflow menu (APG menu-button: button + `aria-haspopup="menu"` +
+ *     `aria-expanded`; Up/Down roving focus; Escape returns focus to the
+ *     trigger) with Move up / Move down / Remove,
+ *   - Alt+ArrowUp / Alt+ArrowDown accelerators on the focused row so moves
+ *     chain without re-opening the menu.
+ *
+ * Focus management:
+ *   - after Remove, focus moves to the adjacent favourite, or to the header
+ *     when the list empties,
+ *   - after Move up/down, focus stays on the moved row's control in its new
+ *     position.
+ */
+declare function NavFavourites({ items, collapsed, onToggleCollapsed, onRemove, onReorder, labels, emptyReason, className, }: NavFavouritesProps): react.JSX.Element;
+
 type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     tone?: AlertTone;
@@ -329,7 +414,7 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange
 }
 declare function Pagination({ page, pageCount, onChange, className, ...props }: PaginationProps): react.JSX.Element;
 
-type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted';
+type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
 type PillTreatment = 'filled' | 'outline';
 interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: PillTone;
@@ -350,6 +435,17 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function Progress({ value, max, indeterminate, className, ...props }: ProgressProps): react.JSX.Element;
 
+/** Fill color tone for the meter bar. Defaults to `success` (green). */
+type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue';
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fill level 0–100. Clamped to this range. */
+    value?: number;
+    /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
+    tone?: MeterTone;
+}
+/** Horizontal utilization / threshold bar backed by `.uix-meter`. */
+declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
+
 interface StatTrend {
     direction: 'up' | 'down';
     label: ReactNode;
@@ -532,6 +628,37 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
 /** A single command row over `.uix-cmdk__item`. */
 declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
 
+interface InboxProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
+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. */
+declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
+interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary subject / title line. */
+    subject?: ReactNode;
+    /** Secondary preview excerpt (truncated). */
+    preview?: ReactNode;
+    /** Leading slot — avatar, icon, or priority indicator. */
+    leading?: ReactNode;
+    /** When true sets `data-unread` → bolds the subject line. */
+    unread?: boolean;
+    /** When true sets `aria-selected` → renders the accent left-border stripe. */
+    selected?: boolean;
+    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, ...props }: InboxItemProps): react.JSX.Element;
+interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Right-pane detail area — renders the full content of the selected item. */
+declare function InboxDetail({ children, className, ...props }: InboxDetailProps): react.JSX.Element;
+
 interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
@@ -573,4 +700,4 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
 }
 declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Modal, type ModalProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };
+export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionList
 export { Tab, TabProps, Tabs, TabsProps } from './components/Tabs.js';
 export { AppShell, AppShellProps } from './components/AppShell.js';
 export { NavGroup, NavGroupProps, NavItem, NavItemProps, Sidebar, SidebarProps, SidebarSection, SidebarSectionProps, SubNavItem, SubNavItemProps } from './components/Sidebar.js';
+export { StarButton, StarButtonProps } from './components/StarButton.js';
+export { NavFavouriteItem, NavFavourites, NavFavouritesLabels, NavFavouritesProps } from './components/NavFavourites.js';
 export { Alert, AlertProps, AlertTone } from './components/Alert.js';
 export { Spinner, SpinnerProps } from './components/Spinner.js';
 export { Toast, ToastProps, ToastTone, Toaster, ToasterProps } from './components/Toast.js';
@@ -26,6 +28,7 @@ export { SortDirection, Table, TableDensity, TableProps, TableWrap, TableWrapPro
 export { Pagination, PaginationProps } from './components/Pagination.js';
 export { PillTone, PillTreatment, StatusPill, StatusPillProps } from './components/StatusPill.js';
 export { Progress, ProgressProps } from './components/Progress.js';
+export { Meter, MeterProps, MeterTone } from './components/Meter.js';
 export { Stat, StatProps, StatTrend } from './components/Stat.js';
 export { Tooltip, TooltipProps } from './components/Tooltip.js';
 export { EmptyState, EmptyStateProps, ErrorState, ErrorStateProps, LoadingState, LoadingStateProps, Skeleton, SkeletonProps } from './components/States.js';
@@ -36,6 +39,7 @@ export { Timeline, TimelineItem, TimelineItemProps, TimelineProps } from './comp
 export { Note, NoteProps, NoteTone, Prose, ProseProps } from './components/Prose.js';
 export { Popover, PopoverProps } from './components/Popover.js';
 export { CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandPalette, CommandPaletteProps } from './components/CommandPalette.js';
+export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxList, InboxListProps, InboxProps } from './components/Inbox.js';
 export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
 export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
 import 'react';

package/dist/index.js

@@ -19,6 +19,8 @@ import { DescriptionList, DescriptionItem } from "./components/DescriptionList.j
 import { Tabs, Tab } from "./components/Tabs.js";
 import { AppShell } from "./components/AppShell.js";
 import { Sidebar, SidebarSection, NavItem, NavGroup, SubNavItem } from "./components/Sidebar.js";
+import { StarButton } from "./components/StarButton.js";
+import { NavFavourites } from "./components/NavFavourites.js";
 import { Alert } from "./components/Alert.js";
 import { Spinner } from "./components/Spinner.js";
 import { Toast, Toaster } from "./components/Toast.js";
@@ -26,6 +28,7 @@ import { TableWrap, Table, Th, Td, Tr } from "./components/Table.js";
 import { Pagination } from "./components/Pagination.js";
 import { StatusPill } from "./components/StatusPill.js";
 import { Progress } from "./components/Progress.js";
+import { Meter } from "./components/Meter.js";
 import { Stat } from "./components/Stat.js";
 import { Tooltip } from "./components/Tooltip.js";
 import { EmptyState, ErrorState, Skeleton, LoadingState } from "./components/States.js";
@@ -36,6 +39,7 @@ import { Timeline, TimelineItem } from "./components/Timeline.js";
 import { Prose, Note } from "./components/Prose.js";
 import { Popover } from "./components/Popover.js";
 import { CommandPalette, CommandGroup, CommandItem } from "./components/CommandPalette.js";
+import { Inbox, InboxList, InboxItem, InboxDetail } from "./components/Inbox.js";
 import { Kanban, KanbanColumn, KanbanCard } from "./components/Kanban.js";
 import { Tree } from "./components/Tree.js";
 export {
@@ -59,6 +63,10 @@ export {
   EmptyState,
   ErrorState,
   Field,
+  Inbox,
+  InboxDetail,
+  InboxItem,
+  InboxList,
   Input,
   InputGroup,
   Kanban,
@@ -68,7 +76,9 @@ export {
   List,
   ListItem,
   LoadingState,
+  Meter,
   Modal,
+  NavFavourites,
   NavGroup,
   NavItem,
   Note,
@@ -85,6 +95,7 @@ export {
   SidebarSection,
   Skeleton,
   Spinner,
+  StarButton,
   Stat,
   StatusPill,
   SubNavItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",