@wealthx/shadcn 1.3.1 → 1.3.3

package/src/components/ui/password-strength-tooltip.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Check, X } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+type ValidationRule = { label: string; test: (p: string) => boolean };
+
+const RULES: ValidationRule[] = [
+  { label: "Minimum 8 characters", test: (p) => p.length >= 8 },
+  { label: "At least one uppercase letter", test: (p) => /[A-Z]/.test(p) },
+  { label: "At least one lowercase letter", test: (p) => /[a-z]/.test(p) },
+  { label: "At least one number", test: (p) => /\d/.test(p) },
+  {
+    label: "At least one special character",
+    test: (p) => /[^A-Za-z0-9]/.test(p),
+  },
+];
+
+export type PasswordStrengthTooltipProps = {
+  open?: boolean;
+  password: string;
+  children: React.ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+};
+
+export function PasswordStrengthTooltip({
+  open = false,
+  password,
+  children,
+  side = "right",
+}: PasswordStrengthTooltipProps) {
+  return (
+    <Popover open={open}>
+      <PopoverTrigger asChild>
+        <div>{children}</div>
+      </PopoverTrigger>
+      <PopoverContent
+        side={side}
+        align="start"
+        sideOffset={8}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className="w-auto max-w-[280px] font-sans"
+      >
+        <div className="flex flex-col gap-1.5">
+          {RULES.map((rule) => {
+            const valid = password ? rule.test(password) : false;
+            return (
+              <div
+                key={rule.label}
+                className={`flex items-center gap-1.5 text-[13px] leading-[18px] ${
+                  valid ? "text-success" : "text-destructive"
+                }`}
+              >
+                {valid ? (
+                  <Check size={14} className="shrink-0" />
+                ) : (
+                  <X size={14} className="shrink-0" />
+                )}
+                <span>{rule.label}</span>
+              </div>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 import { useThemeVars } from "@/lib/theme-provider";
+import { formatCurrencyAbbrev } from "@/lib/format-currency";
 
 /**
  * PipelineChart — WealthX DS (L4 Section)
@@ -40,12 +41,7 @@ export interface PipelineChartProps {
 // ---------------------------------------------------------------------------
 
 function formatValue(v: number): string {
-  return new Intl.NumberFormat("en-AU", {
-    style: "currency",
-    currency: "AUD",
-    notation: "compact",
-    maximumFractionDigits: 1,
-  }).format(v);
+  return formatCurrencyAbbrev(v);
 }
 
 // Fallback palette (used when stage.color is not set) — uses stage vars so

package/src/components/ui/sidebar-nav.tsx

@@ -24,7 +24,7 @@ import {
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
-import { cn } from "@/lib/utils";
+import { cn, getInitials } from "@/lib/utils";
 import { formatCurrency } from "@/lib/format-currency";
 import { Accordion, AccordionContent, AccordionItem } from "./accordion";
 import { Button } from "./button";
@@ -100,16 +100,6 @@ export interface SidebarNavProps {
 
 // ─── Helpers ───────────────────────────────────────────────────────────────────
 
-function getInitials(name: string): string {
-  return name
-    .split(" ")
-    .filter(Boolean)
-    .map((word) => word[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
-}
-
 function navIconCn(isActive: boolean): string {
   return cn(
     "shrink-0 transition-colors",
@@ -385,10 +375,7 @@ export function SidebarNav({
         data-slot="sidebar-nav"
         data-collapsed={collapsed}
         className={cn(
-          // Force dark-mode CSS variable resolution — sidebar is always dark-backgrounded
-          // regardless of system theme, so semantic tokens (destructive, success, etc.)
-          // must use their dark-mode values to maintain WCAG contrast.
-          "dark flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
+          "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
           "transition-all duration-200 ease-in-out",
           collapsed ? "w-14" : "w-[279px]",
           className,

package/src/components/ui/two-fa-setup-form.tsx

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { useState } from "react";
+import { Smartphone } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError } from "@/components/ui/field";
+import { InputGroup, InputGroupInput } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type TwoFAApp = {
+  name: string;
+  icon?: React.ReactNode;
+  qrNode?: React.ReactNode;
+};
+
+export type TwoFASetupFormProps = {
+  title?: string;
+  apps?: TwoFAApp[];
+  qrCodeNode?: React.ReactNode;
+  onVerify: (token: string) => Promise<void>;
+  onSetupLater?: () => void;
+  required?: boolean;
+  className?: string;
+};
+
+const DEFAULT_APPS: TwoFAApp[] = [
+  { name: "Google Authenticator" },
+  { name: "Microsoft Authenticator" },
+];
+
+// ─── AppDownloadStep ─────────────────────────────────────────────────────────
+
+function AppDownloadStep({
+  apps,
+  onNext,
+  onSetupLater,
+  required,
+}: {
+  apps: TwoFAApp[];
+  onNext: () => void;
+  onSetupLater?: () => void;
+  required?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex gap-4">
+        {apps.map((app) => (
+          <div
+            key={app.name}
+            className="flex flex-1 flex-col items-center gap-3 border border-border bg-muted/30 p-4 text-center"
+          >
+            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+              {app.icon ?? (
+                <Smartphone size={18} className="text-muted-foreground" />
+              )}
+              {app.name}
+            </div>
+            {app.qrNode ? (
+              <div className="flex items-center justify-center">
+                {app.qrNode}
+              </div>
+            ) : (
+              <div className="flex h-[100px] w-[100px] items-center justify-center border border-dashed border-border bg-muted/50 text-[11px] text-muted-foreground">
+                Scan to download
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <p className="text-center text-sm text-muted-foreground">
+        Once downloaded, or if you already have the app installed, click Next.
+      </p>
+
+      <div className="flex flex-col gap-2">
+        <Button className="w-full" onClick={onNext}>
+          Next
+        </Button>
+        {!required && onSetupLater && (
+          <Button variant="ghost" className="w-full" onClick={onSetupLater}>
+            Setup Later
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── VerificationStep ────────────────────────────────────────────────────────
+
+function VerificationStep({
+  qrCodeNode,
+  onVerify,
+  onBack,
+  onSetupLater,
+  required,
+}: {
+  qrCodeNode?: React.ReactNode;
+  onVerify: (token: string) => Promise<void>;
+  onBack: () => void;
+  onSetupLater?: () => void;
+  required?: boolean;
+}) {
+  const [token, setToken] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleVerify = async () => {
+    if (!token) {
+      setError("Required");
+      return;
+    }
+    setError("");
+    setIsLoading(true);
+    try {
+      await onVerify(token);
+    } catch {
+      setError("Invalid code. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col items-center gap-3">
+        {qrCodeNode ? (
+          <div className="flex items-center justify-center">{qrCodeNode}</div>
+        ) : (
+          <div className="flex h-[140px] w-[140px] items-center justify-center border border-dashed border-border bg-muted/50 text-xs text-muted-foreground">
+            QR Code
+          </div>
+        )}
+        <p className="text-center text-sm text-muted-foreground">
+          The temporary code will show for authentication. Insert below.
+        </p>
+      </div>
+
+      <Field>
+        <Label htmlFor="2fa-token">Verification Code</Label>
+        <InputGroup>
+          <InputGroupInput
+            id="2fa-token"
+            type="text"
+            name="token"
+            placeholder="Enter Your Code"
+            value={token}
+            aria-invalid={!!error}
+            onChange={(e) => {
+              setToken(e.target.value);
+              if (error) setError("");
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleVerify();
+            }}
+          />
+        </InputGroup>
+        {error && <FieldError>{error}</FieldError>}
+      </Field>
+
+      <div className="flex flex-col gap-2">
+        <Button
+          loading={isLoading}
+          disabled={!token}
+          className="w-full"
+          onClick={handleVerify}
+        >
+          Verify Now
+        </Button>
+        <Button variant="outline" className="w-full" onClick={onBack}>
+          Back
+        </Button>
+        {!required && onSetupLater && (
+          <Button variant="ghost" className="w-full" onClick={onSetupLater}>
+            Setup Later
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── TwoFASetupForm ───────────────────────────────────────────────────────────
+
+export function TwoFASetupForm({
+  title = "2FA Setup",
+  apps = DEFAULT_APPS,
+  qrCodeNode,
+  onVerify,
+  onSetupLater,
+  required = true,
+  className,
+}: TwoFASetupFormProps) {
+  const [step, setStep] = useState<1 | 2>(1);
+
+  const stepTitle = step === 1 ? title : "Open Auth App and Scan Code";
+  const stepSubtitle =
+    step === 1
+      ? "We recommend Google Authenticator or Microsoft Authenticator"
+      : "Open your authenticator app and scan the QR code";
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      <div className="flex flex-col gap-1">
+        <h2 className="text-xl font-semibold text-foreground">{stepTitle}</h2>
+        <p className="text-sm text-muted-foreground">{stepSubtitle}</p>
+      </div>
+
+      {step === 1 ? (
+        <AppDownloadStep
+          apps={apps}
+          onNext={() => setStep(2)}
+          onSetupLater={onSetupLater}
+          required={required}
+        />
+      ) : (
+        <VerificationStep
+          qrCodeNode={qrCodeNode}
+          onVerify={onVerify}
+          onBack={() => setStep(1)}
+          onSetupLater={onSetupLater}
+          required={required}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ui/upload-card.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { UploadIcon } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+/**
+ * UploadCard — WealthX DS
+ *
+ * A dashed-border upload zone used in forms that accept file input.
+ * Comes in two sizes:
+ *   - `sm` — compact, fixed max-width (e.g. logo / photo uploads)
+ *   - `lg` — full-width, taller drop zone (e.g. bulk CSV upload)
+ *
+ * WealthX overrides:
+ *   - No border-radius — sharp corners per WealthX DS
+ */
+
+const uploadCardVariants = cva(
+  [
+    "flex flex-col items-center justify-center gap-2",
+    "border border-dashed border-border",
+    "cursor-pointer text-muted-foreground",
+    "hover:bg-muted/50 bg-muted/20 transition-colors",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[200px] py-4 px-3",
+        lg: "w-full py-8 px-6",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  },
+);
+
+export type UploadCardProps = React.ComponentProps<"label"> &
+  VariantProps<typeof uploadCardVariants> & {
+    /** Label text shown below the upload icon */
+    label?: string;
+    /** Helper text shown below the label */
+    description?: string;
+    /** File types to accept, passed to the hidden <input> */
+    accept?: string;
+    /** Called when the user selects a file */
+    onFileChange?: (file: File | null) => void;
+  };
+
+function UploadCard({
+  label = "Upload image",
+  description,
+  accept = ".png,.jpg,.jpeg",
+  size,
+  onFileChange,
+  className,
+  ...props
+}: UploadCardProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onFileChange?.(e.target.files?.[0] ?? null);
+  };
+
+  return (
+    <label
+      className={cn(uploadCardVariants({ size }), className)}
+      data-slot="upload-card"
+      data-size={size ?? "sm"}
+      {...props}
+    >
+      <UploadIcon
+        className={cn("text-primary", size === "lg" ? "size-6" : "size-4")}
+      />
+      <span
+        className={cn("font-medium", size === "lg" ? "text-sm" : "text-xs")}
+      >
+        {label}
+      </span>
+      {description && (
+        <p
+          className={cn(
+            "text-center leading-relaxed",
+            size === "lg" ? "text-sm" : "text-xs",
+          )}
+        >
+          {description}
+        </p>
+      )}
+      <input
+        type="file"
+        accept={accept}
+        className="sr-only"
+        onChange={handleChange}
+      />
+    </label>
+  );
+}
+
+export { UploadCard, uploadCardVariants };

package/src/components/ui/video-background.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type VideoBackgroundProps = {
+  src?: string;
+  poster?: string;
+  overlay?: "light" | "medium" | "dark";
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export function VideoBackground({
+  src,
+  poster,
+  overlay = "medium",
+  children,
+  className,
+}: VideoBackgroundProps) {
+  const overlayClass = {
+    light: "bg-black/25",
+    medium: "bg-black/50",
+    dark: "bg-black/70",
+  }[overlay];
+
+  return (
+    <div
+      className={cn(
+        "relative min-h-screen w-full overflow-hidden bg-neutral-900",
+        className,
+      )}
+    >
+      {src && (
+        <video
+          className="absolute inset-0 h-full w-full object-cover"
+          autoPlay
+          muted
+          loop
+          playsInline
+          poster={poster}
+          src={src}
+        />
+      )}
+      {!src && poster && (
+        <img
+          className="absolute inset-0 h-full w-full object-cover"
+          src={poster}
+          alt=""
+          aria-hidden="true"
+        />
+      )}
+      <div className={cn("absolute inset-0", overlayClass)} />
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}

package/src/lib/format-date.ts

@@ -48,3 +48,29 @@ export function formatDateWithWeekday(iso: string): string {
     return iso;
   }
 }
+
+/**
+ * Format a Date or ISO string as "Monday, 15 January" (long weekday + day + long month).
+ * Returns raw string on parse failure.
+ */
+export function formatDateLong(date: Date | string): string {
+  try {
+    const d = typeof date === "string" ? safeParse(date) : date;
+    return format(d, "EEEE, d MMMM");
+  } catch {
+    return String(date);
+  }
+}
+
+/**
+ * Format a Date or ISO string as an uppercase short weekday: "MON", "TUE", etc.
+ * Returns raw string on parse failure.
+ */
+export function formatWeekdayShort(date: Date | string): string {
+  try {
+    const d = typeof date === "string" ? safeParse(date) : date;
+    return format(d, "EEE").toUpperCase();
+  } catch {
+    return String(date);
+  }
+}

package/src/lib/utils.ts

@@ -42,3 +42,14 @@ const twMerge = extendTailwindMerge({
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
+
+export function getInitials(name: string): string {
+  if (!name.trim()) return "?";
+  return name
+    .split(" ")
+    .filter(Boolean)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+}