@wealthx/shadcn 1.5.28 → 1.5.30

package/src/components/ui/ai-builder/index.tsx

@@ -1,10 +1,14 @@
 export type {
   AiBuilderAgentItem,
   AiBuilderEmailCategories,
-  AiBuilderEmailFilterCategory,
-  AiBuilderEmailFilters,
   AiBuilderServiceData,
   AiBuilderServiceType,
+  AiBuilderAgentTone,
+  AiBuilderAgentLanguage,
+  AiBuilderAgentConfig,
+  AiBuilderAgentGeneralSettings,
+  AiBuilderResponseTemplate,
+  AiBuilderRuleItem,
 } from "./types";
 
 export { AgentCard, AgentMenuModal } from "./agent-card";
@@ -21,3 +25,24 @@ export type {
 
 export { ServiceConfigurationModal } from "./service-config-modal";
 export type { ServiceConfigurationModalProps } from "./service-config-modal";
+
+export {
+  SettingRow,
+  SettingCard,
+  AgentConfigForm,
+  ResponseTemplateEditModal,
+  RuleOrderBadge,
+  RuleSetSection,
+  SectionHeader,
+  AddEditRuleModal,
+} from "./agent-settings";
+export type {
+  SettingRowProps,
+  SettingCardProps,
+  AgentConfigFormProps,
+  ResponseTemplateEditModalProps,
+  RuleOrderBadgeProps,
+  RuleSetSectionProps,
+  SectionHeaderProps,
+  AddEditRuleModalProps,
+} from "./agent-settings";

package/src/components/ui/ai-builder/service-config-modal.tsx

@@ -50,7 +50,7 @@ export function ServiceConfigurationModal({
 }: ServiceConfigurationModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="flex max-h-[90vh] flex-col max-w-md">
         {isConnected ? (
           <>
             <DialogHeader>
@@ -60,7 +60,7 @@ export function ServiceConfigurationModal({
               </DialogDescription>
             </DialogHeader>
 
-            <div className="flex flex-col gap-4 py-2">
+            <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2">
               <div className="flex items-center gap-2 px-3 py-2 text-xs font-medium bg-success/10 text-success">
                 <CheckCircle2 className="h-3.5 w-3.5 shrink-0" />
                 Active — integration is running
@@ -158,13 +158,13 @@ export function ServiceConfigurationModal({
                         </p>
                       </div>
                       <Card className="py-0">
-                        <CardContent className="flex flex-col gap-3 p-3 max-h-48 overflow-y-auto">
+                        <CardContent className="flex flex-col gap-3 p-3">
                           {serviceData.emailCategories.available.map(
                             (category) => {
                               const checked =
-                                serviceData.emailCategories!.selected.indexOf(
-                                  category,
-                                ) !== -1;
+                                serviceData.emailCategories!.selected.includes(
+                                  category
+                                );
                               return (
                                 <div
                                   key={category}
@@ -181,10 +181,10 @@ export function ServiceConfigurationModal({
                                             category,
                                           ]
                                         : serviceData.emailCategories!.selected.filter(
-                                            (c) => c !== category,
+                                            (c) => c !== category
                                           );
                                       serviceData.emailCategories!.onChange(
-                                        next,
+                                        next
                                       );
                                     }}
                                   />
@@ -196,7 +196,7 @@ export function ServiceConfigurationModal({
                                   </label>
                                 </div>
                               );
-                            },
+                            }
                           )}
                         </CardContent>
                       </Card>
@@ -227,7 +227,7 @@ export function ServiceConfigurationModal({
                                   onCheckedChange={(v) =>
                                     serviceData.emailFilters!.onFilterChange(
                                       category.id,
-                                      !!v,
+                                      !!v
                                     )
                                   }
                                 />
@@ -238,7 +238,7 @@ export function ServiceConfigurationModal({
                                   {category.label}
                                 </label>
                               </div>
-                            ),
+                            )
                           )}
                         </CardContent>
                       </Card>

package/src/components/ui/ai-builder/types.ts

@@ -19,18 +19,6 @@ export type AiBuilderEmailCategories = {
   onChange: (categories: string[]) => void;
 };
 
-export type AiBuilderEmailFilterCategory = {
-  id: string;
-  label: string;
-  enabled: boolean;
-};
-
-export type AiBuilderEmailFilters = {
-  description: string;
-  categories: AiBuilderEmailFilterCategory[];
-  onFilterChange: (categoryId: string, enabled: boolean) => void;
-};
-
 export type AiBuilderServiceData = {
   accountIdentifier: string;
   accountIdentifierLabel: string;
@@ -41,8 +29,32 @@ export type AiBuilderServiceData = {
   syncDescription: string;
   syncEnabled: boolean;
   onSyncToggle: (enabled: boolean) => void;
-  /** When set, renders an "Email Categories" section with multi-select checkboxes. */
+  /** When set, renders an "Email Filters" section with per-category checkboxes. */
   emailCategories?: AiBuilderEmailCategories;
-  /** When set, renders an "Email Filters" section with per-category toggle checkboxes. */
-  emailFilters?: AiBuilderEmailFilters;
+};
+
+export type AiBuilderAgentTone = "Professional" | "Friendly" | "Enthusiastic";
+export type AiBuilderAgentLanguage = "American English" | "Australian English";
+
+export type AiBuilderAgentConfig = {
+  name: string;
+  businessDescription: string;
+};
+
+export type AiBuilderAgentGeneralSettings = {
+  autoResponse: boolean;
+  tone: AiBuilderAgentTone;
+  language: AiBuilderAgentLanguage;
+};
+
+export type AiBuilderResponseTemplate = {
+  channel: "email" | "chat";
+  isEnabled: boolean;
+  content: string;
+};
+
+export type AiBuilderRuleItem = {
+  id: string;
+  text: string;
+  isEnabled: boolean;
 };

package/src/components/ui/ai-conversations/thread.tsx

@@ -367,6 +367,7 @@ export function ChatComposer({
 }: ChatComposerProps) {
   // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change.
   // Force chat when email isn't integrated so the panel never lands on a hidden tab.
+  const initialChannelRef = React.useRef(channelProp);
   const [channel, setChannel] = React.useState<AiConvChannel>(
     isEmailIntegrated ? channelProp : "chat",
   );
@@ -558,12 +559,6 @@ export function ChatComposer({
                 <ComposerToolbarButton label="Attach file" icon={Paperclip} />
               </div>
               <div className="flex items-center gap-2">
-                {onLetAiHandle && (
-                  <Button variant="outline" size="sm" onClick={onLetAiHandle}>
-                    <Bot className="mr-1.5 size-3.5" />
-                    Let AI Handle
-                  </Button>
-                )}
                 <Button
                   size="sm"
                   onClick={() => {
@@ -596,12 +591,15 @@ export function ChatComposer({
                 className="min-h-0 flex-1 resize-none text-base"
               />
               <div className="flex items-center justify-between">
-                <Button variant="outline" size="sm" onClick={onLetAiHandle}>
-                  <Bot className="mr-1.5 size-3.5" />
-                  Let AI Handle
-                </Button>
+                {initialChannelRef.current !== "email" && (
+                  <Button variant="outline" size="sm" onClick={onLetAiHandle}>
+                    <Bot className="mr-1.5 size-3.5" />
+                    Let AI Handle
+                  </Button>
+                )}
                 <Button
                   size="sm"
+                  className="ml-auto"
                   onClick={() => onSend?.(inputValue)}
                   disabled={!inputValue.trim()}
                 >
@@ -793,7 +791,7 @@ export function ChatThread({
                 Take Over
               </Button>
             )}
-            {!isClosed && !aiIsHandling && (
+            {!isClosed && !aiIsHandling && channel !== "email" && (
               <Button variant="outline" size="sm" onClick={onLetAiHandle}>
                 <Bot className="mr-1.5 size-3.5" />
                 Let AI Handle

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>
   );