@olwiba/ui 0.2.24 → 0.2.25

package/dist/index.d.ts

@@ -1217,8 +1217,14 @@ interface FooterProps {
         icon: ReactNode;
     }>;
     legal?: string;
+    /**
+     * Live status pill. `label` is a ReactNode, not a string: a real status
+     * pill often carries per-service detail in a tooltip, and typing it as
+     * string forced consumers to smuggle that through `as unknown as string`.
+     * A plain string still works and is the common case.
+     */
     status?: {
-        label: string;
+        label: ReactNode;
         operational?: boolean;
     };
     renderLink?: AppShellRenderLink;
@@ -1513,6 +1519,23 @@ interface DataTableProps<TData> {
     onSelectionChange?: (rows: TData[]) => void;
     /** Rows per page. Set to `0` to disable pagination entirely. @default 10 */
     pageSize?: number;
+    /**
+     * Hands pagination to the caller, for data the client does not hold all of.
+     *
+     * With this set, `data` is treated as the current page rather than the whole
+     * set: the table stops slicing, and the footer reports and drives the
+     * caller's page instead of its own. Without it nothing changes — a table
+     * given every row keeps paginating locally, which is right for the common
+     * case and avoids making every consumer implement paging to get a table.
+     */
+    pagination?: {
+        pageIndex: number;
+        /** Total pages. Omit when unknown — the footer then relies on `hasNext`. */
+        pageCount?: number;
+        hasNext?: boolean;
+        hasPrevious?: boolean;
+        onPageChange: (pageIndex: number) => void;
+    };
     /** Slot rendered top-right of the toolbar — e.g. an "Add" button. */
     toolbar?: React.ReactNode;
     onRowClick?: (row: TData) => void;
@@ -1524,7 +1547,7 @@ interface DataTableProps<TData> {
  * toggle `searchKey`/`selectable`/`pageSize` rather than reaching for a
  * different table component per use case.
  */
-declare function DataTable<TData>({ columns, data, searchKey, searchPlaceholder, selectable, onSelectionChange, pageSize, toolbar, onRowClick, emptyMessage, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData>({ columns, data, searchKey, searchPlaceholder, selectable, onSelectionChange, pageSize, pagination, toolbar, onRowClick, emptyMessage, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface LoadMoreProps extends React.HTMLAttributes<HTMLDivElement> {
     hasNextPage: boolean;
@@ -1635,6 +1658,27 @@ interface ChartProps {
     grid?: boolean;
     /** Legend. @default true for multiple series or donut, false for one series */
     legend?: boolean;
+    /**
+     * Stack series instead of overlaying them. Area and bar only — a stacked
+     * line is a shape people misread as absolute values.
+     *
+     * Off by default: stacking answers "what does the total split into", and
+     * silently switching a two-series comparison to it would change what an
+     * existing chart claims.
+     */
+    stacked?: boolean;
+    /**
+     * Formats x-axis ticks. Separate from `valueFormatter`, which formats the
+     * measured value — an axis of ISO dates wants shortening without changing
+     * what the tooltip reports.
+     */
+    xTickFormatter?: (value: string) => string;
+    /**
+     * Fixes the y-axis range. Without it recharts scales to the data, which for
+     * a percentage series makes a 98-100%% band fill the plot and read as
+     * volatility.
+     */
+    yDomain?: [number, number];
     /** Formats values in tooltips and the y-axis, e.g. `(v) => \`$${v}\``. */
     valueFormatter?: (value: number) => string;
     className?: string;
@@ -1646,7 +1690,7 @@ interface ChartProps {
  * comparison, donut for part-of-whole identity. More than 5 donut slices:
  * fold the tail into an "Other" slice in your data instead of adding hues.
  */
-declare function Chart({ type, data, xKey, series, height, grid, legend, valueFormatter, className, }: ChartProps): react_jsx_runtime.JSX.Element;
+declare function Chart({ type, data, xKey, series, height, grid, legend, stacked, xTickFormatter, yDomain, valueFormatter, className, }: ChartProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploadEntry {
     id: string;
@@ -1706,6 +1750,10 @@ interface NotificationToastProps {
  */
 declare function NotificationToast({ variant, title, description, avatar, action, secondaryAction, onDismiss, }: NotificationToastProps): react_jsx_runtime.JSX.Element;
 interface NotifyOptions extends Omit<NotificationToastProps, 'onDismiss'> {
+    /**
+     * Overrides the per-variant default below. Explicit always wins — a caller
+     * that has thought about the timing knows more than this heuristic does.
+     */
     duration?: number;
 }
 /** Fires a `NotificationToast` through sonner. Requires `<Toaster />` from `@olwiba/cn` mounted once in your app. */

package/dist/index.js

@@ -962,6 +962,7 @@ function DataTable({
   selectable = false,
   onSelectionChange,
   pageSize = 10,
+  pagination,
   toolbar,
   onRowClick,
   emptyMessage = "No results.",
@@ -988,8 +989,11 @@ function DataTable({
     },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    ...pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {},
-    initialState: pageSize > 0 ? { pagination: { pageSize } } : void 0,
+    // Server-paginated tables must not slice: `data` is already the page, and
+    // running the client model over it would paginate a single page again.
+    ...pageSize > 0 && !pagination ? { getPaginationRowModel: getPaginationRowModel() } : {},
+    ...pagination ? { manualPagination: true } : {},
+    initialState: pageSize > 0 && !pagination ? { pagination: { pageSize } } : void 0,
     enableRowSelection: selectable
   });
   React21.useEffect(() => {
@@ -997,6 +1001,12 @@ function DataTable({
     onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
   }, [rowSelection]);
   const rows = table.getRowModel().rows;
+  const canPrevious = pagination ? pagination.hasPrevious ?? pagination.pageIndex > 0 : table.getCanPreviousPage();
+  const canNext = pagination ? pagination.hasNext ?? (pagination.pageCount !== void 0 && pagination.pageIndex < pagination.pageCount - 1) : table.getCanNextPage();
+  const goPrevious = () => pagination ? pagination.onPageChange(pagination.pageIndex - 1) : table.previousPage();
+  const goNext = () => pagination ? pagination.onPageChange(pagination.pageIndex + 1) : table.nextPage();
+  const showPager = pagination ? canPrevious || canNext : pageSize > 0 && table.getPageCount() > 1;
+  const pageLabel = pagination ? pagination.pageCount !== void 0 ? `Page ${pagination.pageIndex + 1} of ${pagination.pageCount}` : `Page ${pagination.pageIndex + 1}` : `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`;
   return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-4", className), children: [
     (searchKey || toolbar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       searchKey ? /* @__PURE__ */ jsxs("div", { className: "relative max-w-sm flex-1", children: [
@@ -1052,18 +1062,18 @@ function DataTable({
         row.id
       )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: allColumns.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) })
     ] }) }),
-    (selectable || pageSize > 0 && table.getPageCount() > 1) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    (selectable || showPager) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
         selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`,
-        selectable && pageSize > 0 && table.getPageCount() > 1 && " \xB7 ",
-        pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`
+        selectable && showPager && " \xB7 ",
+        showPager && pageLabel
       ] }),
-      pageSize > 0 && table.getPageCount() > 1 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [
+      showPager && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: goPrevious, disabled: !canPrevious, children: [
           /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
           " Previous"
         ] }),
-        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: goNext, disabled: !canNext, children: [
           "Next ",
           /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
         ] })
@@ -4328,6 +4338,9 @@ function Chart({
   height = 300,
   grid = true,
   legend,
+  stacked = false,
+  xTickFormatter,
+  yDomain,
   valueFormatter = (v) => String(v),
   className
 }) {
@@ -4370,12 +4383,13 @@ function Chart({
     if (type === "bar") {
       chart = /* @__PURE__ */ jsxs(BarChart, { data, barCategoryGap: "25%", children: [
         gridEl,
-        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps }),
-        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, tickFormatter: valueFormatter }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps, tickFormatter: xTickFormatter }),
+        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, domain: yDomain, tickFormatter: valueFormatter }),
         tooltip,
         series.map((s, i) => /* @__PURE__ */ jsx(
           Bar,
           {
+            stackId: stacked ? "stack" : void 0,
             dataKey: s.key,
             name: s.label ?? s.key,
             fill: seriesColor(s, i),
@@ -4388,8 +4402,8 @@ function Chart({
     } else if (type === "area") {
       chart = /* @__PURE__ */ jsxs(AreaChart, { data, children: [
         gridEl,
-        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps }),
-        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, tickFormatter: valueFormatter }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps, tickFormatter: xTickFormatter }),
+        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, domain: yDomain, tickFormatter: valueFormatter }),
         tooltip,
         series.map((s, i) => /* @__PURE__ */ jsx(
           Area,
@@ -4397,10 +4411,11 @@ function Chart({
             type: "monotone",
             dataKey: s.key,
             name: s.label ?? s.key,
+            stackId: stacked ? "stack" : void 0,
             stroke: seriesColor(s, i),
             strokeWidth: 2,
             fill: seriesColor(s, i),
-            fillOpacity: 0.12,
+            fillOpacity: stacked ? 0.35 : 0.12,
             dot: false,
             activeDot: { r: 4 }
           },
@@ -4410,8 +4425,8 @@ function Chart({
     } else {
       chart = /* @__PURE__ */ jsxs(LineChart, { data, children: [
         gridEl,
-        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps }),
-        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, tickFormatter: valueFormatter }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps, tickFormatter: xTickFormatter }),
+        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, domain: yDomain, tickFormatter: valueFormatter }),
         tooltip,
         series.map((s, i) => /* @__PURE__ */ jsx(
           Line,
@@ -4638,9 +4653,18 @@ function NotificationToast({
     ] })
   ] }) });
 }
+function defaultDuration(variant, hasAction) {
+  if (variant === "error") return 1e4;
+  if (variant === "warning") return 8e3;
+  if (hasAction) return 8e3;
+  return void 0;
+}
 function notify(options) {
   const { duration, ...toastProps } = options;
-  return toast.custom((id) => /* @__PURE__ */ jsx(NotificationToast, { ...toastProps, onDismiss: () => toast.dismiss(id) }), { duration });
+  const resolved = duration ?? defaultDuration(toastProps.variant, Boolean(toastProps.action || toastProps.secondaryAction));
+  return toast.custom((id) => /* @__PURE__ */ jsx(NotificationToast, { ...toastProps, onDismiss: () => toast.dismiss(id) }), {
+    duration: resolved
+  });
 }
 function NotificationsPopover({
   notifications,