@tensor_1/react 2.13.0 → 2.15.0

package/dist/combobox-model.d.ts

@@ -0,0 +1,9 @@
+interface ComboboxOption {
+    value: string;
+    label: string;
+    keywords?: readonly string[];
+    disabled?: boolean;
+}
+declare function filterComboboxOptions(options: readonly ComboboxOption[], query: string): ComboboxOption[];
+
+export { type ComboboxOption, filterComboboxOptions };

package/dist/combobox-model.js

@@ -0,0 +1,10 @@
+function filterComboboxOptions(options, query) {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return [...options];
+  return options.filter(
+    (option) => [option.label, option.value, ...option.keywords ?? []].some((part) => part.toLocaleLowerCase().includes(needle))
+  );
+}
+export {
+  filterComboboxOptions
+};

package/dist/components/AsyncOperationStatus.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type AsyncOperationState = 'queued' | 'running' | 'complete' | 'failed';
+interface AsyncOperationStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    state: AsyncOperationState;
+    title: ReactNode;
+    statusLabel: ReactNode;
+    description?: ReactNode;
+    progress?: number;
+    progressLabel?: string;
+    action?: ReactNode;
+}
+declare function AsyncOperationStatus({ state, title, statusLabel, description, progress, progressLabel, action, className, ...props }: AsyncOperationStatusProps): react.JSX.Element;
+
+export { type AsyncOperationState, AsyncOperationStatus, type AsyncOperationStatusProps };

package/dist/components/AsyncOperationStatus.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { Progress } from "./Progress.js";
+import { StatusPill } from "./StatusPill.js";
+const tones = {
+  queued: "neutral",
+  running: "info",
+  complete: "success",
+  failed: "danger"
+};
+function AsyncOperationStatus({ state, title, statusLabel, description, progress, progressLabel, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-operation", className), role: state === "failed" ? "alert" : "status", "aria-live": "polite", ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-operation__head", children: [
+      /* @__PURE__ */ jsx("strong", { children: title }),
+      /* @__PURE__ */ jsx(StatusPill, { tone: tones[state], children: statusLabel })
+    ] }),
+    description != null && /* @__PURE__ */ jsx("div", { className: "uix-operation__description", children: description }),
+    progress != null && /* @__PURE__ */ jsx(Progress, { value: progress, "aria-label": progressLabel }),
+    action != null && /* @__PURE__ */ jsx("div", { className: "uix-operation__action", children: action })
+  ] });
+}
+export {
+  AsyncOperationStatus
+};

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface BreadcrumbItem {
+    id?: string;
+    label: ReactNode;
+    href?: string;
+    current?: boolean;
+}
+interface BreadcrumbsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: readonly BreadcrumbItem[];
+    label: string;
+    separator?: ReactNode;
+}
+/** Framework-neutral breadcrumb navigation. Route adapters can replace anchors at the application seam. */
+declare function Breadcrumbs({ items, label, separator, className, ...props }: BreadcrumbsProps): react.JSX.Element;
+
+export { type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps };

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+function Breadcrumbs({ items, label, separator = "/", className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className, ...props, children: /* @__PURE__ */ jsx("ol", { className: "uix-breadcrumbs", children: items.map((item, index) => {
+    const current = item.current ?? index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx("li", { className: "uix-breadcrumbs__sep", "aria-hidden": "true", children: separator }),
+      /* @__PURE__ */ jsx("li", { children: item.href && !current ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : /* @__PURE__ */ jsx("span", { "aria-current": current ? "page" : void 0, children: item.label }) })
+    ] }, item.id ?? `${item.href ?? "current"}-${index}`);
+  }) }) });
+}
+export {
+  Breadcrumbs
+};

package/dist/components/Card.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
@@ -9,5 +9,14 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     children?: ReactNode;
 }
 declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    headerAction?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+/** A whole-card anchor with visible hover and keyboard focus affordances. */
+declare function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }: CardLinkProps): react.JSX.Element;
 
-export { Card, type CardProps };
+export { Card, CardLink, type CardLinkProps, type CardProps };

package/dist/components/Card.js

@@ -14,6 +14,21 @@ function Card({ title, subtitle, headerAction, footer, children, className, ...p
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
   ] });
 }
+function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }) {
+  const hasHeader = title != null || subtitle != null || headerAction != null;
+  return /* @__PURE__ */ jsxs("a", { className: cx("uix-card", "uix-card--interactive", className), ...props, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        title != null && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
+        subtitle != null && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
+      ] }),
+      headerAction
+    ] }),
+    children != null && /* @__PURE__ */ jsx("div", { className: "uix-card__body", children }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
+  ] });
+}
 export {
-  Card
+  Card,
+  CardLink
 };

package/dist/components/CollapsibleSection.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { DetailsHTMLAttributes, ReactNode } from 'react';
+
+interface CollapsibleSectionProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'title'> {
+    title: ReactNode;
+    summary?: ReactNode;
+    children?: ReactNode;
+}
+declare function CollapsibleSection({ title, summary, children, className, ...props }: CollapsibleSectionProps): react.JSX.Element;
+
+export { CollapsibleSection, type CollapsibleSectionProps };

package/dist/components/CollapsibleSection.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function CollapsibleSection({ title, summary, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("details", { className: cx("uix-collapsible", className), ...props, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "uix-collapsible__summary", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-collapsible__title", children: title }),
+        summary != null && /* @__PURE__ */ jsx("span", { className: "uix-collapsible__meta", children: summary })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-collapsible__body", children })
+  ] });
+}
+export {
+  CollapsibleSection
+};

package/dist/components/Combobox.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { ComboboxOption } from '../combobox-model.js';
+
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    options: readonly ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, option: ComboboxOption) => void;
+    label: string;
+    placeholder?: string;
+    emptyLabel: string;
+    name?: string;
+    disabled?: boolean;
+}
+/** Searchable single-select combobox with keyboard navigation and no framework dependencies. */
+declare function Combobox({ options, value, defaultValue, onValueChange, label, placeholder, emptyLabel, name, disabled, className, ...props }: ComboboxProps): react.JSX.Element;
+
+export { Combobox, ComboboxOption, type ComboboxProps };

package/dist/components/Combobox.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { filterComboboxOptions } from "../combobox-model.js";
+function Combobox({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  placeholder,
+  emptyLabel,
+  name,
+  disabled,
+  className,
+  ...props
+}) {
+  const generatedId = useId();
+  const listboxId = `${generatedId}-listbox`;
+  const rootRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const selectedValue = value ?? internalValue;
+  const selected = options.find((option) => option.value === selectedValue);
+  const [query, setQuery] = useState(selected?.label ?? "");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const filtered = useMemo(() => filterComboboxOptions(options, open ? query : ""), [open, options, query]);
+  const activeOption = filtered[activeIndex];
+  useEffect(() => {
+    if (!open) setQuery(options.find((option) => option.value === selectedValue)?.label ?? "");
+  }, [open, options, selectedValue]);
+  const select = (option) => {
+    if (option.disabled) return;
+    if (value == null) setInternalValue(option.value);
+    setQuery(option.label);
+    setOpen(false);
+    onValueChange?.(option.value, option);
+  };
+  const move = (step) => {
+    if (!filtered.length) return;
+    let next = activeIndex;
+    for (let attempts = 0; attempts < filtered.length; attempts += 1) {
+      next = (next + step + filtered.length) % filtered.length;
+      if (!filtered[next]?.disabled) break;
+    }
+    setActiveIndex(next);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else move(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter" && open && activeOption) {
+      event.preventDefault();
+      select(activeOption);
+    } else if (event.key === "Escape") {
+      setOpen(false);
+      setQuery(selected?.label ?? "");
+    }
+  };
+  const handleBlur = (event) => {
+    if (!rootRef.current?.contains(event.relatedTarget)) {
+      setOpen(false);
+      setQuery(options.find((option) => option.value === selectedValue)?.label ?? "");
+    }
+  };
+  const handleChange = (event) => {
+    setQuery(event.target.value);
+    setActiveIndex(0);
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cx("uix-combobox", className), onBlur: handleBlur, ...props, children: [
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValue }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "uix-input",
+        role: "combobox",
+        "aria-label": label,
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        "aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
+        value: query,
+        placeholder,
+        disabled,
+        onChange: handleChange,
+        onFocus: () => {
+          setQuery("");
+          setOpen(true);
+          setActiveIndex(Math.max(0, options.findIndex((option) => option.value === selectedValue)));
+        },
+        onKeyDown: handleKeyDown
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("ul", { id: listboxId, className: "uix-listbox uix-combobox__listbox", role: "listbox", children: [
+      filtered.length === 0 && /* @__PURE__ */ jsx("li", { className: "uix-listbox__empty", children: emptyLabel }),
+      filtered.map((option, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          id: `${listboxId}-${index}`,
+          className: "uix-listbox__option",
+          role: "option",
+          "aria-selected": option.value === selectedValue,
+          "aria-disabled": option.disabled || void 0,
+          "data-active": index === activeIndex || void 0,
+          onMouseDown: (event) => event.preventDefault(),
+          onMouseEnter: () => setActiveIndex(index),
+          onClick: () => select(option),
+          children: option.label
+        },
+        option.value
+      ))
+    ] })
+  ] });
+}
+export {
+  Combobox
+};

package/dist/components/DetailPage.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface DetailPageTab {
+    id: string;
+    label: ReactNode;
+    href: string;
+    active?: boolean;
+}
+interface DetailPageMetric {
+    id: string;
+    label: ReactNode;
+    value: ReactNode;
+}
+interface DetailPageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    back?: {
+        href: string;
+        label: ReactNode;
+    };
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    tabs?: readonly DetailPageTab[];
+    metrics?: readonly DetailPageMetric[];
+    side?: ReactNode;
+    children?: ReactNode;
+    tabsLabel?: string;
+}
+/** Framework-neutral record-detail scaffold; routing and data policy stay with the application. */
+declare function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, className, ...props }: DetailPageProps): react.JSX.Element;
+
+export { DetailPage, type DetailPageMetric, type DetailPageProps, type DetailPageTab };

package/dist/components/DetailPage.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { DetailLayout } from "./DetailLayout.js";
+import { PageHeader } from "./PageHeader.js";
+function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, className, ...props }) {
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-detail-page", className), ...props, children: [
+    back && /* @__PURE__ */ jsx("a", { className: "uix-link uix-link--quiet uix-detail-page__back", href: back.href, children: back.label }),
+    /* @__PURE__ */ jsx(PageHeader, { eyebrow, title, subtitle, actions }),
+    metrics && metrics.length > 0 && /* @__PURE__ */ jsx("dl", { className: "uix-detail-page__metrics", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: metric.label }),
+      /* @__PURE__ */ jsx("dd", { children: metric.value })
+    ] }, metric.id)) }),
+    tabs && tabs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "uix-tabs", "aria-label": tabsLabel, children: tabs.map((tab) => /* @__PURE__ */ jsx("a", { className: "uix-tab", "aria-current": tab.active ? "page" : void 0, href: tab.href, children: tab.label }, tab.id)) }),
+    /* @__PURE__ */ jsx(DetailLayout, { side, children })
+  ] });
+}
+export {
+  DetailPage
+};

package/dist/components/Dialogs.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ConfirmDialogProps {
+    open: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel: ReactNode;
+    cancelLabel: ReactNode;
+    closeLabel: string;
+    onConfirm: () => void | Promise<void>;
+    onCancel: () => void;
+    pending?: boolean;
+    destructive?: boolean;
+}
+/** Generic confirmation shell. Audit, authorization and compensation policy remain application-owned. */
+declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive }: ConfirmDialogProps): react.JSX.Element;
+interface PromptDialogProps {
+    open: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    inputLabel: string;
+    defaultValue?: string;
+    placeholder?: string;
+    submitLabel: ReactNode;
+    cancelLabel: ReactNode;
+    closeLabel: string;
+    onSubmit: (value: string) => void | Promise<void>;
+    onCancel: () => void;
+    validate?: (value: string) => ReactNode | undefined;
+    pending?: boolean;
+}
+declare function PromptDialog({ open, title, description, inputLabel, defaultValue, placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }: PromptDialogProps): react.JSX.Element;
+
+export { ConfirmDialog, type ConfirmDialogProps, PromptDialog, type PromptDialogProps };

package/dist/components/Dialogs.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Button } from "./Button.js";
+import { Input } from "./Input.js";
+import { Modal } from "./Modal.js";
+function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive }) {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose: onCancel,
+      title,
+      closeLabel,
+      role: "alertdialog",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
+      ] }),
+      children: description
+    }
+  );
+}
+function PromptDialog({ open, title, description, inputLabel, defaultValue = "", placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }) {
+  const inputId = useId();
+  const errorId = `${inputId}-error`;
+  const [value, setValue] = useState(defaultValue);
+  const [error, setError] = useState();
+  useEffect(() => {
+    if (open) {
+      setValue(defaultValue);
+      setError(void 0);
+    }
+  }, [defaultValue, open]);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const issue = validate?.(value);
+    setError(issue);
+    if (issue == null) void onSubmit(value);
+  };
+  return /* @__PURE__ */ jsx(Modal, { open, onClose: onCancel, title, closeLabel, children: /* @__PURE__ */ jsxs("form", { className: "uix-prompt", onSubmit: handleSubmit, children: [
+    description != null && /* @__PURE__ */ jsx("div", { children: description }),
+    /* @__PURE__ */ jsx("label", { className: "uix-label", htmlFor: inputId, children: inputLabel }),
+    /* @__PURE__ */ jsx(Input, { id: inputId, value, placeholder, "aria-describedby": error ? errorId : void 0, invalid: error != null, onChange: (event) => setValue(event.currentTarget.value), autoFocus: true }),
+    error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", loading: pending, children: submitLabel })
+    ] })
+  ] }) });
+}
+export {
+  ConfirmDialog,
+  PromptDialog
+};

package/dist/components/Modal.d.ts

@@ -9,7 +9,9 @@ interface ModalProps {
     footer?: ReactNode;
     className?: string;
     style?: CSSProperties;
+    closeLabel?: string;
+    role?: 'dialog' | 'alertdialog';
 }
-declare function Modal({ open, onClose, title, children, footer, className, style }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, title, children, footer, className, style, closeLabel, role }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

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

package/dist/components/RelatedLinks.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface RelatedLinkItem {
+    id: string;
+    label: ReactNode;
+    href: string;
+    meta?: ReactNode;
+}
+interface RelatedLinksProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    title?: ReactNode;
+    items: readonly RelatedLinkItem[];
+}
+declare function RelatedLinks({ title, items, className, ...props }: RelatedLinksProps): react.JSX.Element;
+
+export { type RelatedLinkItem, RelatedLinks, type RelatedLinksProps };

package/dist/components/RelatedLinks.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function RelatedLinks({ title, items, className, ...props }) {
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-related-links", className), ...props, children: [
+    title != null && /* @__PURE__ */ jsx("h2", { className: "uix-related-links__title", children: title }),
+    /* @__PURE__ */ jsx("ul", { className: "uix-related-links__list", children: items.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("a", { className: "uix-link uix-link--quiet", href: item.href, children: item.label }),
+      item.meta != null && /* @__PURE__ */ jsx("span", { children: item.meta })
+    ] }, item.id)) })
+  ] });
+}
+export {
+  RelatedLinks
+};

package/dist/components/RelativeTime.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface RelativeTimeFormatContext {
+    date: Date;
+    now: Date;
+    locale?: string | readonly string[];
+    timeZone?: string;
+}
+interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, 'children' | 'dateTime'> {
+    value: Date | number | string;
+    now?: Date | number;
+    locale?: string | readonly string[];
+    timeZone?: string;
+    numeric?: Intl.RelativeTimeFormatNumeric;
+    invalidLabel?: ReactNode;
+    refreshInterval?: number | false;
+    formatter?: (context: RelativeTimeFormatContext) => ReactNode;
+}
+/** Locale-aware relative time with deterministic `now` support for SSR and tests. */
+declare function RelativeTime({ value, now, locale, timeZone, numeric, invalidLabel, refreshInterval, formatter, title, ...props }: RelativeTimeProps): react.JSX.Element;
+
+export { RelativeTime, type RelativeTimeFormatContext, type RelativeTimeProps };

package/dist/components/RelativeTime.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { parseDateValue, relativeTimeValue } from "../relative-time-model.js";
+import { readRelativeClock, subscribeRelativeClock } from "../relative-time-clock.js";
+function RelativeTime({
+  value,
+  now,
+  locale,
+  timeZone,
+  numeric = "auto",
+  invalidLabel = "\u2014",
+  refreshInterval = 3e4,
+  formatter,
+  title,
+  ...props
+}) {
+  const interval = refreshInterval === false ? 0 : Math.max(0, refreshInterval);
+  const fixedNow = now == null ? void 0 : new Date(now).getTime();
+  const subscribe = useCallback((listener) => fixedNow == null ? subscribeRelativeClock(interval, listener) : () => {
+  }, [fixedNow, interval]);
+  const getSnapshot = useCallback(() => fixedNow ?? readRelativeClock(interval), [fixedNow, interval]);
+  const getServerSnapshot = useCallback(() => fixedNow ?? Date.now(), [fixedNow]);
+  const clock = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const date = useMemo(() => parseDateValue(value), [value]);
+  if (!date) return /* @__PURE__ */ jsx("time", { "data-invalid": "true", suppressHydrationWarning: true, ...props, children: invalidLabel });
+  const current = new Date(clock);
+  const content = formatter ? formatter({ date, now: current, locale, timeZone }) : (() => {
+    const relative = relativeTimeValue(date, current);
+    if (relative.unit === "day" && Math.abs(relative.value) >= 7) {
+      return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone }).format(date);
+    }
+    return new Intl.RelativeTimeFormat(locale, { numeric }).format(relative.value, relative.unit);
+  })();
+  const absolute = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).format(date);
+  return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), title: title ?? absolute, suppressHydrationWarning: true, ...props, children: content });
+}
+export {
+  RelativeTime
+};

package/dist/components/Sidebar.d.ts

@@ -3,12 +3,15 @@ import { ReactNode, AnchorHTMLAttributes, HTMLAttributes } from 'react';
 
 interface SidebarProps extends HTMLAttributes<HTMLElement> {
     collapsed?: boolean;
+    nav?: 'full' | 'rail';
     onToggle?: () => void;
     brand?: ReactNode;
     toggleIcon?: ReactNode;
     children?: ReactNode;
+    expandLabel?: string;
+    collapseLabel?: string;
 }
-declare function Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel, collapseLabel, className, ...props }: SidebarProps): react.JSX.Element;
 interface SidebarSectionProps {
     label?: string;
     children?: ReactNode;
@@ -27,8 +30,10 @@ interface NavGroupProps {
     label: ReactNode;
     children?: ReactNode;
     defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
 }
-declare function NavGroup({ icon, label, children, defaultExpanded }: NavGroupProps): react.JSX.Element;
+declare function NavGroup({ icon, label, children, defaultExpanded, expanded: controlledExpanded, onExpandedChange }: NavGroupProps): react.JSX.Element;
 interface SubNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     active?: boolean;
     as?: 'a' | 'button';