@olwiba/ui 0.2.24 → 0.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -41,7 +41,6 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@olwiba/dx": "0.0.23",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -65,6 +64,7 @@
     "@content-collections/mdx": "^0.2.2",
     "@olwiba/cn": "0.1.35",
     "@olwiba/docs": "0.1.40",
+    "@olwiba/dx": "0.0.23",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/components/Chart.tsx

@@ -42,6 +42,27 @@ export 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;
@@ -121,6 +142,9 @@ export function Chart({
   height = 300,
   grid = true,
   legend,
+  stacked = false,
+  xTickFormatter,
+  yDomain,
   valueFormatter = (v) => String(v),
   className,
 }: ChartProps) {
@@ -170,11 +194,12 @@ export function Chart({
       chart = (
         <BarChart data={data} barCategoryGap="25%">
           {gridEl}
-          <XAxis dataKey={xKey} {...axisProps} />
-          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          <XAxis dataKey={xKey} {...axisProps} tickFormatter={xTickFormatter} />
+          <YAxis {...axisProps} width={48} domain={yDomain} tickFormatter={valueFormatter} />
           {tooltip}
           {series.map((s, i) => (
             <Bar
+              stackId={stacked ? 'stack' : undefined}
               key={s.key}
               dataKey={s.key}
               name={s.label ?? s.key}
@@ -189,8 +214,8 @@ export function Chart({
       chart = (
         <AreaChart data={data}>
           {gridEl}
-          <XAxis dataKey={xKey} {...axisProps} />
-          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          <XAxis dataKey={xKey} {...axisProps} tickFormatter={xTickFormatter} />
+          <YAxis {...axisProps} width={48} domain={yDomain} tickFormatter={valueFormatter} />
           {tooltip}
           {series.map((s, i) => (
             <Area
@@ -198,10 +223,16 @@ export function Chart({
               type="monotone"
               dataKey={s.key}
               name={s.label ?? s.key}
+              // One shared id is what makes recharts stack rather than
+              // overlay; undefined leaves the existing behaviour untouched.
+              stackId={stacked ? 'stack' : undefined}
               stroke={seriesColor(s, i)}
               strokeWidth={2}
               fill={seriesColor(s, i)}
-              fillOpacity={0.12}
+              // Overlaid areas must stay translucent so the ones behind show
+              // through. Stacked bands never overlap, and at 0.12 they are too
+              // faint to tell apart.
+              fillOpacity={stacked ? 0.35 : 0.12}
               dot={false}
               activeDot={{ r: 4 }}
             />
@@ -212,8 +243,8 @@ export function Chart({
       chart = (
         <LineChart data={data}>
           {gridEl}
-          <XAxis dataKey={xKey} {...axisProps} />
-          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          <XAxis dataKey={xKey} {...axisProps} tickFormatter={xTickFormatter} />
+          <YAxis {...axisProps} width={48} domain={yDomain} tickFormatter={valueFormatter} />
           {tooltip}
           {series.map((s, i) => (
             <Line

package/src/components/DataTable.tsx

@@ -26,6 +26,23 @@ export 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;
@@ -66,6 +83,7 @@ export function DataTable<TData>({
   selectable = false,
   onSelectionChange,
   pageSize = 10,
+  pagination,
   toolbar,
   onRowClick,
   emptyMessage = 'No results.',
@@ -94,8 +112,13 @@ export function DataTable<TData>({
     },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    ...(pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {}),
-    initialState: pageSize > 0 ? { pagination: { pageSize } } : undefined,
+    // 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 } } : undefined,
     enableRowSelection: selectable,
   });
 
@@ -107,6 +130,31 @@ export function DataTable<TData>({
 
   const rows = table.getRowModel().rows;
 
+  // One set of derivations so the footer does not branch on `pagination`
+  // three separate times and drift between them.
+  const canPrevious = pagination
+    ? (pagination.hasPrevious ?? pagination.pageIndex > 0)
+    : table.getCanPreviousPage();
+  const canNext = pagination
+    ? (pagination.hasNext ??
+      (pagination.pageCount !== undefined && 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();
+  // A server-paginated table shows its pager whenever paging is possible.
+  // Total pages are often unknown, so "more than one page" is not a question
+  // it can answer up front the way the local model can.
+  const showPager = pagination
+    ? canPrevious || canNext
+    : pageSize > 0 && table.getPageCount() > 1;
+  const pageLabel = pagination
+    ? pagination.pageCount !== undefined
+      ? `Page ${pagination.pageIndex + 1} of ${pagination.pageCount}`
+      : `Page ${pagination.pageIndex + 1}`
+    : `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`;
+
   return (
     <div className={cn('space-y-4', className)}>
       {(searchKey || toolbar) && (
@@ -186,19 +234,19 @@ export function DataTable<TData>({
         </Table>
       </div>
 
-      {(selectable || (pageSize > 0 && table.getPageCount() > 1)) && (
+      {(selectable || showPager) && (
         <div className="flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
             {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`}
-            {selectable && pageSize > 0 && table.getPageCount() > 1 && ' · '}
-            {pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
+            {selectable && showPager && ' · '}
+            {showPager && pageLabel}
           </p>
-          {pageSize > 0 && table.getPageCount() > 1 && (
+          {showPager && (
             <div className="flex gap-2">
-              <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+              <Button variant="outline" size="sm" onClick={goPrevious} disabled={!canPrevious}>
                 <ChevronLeft className="size-4" /> Previous
               </Button>
-              <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+              <Button variant="outline" size="sm" onClick={goNext} disabled={!canNext}>
                 Next <ChevronRight className="size-4" />
               </Button>
             </div>

package/src/components/Notify.tsx

@@ -86,11 +86,42 @@ export function NotificationToast({
 }
 
 export 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;
 }
 
+/**
+ * How long a toast stays, when the caller has not said.
+ *
+ * The Toaster's own default suits a confirmation: long enough to read "Saved",
+ * short enough not to linger. Two cases need longer, and both were previously
+ * left to whoever remembered to pass a number.
+ *
+ * A failure has to be *read* — often it is the only account of what went
+ * wrong, and a message that vanishes before it is understood is barely better
+ * than none. A toast carrying an action has to be read *and* decided on, and a
+ * button that disappears mid-reach is worse than no button, because the reader
+ * knows they missed something.
+ *
+ * Returning undefined defers to the Toaster, so a product that has set its own
+ * default keeps it rather than being silently overridden here.
+ */
+function defaultDuration(variant: NotificationToastProps['variant'], hasAction: boolean) {
+  if (variant === 'error') return 10_000;
+  if (variant === 'warning') return 8_000;
+  if (hasAction) return 8_000;
+  return undefined;
+}
+
 /** Fires a `NotificationToast` through sonner. Requires `<Toaster />` from `@olwiba/cn` mounted once in your app. */
 export function notify(options: NotifyOptions) {
   const { duration, ...toastProps } = options;
-  return toast.custom((id) => <NotificationToast {...toastProps} onDismiss={() => toast.dismiss(id)} />, { duration });
+  const resolved =
+    duration ?? defaultDuration(toastProps.variant, Boolean(toastProps.action || toastProps.secondaryAction));
+  return toast.custom((id) => <NotificationToast {...toastProps} onDismiss={() => toast.dismiss(id)} />, {
+    duration: resolved,
+  });
 }

package/src/marketing/Footer.tsx

@@ -9,7 +9,13 @@ export interface FooterProps {
   navLinks?: Array<{ label: string; href: string }>;
   socialLinks?: Array<{ label: string; href: string; icon: ReactNode }>;
   legal?: string;
-  status?: { label: string; operational?: boolean };
+  /**
+   * 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: ReactNode; operational?: boolean };
   renderLink?: AppShellRenderLink;
 }