@wealthx/shadcn 1.5.29 → 1.5.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.29",
+  "version": "1.5.31",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/field.tsx

@@ -22,7 +22,7 @@ function FieldSet({ className, ...props }: FieldSetProps): ReactElement {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className,
+        className
       )}
       data-slot="field-set"
       {...props}
@@ -45,7 +45,7 @@ function FieldLegend({
         "mb-3",
         "data-[variant=legend]:text-label-large",
         "data-[variant=label]:text-label-medium",
-        className,
+        className
       )}
       data-slot="field-legend"
       data-variant={variant}
@@ -61,7 +61,7 @@ function FieldGroup({ className, ...props }: FieldGroupProps): ReactElement {
     <div
       className={cn(
         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className,
+        className
       )}
       data-slot="field-group"
       {...props}
@@ -90,7 +90,7 @@ const fieldVariants = cva(
     defaultVariants: {
       orientation: "vertical",
     },
-  },
+  }
 );
 
 export type FieldProps = React.ComponentProps<"div"> &
@@ -122,7 +122,7 @@ function FieldContent({
     <div
       className={cn(
         "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className,
+        className
       )}
       data-slot="field-content"
       {...props}
@@ -139,7 +139,7 @@ function FieldLabel({ className, ...props }: FieldLabelProps): ReactElement {
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-checked:border-primary has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10",
-        className,
+        className
       )}
       data-slot="field-label"
       {...props}
@@ -154,7 +154,7 @@ function FieldTitle({ className, ...props }: FieldTitleProps): ReactElement {
     <div
       className={cn(
         "flex w-fit items-center gap-2 text-label-medium leading-snug group-data-[disabled=true]/field:opacity-50",
-        className,
+        className
       )}
       data-slot="field-label"
       {...props}
@@ -174,7 +174,7 @@ function FieldDescription({
         "text-caption leading-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className,
+        className
       )}
       data-slot="field-description"
       {...props}
@@ -195,7 +195,7 @@ function FieldSeparator({
     <div
       className={cn(
         "relative -my-2 h-5 text-body-small group-data-[variant=outline]/field-group:-mb-2",
-        className,
+        className
       )}
       data-content={Boolean(children)}
       data-slot="field-separator"
@@ -234,7 +234,7 @@ function FieldError({
     }
 
     const uniqueErrors = Array.from(
-      new Map(errors.map((error) => [error?.message, error])).values(),
+      new Map(errors.map((error) => [error?.message, error])).values()
     );
 
     if (uniqueErrors.length === 1) {
@@ -245,7 +245,7 @@ function FieldError({
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error) =>
-            error?.message && <li key={error.message}>{error.message}</li>,
+            error?.message && <li key={error.message}>{error.message}</li>
         )}
       </ul>
     );
@@ -257,7 +257,7 @@ function FieldError({
 
   return (
     <div
-      className={cn("text-caption text-destructive", className)}
+      className={cn("text-left text-caption text-destructive", className)}
       data-slot="field-error"
       role="alert"
       {...props}

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

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { Check, X } from "lucide-react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
 
-type ValidationRule = { label: string; test: (p: string) => boolean };
+export type PasswordStrengthRule = {
+  label: string;
+  test: (p: string) => boolean;
+};
 
-const RULES: ValidationRule[] = [
+export const PASSWORD_STRENGTH_RULES: PasswordStrengthRule[] = [
   { 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) },
@@ -24,47 +25,88 @@ export type PasswordStrengthTooltipProps = {
   password: string;
   children: React.ReactNode;
   side?: "top" | "right" | "bottom" | "left";
+  onRequestClose?: () => void;
 };
 
-export function PasswordStrengthTooltip({
-  open = false,
-  password,
-  children,
-  side = "right",
-}: PasswordStrengthTooltipProps) {
+export const PasswordStrengthTooltip = React.forwardRef<
+  HTMLDivElement,
+  PasswordStrengthTooltipProps
+>(function PasswordStrengthTooltip(
+  { open = false, password, children, side = "right" },
+  forwardedRef
+) {
+  const themeVars = useThemeVars();
+  // anchorRef is used by Positioner for popup placement.
+  // forwardedRef (fieldRef from consumer) is used for contains() checks in dismiss logic.
+  const anchorRef = React.useRef<HTMLDivElement>(null);
+
+  const composedRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      (anchorRef as React.MutableRefObject<HTMLDivElement | null>).current =
+        node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        (
+          forwardedRef as React.MutableRefObject<HTMLDivElement | null>
+        ).current = node;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [forwardedRef]
+  );
+
   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>
+    // PopoverPrimitive.Root with no Trigger — popup is fully controlled via `open` prop.
+    // The wrapper div has no trigger behaviors injected, so clicking the input inside
+    // works on the first click without interference.
+    <PopoverPrimitive.Root open={open}>
+      <div ref={composedRef}>{children}</div>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Positioner
+          anchor={anchorRef}
+          side={side}
+          align="start"
+          sideOffset={8}
+          className="z-[200]"
+        >
+          <PopoverPrimitive.Popup
+            initialFocus={false}
+            finalFocus={false}
+            className={cn(
+              "border border-border bg-popover shadow-md outline-hidden",
+              "w-auto max-w-[280px] p-3 font-sans",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+              "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+              "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards",
+              "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95"
+            )}
+            style={themeVars as React.CSSProperties}
+          >
+            <div className="flex flex-col gap-1.5">
+              {PASSWORD_STRENGTH_RULES.map((rule) => {
+                const valid = password ? rule.test(password) : false;
+                return (
+                  <div
+                    key={rule.label}
+                    className={cn(
+                      "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>
+          </PopoverPrimitive.Popup>
+        </PopoverPrimitive.Positioner>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
   );
-}
+});

package/src/components/ui/signup-form-primitives.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { EyeIcon, EyeOffIcon, Trash2Icon } from "lucide-react";
 import { Button } from "./button";
 import { Field, FieldError, FieldLabel } from "./field";
@@ -10,7 +10,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./select";
-import { PasswordStrengthTooltip } from "./password-strength-tooltip";
+import {
+  PASSWORD_STRENGTH_RULES,
+  PasswordStrengthTooltip,
+} from "./password-strength-tooltip";
 
 // ---------------------------------------------------------------------------
 // SectionHeading
@@ -52,14 +55,6 @@ export function FormField({ label, required, children }: FormFieldProps) {
 // PasswordField — input with show/hide toggle + optional strength popover
 // ---------------------------------------------------------------------------
 
-const STRENGTH_RULES = [
-  { test: (p: string) => p.length >= 8 },
-  { test: (p: string) => /[A-Z]/.test(p) },
-  { test: (p: string) => /[a-z]/.test(p) },
-  { test: (p: string) => /\d/.test(p) },
-  { test: (p: string) => /[^A-Za-z0-9]/.test(p) },
-];
-
 export interface PasswordFieldProps {
   label: string;
   placeholder: string;
@@ -79,16 +74,30 @@ export function PasswordField({
   const [error, setError] = useState("");
   const [touched, setTouched] = useState(false);
   const [value, setValue] = useState("");
-  const [typingStarted, setTypingStarted] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const allRulesPass = STRENGTH_RULES.every((r) => r.test(value));
-  const isPopoverOpen = !!showStrengthPopover && typingStarted && !allRulesPass;
+  const allRulesPass = PASSWORD_STRENGTH_RULES.every((r) => r.test(value));
+  const isPopoverOpen =
+    !!showStrengthPopover && !dismissed && value.length > 0 && !allRulesPass;
 
   const validate = (v: string) => {
-    if (v.length > 0 && v.length < 8) return "Min. 8 characters required";
+    if (!v) return "";
+    if (v.length < 8) return "Min. 8 characters required";
+    if (!PASSWORD_STRENGTH_RULES.every((r) => r.test(v)))
+      return "Password doesn't meet all requirements";
     return "";
   };
 
+  useEffect(() => {
+    if (!isPopoverOpen) return;
+    const onMouseDown = (e: MouseEvent) => {
+      if (!wrapperRef.current?.contains(e.target as Node)) setDismissed(true);
+    };
+    document.addEventListener("mousedown", onMouseDown, true);
+    return () => document.removeEventListener("mousedown", onMouseDown, true);
+  }, [isPopoverOpen]);
+
   const inputEl = (
     <div className="relative">
       <Input
@@ -100,8 +109,16 @@ export function PasswordField({
           const v = e.target.value;
           setValue(v);
           onValueChange?.(v);
-          if (!typingStarted && v.length > 0) setTypingStarted(true);
           if (touched) setError(validate(v));
+          setDismissed(false);
+        }}
+        onFocus={() => setDismissed(false)}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === "Tab") {
+            setTouched(true);
+            setError(validate(value));
+            setDismissed(true);
+          }
         }}
         onBlur={() => {
           setTouched(true);
@@ -131,6 +148,7 @@ export function PasswordField({
       </FieldLabel>
       {showStrengthPopover ? (
         <PasswordStrengthTooltip
+          ref={wrapperRef}
           open={isPopoverOpen}
           password={value}
           side="right"
@@ -141,7 +159,7 @@ export function PasswordField({
         inputEl
       )}
       <div className="min-h-5">
-        {touched && error && <FieldError>{error}</FieldError>}
+        {touched && error && !isPopoverOpen && <FieldError>{error}</FieldError>}
       </div>
     </Field>
   );

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useState } from "react";
 import { Smartphone } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -6,19 +5,20 @@ 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";
+import type { ReactNode } from "react";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 export type TwoFAApp = {
   name: string;
-  icon?: React.ReactNode;
-  qrNode?: React.ReactNode;
+  icon?: ReactNode;
+  qrNode?: ReactNode;
 };
 
 export type TwoFASetupFormProps = {
   title?: string;
   apps?: TwoFAApp[];
-  qrCodeNode?: React.ReactNode;
+  qrCodeNode?: ReactNode;
   onVerify: (token: string) => Promise<void>;
   onSetupLater?: () => void;
   required?: boolean;
@@ -30,6 +30,17 @@ const DEFAULT_APPS: TwoFAApp[] = [
   { name: "Microsoft Authenticator" },
 ];
 
+const STEP_META = {
+  1: {
+    subtitle: "We recommend Google Authenticator or Microsoft Authenticator",
+    defaultTitle: "2FA Setup",
+  },
+  2: {
+    title: "Open Auth App and Scan Code",
+    subtitle: "Open your authenticator app and scan the QR code",
+  },
+} as const;
+
 // ─── AppDownloadStep ─────────────────────────────────────────────────────────
 
 function AppDownloadStep({
@@ -45,27 +56,28 @@ function AppDownloadStep({
 }) {
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
         {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"
+            className="flex items-center gap-4 border border-border bg-muted/30 p-4"
           >
-            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-              {app.icon ?? (
-                <Smartphone size={18} className="text-muted-foreground" />
+            <div className="flex shrink-0 items-center justify-center">
+              {app.qrNode ?? (
+                <div className="flex h-[80px] w-[80px] items-center justify-center border border-dashed border-border bg-muted/50 text-[11px] text-muted-foreground">
+                  Scan
+                </div>
               )}
-              {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 className="flex flex-col gap-1">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                {app.icon ?? (
+                  <Smartphone size={16} className="text-muted-foreground" />
+                )}
+                {app.name}
               </div>
-            )}
+              <p className="text-xs text-muted-foreground">Scan to download</p>
+            </div>
           </div>
         ))}
       </div>
@@ -97,7 +109,7 @@ function VerificationStep({
   onSetupLater,
   required,
 }: {
-  qrCodeNode?: React.ReactNode;
+  qrCodeNode?: ReactNode;
   onVerify: (token: string) => Promise<void>;
   onBack: () => void;
   onSetupLater?: () => void;
@@ -116,8 +128,10 @@ function VerificationStep({
     setIsLoading(true);
     try {
       await onVerify(token);
-    } catch {
-      setError("Invalid code. Please try again.");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Invalid code. Please try again."
+      );
     } finally {
       setIsLoading(false);
     }
@@ -126,9 +140,7 @@ function VerificationStep({
   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>
-        ) : (
+        {qrCodeNode ?? (
           <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>
@@ -185,7 +197,7 @@ function VerificationStep({
 // ─── TwoFASetupForm ───────────────────────────────────────────────────────────
 
 export function TwoFASetupForm({
-  title = "2FA Setup",
+  title,
   apps = DEFAULT_APPS,
   qrCodeNode,
   onVerify,
@@ -195,15 +207,13 @@ export function TwoFASetupForm({
 }: 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";
+  const stepTitle =
+    step === 1 ? title ?? STEP_META[1].defaultTitle : STEP_META[2].title;
+  const stepSubtitle = STEP_META[step].subtitle;
 
   return (
     <div className={cn("flex flex-col gap-6", className)}>
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col items-center gap-1 text-center">
         <h2 className="text-xl font-semibold text-foreground">{stepTitle}</h2>
         <p className="text-sm text-muted-foreground">{stepSubtitle}</p>
       </div>