@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/page-header.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * PageHeader — WealthX Design System
+ *
+ * In-page heading block. Renders inside scrollable content — not part of
+ * the layout shell. Use for sections that need a visible title and optional
+ * description (e.g. "My Advisors", "How can we help?").
+ *
+ * For a sticky top-of-page bar with action buttons, use PageTopBar instead.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PageHeaderProps {
+  /** Main page / section title */
+  title: string;
+  /** Optional subtitle shown below the title */
+  description?: string;
+  /** Optional action elements rendered to the right of the title block */
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      className={cn("flex items-start justify-between gap-4", className)}
+    >
+      {/* Title + description */}
+      <div className="flex flex-col gap-0.5">
+        <h1 className="text-xl font-bold leading-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      {/* Optional actions */}
+      {actions && (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/page-top-bar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * PageTopBar — WealthX Design System
+ *
+ * Sticky top-of-page bar. Sits at the top of the main content area,
+ * separated from the content by a bottom border. Holds the page title
+ * and action buttons.
+ *
+ * Used by: Loan CRM, Contact, AI Builder, and other data-heavy pages.
+ * For an in-page title block with a description, use PageHeader instead.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PageTopBarProps {
+  /** Page title shown on the left */
+  title: string;
+  /** Optional action elements rendered to the right */
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PageTopBar({ title, actions, className }: PageTopBarProps) {
+  return (
+    <div
+      data-slot="page-top-bar"
+      className={cn(
+        "flex shrink-0 items-center justify-between gap-4",
+        "border-b border-border bg-background px-6 py-3",
+        className,
+      )}
+    >
+      {/* Title */}
+      <h1 className="text-lg font-semibold leading-tight">{title}</h1>
+
+      {/* Optional actions */}
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/src/components/ui/pagination.tsx

@@ -1,12 +1,21 @@
-import { type ReactElement } from "react"
-import * as React from "react"
+import { type ReactElement } from "react";
+import * as React from "react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
   MoreHorizontalIcon,
-} from "lucide-react"
-import { cn } from "@/lib/utils"
-import { buttonVariants, type Button } from "@/components/ui/button"
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { buttonVariants, Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 /**
  * Pagination — WealthX Design System
@@ -16,7 +25,7 @@ import { buttonVariants, type Button } from "@/components/ui/button"
  * WealthX overrides: none — ghost/outline variants match design system
  */
 
-export type PaginationProps = React.ComponentProps<"nav">
+export type PaginationProps = React.ComponentProps<"nav">;
 
 function Pagination({ className, ...props }: PaginationProps): ReactElement {
   return (
@@ -27,10 +36,10 @@ function Pagination({ className, ...props }: PaginationProps): ReactElement {
       role="navigation"
       {...props}
     />
-  )
+  );
 }
 
-export type PaginationContentProps = React.ComponentProps<"ul">
+export type PaginationContentProps = React.ComponentProps<"ul">;
 
 function PaginationContent({
   className,
@@ -42,19 +51,19 @@ function PaginationContent({
       data-slot="pagination-content"
       {...props}
     />
-  )
+  );
 }
 
-export type PaginationItemProps = React.ComponentProps<"li">
+export type PaginationItemProps = React.ComponentProps<"li">;
 
 function PaginationItem({ ...props }: PaginationItemProps): ReactElement {
-  return <li data-slot="pagination-item" {...props} />
+  return <li data-slot="pagination-item" {...props} />;
 }
 
 export type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
 function PaginationLink({
   className,
@@ -71,16 +80,18 @@ function PaginationLink({
           variant: isActive ? "outline" : "ghost",
           size,
         }),
-        className
+        className,
       )}
       data-active={isActive}
       data-slot="pagination-link"
       {...props}
     />
-  )
+  );
 }
 
-export type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink>
+export type PaginationPreviousProps = React.ComponentProps<
+  typeof PaginationLink
+>;
 
 function PaginationPrevious({
   className,
@@ -96,10 +107,10 @@ function PaginationPrevious({
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  )
+  );
 }
 
-export type PaginationNextProps = React.ComponentProps<typeof PaginationLink>
+export type PaginationNextProps = React.ComponentProps<typeof PaginationLink>;
 
 function PaginationNext({
   className,
@@ -115,10 +126,10 @@ function PaginationNext({
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
-  )
+  );
 }
 
-export type PaginationEllipsisProps = React.ComponentProps<"span">
+export type PaginationEllipsisProps = React.ComponentProps<"span">;
 
 function PaginationEllipsis({
   className,
@@ -134,7 +145,143 @@ function PaginationEllipsis({
       <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
-  )
+  );
+}
+
+export type PaginationNavButtonsProps = {
+  hasPrev: boolean;
+  hasNext: boolean;
+  onFirst: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+  onLast: () => void;
+};
+
+function PaginationNavButtons({
+  hasPrev,
+  hasNext,
+  onFirst,
+  onPrev,
+  onNext,
+  onLast,
+}: PaginationNavButtonsProps): ReactElement {
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        aria-label="Go to first page"
+        disabled={!hasPrev}
+        onClick={onFirst}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronsLeftIcon className="size-4" />
+      </Button>
+      <Button
+        aria-label="Go to previous page"
+        disabled={!hasPrev}
+        onClick={onPrev}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronLeftIcon className="size-4" />
+      </Button>
+      <Button
+        aria-label="Go to next page"
+        disabled={!hasNext}
+        onClick={onNext}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronRightIcon className="size-4" />
+      </Button>
+      <Button
+        aria-label="Go to last page"
+        disabled={!hasNext}
+        onClick={onLast}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronsRightIcon className="size-4" />
+      </Button>
+    </div>
+  );
+}
+
+export type TablePaginationProps = {
+  page: number;
+  pageCount: number;
+  pageSize: number;
+  pageSizeOptions?: number[];
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  selectedCount?: number;
+  totalCount?: number;
+  className?: string;
+};
+
+function TablePagination({
+  page,
+  pageCount,
+  pageSize,
+  pageSizeOptions = [10, 20, 30, 50],
+  onPageChange,
+  onPageSizeChange,
+  selectedCount,
+  totalCount,
+  className,
+}: TablePaginationProps): ReactElement {
+  return (
+    <div
+      className={cn("flex items-center gap-4 py-4", className)}
+      data-slot="table-pagination"
+    >
+      {selectedCount != null && selectedCount > 0 && totalCount != null && (
+        <span className="text-body-small text-muted-foreground">
+          {selectedCount} of {totalCount} row(s) selected.
+        </span>
+      )}
+
+      <div className="ml-auto flex items-center gap-6">
+        <div className="flex items-center gap-2">
+          <span className="text-body-small text-muted-foreground whitespace-nowrap">
+            Rows per page
+          </span>
+          <Select
+            onValueChange={(value) => onPageSizeChange(Number(value))}
+            value={`${pageSize}`}
+          >
+            <SelectTrigger
+              aria-label="Rows per page"
+              className="w-[70px]"
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <span className="text-body-small text-muted-foreground whitespace-nowrap">
+          Page {page} of {pageCount}
+        </span>
+
+        <PaginationNavButtons
+          hasNext={page < pageCount}
+          hasPrev={page > 1}
+          onFirst={() => onPageChange(1)}
+          onLast={() => onPageChange(pageCount)}
+          onNext={() => onPageChange(page + 1)}
+          onPrev={() => onPageChange(page - 1)}
+        />
+      </div>
+    </div>
+  );
 }
 
 export {
@@ -145,4 +292,6 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+  PaginationNavButtons,
+  TablePagination,
+};

package/src/components/ui/pipeline-board.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { RefreshCw, Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -128,13 +129,16 @@ function Toolbar({
           className="h-8 pl-8 text-sm"
         />
         {searchValue && (
-          <button
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
             onClick={() => onSearchChange("")}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            className="absolute right-2 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
             aria-label="Clear search"
           >
             <X className="size-3.5" />
-          </button>
+          </Button>
         )}
       </div>
 
@@ -163,13 +167,16 @@ function Toolbar({
 
       {/* Refresh */}
       {onRefresh && (
-        <button
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
           onClick={onRefresh}
           className="ml-auto text-muted-foreground hover:text-foreground"
           aria-label="Refresh board"
         >
           <RefreshCw className="size-4" />
-        </button>
+        </Button>
       )}
     </div>
   );

package/src/components/ui/property-cashflow-doughnut-chart.tsx

@@ -127,7 +127,9 @@ export function PropertyCashflowDoughnutChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
       </CardHeader>
 
       <CardContent className="px-3 sm:px-6">

package/src/components/ui/property-debt-equity-doughnut-chart.tsx

@@ -124,7 +124,9 @@ export function PropertyDebtEquityDoughnutChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
       </CardHeader>
 
       <CardContent className="px-3 sm:px-6">

package/src/components/ui/property-mobile-estimate-line-chart.tsx

@@ -337,7 +337,9 @@ export function PropertyMobileEstimateLineChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
         {showPeriodSelector && (
           <CardAction>
             <div className="flex gap-0.5 sm:gap-1">