@wealthx/shadcn 1.3.2 → 1.3.3

package/src/components/ui/kanban-column.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { MoreVertical } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useThemeVars } from "@/lib/theme-provider";
+import { formatCurrency } from "@/lib/format-currency";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
@@ -112,11 +113,7 @@ export interface KanbanColumnProps {
 // ---------------------------------------------------------------------------
 
 function formatTotalValue(value: number): string {
-  return new Intl.NumberFormat("en-AU", {
-    style: "currency",
-    currency: "AUD",
-    maximumFractionDigits: 0,
-  }).format(value);
+  return formatCurrency(value);
 }
 
 function growthColor(growth: number): string {

package/src/components/ui/onboarding-layout.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { Button } from "./button";
+import { Stepper, Step, StepItem } from "./stepper";
+import { cn } from "../../lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type OnboardingStep = {
+  id: string;
+  title: string;
+  isOptional?: boolean;
+  isLocked?: boolean;
+};
+
+export type OnboardingLayoutProps = {
+  steps: OnboardingStep[];
+  currentStepIndex: number;
+  /** Label for the primary action button. Defaults to "Next" / "Finish". */
+  nextLabel?: string;
+  /** Disable the Next button (e.g. required fields not filled). */
+  canProceed?: boolean;
+  onBack: () => void;
+  onNext: () => void;
+  /** Skip is only shown when provided and the step is not locked. */
+  onSkip?: () => void;
+  /** Called when the user clicks "Upgrade Plan" on a locked step. */
+  onUpgrade?: () => void;
+  className?: string;
+  children: React.ReactNode;
+};
+
+// ─── OnboardingLayout ─────────────────────────────────────────────────────────
+
+export function OnboardingLayout({
+  steps,
+  currentStepIndex,
+  nextLabel,
+  canProceed = true,
+  onBack,
+  onNext,
+  onSkip,
+  onUpgrade,
+  className,
+  children,
+}: OnboardingLayoutProps) {
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === steps.length - 1;
+  const currentStep = steps[currentStepIndex];
+  const isLocked = currentStep?.isLocked ?? false;
+
+  const primaryLabel = isLocked
+    ? "Upgrade Plan"
+    : isLastStep
+      ? "Finish Setup"
+      : (nextLabel ?? "Next");
+
+  return (
+    <div
+      className={cn("flex h-full flex-col bg-background font-sans", className)}
+    >
+      <div className="px-8 pt-5 pb-3">
+        <Stepper activeStep={currentStepIndex}>
+          {steps.map((step) => (
+            <Step key={step.id}>
+              <StepItem
+                label={step.title}
+                description={
+                  step.isLocked
+                    ? "Upgrade to unlock"
+                    : step.isOptional
+                      ? "Optional"
+                      : undefined
+                }
+              />
+            </Step>
+          ))}
+        </Stepper>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-8 pt-4 pb-6">
+        {children}
+      </div>
+
+      <div className="flex items-center justify-between border-t border-border px-8 py-4">
+        <div>
+          {onSkip && (
+            <Button variant="ghost" size="sm" onClick={onSkip}>
+              Skip for now
+            </Button>
+          )}
+        </div>
+        <div className="flex gap-2">
+          {!isFirstStep && (
+            <Button variant="outline-secondary" size="sm" onClick={onBack}>
+              Back
+            </Button>
+          )}
+          <Button
+            size="sm"
+            onClick={isLocked ? onUpgrade : onNext}
+            disabled={!isLocked && !canProceed}
+          >
+            {primaryLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}