@nexub/react 6.2.0 → 6.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.2.0",
+  "version": "6.4.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",
@@ -42,6 +42,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "action-bar",
+      "name": "Action Bar",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "alert-dialog",
       "name": "Alert Dialog",
@@ -925,6 +934,19 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "resizable-panels",
+      "name": "Resizable Panels",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Arrow keys: Move the focused separator by 5%. Mirrored in RTL.",
+        "Home / End: To the smallest or largest size.",
+        "Enter: Back to the default split."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "saved-views",
       "name": "Saved Views",
@@ -1067,6 +1089,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "stepper",
+      "name": "Stepper",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "streaming-text",
       "name": "Streaming Text",
@@ -1204,6 +1235,24 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "tree-view",
+      "name": "Tree View",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "ArrowDown / ArrowUp: Next or previous visible item.",
+        "ArrowRight: Opens a closed item, or moves to its first child. Mirrored in RTL.",
+        "ArrowLeft: Closes an open item, or moves to its parent. Mirrored in RTL.",
+        "Home / End: First or last visible item.",
+        "Enter / Space: Selects the item, or toggles its checkbox.",
+        "Type a letter: Moves to the next item starting with the typed text."
+      ],
+      "screenReader": [
+        "The tree is one tab stop (roving tabindex); it returns to the last focused or the selected item."
+      ]
+    },
     {
       "slug": "activity-feed",
       "name": "ActivityFeed",

package/dist/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Status on the start side, e.g. "Unsaved changes". Announced politely. */
+    message?: React.ReactNode;
+    /** Names the region. @default the message when it's a string */
+    'aria-label'?: string;
+}
+/**
+ * Save / cancel that stay in view at the bottom of a long form or settings
+ * page. Put it last inside the scrolling area.
+ */
+export declare const ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { floatingSurface } from "../../utils/surface.js";
+const ActionBar = React.forwardRef(function ActionBar2({ message, className, children, "aria-label": ariaLabel, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": ariaLabel ?? (typeof message === "string" ? message : void 0),
+      className: cn(
+        floatingSurface,
+        "sticky bottom-4 z-10 flex flex-wrap items-center gap-3 px-4 py-2",
+        className
+      ),
+      ...props,
+      children: [
+        message !== void 0 && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "me-auto text-label-lg text-[var(--color-on-surface)]", children: message }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", message === void 0 && "ms-auto"), children })
+      ]
+    }
+  );
+});
+export {
+  ActionBar
+};

package/dist/components/ActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionBar } from './ActionBar.js';
+export type { ActionBarProps } from './ActionBar.js';

package/dist/components/ActionBar/index.js

@@ -0,0 +1,4 @@
+import { ActionBar } from "./ActionBar.js";
+export {
+  ActionBar
+};

package/dist/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState } from '@tanstack/react-table';
+import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState, type ExpandedState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
@@ -75,5 +75,14 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     pagination?: {
         pageSize?: number;
     };
+    /**
+     * Nested rows (a tree table): return a row's children. The first column gets
+     * an expand toggle and indents each level. Sorting sorts within each level.
+     */
+    getSubRows?: (row: TData, index: number) => TData[] | undefined;
+    /** Expanded rows by id, or `true` for all. */
+    expanded?: ExpandedState;
+    defaultExpanded?: ExpandedState;
+    onExpandedChange?: (expanded: ExpandedState) => void;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -7,9 +7,10 @@ import {
   getSortedRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
+  getExpandedRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { ArrowUp, ArrowDown, ChevronsUpDown, SlidersHorizontal, X } from "@nexub/icons";
+import { ArrowUp, ArrowDown, ChevronDown, ChevronRight, ChevronsUpDown, SlidersHorizontal, X } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, pressable } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
@@ -102,6 +103,34 @@ const useAllRows = (count) => ({
   before: 0,
   after: 0
 });
+function TreeCell({
+  row,
+  expandLabel,
+  collapseLabel,
+  children
+}) {
+  const open = row.getIsExpanded();
+  const ref = React.useCallback(
+    (el) => {
+      if (el) el.style.paddingInlineStart = `${row.depth * 1.5}rem`;
+    },
+    [row.depth]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref, className: "flex items-center gap-1", children: [
+    row.getCanExpand() ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-label": open ? collapseLabel : expandLabel,
+        onClick: row.toggleExpanded,
+        className: "-ms-1 inline-flex size-6 shrink-0 items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)] hover:bg-[var(--color-surface-container-high)]",
+        children: open ? /* @__PURE__ */ jsx(ChevronDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", className: "rtl:-scale-x-100" })
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "-ms-1 size-6 shrink-0", "aria-hidden": "true" }),
+    children
+  ] });
+}
 const px = (n) => typeof n === "number" ? `${n}px` : n;
 const apply = (u, prev) => typeof u === "function" ? u(prev) : u;
 const columnLabel = (c) => typeof c.columnDef.header === "string" ? c.columnDef.header : c.id;
@@ -134,6 +163,10 @@ function DataTable({
   grid = false,
   rowWindow,
   pagination,
+  getSubRows,
+  expanded: expandedProp,
+  defaultExpanded,
+  onExpandedChange,
   caption,
   captionHidden = false,
   className,
@@ -174,6 +207,11 @@ function DataTable({
     defaultValue: {},
     onChange: onColumnPinningChange
   });
+  const [expanded = {}, setExpanded] = useControllableState({
+    value: expandedProp,
+    defaultValue: defaultExpanded ?? {},
+    onChange: onExpandedChange
+  });
   const [announcement, setAnnouncement] = React.useState("");
   const tableRef = React.useRef(null);
   const gridNav = React.useMemo(() => createGridNavigation(dir), [dir]);
@@ -223,9 +261,12 @@ function DataTable({
       columnVisibility,
       columnSizing,
       columnOrder,
-      columnPinning
+      columnPinning,
+      expanded: getSubRows ? expanded : void 0
     }),
     [
+      getSubRows,
+      expanded,
       enableSorting,
       sorting,
       enableRowSelection,
@@ -257,6 +298,12 @@ function DataTable({
     getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    getSubRows,
+    getExpandedRowModel: getSubRows ? getExpandedRowModel() : void 0,
+    onExpandedChange: getSubRows ? (u) => setExpanded(apply(u, expanded)) : void 0,
+    // With pages, count top-level rows so a parent and its children stay together
+    // (TanStack then expands inside the page model; without pages it must not).
+    paginateExpandedRows: !pagination,
     enableRowSelection,
     manualPagination: false
   });
@@ -466,7 +513,7 @@ function DataTable({
                   "data-index": i,
                   "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
                   "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
-                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                  children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
                     TableCell,
                     {
                       ref: pinned || enableColumnResizing ? placeCell(cell.column) : void 0,
@@ -476,7 +523,7 @@ function DataTable({
                         pinClass(cell.column),
                         enableColumnResizing && "truncate"
                       ),
-                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                      children: getSubRows && cell === cells.find((c) => c.column.id !== "__select") ? /* @__PURE__ */ jsx(TreeCell, { row, expandLabel: messages.expandRow, collapseLabel: messages.collapseRow, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
                     },
                     cell.id
                   ))

package/dist/components/ResizablePanels/ResizablePanels.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface ResizablePanelsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Side by side (`horizontal`) or stacked (`vertical`). @default 'horizontal' */
+    direction?: 'horizontal' | 'vertical';
+    /** One percentage per panel, adding up to 100. Persist them yourself. */
+    sizes?: number[];
+    defaultSizes?: number[];
+    onSizesChange?: (sizes: number[]) => void;
+    /** Smallest size per panel, in percent. @default 10 each */
+    minSizes?: number[];
+    /** Names each separator: "Resize panels" by default. */
+    handleLabel?: string;
+    /** The panels; a separator goes between each pair. */
+    children: React.ReactNode;
+}
+/**
+ * Panels with draggable separators (ARIA window splitter). Arrow keys move a
+ * focused separator by 5%, Home/End to its limits, and Enter resets the pair.
+ */
+export declare function ResizablePanels({ direction, sizes: sizesProp, defaultSizes, onSizesChange, minSizes, handleLabel, className, children, ...props }: ResizablePanelsProps): React.JSX.Element;

package/dist/components/ResizablePanels/ResizablePanels.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const STEP = 5;
+function ResizablePanels({
+  direction = "horizontal",
+  sizes: sizesProp,
+  defaultSizes,
+  onSizesChange,
+  minSizes,
+  handleLabel,
+  className,
+  children,
+  ...props
+}) {
+  const t = useNexubMessages();
+  const { dir } = useLocale();
+  const panels = React.Children.toArray(children);
+  const n = panels.length;
+  const even = Array.from({ length: n }, () => 100 / n);
+  const initial = defaultSizes ?? even;
+  const [sizes = even, setSizes] = useControllableState({
+    value: sizesProp,
+    defaultValue: initial,
+    onChange: onSizesChange
+  });
+  const rootRef = React.useRef(null);
+  const baseId = React.useId();
+  const horizontal = direction === "horizontal";
+  const min = (i) => minSizes?.[i] ?? 10;
+  const resize = (current, i, to) => {
+    const pair = current[i] + current[i + 1];
+    const a = Math.min(pair - min(i + 1), Math.max(min(i), to));
+    const next = [...current];
+    next[i] = Math.round(a * 100) / 100;
+    next[i + 1] = Math.round((pair - a) * 100) / 100;
+    setSizes(next);
+  };
+  const startDrag = (i, e) => {
+    const root = rootRef.current;
+    if (!root) return;
+    e.preventDefault();
+    const rect = root.getBoundingClientRect();
+    const total = horizontal ? rect.width : rect.height;
+    const origin = horizontal ? e.clientX : e.clientY;
+    const start = [...sizes];
+    const flip = horizontal && dir === "rtl" ? -1 : 1;
+    const onMove = (ev) => {
+      const pos = horizontal ? ev.clientX : ev.clientY;
+      resize(start, i, start[i] + (pos - origin) * flip / total * 100);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const onKeyDown = (i, e) => {
+    const fwd = horizontal ? dir === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+    const back = horizontal ? dir === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+    const pair = sizes[i] + sizes[i + 1];
+    let to;
+    if (e.key === fwd) to = sizes[i] + STEP;
+    else if (e.key === back) to = sizes[i] - STEP;
+    else if (e.key === "Home") to = min(i);
+    else if (e.key === "End") to = pair - min(i + 1);
+    else if (e.key === "Enter") to = initial[i] / (initial[i] + initial[i + 1]) * pair;
+    if (to === void 0) return;
+    e.preventDefault();
+    resize(sizes, i, to);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("flex min-h-0 min-w-0", horizontal ? "flex-row" : "flex-col", className),
+      ...props,
+      children: panels.map((panel, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${baseId}-${i}`,
+            ref: (el) => {
+              if (el) el.style.flex = `${sizes[i] ?? 0} 1 0px`;
+            },
+            className: "min-h-0 min-w-0 overflow-auto",
+            children: panel
+          }
+        ),
+        i < n - 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            tabIndex: 0,
+            "aria-label": handleLabel ?? t.resizePanels,
+            "aria-controls": `${baseId}-${i}`,
+            "aria-orientation": horizontal ? "vertical" : "horizontal",
+            "aria-valuenow": Math.round(sizes[i]),
+            "aria-valuemin": min(i),
+            "aria-valuemax": Math.round(sizes[i] + sizes[i + 1] - min(i + 1)),
+            onPointerDown: (e) => startDrag(i, e),
+            onKeyDown: (e) => onKeyDown(i, e),
+            className: cn(
+              "relative shrink-0 touch-none bg-[var(--color-outline-variant)] outline-none",
+              // A wider invisible hit area around the 1px line.
+              horizontal ? "w-px cursor-col-resize before:absolute before:-inset-x-1.5 before:inset-y-0" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-1.5",
+              "hover:bg-[var(--color-primary)] focus-visible:bg-[var(--color-primary)] focus-visible:shadow-[0_0_0_1px_var(--color-primary)]"
+            )
+          }
+        )
+      ] }, i))
+    }
+  );
+}
+export {
+  ResizablePanels
+};

package/dist/components/ResizablePanels/index.d.ts

@@ -0,0 +1,2 @@
+export { ResizablePanels } from './ResizablePanels.js';
+export type { ResizablePanelsProps } from './ResizablePanels.js';

package/dist/components/ResizablePanels/index.js

@@ -0,0 +1,4 @@
+import { ResizablePanels } from "./ResizablePanels.js";
+export {
+  ResizablePanels
+};

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface StepperStep {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    steps: StepperStep[];
+    /** Index of the step being shown. */
+    current: number;
+    /** Indexes of finished steps. @default every step before `current` */
+    completed?: number[];
+    /**
+     * Makes steps clickable. Linear by default: finished steps, the current one
+     * and the first unfinished one can be reached; the rest wait.
+     */
+    onStepChange?: (index: number) => void;
+    /** Any step can be reached. */
+    nonLinear?: boolean;
+    /** @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Progress through a multi-step flow. Validate each step (a `Form` per step
+ * works well) and move `current` forward from its submit.
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const Stepper = React.forwardRef(function Stepper2({ steps, current, completed: completedProp, onStepChange, nonLinear = false, orientation = "horizontal", className, ...props }, ref) {
+  const t = useNexubMessages();
+  const completed = new Set(completedProp ?? steps.slice(0, current).map((_, i) => i));
+  const firstOpen = steps.findIndex((_, i) => !completed.has(i));
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx("nav", { ref, className, ...props, children: /* @__PURE__ */ jsx("ol", { className: cn("m-0 flex list-none p-0", vertical ? "flex-col" : "flex-row items-start"), children: steps.map((step, i) => {
+    const done = completed.has(i);
+    const isCurrent = i === current;
+    const reachable = Boolean(onStepChange) && !isCurrent && (nonLinear || done || i === firstOpen);
+    const marker = /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-label-md font-semibold",
+          done && !isCurrent ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : isCurrent ? "border-2 border-[var(--color-primary)] bg-[var(--color-surface)] text-[var(--color-primary)]" : "border-2 border-[var(--color-outline-variant)] bg-[var(--color-surface)] text-[var(--color-on-surface-muted)]"
+        ),
+        children: done && !isCurrent ? /* @__PURE__ */ jsx(Check, { size: "xs" }) : i + 1
+      }
+    );
+    const text = /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-col gap-0.5", vertical ? "items-start text-start" : "items-center text-center"), children: [
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        t.stepOf(i + 1, steps.length),
+        ":"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: cn("text-label-lg font-medium", isCurrent || done ? "text-[var(--color-on-surface)]" : "text-[var(--color-on-surface-muted)]"), children: step.label }),
+      done && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        ", ",
+        t.stepCompleted
+      ] }),
+      step.description && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-muted)]", children: step.description })
+    ] });
+    const body = vertical ? /* @__PURE__ */ jsxs("span", { className: "flex gap-3", children: [
+      marker,
+      /* @__PURE__ */ jsx("span", { className: "pt-1", children: text })
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center gap-2 text-center", children: [
+      marker,
+      text
+    ] });
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        "aria-current": isCurrent ? "step" : void 0,
+        className: cn(
+          "relative flex",
+          vertical ? "pb-6 last:pb-0" : "flex-1 justify-center",
+          // Connector to the next step.
+          i < steps.length - 1 && (vertical ? "after:absolute after:start-4 after:top-9 after:bottom-1 after:w-px" : "after:absolute after:top-4 after:start-[calc(50%+1.25rem)] after:end-[calc(-50%+1.25rem)] after:h-px"),
+          i < steps.length - 1 && (done ? "after:bg-[var(--color-primary)]" : "after:bg-[var(--color-outline-variant)]")
+        ),
+        children: reachable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onStepChange(i),
+            className: "rounded-shape-control p-1 hover:bg-[var(--color-surface-container-high)]",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "p-1", children: body })
+      },
+      step.id
+    );
+  }) }) });
+});
+export {
+  Stepper
+};

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper.js';
+export type { StepperProps, StepperStep } from './Stepper.js';

package/dist/components/Stepper/index.js

@@ -0,0 +1,4 @@
+import { Stepper } from "./Stepper.js";
+export {
+  Stepper
+};

package/dist/components/TreeView/TreeView.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface TreeNode {
+    id: string;
+    label: React.ReactNode;
+    /** Text for type-ahead when `label` isn't a string. */
+    textValue?: string;
+    icon?: React.ReactNode;
+    children?: TreeNode[];
+    /** Children exist but aren't loaded yet: expanding calls `onLoadChildren`. */
+    hasChildren?: boolean;
+    disabled?: boolean;
+}
+export interface TreeViewProps {
+    nodes: TreeNode[];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** Single selection (ignored when `checkable`). */
+    selected?: string | null;
+    defaultSelected?: string | null;
+    onSelectedChange?: (id: string | null) => void;
+    /** Checkboxes with tri-state parents; `checked` lists every checked id, parents included. */
+    checkable?: boolean;
+    checked?: string[];
+    defaultChecked?: string[];
+    onCheckedChange?: (ids: string[]) => void;
+    /** Load a `hasChildren` node's children, then pass them in through `nodes`. */
+    onLoadChildren?: (node: TreeNode) => Promise<unknown>;
+    className?: string;
+}
+/**
+ * A hierarchy people can browse with the keyboard (ARIA tree): Arrow keys move
+ * and expand, Home/End jump, typing finds an item. Optional lazy children and
+ * tri-state checkboxes.
+ */
+export declare function TreeView({ nodes, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, checkable, checked: checkedProp, defaultChecked, onCheckedChange, onLoadChildren, className, ...aria }: TreeViewProps): React.JSX.Element;