myoperator-ui 0.0.161 → 0.0.162

package/dist/index.js

@@ -8498,6 +8498,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 +8532,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 +8548,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 +8842,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.162",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",