@tensor_1/react 2.14.2 → 2.16.0

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/Flow.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type FlowVariant = 'linear' | 'branch' | 'loop' | 'mindmap' | 'canvas';
+type FlowNodeState = 'pending' | 'active' | 'running' | 'done' | 'error';
+interface FlowProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: FlowVariant;
+    panel?: boolean;
+    children?: ReactNode;
+}
+/** Presentational workflow surface. Consumers provide graph geometry and connectors. */
+declare function Flow({ variant, panel, children, className, role, ...props }: FlowProps): react.JSX.Element;
+interface FlowNodeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    state?: FlowNodeState;
+    stateLabel?: ReactNode;
+    eyebrow?: ReactNode;
+    meta?: ReactNode;
+    icon?: ReactNode;
+    footer?: ReactNode;
+    wide?: boolean;
+}
+/** Workflow node with explicit text state and optional operational metadata. */
+declare function FlowNode({ title, state, stateLabel, eyebrow, meta, icon, footer, wide, className, ...props }: FlowNodeProps): react.JSX.Element;
+
+export { Flow, FlowNode, type FlowNodeProps, type FlowNodeState, type FlowProps, type FlowVariant };

package/dist/components/Flow.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Flow({ variant = "linear", panel = false, children, className, role = "group", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("uix-flow", `uix-flow--${variant}`, panel && "uix-flow--panel", className),
+      role,
+      ...props,
+      children
+    }
+  );
+}
+const FLOW_STATE_LABELS = {
+  pending: "Pending",
+  active: "Active",
+  running: "Running",
+  done: "Done",
+  error: "Error"
+};
+function FlowNode({
+  title,
+  state = "pending",
+  stateLabel,
+  eyebrow,
+  meta,
+  icon,
+  footer,
+  wide = false,
+  className,
+  ...props
+}) {
+  const resolvedStateLabel = stateLabel ?? FLOW_STATE_LABELS[state];
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-node__body", children: [
+      eyebrow != null && /* @__PURE__ */ jsx("div", { className: "uix-node__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsx("div", { className: "uix-node__title", children: title }),
+      meta != null && /* @__PURE__ */ jsx("div", { className: "uix-node__meta", children: meta }),
+      /* @__PURE__ */ jsx("div", { className: "uix-node__status", children: resolvedStateLabel })
+    ] }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-node__footer", children: footer })
+  ] });
+}
+export {
+  Flow,
+  FlowNode
+};

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/Pipeline.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type PipelineStageState = 'pending' | 'waiting' | 'active' | 'current' | 'running' | 'done' | 'complete' | 'blocked' | 'failed' | 'error';
+interface PipelineProps extends HTMLAttributes<HTMLOListElement> {
+    detailed?: boolean;
+    children?: ReactNode;
+}
+/** Ordered progress rail. Consumers own workflow meaning; UIx owns stage semantics and presentation. */
+declare function Pipeline({ detailed, children, className, tabIndex, ...props }: PipelineProps): react.JSX.Element;
+interface PipelineStageProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    label: ReactNode;
+    state?: PipelineStageState;
+    stateLabel?: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    marker?: ReactNode;
+    detailed?: boolean;
+    /** Marks the stage as the current position independently of its operational state. */
+    current?: boolean;
+}
+/** One pipeline stage. `stateLabel` keeps status explicit instead of relying on colour. */
+declare function PipelineStage({ label, state, stateLabel, description, meta, marker, detailed, current: currentProp, className, ...props }: PipelineStageProps): react.JSX.Element;
+
+export { Pipeline, type PipelineProps, PipelineStage, type PipelineStageProps, type PipelineStageState };

package/dist/components/Pipeline.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cx } from "../cx.js";
+function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
+  const stages = detailed ? Children.map(children, (child) => isValidElement(child) && child.type === PipelineStage ? cloneElement(child, { detailed: child.props.detailed ?? true }) : child) : children;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
+      tabIndex: tabIndex ?? (detailed ? 0 : void 0),
+      ...props,
+      children: stages
+    }
+  );
+}
+const DEFAULT_STATE_LABELS = {
+  pending: "Pending",
+  waiting: "Waiting",
+  active: "Active",
+  current: "Current",
+  running: "Running",
+  done: "Done",
+  complete: "Complete",
+  blocked: "Blocked",
+  failed: "Failed",
+  error: "Error"
+};
+function PipelineStage({
+  label,
+  state = "pending",
+  stateLabel,
+  description,
+  meta,
+  marker,
+  detailed = false,
+  current: currentProp,
+  className,
+  ...props
+}) {
+  const current = currentProp ?? (state === "active" || state === "current" || state === "running");
+  const resolvedStateLabel = stateLabel ?? DEFAULT_STATE_LABELS[state];
+  const showDetails = detailed || description != null || meta != null || marker != null;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cx("uix-pipeline__stage", className),
+      "data-state": state,
+      "aria-current": current ? "step" : void 0,
+      ...props,
+      children: showDetails ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-pipeline__content", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ jsx("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
+          /* @__PURE__ */ jsx("div", { className: "uix-pipeline__title", children: label }),
+          description != null && /* @__PURE__ */ jsx("div", { className: "uix-pipeline__description", children: description }),
+          meta != null && /* @__PURE__ */ jsx("div", { className: "uix-pipeline__meta", children: meta })
+        ] })
+      ] }) : label
+    }
+  );
+}
+export {
+  Pipeline,
+  PipelineStage
+};

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';