@nexub/react 6.5.0 → 6.6.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.5.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",
@@ -1430,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/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';
@@ -238,6 +240,8 @@ 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";
@@ -133,6 +134,7 @@ 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";
@@ -162,6 +164,7 @@ export {
   Celebrate,
   ChartLegend,
   ChartToggle,
+  ChartZoom,
   CheckList,
   CheckListItem,
   Checkbox,
@@ -331,6 +334,7 @@ export {
   startViewTransition,
   textVariants,
   textareaVariants,
+  toCSV,
   toast,
   todayIn,
   toggleVariants,

package/dist/utils/csv.d.ts

@@ -0,0 +1,11 @@
+export interface CSVColumn<T> {
+    header: string;
+    /** A key of the row, or a function returning the cell's value. */
+    value: keyof T | ((row: T) => unknown);
+}
+/**
+ * Rows to CSV text (RFC 4180, CRLF line ends). Text that starts like a formula
+ * gets a leading `'` so spreadsheets show it instead of running it. Pass the
+ * rows and columns the person sees, e.g. after sorting and hiding columns.
+ */
+export declare function toCSV<T>(rows: T[], columns: CSVColumn<T>[]): string;

package/dist/utils/csv.js

@@ -0,0 +1,17 @@
+const FORMULA = /^[=+\-@\t\r]/;
+function cell(value) {
+  if (value == null) return "";
+  let text = value instanceof Date ? value.toISOString() : String(value);
+  if (typeof value !== "number" && FORMULA.test(text)) text = `'${text}`;
+  return /[",\r\n]/.test(text) || text !== text.trim() ? `"${text.replace(/"/g, '""')}"` : text;
+}
+function toCSV(rows, columns) {
+  const lines = [columns.map((c) => cell(c.header)).join(",")];
+  for (const row of rows) {
+    lines.push(columns.map((c) => cell(typeof c.value === "function" ? c.value(row) : row[c.value])).join(","));
+  }
+  return lines.join("\r\n") + "\r\n";
+}
+export {
+  toCSV
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -81,14 +81,14 @@
     "date-fns": "^4.4.0",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0",
-    "@nexub/core": "6.5.0",
-    "@nexub/icons": "6.5.0"
+    "@nexub/core": "6.6.0",
+    "@nexub/icons": "6.6.0"
   },
   "peerDependencies": {
     "react": ">=19 <20",
     "react-dom": ">=19 <20",
     "@tanstack/react-virtual": "^3.14.22",
-    "@nexub/tokens": "^6.5.0"
+    "@nexub/tokens": "^6.6.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-virtual": {
@@ -120,8 +120,8 @@
     "vaul": "1.1.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5",
-    "@nexub/themes": "6.5.0",
-    "@nexub/tokens": "6.5.0"
+    "@nexub/themes": "6.6.0",
+    "@nexub/tokens": "6.6.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && rm -f dist/vendor/*.d.ts && node scripts/check-dts.mjs && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp -R ../themes/src/fonts dist/fonts",