myoperator-ui 0.0.160 → 0.0.162

package/dist/index.js

@@ -2900,7 +2900,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn("bg-[var(--color-neutral-50)] [&_tr]:border-b", className)}
+    className={cn("bg-[var(--color-neutral-100)] [&_tr]:border-b", className)}
     {...props}
   />
 ));
@@ -2925,7 +2925,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-[var(--color-neutral-50)] font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[var(--color-neutral-100)] font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -2973,7 +2973,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
       ref={ref}
       className={cn(
         "h-12 px-4 text-left align-middle font-medium text-semantic-text-muted text-sm [&:has([role=checkbox])]:pr-0",
-        sticky && "sticky left-0 bg-[var(--color-neutral-50)] z-10",
+        sticky && "sticky left-0 bg-[var(--color-neutral-100)] z-10",
         sortDirection && "cursor-pointer select-none",
         className
       )}
@@ -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.160",
+  "version": "0.0.162",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",