@tensor_1/react 2.3.0 → 2.4.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;
@@ -573,4 +658,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, 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, 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';

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";
@@ -69,6 +71,7 @@ export {
   ListItem,
   LoadingState,
   Modal,
+  NavFavourites,
   NavGroup,
   NavItem,
   Note,
@@ -85,6 +88,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.4.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",