@olwiba/ui 0.2.23 → 0.2.25

package/src/components/LoadMore.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { Button, Spinner, cn } from '@olwiba/cn';
+
+export interface LoadMoreProps extends React.HTMLAttributes<HTMLDivElement> {
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void | Promise<unknown>;
+  /** Watches the sentinel instead of showing a manual button. */
+  auto?: boolean;
+  /** Plural noun used by the manual button, for example `properties`. */
+  label?: string;
+  /** Starts loading before the sentinel reaches the viewport. */
+  rootMargin?: string;
+}
+
+/** Cursor-pagination footer with either guarded infinite scroll or a manual fallback. */
+export function LoadMore({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  auto = true,
+  label = 'more',
+  rootMargin = '400px',
+  className,
+  ...props
+}: LoadMoreProps) {
+  const sentinelRef = React.useRef<HTMLDivElement>(null);
+  const stateRef = React.useRef({ hasNextPage, isFetchingNextPage, fetchNextPage });
+  stateRef.current = { hasNextPage, isFetchingNextPage, fetchNextPage };
+
+  React.useEffect(() => {
+    if (!auto) return;
+    const node = sentinelRef.current;
+    if (!node) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        const state = stateRef.current;
+        if (state.hasNextPage && !state.isFetchingNextPage) void state.fetchNextPage();
+      },
+      { rootMargin },
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [auto, rootMargin]);
+
+  if (!hasNextPage) return null;
+
+  return (
+    <div ref={sentinelRef} className={cn('flex justify-center py-4', className)} {...props}>
+      {auto ? (
+        <span className="flex h-9 items-center text-sm text-muted-foreground" aria-live="polite">
+          {isFetchingNextPage && (
+            <>
+              <Spinner className="mr-2 size-4" /> Loading more…
+            </>
+          )}
+        </span>
+      ) : (
+        <Button
+          variant="outline"
+          onClick={() => void fetchNextPage()}
+          disabled={isFetchingNextPage}
+        >
+          {isFetchingNextPage ? (
+            <>
+              <Spinner className="mr-2 size-4" /> Loading…
+            </>
+          ) : (
+            `Load more ${label}`
+          )}
+        </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/index.ts

@@ -27,6 +27,8 @@ export {
   type AppShellAction,
   type AppShellRenderLink,
   type AppShellBreadcrumb,
+  type AppShellHeaderControls,
+  type AppShellHeaderStart,
   type AppNavItem,
 } from './app/AppShell';
 
@@ -145,6 +147,7 @@ export { CommandMenu, type CommandMenuProps, type CommandMenuGroup, type Command
 
 // ─── Components — data ───────────────────────────────────────────────────────
 export { DataTable, type DataTableProps, type DataTableColumn } from './components/DataTable';
+export { LoadMore, type LoadMoreProps } from './components/LoadMore';
 export { DataView, type DataViewProps } from './app/DataView';
 export { Chart, type ChartProps, type ChartSeries } from './components/Chart';
 export { FileUpload, type FileUploadProps, type FileUploadEntry } from './components/FileUpload';

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;
 }