@nexub/react 6.4.0 → 6.6.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.4.0",
+  "version": "6.6.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.",
@@ -238,6 +238,17 @@
         "Each series is a toggle button with `aria-pressed`. The last visible series cannot be switched off."
       ]
     },
+    {
+      "slug": "chart-zoom",
+      "name": "Chart Zoom",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Arrow keys / Home / End: Move the focused thumb."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "checkbox-card",
       "name": "Checkbox Card",
@@ -622,6 +633,18 @@
         "Visible focus ring on `:focus-visible`. Pair with a `<Label htmlFor>` so clicking the label moves focus into the field."
       ]
     },
+    {
+      "slug": "kanban",
+      "name": "Kanban",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Alt+ArrowUp / Alt+ArrowDown: On a handle: moves the card within its column.",
+        "Alt+ArrowLeft / Alt+ArrowRight: Moves the card to the previous or next column. Mirrored in RTL."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "kbd",
       "name": "Kbd",
@@ -1050,6 +1073,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "sortable",
+      "name": "Sortable",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Alt+ArrowUp / Alt+ArrowDown: On a handle: moves the item; focus stays on its handle."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "sparkline",
       "name": "Sparkline",
@@ -1407,6 +1441,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "notification-center",
+      "name": "NotificationCenter",
+      "package": "@nexub/patterns",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "notification-item",
       "name": "NotificationItem",

package/dist/components/ChartZoom/ChartZoom.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface ChartZoomProps<T> {
+    data: T[];
+    /** The category key, shown as the range's ends. */
+    index: keyof T;
+    /** Render the chart for the visible slice (charts stay server-friendly; only this wrapper is client). */
+    children: (slice: T[]) => React.ReactNode;
+    /** Start and end indexes. @default the whole range */
+    defaultRange?: [number, number];
+    /** Fewest categories shown. @default 2 */
+    minSpan?: number;
+    className?: string;
+}
+/**
+ * Zoom a chart to part of its range with a two-thumb slider under it (keyboard
+ * and touch friendly), and reset to the whole range.
+ */
+export declare function ChartZoom<T>({ data, index, children, defaultRange, minSpan, className }: ChartZoomProps<T>): React.JSX.Element;

package/dist/components/ChartZoom/ChartZoom.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider } from "../Slider/Slider.js";
+import { Button } from "../Button/Button.js";
+import { cn } from "../../utils/cn.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+function ChartZoom({ data, index, children, defaultRange, minSpan = 2, className }) {
+  const t = useNexubMessages();
+  const full = [0, Math.max(0, data.length - 1)];
+  const [range, setRange] = React.useState(defaultRange ?? full);
+  const [a, b] = [Math.max(0, range[0]), Math.min(full[1], range[1])];
+  const zoomed = a > 0 || b < full[1];
+  const label = (i) => String(data[i]?.[index] ?? "");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    children(data.slice(a, b + 1)),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          min: 0,
+          max: full[1],
+          step: 1,
+          minStepsBetweenThumbs: Math.max(1, minSpan - 1),
+          value: [a, b],
+          onValueChange: (v) => setRange([v[0], v[1]]),
+          thumbLabels: [`${t.zoomStart}: ${label(a)}`, `${t.zoomEnd}: ${label(b)}`],
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "min-w-max text-label-md tabular-nums text-[var(--color-on-surface-muted)]", children: [
+        label(a),
+        " \u2013 ",
+        label(b)
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", disabled: !zoomed, onClick: () => setRange(full), children: t.resetZoom })
+    ] })
+  ] });
+}
+export {
+  ChartZoom
+};

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

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

package/dist/components/ChartZoom/index.js

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

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

@@ -84,5 +84,12 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     expanded?: ExpandedState;
     defaultExpanded?: ExpandedState;
     onExpandedChange?: (expanded: ExpandedState) => void;
+    /**
+     * Lets people reorder rows: a handle column (drag, or Alt+ArrowUp/Down on the
+     * handle). Called with the reordered data. Hidden while a column is sorted.
+     */
+    onRowOrderChange?: (data: TData[]) => void;
+    /** Names a row in "Move ‹label›" and the move announcements. @default its position */
+    getRowLabel?: (row: TData) => string;
 }
-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;
+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, onRowOrderChange, getRowLabel, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -22,6 +22,7 @@ import { Checkbox } from "../Checkbox/Checkbox.js";
 import { Button } from "../Button/Button.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
+import { useReorder } from "../Sortable/reorder.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -167,6 +168,8 @@ function DataTable({
   expanded: expandedProp,
   defaultExpanded,
   onExpandedChange,
+  onRowOrderChange,
+  getRowLabel,
   caption,
   captionHidden = false,
   className,
@@ -221,12 +224,34 @@ function DataTable({
     pageSize: pagination?.pageSize ?? 20
   });
   const withSelectColumn = enableRowSelection && selectionColumn;
+  const reorderRows = Boolean(onRowOrderChange) && sorting.length === 0;
+  const rowReorder = useReorder({
+    lists: [data],
+    getId: (r) => getRowId ? getRowId(r, data.indexOf(r)) : String(data.indexOf(r)),
+    getLabel: (r) => getRowLabel?.(r) ?? String(data.indexOf(r) + 1),
+    onMove: (next) => onRowOrderChange?.(next[0])
+  });
   const columnPinning = React.useMemo(
     () => withSelectColumn && pinningIn.left?.length && !pinningIn.left.includes("__select") ? { ...pinningIn, left: ["__select", ...pinningIn.left] } : pinningIn,
     [withSelectColumn, pinningIn]
   );
+  const withRowHandles = React.useCallback(
+    (cols) => reorderRows ? [
+      {
+        id: "__drag",
+        enableSorting: false,
+        enableHiding: false,
+        header: () => null,
+        cell: ({ row }) => row.depth === 0 ? rowReorder.handle([0, row.index]) : null
+      },
+      ...cols
+    ] : cols,
+    // rowReorder changes every render; the handle reads fresh data through it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reorderRows, data]
+  );
   const allColumns = React.useMemo(
-    () => withSelectColumn ? [
+    () => withRowHandles(withSelectColumn ? [
       {
         id: "__select",
         enableSorting: false,
@@ -250,8 +275,8 @@ function DataTable({
         )
       },
       ...columns
-    ] : columns,
-    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow]
+    ] : columns),
+    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow, withRowHandles]
   );
   const tableState = React.useMemo(
     () => ({
@@ -396,6 +421,7 @@ function DataTable({
       /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: () => table.toggleAllRowsSelected(true), children: messages.selectAllRows(fmt(totalRows)) })
     ] }) }),
     /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement }),
+    reorderRows && rowReorder.live,
     /* @__PURE__ */ jsxs(
       TableRoot,
       {
@@ -421,7 +447,7 @@ function DataTable({
                 className: cn(
                   alignText[align],
                   compact && "h-8",
-                  col.id === "__select" && "w-10",
+                  (col.id === "__select" || col.id === "__drag") && "w-10",
                   // Anchors the resize handle; sticky (below) wins when set and anchors it too.
                   (enableColumnResizing || reorderable) && "relative",
                   maxHeight != null && "sticky top-0 z-[2] bg-[var(--color-surface)]",
@@ -513,6 +539,7 @@ function DataTable({
                   "data-index": i,
                   "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
                   "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+                  ...reorderRows && row.depth === 0 ? rowReorder.itemProps([0, row.index]) : {},
                   children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
                     TableCell,
                     {

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface KanbanColumn<T> {
+    id: string;
+    title: string;
+    items: T[];
+}
+export interface KanbanProps<T> {
+    columns: KanbanColumn<T>[];
+    getId: (item: T) => string;
+    getLabel: (item: T) => string;
+    /** Called with the columns after a move; store them to apply it. */
+    onChange: (columns: KanbanColumn<T>[]) => void;
+    renderCard: (item: T) => React.ReactNode;
+    className?: string;
+}
+/**
+ * Columns of cards people can move: drag a card, or focus its handle and press
+ * Alt+Arrow keys (up/down within a column, left/right across columns).
+ */
+export declare function Kanban<T>({ columns, getId, getLabel, onChange, renderCard, className }: KanbanProps<T>): React.JSX.Element;

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useReorder } from "../Sortable/reorder.js";
+function Kanban({ columns, getId, getLabel, onChange, renderCard, className }) {
+  const baseId = React.useId();
+  const { itemProps, listProps, handle, live } = useReorder({
+    lists: columns.map((c) => c.items),
+    getId,
+    getLabel,
+    listLabels: columns.map((c) => c.title),
+    onMove: (next) => onChange(columns.map((c, i) => ({ ...c, items: next[i] })))
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4 overflow-x-auto pb-2", className), children: [
+    columns.map((column, c) => {
+      const headingId = `${baseId}-${c}`;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": headingId,
+          className: "flex w-72 shrink-0 flex-col gap-2 rounded-shape-container bg-[var(--color-surface-container-low)] p-3",
+          children: [
+            /* @__PURE__ */ jsxs("h3", { id: headingId, className: "flex items-center justify-between text-title-sm font-semibold text-[var(--color-on-surface)]", children: [
+              column.title,
+              /* @__PURE__ */ jsx("span", { className: "text-label-md font-normal tabular-nums text-[var(--color-on-surface-muted)]", children: column.items.length })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { ...listProps(c), className: "m-0 flex min-h-16 list-none flex-col gap-2 p-0", children: column.items.map((item, i) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                ...itemProps([c, i]),
+                className: "flex items-start gap-1 rounded-shape-control bg-[var(--color-surface)] p-2 text-body-md shadow-elevation-1",
+                children: [
+                  handle([c, i]),
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 pt-0.5", children: renderCard(item) })
+                ]
+              },
+              getId(item)
+            )) })
+          ]
+        },
+        column.id
+      );
+    }),
+    live
+  ] });
+}
+export {
+  Kanban
+};

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

@@ -0,0 +1,2 @@
+export { Kanban } from './Kanban.js';
+export type { KanbanProps, KanbanColumn } from './Kanban.js';

package/dist/components/Kanban/index.js

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

package/dist/components/Sortable/Sortable.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface SortableProps<T> {
+    items: T[];
+    getId: (item: T) => string;
+    /** Names the item in "Move ‹label›" and the move announcements. */
+    getLabel: (item: T) => string;
+    /** Called with the reordered items; store them to apply the move. */
+    onReorder: (items: T[]) => void;
+    /** The item's content; the drag handle sits before it. */
+    children: (item: T) => React.ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A list people can reorder: drag an item, or focus its handle and press
+ * Alt+ArrowUp / Alt+ArrowDown. Each move is announced.
+ */
+export declare function Sortable<T>({ items, getId, getLabel, onReorder, children, className, ...aria }: SortableProps<T>): React.JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -0,0 +1,31 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useReorder } from "./reorder.js";
+function Sortable({ items, getId, getLabel, onReorder, children, className, ...aria }) {
+  const { itemProps, listProps, handle, live } = useReorder({
+    lists: [items],
+    getId,
+    getLabel,
+    onMove: (next) => onReorder(next[0])
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ul", { ...aria, ...listProps(0), className: cn("m-0 flex list-none flex-col gap-1 p-0", className), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...itemProps([0, i]),
+        className: "flex items-center gap-2 rounded-shape-control border border-[var(--color-outline-variant)] bg-[var(--color-surface)] py-1.5 pe-3 ps-1.5 text-body-md",
+        children: [
+          handle([0, i]),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: children(item) })
+        ]
+      },
+      getId(item)
+    )) }),
+    live
+  ] });
+}
+export {
+  Sortable
+};

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

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

package/dist/components/Sortable/index.js

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

package/dist/components/Sortable/reorder.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/** Internal: lists of items, moved by drag (native) or Alt+Arrow on a handle. */
+export type Pos = [list: number, index: number];
+export declare function moveItem<T>(lists: T[][], [fc, fi]: Pos, [tc, ti]: Pos): T[][];
+interface ReorderOptions<T> {
+    lists: T[][];
+    getId: (item: T) => string;
+    getLabel: (item: T) => string;
+    /** List names, for moves across lists. */
+    listLabels?: string[];
+    onMove: (next: T[][]) => void;
+}
+/** Shared engine: drag state, keyboard moves, focus after a move, announcements. */
+export declare function useReorder<T>({ lists, getId, getLabel, listLabels, onMove }: ReorderOptions<T>): {
+    itemProps: (pos: Pos) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+    listProps: (list: number) => {
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+    };
+    handle: (pos: Pos, className?: string) => React.JSX.Element;
+    live: React.JSX.Element;
+};
+export {};

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

@@ -53,6 +53,8 @@ export type { AuroraProps } from './components/Aurora/index.js';
 export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from './components/Chart/index.js';
 export { Gauge, Heatmap, Funnel, KpiTile } from './components/Chart/index.js';
 export { ChartToggle } from './components/Chart/index.js';
+export { ChartZoom } from './components/ChartZoom/index.js';
+export type { ChartZoomProps } from './components/ChartZoom/index.js';
 export type { ChartToggleProps } from './components/Chart/index.js';
 export type { GaugeProps, HeatmapProps, FunnelProps, KpiTileProps } from './components/Chart/index.js';
 export type { BarChartProps, LineChartProps, DonutChartProps, SparklineProps, ChartLegendProps, ChartSeries, ChartColor } from './components/Chart/index.js';
@@ -234,6 +236,12 @@ 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 { toCSV } from './utils/csv.js';
+export type { CSVColumn } from './utils/csv.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

@@ -32,6 +32,7 @@ import { Aurora } from "./components/Aurora/index.js";
 import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from "./components/Chart/index.js";
 import { Gauge, Heatmap, Funnel, KpiTile } from "./components/Chart/index.js";
 import { ChartToggle } from "./components/Chart/index.js";
+import { ChartZoom } from "./components/ChartZoom/index.js";
 import { NumberTicker } from "./components/NumberTicker/index.js";
 import { SearchInput } from "./components/SearchInput/index.js";
 import { PasswordInput } from "./components/PasswordInput/index.js";
@@ -131,6 +132,9 @@ 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 { toCSV } from "./utils/csv.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { todayIn } from "./components/DateRangePicker/index.js";
@@ -160,6 +164,7 @@ export {
   Celebrate,
   ChartLegend,
   ChartToggle,
+  ChartZoom,
   CheckList,
   CheckListItem,
   Checkbox,
@@ -211,6 +216,7 @@ export {
   IconButton,
   InlineEdit,
   Input,
+  Kanban,
   Kbd,
   KeyboardShortcut,
   KpiTile,
@@ -261,6 +267,7 @@ export {
   SkeletonSwap,
   Slide,
   Slider,
+  Sortable,
   SourceChip,
   SourceList,
   Sparkline,
@@ -327,6 +334,7 @@ export {
   startViewTransition,
   textVariants,
   textareaVariants,
+  toCSV,
   toast,
   todayIn,
   toggleVariants,