@nexub/react 6.3.0 → 6.5.0

package/dist/components/Sortable/reorder.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+function moveItem(lists, [fc, fi], [tc, ti]) {
+  const next = lists.map((l) => [...l]);
+  const [item] = next[fc].splice(fi, 1);
+  if (item === void 0) return lists;
+  next[tc].splice(Math.min(ti, next[tc].length), 0, item);
+  return next;
+}
+function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
+  const t = useNexubMessages();
+  const { dir } = useLocale();
+  const dragged = React.useRef(null);
+  const handles = React.useRef(/* @__PURE__ */ new Map());
+  const refocus = React.useRef(null);
+  const [announcement, setAnnouncement] = React.useState("");
+  const hintId = React.useId();
+  React.useEffect(() => {
+    if (refocus.current) handles.current.get(refocus.current)?.focus();
+    refocus.current = null;
+  });
+  const move = (from, to, keepFocus) => {
+    if (from[0] === to[0] && from[1] === to[1]) return;
+    const item = lists[from[0]][from[1]];
+    const next = moveItem(lists, from, to);
+    const [tc] = to;
+    const ti = next[tc].indexOf(item);
+    if (keepFocus) refocus.current = getId(item);
+    onMove(next);
+    const total = next[tc].length;
+    setAnnouncement(
+      from[0] !== tc && listLabels?.[tc] ? t.itemMovedToColumn(getLabel(item), listLabels[tc], ti + 1, total) : t.itemMoved(getLabel(item), ti + 1, total)
+    );
+  };
+  const itemProps = (pos) => ({
+    draggable: true,
+    onDragStart: (e) => {
+      dragged.current = pos;
+      e.dataTransfer.effectAllowed = "move";
+    },
+    onDragOver: (e) => {
+      if (dragged.current) e.preventDefault();
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dragged.current) move(dragged.current, pos, false);
+      dragged.current = null;
+    },
+    onDragEnd: () => {
+      dragged.current = null;
+    }
+  });
+  const listProps = (list) => ({
+    onDragOver: (e) => {
+      if (dragged.current) e.preventDefault();
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      if (dragged.current) move(dragged.current, [list, lists[list].length], false);
+      dragged.current = null;
+    }
+  });
+  const handle = (pos, className) => {
+    const item = lists[pos[0]][pos[1]];
+    const id = getId(item);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: (el) => {
+          if (el) handles.current.set(id, el);
+          else handles.current.delete(id);
+        },
+        "aria-label": t.moveItem(getLabel(item)),
+        "aria-describedby": hintId,
+        onKeyDown: (e) => {
+          if (!e.altKey) return;
+          const [c, i] = pos;
+          const sideways = lists.length > 1;
+          const toNext = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+          const toPrev = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+          let to = null;
+          if (e.key === "ArrowUp" && i > 0) to = [c, i - 1];
+          else if (e.key === "ArrowDown" && i < lists[c].length - 1) to = [c, i + 1];
+          else if (sideways && e.key === toNext && c < lists.length - 1) to = [c + 1, i];
+          else if (sideways && e.key === toPrev && c > 0) to = [c - 1, i];
+          if (!to) return;
+          e.preventDefault();
+          move(pos, to, true);
+        },
+        className: cn(
+          "inline-flex size-7 shrink-0 cursor-grab items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)]",
+          "hover:bg-[var(--color-surface-container-high)] active:cursor-grabbing",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(GripVertical, { size: "sm", "aria-hidden": "true" })
+      }
+    );
+  };
+  const live = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { id: hintId, hidden: true, children: t.reorderHint }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement })
+  ] });
+  return { itemProps, listProps, handle, live };
+}
+export {
+  moveItem,
+  useReorder
+};

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,16 @@ 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 { Sortable } from './components/Sortable/index.js';
+export type { SortableProps } from './components/Sortable/index.js';
+export { Kanban } from './components/Kanban/index.js';
+export type { KanbanProps, KanbanColumn } from './components/Kanban/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,11 @@ 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 { Sortable } from "./components/Sortable/index.js";
+import { Kanban } from "./components/Kanban/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 +140,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,
@@ -207,6 +213,7 @@ export {
   IconButton,
   InlineEdit,
   Input,
+  Kanban,
   Kbd,
   KeyboardShortcut,
   KpiTile,
@@ -239,6 +246,7 @@ export {
   RadioCardGroup,
   RadioGroup,
   Rating,
+  ResizablePanels,
   Reveal,
   SavedViews,
   Scale,
@@ -256,12 +264,14 @@ export {
   SkeletonSwap,
   Slide,
   Slider,
+  Sortable,
   SourceChip,
   SourceList,
   Sparkline,
   Spinner,
   SplitButton,
   Stack,
+  Stepper,
   StreamingText,
   Switch,
   Table,