@wealthx/shadcn 1.2.0 → 1.2.2

package/src/components/ui/stepper.tsx

@@ -0,0 +1,347 @@
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Stepper — WealthX Design System
+ *
+ * Built from scratch (no Base UI primitive). Supports horizontal and vertical
+ * orientations with active, completed, and error step states.
+ *
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn
+ *
+ * Composition:
+ *   <Stepper activeStep={1}>
+ *     <Step><StepItem label="..." description="..." /></Step>
+ *     ...
+ *   </Stepper>
+ *
+ * Vertical with expandable content:
+ *   <Stepper activeStep={1} orientation="vertical">
+ *     <Step>
+ *       <div className="flex gap-4">
+ *         <StepIndicator />
+ *         <StepLabel description="...">Label</StepLabel>
+ *       </div>
+ *       <StepContent>...</StepContent>
+ *     </Step>
+ *   </Stepper>
+ */
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface StepperContextValue {
+  activeStep: number;
+  orientation: "horizontal" | "vertical";
+  totalSteps: number;
+}
+
+const StepperContext = React.createContext<StepperContextValue>({
+  activeStep: 0,
+  orientation: "horizontal",
+  totalSteps: 0,
+});
+
+interface StepContextValue {
+  index: number;
+  isActive: boolean;
+  isCompleted: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+const StepContext = React.createContext<StepContextValue>({
+  index: 0,
+  isActive: false,
+  isCompleted: false,
+  isFirst: true,
+  isLast: false,
+});
+
+// ---------------------------------------------------------------------------
+// Stepper
+// ---------------------------------------------------------------------------
+
+export interface StepperProps {
+  /** 0-based index of the currently active step. */
+  activeStep?: number;
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Stepper({
+  activeStep = 0,
+  orientation = "horizontal",
+  className,
+  children,
+}: StepperProps) {
+  const totalSteps = React.Children.count(children);
+
+  return (
+    <StepperContext.Provider value={{ activeStep, orientation, totalSteps }}>
+      <div
+        data-slot="stepper"
+        className={cn(
+          "font-sans",
+          orientation === "horizontal"
+            ? "flex w-full items-start"
+            : "flex flex-col",
+          className,
+        )}
+      >
+        {React.Children.map(children, (step, index) =>
+          React.isValidElement(step)
+            ? React.cloneElement(
+                step as React.ReactElement<StepProps>,
+                { _index: index } as Partial<StepProps>,
+              )
+            : step,
+        )}
+      </div>
+    </StepperContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step
+// ---------------------------------------------------------------------------
+
+export interface StepProps {
+  /**
+   * Injected by `<Stepper>` via `React.cloneElement` — do not pass manually.
+   * @internal
+   */
+  _index?: number;
+  /** Mark this step as errored regardless of active state. */
+  error?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Step({ _index = 0, error, className, children }: StepProps) {
+  const { activeStep, orientation, totalSteps } =
+    React.useContext(StepperContext);
+
+  const isActive = _index === activeStep;
+  const isCompleted = _index < activeStep;
+  const isFirst = _index === 0;
+  const isLast = _index === totalSteps - 1;
+
+  return (
+    <StepContext.Provider
+      value={{ index: _index, isActive, isCompleted, isFirst, isLast }}
+    >
+      <div
+        data-slot="step"
+        aria-current={isActive ? "step" : undefined}
+        data-active={isActive || undefined}
+        data-completed={isCompleted || undefined}
+        data-error={error || undefined}
+        className={cn(
+          orientation === "horizontal"
+            ? "flex flex-1 flex-col items-center"
+            : "flex flex-row gap-3",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </StepContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepIndicator — circle + connector lines
+// ---------------------------------------------------------------------------
+
+export interface StepIndicatorProps {
+  /** Pass `true` to render the circle in the error/destructive state. */
+  error?: boolean;
+  className?: string;
+}
+
+function StepIndicator({ error, className }: StepIndicatorProps) {
+  const { orientation } = React.useContext(StepperContext);
+  const { index, isActive, isCompleted, isFirst, isLast } =
+    React.useContext(StepContext);
+
+  const filled = isActive || isCompleted;
+
+  const circle = (
+    <div
+      className={cn(
+        "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors",
+        !filled &&
+          !error &&
+          "border-2 border-border bg-background text-muted-foreground",
+        isActive &&
+          !error &&
+          "border-2 border-primary bg-primary text-primary-foreground",
+        isCompleted && !error && "bg-primary text-primary-foreground",
+        error &&
+          "border-2 border-destructive bg-destructive text-destructive-foreground",
+      )}
+    >
+      {isCompleted && !error ? (
+        <Check className="size-4" strokeWidth={2.5} />
+      ) : (
+        <span>{index + 1}</span>
+      )}
+    </div>
+  );
+
+  if (orientation === "horizontal") {
+    return (
+      <div
+        data-slot="step-indicator"
+        className={cn("flex w-full items-center", className)}
+      >
+        <div
+          className={cn(
+            "h-[2px] flex-1 transition-colors",
+            isFirst
+              ? "bg-transparent"
+              : isActive || isCompleted
+                ? "bg-primary"
+                : "bg-border",
+          )}
+        />
+        {circle}
+        <div
+          className={cn(
+            "h-[2px] flex-1 transition-colors",
+            isLast
+              ? "bg-transparent"
+              : isCompleted
+                ? "bg-primary"
+                : "bg-border",
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="step-indicator"
+      className={cn("flex w-8 shrink-0 flex-col items-center", className)}
+    >
+      {circle}
+      {!isLast && (
+        <div
+          data-slot="step-connector"
+          className={cn(
+            "mt-1 w-[2px] flex-1 transition-colors",
+            isActive || isCompleted ? "bg-primary" : "bg-border",
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepLabel
+// ---------------------------------------------------------------------------
+
+export interface StepLabelProps {
+  children: React.ReactNode;
+  description?: string;
+  /** Pass a string to show a custom error message, or `true` to show description in error colour. */
+  error?: string | boolean;
+  className?: string;
+}
+
+function StepLabel({
+  children,
+  description,
+  error,
+  className,
+}: StepLabelProps) {
+  const { orientation } = React.useContext(StepperContext);
+  const { isActive, isCompleted, isLast } = React.useContext(StepContext);
+
+  const subtext = typeof error === "string" ? error : description;
+
+  return (
+    <div
+      data-slot="step-label"
+      className={cn(
+        "flex flex-col",
+        orientation === "horizontal"
+          ? "mt-2 items-center text-center"
+          : cn("flex-1", !isLast && "pb-5"),
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "text-sm font-medium leading-tight transition-colors",
+          (isActive || isCompleted) && !error && "text-foreground",
+          !isActive && !isCompleted && !error && "text-muted-foreground",
+          error && "text-destructive",
+        )}
+      >
+        {children}
+      </span>
+      {subtext && (
+        <span
+          className={cn(
+            "mt-0.5 text-xs",
+            error ? "text-destructive" : "text-muted-foreground",
+          )}
+        >
+          {subtext}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepContent — visible only on the active step (vertical orientation)
+// ---------------------------------------------------------------------------
+
+export interface StepContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function StepContent({ className, children }: StepContentProps) {
+  const { isActive } = React.useContext(StepContext);
+
+  if (!isActive) return null;
+
+  return (
+    <div data-slot="step-content" className={cn("pb-4 pt-2", className)}>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepItem — convenience wrapper for horizontal steppers
+// Renders StepIndicator + StepLabel in a single element.
+// ---------------------------------------------------------------------------
+
+export interface StepItemProps {
+  label: string;
+  description?: string;
+  error?: string | boolean;
+}
+
+function StepItem({ label, description, error }: StepItemProps) {
+  return (
+    <>
+      <StepIndicator error={!!error} />
+      <StepLabel description={description} error={error}>
+        {label}
+      </StepLabel>
+    </>
+  );
+}
+
+export { Stepper, Step, StepIndicator, StepLabel, StepContent, StepItem };

package/src/components/ui/toggle.tsx

@@ -15,7 +15,7 @@ import { cn } from "@/lib/utils";
  *      works correctly inside ToggleGroup where border-l is collapsed for connected items)
  */
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 text-label-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -24,9 +24,9 @@ const toggleVariants = cva(
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 min-w-9 px-2",
-        sm: "h-8 min-w-8 px-1.5 text-caption",
-        lg: "h-10 min-w-10 px-2.5",
+        default: "h-9 min-w-9 px-2 text-label-large",
+        sm: "h-8 min-w-8 px-1.5 text-label-medium",
+        lg: "h-10 min-w-10 px-2.5 text-h5",
       },
     },
     defaultVariants: {

package/src/components/ui/transactions-expense-categories-doughnut-chart.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import {
   Chart as ChartJS,
   ArcElement,
+  DoughnutController,
   Tooltip,
   type ChartOptions,
   type ChartData,
@@ -20,7 +21,7 @@ import {
   DoughnutLegendRow,
 } from "./chart-shared";
 
-ChartJS.register(ArcElement, Tooltip);
+ChartJS.register(ArcElement, DoughnutController, Tooltip);
 
 // ---------------------------------------------------------------------------
 // Types

package/src/components/ui/transactions-income-expense-bar-chart.tsx

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  BarController,
   BarElement,
   Tooltip,
   type ChartOptions,
@@ -21,7 +22,7 @@ import {
   FALLBACK_SECONDARY,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
 
 // ---------------------------------------------------------------------------
 // Constants

package/src/components/ui/transactions-liabilities-breakdown-doughnut-chart.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import {
   Chart as ChartJS,
   ArcElement,
+  DoughnutController,
   Tooltip,
   type ChartOptions,
   type ChartData,
@@ -20,7 +21,7 @@ import {
   DoughnutLegendRow,
 } from "./chart-shared";
 
-ChartJS.register(ArcElement, Tooltip);
+ChartJS.register(ArcElement, DoughnutController, Tooltip);
 
 // ---------------------------------------------------------------------------
 // Types

package/src/lib/typography.ts

@@ -44,12 +44,12 @@ export const TYPOGRAPHY_DISPLAY = {
 
 /** Headings H1–H6 */
 export const TYPOGRAPHY_HEADING = {
-  h1: style(700, "2rem", "2.5rem"),
+  h1: style(700, "1.875rem", "2.25rem"),
   h2: style(600, "1.75rem", "2.25rem"),
   h3: style(600, "1.5rem", "2rem"),
-  h4: style(600, "1.3125rem", "1.75rem"),
+  h4: style(600, "1.25rem", "1.625rem"),
   h5: style(600, "1.125rem", "1.5rem"),
-  h6: style(600, "1rem", "1.375rem"),
+  h6: style(600, "0.9375rem", "1.25rem"),
 } as const;
 
 /** Body text */
@@ -62,20 +62,20 @@ export const TYPOGRAPHY_BODY = {
 /** Labels — buttons, form labels, badges */
 export const TYPOGRAPHY_LABEL = {
   large: style(600, "1rem", "1.25rem"),
-  medium: style(600, "0.875rem", "1.125rem"),
-  small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" }),
+  medium: style(600, "0.9375rem", "1.25rem"),
+  small: style(600, "0.8125rem", "1.125rem", { letterSpacing: "0.03125rem" }),
 } as const;
 
-/** Button — interactive control text (weight 500 / Medium per Figma) */
+/** Button — interactive control text (weight 600 / SemiBold) */
 export const TYPOGRAPHY_BUTTON = {
-  default: style(500, "0.875rem", "1.25rem"),
-  xs: style(500, "0.75rem", "1.25rem"),
+  default: style(600, "0.875rem", "1.25rem"),
+  xs: style(600, "0.75rem", "1.25rem"),
 } as const;
 
 /** Utility — caption, overline, code */
 export const TYPOGRAPHY_UTILITY = {
-  caption: style(400, "0.75rem", "1rem"),
-  overline: style(600, "0.625rem", "0.875rem", {
+  caption: style(500, "0.8125rem", "1.125rem"),
+  overline: style(600, "0.75rem", "1rem", {
     letterSpacing: "0.09375rem",
     textTransform: "uppercase",
   }),
@@ -105,7 +105,7 @@ export const TYPOGRAPHY_RESPONSIVE = {
       letterSpacing: "-0.03125rem",
     }),
     "display-medium": style(700, "2rem", "2.334rem"),
-    h1: style(700, "1.75rem", "2.1875rem"),
+    h1: style(700, "1.625rem", "2rem"),
     h2: style(600, "1.5rem", "1.93rem"),
   },
 } as const;

package/src/styles/globals.css

@@ -177,8 +177,8 @@
   --typography-display-small-weight: 600;
 
   /* Headings */
-  --typography-h1-size: 2rem;
-  --typography-h1-leading: 2.5rem;
+  --typography-h1-size: 1.875rem;
+  --typography-h1-leading: 2.25rem;
   --typography-h1-weight: 700;
   --typography-h2-size: 1.75rem;
   --typography-h2-leading: 2.25rem;
@@ -186,14 +186,14 @@
   --typography-h3-size: 1.5rem;
   --typography-h3-leading: 2rem;
   --typography-h3-weight: 600;
-  --typography-h4-size: 1.3125rem;
-  --typography-h4-leading: 1.75rem;
+  --typography-h4-size: 1.25rem;
+  --typography-h4-leading: 1.625rem;
   --typography-h4-weight: 600;
   --typography-h5-size: 1.125rem;
   --typography-h5-leading: 1.5rem;
   --typography-h5-weight: 600;
-  --typography-h6-size: 1rem;
-  --typography-h6-leading: 1.375rem;
+  --typography-h6-size: 0.9375rem;
+  --typography-h6-leading: 1.25rem;
   --typography-h6-weight: 600;
 
   /* Body */
@@ -211,28 +211,28 @@
   --typography-label-large-size: 1rem;
   --typography-label-large-leading: 1.25rem;
   --typography-label-large-weight: 600;
-  --typography-label-medium-size: 0.875rem;
-  --typography-label-medium-leading: 1.125rem;
+  --typography-label-medium-size: 0.9375rem;
+  --typography-label-medium-leading: 1.25rem;
   --typography-label-medium-weight: 600;
-  --typography-label-small-size: 0.75rem;
-  --typography-label-small-leading: 1rem;
+  --typography-label-small-size: 0.8125rem;
+  --typography-label-small-leading: 1.125rem;
   --typography-label-small-weight: 600;
   --typography-label-small-tracking: 0.03125rem;
 
   /* Button */
   --typography-button-default-size: 0.875rem;
   --typography-button-default-leading: 1.25rem;
-  --typography-button-default-weight: 500;
+  --typography-button-default-weight: 600;
   --typography-button-xs-size: 0.75rem;
   --typography-button-xs-leading: 1.25rem;
-  --typography-button-xs-weight: 500;
+  --typography-button-xs-weight: 600;
 
   /* Utility */
-  --typography-caption-size: 0.75rem;
-  --typography-caption-leading: 1rem;
-  --typography-caption-weight: 400;
-  --typography-overline-size: 0.625rem;
-  --typography-overline-leading: 0.875rem;
+  --typography-caption-size: 0.8125rem;
+  --typography-caption-leading: 1.125rem;
+  --typography-caption-weight: 500;
+  --typography-overline-size: 0.75rem;
+  --typography-overline-leading: 1rem;
   --typography-overline-weight: 600;
   --typography-overline-tracking: 0.09375rem;
   --typography-code-size: 0.875rem;
@@ -259,8 +259,8 @@
     --typography-display-large-leading: 2.8125rem;
     --typography-display-medium-size: 2rem;
     --typography-display-medium-leading: 2.334rem;
-    --typography-h1-size: 1.75rem;
-    --typography-h1-leading: 2.1875rem;
+    --typography-h1-size: 1.625rem;
+    --typography-h1-leading: 2rem;
     --typography-h2-size: 1.5rem;
     --typography-h2-leading: 1.93rem;
   }