myoperator-ui 0.0.189 → 0.0.190-beta.1

package/dist/index.js

@@ -8391,17 +8391,26 @@ export const BankDetails = React.forwardRef<HTMLDivElement, BankDetailsProps>(
       icon,
       items,
       defaultOpen = true,
+      open,
+      onOpenChange,
       onCopy,
       className,
     },
     ref
   ) => {
+    const isControlled = open !== undefined;
+
     return (
       <div ref={ref} className={cn("w-full", className)}>
         <Accordion
           type="single"
           variant="bordered"
-          defaultValue={defaultOpen ? ["bank-details"] : []}
+          {...(isControlled
+            ? {
+                value: open ? ["bank-details"] : [],
+                onValueChange: (val) => onOpenChange?.(val.length > 0),
+              }
+            : { defaultValue: defaultOpen ? ["bank-details"] : [] })}
         >
           <AccordionItem value="bank-details">
             <AccordionTrigger className="px-4 py-4">
@@ -8535,6 +8544,10 @@ export interface BankDetailsProps {
   // Accordion
   /** Whether the accordion is open by default */
   defaultOpen?: boolean;
+  /** Controlled open state \u2014 use with onOpenChange for exclusive accordion behavior */
+  open?: boolean;
+  /** Callback fired when the panel is toggled \u2014 receives new open state */
+  onOpenChange?: (open: boolean) => void;
 
   // Callbacks
   /** Callback fired when a value is copied to clipboard */
@@ -11017,10 +11030,14 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
       loading = false,
       disabled = false,
       defaultOpen = true,
+      open,
+      onOpenChange,
       className,
     },
     ref
   ) => {
+    const isOpenControlled = open !== undefined;
+
     // Controlled/uncontrolled amount selection
     const isControlled = controlledAmount !== undefined;
     const [internalAmount, setInternalAmount] = React.useState<number | null>(
@@ -11189,7 +11206,12 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
         <Accordion
           type="single"
           variant="bordered"
-          defaultValue={defaultOpen ? ["wallet-topup"] : []}
+          {...(isOpenControlled
+            ? {
+                value: open ? ["wallet-topup"] : [],
+                onValueChange: (val) => onOpenChange?.(val.length > 0),
+              }
+            : { defaultValue: defaultOpen ? ["wallet-topup"] : [] })}
         >
           <AccordionItem value="wallet-topup">
             <AccordionTrigger className="px-4 py-4">
@@ -11537,6 +11559,10 @@ export interface WalletTopupProps {
   // Accordion
   /** Whether the accordion is open by default */
   defaultOpen?: boolean;
+  /** Controlled open state \u2014 use with onOpenChange for exclusive accordion behavior */
+  open?: boolean;
+  /** Callback fired when the panel is toggled \u2014 receives new open state */
+  onOpenChange?: (open: boolean) => void;
 
   // Styling
   /** Additional className for the root element */
@@ -11548,6 +11574,300 @@ export interface WalletTopupProps {
           name: "index.ts",
           content: prefixTailwindClasses(`export { WalletTopup } from "./wallet-topup";
 export type { WalletTopupProps, AmountOption } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "contact-form-modal": {
+      name: "contact-form-modal",
+      description: "A modal dialog for adding a new contact with phone number, country code, channel selector, and Start Conversation CTA",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "dialog",
+        "select",
+        "input",
+        "button"
+      ],
+      isMultiFile: true,
+      directory: "contact-form-modal",
+      mainFile: "contact-form-modal.tsx",
+      files: [
+        {
+          name: "contact-form-modal.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
+import { Input } from "../input";
+import { Button } from "../button";
+import type { ContactFormModalProps, CountryCodeOption } from "./types";
+
+/** Default country code options for the phone prefix selector */
+export const DEFAULT_COUNTRY_CODE_OPTIONS: CountryCodeOption[] = [
+  { value: "+91", label: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
+  { value: "+1", label: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { value: "+44", label: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
+  { value: "+61", label: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
+  { value: "+971", label: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
+  { value: "+65", label: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
+];
+
+/**
+ * ContactFormModal renders a dialog for adding a new contact. It provides
+ * fields for phone number (with country-code prefix), contact name, an
+ * optional channel selector, and a Start Conversation CTA.
+ *
+ * Install via CLI:
+ * \`\`\`bash
+ * npx myoperator-ui add contact-form-modal
+ * \`\`\`
+ *
+ * @example
+ * \`\`\`tsx
+ * <ContactFormModal
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   onStartConversation={() => console.log("start")}
+ * />
+ * \`\`\`
+ */
+export const ContactFormModal = React.forwardRef<
+  HTMLDivElement,
+  ContactFormModalProps
+>(
+  (
+    {
+      open,
+      onOpenChange,
+      phoneNumber: phoneNumberProp,
+      onPhoneNumberChange,
+      contactName: contactNameProp,
+      onContactNameChange,
+      countryCodeOptions = DEFAULT_COUNTRY_CODE_OPTIONS,
+      selectedCountryCode,
+      onCountryCodeChange,
+      channelOptions = [],
+      selectedChannel,
+      onChannelChange,
+      startConversationDisabled,
+      onStartConversation,
+      className,
+    },
+    ref
+  ) => {
+    const [internalPhone, setInternalPhone] = React.useState("");
+    const [internalName, setInternalName] = React.useState("");
+    const [internalCountryCode, setInternalCountryCode] = React.useState(
+      countryCodeOptions[0]?.value ?? "+91"
+    );
+
+    const phoneNumber =
+      phoneNumberProp !== undefined ? phoneNumberProp : internalPhone;
+    const contactName =
+      contactNameProp !== undefined ? contactNameProp : internalName;
+    const countryCode =
+      selectedCountryCode !== undefined
+        ? selectedCountryCode
+        : internalCountryCode;
+
+    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      if (phoneNumberProp === undefined) setInternalPhone(val);
+      onPhoneNumberChange?.(val);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      if (contactNameProp === undefined) setInternalName(val);
+      onContactNameChange?.(val);
+    };
+
+    const handleCountryCodeChange = (val: string) => {
+      if (selectedCountryCode === undefined) setInternalCountryCode(val);
+      onCountryCodeChange?.(val);
+    };
+
+    const isStartDisabled =
+      startConversationDisabled !== undefined
+        ? startConversationDisabled
+        : phoneNumber.trim() === "";
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          ref={ref}
+          className={cn("sm:max-w-[480px]", className)}
+        >
+          <DialogHeader>
+            <DialogTitle>Add New Contact</DialogTitle>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-4 py-2">
+            {/* Phone number */}
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-semantic-text-primary">
+                Phone <span>*</span>
+              </label>
+              <div className="flex gap-2">
+                {countryCodeOptions.length > 0 && (
+                  <Select
+                    value={countryCode}
+                    onValueChange={handleCountryCodeChange}
+                  >
+                    <SelectTrigger className="w-24 shrink-0">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {countryCodeOptions.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.flag ? \`\${opt.flag} \${opt.label}\` : opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+                <Input
+                  type="tel"
+                  placeholder="Enter phone number"
+                  value={phoneNumber}
+                  onChange={handlePhoneChange}
+                  className="flex-1"
+                />
+              </div>
+            </div>
+
+            {/* Contact name */}
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-semantic-text-primary">
+                Save contact as
+              </label>
+              <Input
+                type="text"
+                placeholder="Enter name"
+                value={contactName}
+                onChange={handleNameChange}
+              />
+            </div>
+
+            {/* Channel selector (optional) */}
+            {channelOptions.length > 0 && (
+              <div className="flex flex-col gap-1.5">
+                <label className="text-sm font-medium text-semantic-text-primary">
+                  Channel
+                </label>
+                <Select
+                  value={selectedChannel}
+                  onValueChange={onChannelChange}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select channel" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {channelOptions.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+
+          {/* CTA */}
+          <div className="flex justify-end pt-2">
+            <Button
+              onClick={onStartConversation}
+              disabled={isStartDisabled}
+            >
+              Start Conversation
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+ContactFormModal.displayName = "ContactFormModal";
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`/** An option in the channel selector */
+export interface ChannelOption {
+  value: string;
+  label: string;
+}
+
+/** A country code prefix option for the phone number field */
+export interface CountryCodeOption {
+  value: string;
+  label: string;
+  flag?: string;
+}
+
+/** Props for the ContactFormModal component */
+export interface ContactFormModalProps {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Callback when modal open state changes */
+  onOpenChange: (open: boolean) => void;
+
+  /** Controlled phone number value */
+  phoneNumber?: string;
+  /** Callback when phone number changes */
+  onPhoneNumberChange?: (value: string) => void;
+
+  /** Controlled contact name value */
+  contactName?: string;
+  /** Callback when contact name changes */
+  onContactNameChange?: (value: string) => void;
+
+  /** Country code options for the phone prefix selector */
+  countryCodeOptions?: CountryCodeOption[];
+  /** Currently selected country code value */
+  selectedCountryCode?: string;
+  /** Callback when country code changes */
+  onCountryCodeChange?: (value: string) => void;
+
+  /** Channel options for the channel selector (hidden when empty) */
+  channelOptions?: ChannelOption[];
+  /** Currently selected channel value */
+  selectedChannel?: string;
+  /** Callback when channel changes */
+  onChannelChange?: (value: string) => void;
+
+  /** Override to explicitly disable the Start Conversation button */
+  startConversationDisabled?: boolean;
+  /** Callback when Start Conversation is clicked */
+  onStartConversation?: () => void;
+
+  /** Additional className for the dialog content */
+  className?: string;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { ContactFormModal, DEFAULT_COUNTRY_CODE_OPTIONS } from "./contact-form-modal";
+export type { ContactFormModalProps, ChannelOption, CountryCodeOption } from "./types";
 `, prefix)
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.189",
+  "version": "0.0.190-beta.1",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",