myoperator-ui 0.0.161 → 0.0.163

package/dist/index.js

@@ -8206,7 +8206,7 @@ export type {
     },
     "payment-option-card": {
       name: "payment-option-card",
-      description: "A selectable payment method list with icons, titles, and descriptions",
+      description: "A selectable payment method list with icons, titles, and descriptions. Includes a modal variant for overlay usage.",
       category: "custom",
       dependencies: [
         "clsx",
@@ -8214,7 +8214,8 @@ export type {
         "lucide-react"
       ],
       internalDependencies: [
-        "button"
+        "button",
+        "dialog"
       ],
       isMultiFile: true,
       directory: "payment-option-card",
@@ -8359,6 +8360,96 @@ export const PaymentOptionCard = React.forwardRef<
 );
 
 PaymentOptionCard.displayName = "PaymentOptionCard";
+`, prefix)
+        },
+        {
+          name: "payment-option-card-modal.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "../dialog";
+import { PaymentOptionCard } from "./payment-option-card";
+import type { PaymentOptionCardModalProps } from "./types";
+
+/**
+ * PaymentOptionCardModal wraps the PaymentOptionCard in a centered Dialog overlay.
+ * Use this when you want to show payment method selection as a modal popup rather
+ * than an inline card.
+ *
+ * @example
+ * \`\`\`tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <PaymentOptionCardModal
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   options={paymentOptions}
+ *   onOptionSelect={(id) => console.log(id)}
+ *   onCtaClick={() => { handlePayment(); setOpen(false); }}
+ * />
+ * \`\`\`
+ */
+export const PaymentOptionCardModal = React.forwardRef<
+  HTMLDivElement,
+  PaymentOptionCardModalProps
+>(
+  (
+    {
+      open,
+      onOpenChange,
+      title,
+      subtitle,
+      options,
+      selectedOptionId,
+      defaultSelectedOptionId,
+      onOptionSelect,
+      ctaText,
+      onCtaClick,
+      loading,
+      disabled,
+      className,
+    },
+    ref
+  ) => {
+    const handleClose = () => {
+      onOpenChange(false);
+    };
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          ref={ref}
+          size="sm"
+          hideCloseButton
+          className="p-0 border-0 bg-transparent shadow-none"
+        >
+          {/* Visually hidden title for accessibility */}
+          <DialogTitle className="sr-only">
+            {title || "Select payment method"}
+          </DialogTitle>
+          <PaymentOptionCard
+            title={title}
+            subtitle={subtitle}
+            options={options}
+            selectedOptionId={selectedOptionId}
+            defaultSelectedOptionId={defaultSelectedOptionId}
+            onOptionSelect={onOptionSelect}
+            ctaText={ctaText}
+            onCtaClick={onCtaClick}
+            onClose={handleClose}
+            loading={loading}
+            disabled={disabled}
+            className={className}
+          />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+PaymentOptionCardModal.displayName = "PaymentOptionCardModal";
 `, prefix)
         },
         {
@@ -8408,12 +8499,30 @@ export interface PaymentOptionCardProps {
   /** Additional className for the root element */
   className?: string;
 }
+
+/**
+ * Props for the PaymentOptionCardModal component.
+ * Extends the card props with Dialog open/close control, omitting \`onClose\`
+ * which is handled internally by the modal.
+ */
+export interface PaymentOptionCardModalProps
+  extends Omit<PaymentOptionCardProps, "onClose"> {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Callback when modal should open or close */
+  onOpenChange: (open: boolean) => void;
+}
 `, prefix)
         },
         {
           name: "index.ts",
           content: prefixTailwindClasses(`export { PaymentOptionCard } from "./payment-option-card";
-export type { PaymentOptionCardProps, PaymentOption } from "./types";
+export { PaymentOptionCardModal } from "./payment-option-card-modal";
+export type {
+  PaymentOptionCardProps,
+  PaymentOptionCardModalProps,
+  PaymentOption,
+} from "./types";
 `, prefix)
         }
       ]
@@ -8498,6 +8607,8 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
       voucherLinkText = "Have an offline code or voucher?",
       voucherIcon = <Ticket className="size-4" />,
       onVoucherClick,
+      showVoucherInput: controlledShowVoucherInput,
+      onShowVoucherInputChange,
       voucherCode: controlledVoucherCode,
       onVoucherCodeChange,
       voucherCodePlaceholder = "XXXX-XXXX-XXXX",
@@ -8530,8 +8641,15 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
       ? controlledCustomAmount
       : internalCustom;
 
+    // Voucher input visibility (controlled/uncontrolled)
+    const isVoucherInputControlled = controlledShowVoucherInput !== undefined;
+    const [internalShowVoucherInput, setInternalShowVoucherInput] =
+      React.useState(false);
+    const showVoucherInput = isVoucherInputControlled
+      ? controlledShowVoucherInput
+      : internalShowVoucherInput;
+
     // Voucher code input state
-    const [showVoucherInput, setShowVoucherInput] = React.useState(false);
     const isVoucherCodeControlled = controlledVoucherCode !== undefined;
     const [internalVoucherCode, setInternalVoucherCode] = React.useState("");
     const voucherCodeValue = isVoucherCodeControlled
@@ -8539,12 +8657,18 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
       : internalVoucherCode;
 
     const handleVoucherLinkClick = () => {
-      setShowVoucherInput(true);
+      if (!isVoucherInputControlled) {
+        setInternalShowVoucherInput(true);
+      }
+      onShowVoucherInputChange?.(true);
       onVoucherClick?.();
     };
 
     const handleVoucherCancel = () => {
-      setShowVoucherInput(false);
+      if (!isVoucherInputControlled) {
+        setInternalShowVoucherInput(false);
+      }
+      onShowVoucherInputChange?.(false);
       if (!isVoucherCodeControlled) {
         setInternalVoucherCode("");
       }
@@ -8827,6 +8951,12 @@ export interface WalletTopupProps {
   /** Callback when voucher link is clicked (also toggles inline code input) */
   onVoucherClick?: () => void;
 
+  // Voucher input visibility
+  /** Whether the voucher input is visible (controlled). When provided, the component won't toggle visibility internally. */
+  showVoucherInput?: boolean;
+  /** Callback when voucher input visibility changes (from link click or cancel) */
+  onShowVoucherInputChange?: (show: boolean) => void;
+
   // Voucher code input
   /** Voucher code value (controlled) */
   voucherCode?: string;

package/package.json

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