@nexub/react 6.3.0 → 6.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.3.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",

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

@@ -228,6 +228,12 @@ export { EventCalendar } from './components/EventCalendar/index.js';
 export type { EventCalendarProps, EventCalendarView, CalendarEvent, EventTone } from './components/EventCalendar/index.js';
 export { TreeView } from './components/TreeView/index.js';
 export type { TreeViewProps, TreeNode } from './components/TreeView/index.js';
+export { ResizablePanels } from './components/ResizablePanels/index.js';
+export type { ResizablePanelsProps } from './components/ResizablePanels/index.js';
+export { Stepper } from './components/Stepper/index.js';
+export type { StepperProps, StepperStep } from './components/Stepper/index.js';
+export { ActionBar } from './components/ActionBar/index.js';
+export type { ActionBarProps } from './components/ActionBar/index.js';
 export type { OTPInputProps } from './components/OTPInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';

package/dist/index.js

@@ -128,6 +128,9 @@ import { TimePicker } from "./components/TimePicker/index.js";
 import { DateTimePicker } from "./components/DateTimePicker/index.js";
 import { EventCalendar } from "./components/EventCalendar/index.js";
 import { TreeView } from "./components/TreeView/index.js";
+import { ResizablePanels } from "./components/ResizablePanels/index.js";
+import { Stepper } from "./components/Stepper/index.js";
+import { ActionBar } from "./components/ActionBar/index.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { todayIn } from "./components/DateRangePicker/index.js";
@@ -135,6 +138,7 @@ import { ThemeProvider, ThemeScript, useTheme } from "./components/ThemeProvider
 import { Fade, Slide, Scale, Collapse, ListTransition, SkeletonSwap, usePrefersReducedMotion, Reveal, Float, Marquee } from "./components/Motion/index.js";
 export {
   Accordion,
+  ActionBar,
   Alert,
   AlertDialog,
   Amount,
@@ -239,6 +243,7 @@ export {
   RadioCardGroup,
   RadioGroup,
   Rating,
+  ResizablePanels,
   Reveal,
   SavedViews,
   Scale,
@@ -262,6 +267,7 @@ export {
   Spinner,
   SplitButton,
   Stack,
+  Stepper,
   StreamingText,
   Switch,
   Table,