myoperator-ui 0.0.188 → 0.0.190-beta.0

package/dist/index.js

@@ -8188,16 +8188,25 @@ export const AutoPaySetup = React.forwardRef<HTMLDivElement, AutoPaySetupProps>(
       loading = false,
       disabled = false,
       defaultOpen = true,
+      open,
+      onOpenChange,
       className,
     },
     ref
   ) => {
+    const isControlled = open !== undefined;
+
     return (
       <div ref={ref} className={cn("w-full", className)}>
         <Accordion
           type="single"
           variant="bordered"
-          defaultValue={defaultOpen ? ["auto-pay-setup"] : []}
+          {...(isControlled
+            ? {
+                value: open ? ["auto-pay-setup"] : [],
+                onValueChange: (val) => onOpenChange?.(val.length > 0),
+              }
+            : { defaultValue: defaultOpen ? ["auto-pay-setup"] : [] })}
         >
           <AccordionItem value="auto-pay-setup">
             <AccordionTrigger className="px-4 py-4">
@@ -8306,8 +8315,12 @@ export interface AutoPaySetupProps {
   disabled?: boolean;
 
   // Accordion
-  /** Whether the accordion is open by default */
+  /** Whether the accordion is open by default (uncontrolled) */
   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 */
@@ -11535,6 +11548,252 @@ 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 { ChevronDown } from "lucide-react";
+
+import { cn } from "../../../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "../dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
+import { Input } from "../input";
+import { Button } from "../button";
+import { DEFAULT_COUNTRY_CODE_OPTIONS } from "./types";
+import type { ContactFormModalProps } from "./types";
+
+const ContactFormModal = React.forwardRef<HTMLDivElement, ContactFormModalProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      channelOptions = [],
+      selectedChannel,
+      onChannelChange,
+      countryCodeOptions = DEFAULT_COUNTRY_CODE_OPTIONS,
+      countryCode = "+91",
+      onCountryCodeChange,
+      phoneNumber = "",
+      onPhoneNumberChange,
+      contactName = "",
+      onContactNameChange,
+      onStartConversation,
+      startConversationDisabled,
+      loading = false,
+      className,
+    },
+    ref
+  ) => {
+    const isDisabled =
+      startConversationDisabled ?? phoneNumber.trim().length === 0;
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          ref={ref}
+          size="sm"
+          className={cn("gap-6 p-6", className)}
+          aria-describedby={undefined}
+        >
+          {/* Header */}
+          <div className="flex items-center gap-2">
+            <DialogTitle className="flex-1 text-lg font-semibold text-semantic-text-primary leading-tight">
+              Add New Contact
+            </DialogTitle>
+
+            {channelOptions.length > 0 && (
+              <Select value={selectedChannel} onValueChange={onChannelChange}>
+                <SelectTrigger className="h-8 w-auto min-w-[72px] gap-1.5 border border-semantic-border-input bg-background px-2 py-1 text-sm font-semibold text-semantic-text-primary rounded">
+                  <SelectValue placeholder="Channel" />
+                  <ChevronDown className="h-[18px] w-[18px] shrink-0 opacity-60" />
+                </SelectTrigger>
+                <SelectContent>
+                  {channelOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {/* Fields */}
+          <div className="flex flex-col gap-4">
+            {/* Phone */}
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-semibold text-semantic-text-primary tracking-[0.014px]">
+                Phone
+                <span className="ml-0.5 text-xs text-semantic-error-primary">*</span>
+              </label>
+              <div className="flex items-center gap-3">
+                <Select value={countryCode} onValueChange={onCountryCodeChange}>
+                  <SelectTrigger className="h-10 w-auto min-w-[90px] shrink-0 border border-semantic-border-input bg-background px-4 py-2.5 text-sm font-semibold text-semantic-text-secondary rounded gap-2">
+                    <SelectValue />
+                    <ChevronDown className="h-[18px] w-[18px] shrink-0 opacity-60" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {countryCodeOptions.map((opt) => (
+                      <SelectItem key={opt.code} value={opt.code}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+
+                <Input
+                  type="tel"
+                  placeholder="Enter phone number"
+                  value={phoneNumber}
+                  onChange={(e) => onPhoneNumberChange?.(e.target.value)}
+                  className="flex-1"
+                />
+              </div>
+            </div>
+
+            {/* Contact name */}
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-semibold text-semantic-text-primary tracking-[0.014px]">
+                Save contact as
+              </label>
+              <Input
+                type="text"
+                placeholder="Enter name"
+                value={contactName}
+                onChange={(e) => onContactNameChange?.(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end">
+            <Button
+              variant="primary"
+              disabled={isDisabled}
+              loading={loading}
+              onClick={onStartConversation}
+            >
+              Start Conversation
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+ContactFormModal.displayName = "ContactFormModal";
+
+export { ContactFormModal };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`export interface ChannelOption {
+  value: string;
+  label: string;
+}
+
+export interface CountryCodeOption {
+  /** Dial code, e.g. "+91" */
+  code: string;
+  /** Display label shown in dropdown, e.g. "\u{1F1EE}\u{1F1F3} +91" */
+  label: string;
+}
+
+export const DEFAULT_COUNTRY_CODE_OPTIONS = [
+  { code: "+91", label: "\u{1F1EE}\u{1F1F3} +91" },
+  { code: "+1", label: "\u{1F1FA}\u{1F1F8} +1" },
+  { code: "+44", label: "\u{1F1EC}\u{1F1E7} +44" },
+  { code: "+971", label: "\u{1F1E6}\u{1F1EA} +971" },
+  { code: "+65", label: "\u{1F1F8}\u{1F1EC} +65" },
+];
+
+export interface ContactFormModalProps {
+  /** Controls modal visibility */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+
+  /** Channel selector options (e.g. MY01, MY02). Pass empty array to hide the selector. */
+  channelOptions?: ChannelOption[];
+  /** Currently selected channel value */
+  selectedChannel?: string;
+  /** Callback when channel changes */
+  onChannelChange?: (value: string) => void;
+
+  /** Country code options for the phone field */
+  countryCodeOptions?: CountryCodeOption[];
+  /** Currently selected country code (e.g. "+91") */
+  countryCode?: string;
+  /** Callback when country code changes */
+  onCountryCodeChange?: (code: string) => void;
+
+  /** Current phone number value */
+  phoneNumber?: string;
+  /** Callback when phone number changes */
+  onPhoneNumberChange?: (phone: string) => void;
+
+  /** Current contact name value */
+  contactName?: string;
+  /** Callback when contact name changes */
+  onContactNameChange?: (name: string) => void;
+
+  /** Callback when "Start Conversation" is clicked */
+  onStartConversation?: () => void;
+  /** Disable the Start Conversation button (auto-disabled when phoneNumber is empty) */
+  startConversationDisabled?: boolean;
+  /** Show loading state on Start Conversation button */
+  loading?: boolean;
+
+  /** Additional className for the dialog content */
+  className?: string;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { ContactFormModal } from "./contact-form-modal";
+export {
+  DEFAULT_COUNTRY_CODE_OPTIONS,
+} from "./types";
+export type {
+  ContactFormModalProps,
+  ChannelOption,
+  CountryCodeOption,
+} from "./types";
 `, prefix)
         }
       ]

package/package.json

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