myoperator-ui 0.0.165 → 0.0.167-beta.0

package/dist/index.js

@@ -8566,158 +8566,1380 @@ import {
   DialogTitle,
 } from "../dialog";
 import { PaymentOptionCard } from "./payment-option-card";
-import type { PaymentOptionCardModalProps } from "./types";
+import type { PaymentOptionCardProps } from "./types";
+
+interface PaymentOptionCardModalProps
+  extends Omit<PaymentOptionCardProps, "onClose"> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * 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)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+/**
+ * A single payment option entry.
+ */
+export interface PaymentOption {
+  /** Unique identifier for this option */
+  id: string;
+  /** Icon rendered inside a rounded container (e.g. an SVG or Lucide icon) */
+  icon: React.ReactNode;
+  /** Primary label (e.g. "Net banking") */
+  title: string;
+  /** Secondary description (e.g. "Pay securely through your bank") */
+  description: string;
+}
+
+/**
+ * Props for the PaymentOptionCard component.
+ */
+export interface PaymentOptionCardProps {
+  /** Header title */
+  title?: string;
+  /** Header subtitle */
+  subtitle?: string;
+  /** List of selectable payment options */
+  options: PaymentOption[];
+  /** Currently selected option id */
+  selectedOptionId?: string;
+  /** Default selected option id (uncontrolled mode) */
+  defaultSelectedOptionId?: string;
+  /** Callback fired when an option is selected */
+  onOptionSelect?: (optionId: string) => void;
+  /** CTA button text */
+  ctaText?: string;
+  /** Callback fired when CTA button is clicked */
+  onCtaClick?: () => void;
+  /** Callback fired when close button is clicked */
+  onClose?: () => void;
+  /** Whether the CTA button shows loading state */
+  loading?: boolean;
+  /** Whether the CTA button is disabled */
+  disabled?: boolean;
+  /** Additional className for the root element */
+  className?: string;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { PaymentOptionCard } from "./payment-option-card";
+export { PaymentOptionCardModal } from "./payment-option-card-modal";
+export type { PaymentOptionCardProps, PaymentOption } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "let-us-drive-card": {
+      name: "let-us-drive-card",
+      description: "A managed service card with pricing, billing badge, 'Show details' link, and CTA for the full-service management section",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      internalDependencies: [
+        "button",
+        "badge"
+      ],
+      isMultiFile: true,
+      directory: "let-us-drive-card",
+      mainFile: "let-us-drive-card.tsx",
+      files: [
+        {
+          name: "let-us-drive-card.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../button";
+import { Badge } from "../badge";
+import type { LetUsDriveCardProps } from "./types";
+
+/**
+ * LetUsDriveCard displays a managed service offering with pricing, billing
+ * frequency badge, and a CTA. Used in the "Let us drive \u2014 Full-service
+ * management" section of the pricing page.
+ *
+ * Supports a "free/discount" state where the original price is shown with
+ * strikethrough and a green label (e.g., "FREE") replaces it.
+ *
+ * @example
+ * \`\`\`tsx
+ * <LetUsDriveCard
+ *   title="Account Manager"
+ *   price="15,000"
+ *   period="/month"
+ *   billingBadge="Annually"
+ *   description="One expert who knows your business. And moves it forward."
+ *   onShowDetails={() => console.log("details")}
+ *   onCtaClick={() => console.log("talk")}
+ * />
+ * \`\`\`
+ */
+const LetUsDriveCard = React.forwardRef<HTMLDivElement, LetUsDriveCardProps>(
+  (
+    {
+      title,
+      price,
+      period,
+      startsAt = false,
+      billingBadge,
+      description,
+      freeLabel,
+      showDetailsLabel = "Show details",
+      ctaLabel = "Talk to us",
+      onShowDetails,
+      onCtaClick,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col gap-6 rounded-[14px] border border-semantic-border-layout bg-card p-5",
+          className
+        )}
+        {...props}
+      >
+        {/* Header: title + optional billing badge */}
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold text-semantic-text-primary m-0">
+            {title}
+          </h3>
+          {billingBadge && (
+            <Badge
+              size="sm"
+              className="bg-semantic-info-surface text-semantic-info-primary font-normal"
+            >
+              {billingBadge}
+            </Badge>
+          )}
+        </div>
+
+        {/* Price section */}
+        <div className="flex flex-col gap-2.5">
+          {startsAt && (
+            <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
+              Starts at
+            </span>
+          )}
+          <div className="flex gap-1 items-end">
+            {freeLabel ? (
+              <span className="text-[28px] font-semibold leading-[36px]">
+                <span className="line-through text-semantic-text-muted">
+                  \u20B9{price}
+                </span>{" "}
+                <span className="text-semantic-success-primary">
+                  {freeLabel}
+                </span>
+              </span>
+            ) : (
+              <span className="text-[28px] font-semibold leading-[36px] text-semantic-text-primary">
+                \u20B9{price}
+              </span>
+            )}
+            {period && (
+              <span className="text-sm text-semantic-text-muted tracking-[0.035px]">
+                {period}
+              </span>
+            )}
+          </div>
+
+          {/* Description */}
+          <p className="text-sm text-semantic-text-secondary tracking-[0.035px] m-0">
+            {description}
+          </p>
+        </div>
+
+        {/* Actions: Show details link + CTA button */}
+        <div className="flex flex-col gap-3 w-full">
+          {onShowDetails && (
+            <Button
+              variant="link"
+              className="text-semantic-text-link p-0 h-auto min-w-0 justify-start"
+              onClick={onShowDetails}
+            >
+              {showDetailsLabel}
+            </Button>
+          )}
+          <Button variant="outline" className="w-full" onClick={onCtaClick}>
+            {ctaLabel}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+
+LetUsDriveCard.displayName = "LetUsDriveCard";
+
+export { LetUsDriveCard };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+/**
+ * Props for the LetUsDriveCard component.
+ */
+export interface LetUsDriveCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Service title (e.g., "Dedicated Onboarding", "Account Manager") */
+  title: string;
+  /** Price amount as formatted string (e.g., "20,000", "15,000") */
+  price: string;
+  /** Billing period label (e.g., "/one-time fee", "/month") */
+  period?: string;
+  /** Show "Starts at" prefix above the price */
+  startsAt?: boolean;
+  /** Billing frequency badge text (e.g., "Annually", "Quarterly") */
+  billingBadge?: string;
+  /** Service description text */
+  description: string;
+  /** When provided, price is shown with strikethrough and this label (e.g., "FREE") is displayed in green */
+  freeLabel?: string;
+  /** Text for the details link (default: "Show details") */
+  showDetailsLabel?: string;
+  /** CTA button text (default: "Talk to us") */
+  ctaLabel?: string;
+  /** Callback when "Show details" link is clicked */
+  onShowDetails?: () => void;
+  /** Callback when CTA button is clicked */
+  onCtaClick?: () => void;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { LetUsDriveCard } from "./let-us-drive-card";
+export type { LetUsDriveCardProps } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "power-up-card": {
+      name: "power-up-card",
+      description: "An add-on service card with icon, title, pricing, description, and CTA button for the power-ups section",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      internalDependencies: [
+        "button"
+      ],
+      isMultiFile: true,
+      directory: "power-up-card",
+      mainFile: "power-up-card.tsx",
+      files: [
+        {
+          name: "power-up-card.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../button";
+import type { PowerUpCardProps } from "./types";
+
+/**
+ * PowerUpCard displays an add-on service with icon, pricing, description,
+ * and a CTA button. Used in the "Power-ups and charges" section of
+ * the pricing page.
+ *
+ * @example
+ * \`\`\`tsx
+ * <PowerUpCard
+ *   icon={<PhoneCall className="size-6" />}
+ *   title="Auto-Dialer"
+ *   price="Starts @ \u20B9700/user/month"
+ *   description="Available for SUV & Enterprise plans as an add-on per user."
+ *   onCtaClick={() => console.log("clicked")}
+ * />
+ * \`\`\`
+ */
+const PowerUpCard = React.forwardRef<HTMLDivElement, PowerUpCardProps>(
+  (
+    {
+      icon,
+      title,
+      price,
+      description,
+      ctaLabel = "Talk to us",
+      onCtaClick,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col justify-between gap-8 rounded-md border border-semantic-border-layout bg-card p-5",
+          className
+        )}
+        {...props}
+      >
+        {/* Content */}
+        <div className="flex flex-col gap-4">
+          {/* Icon + title/price row */}
+          <div className="flex gap-4 items-start">
+            {icon && (
+              <div className="flex items-center justify-center size-[47px] rounded bg-[var(--color-info-25)] shrink-0">
+                {icon}
+              </div>
+            )}
+            <div className="flex flex-col gap-2 min-w-0">
+              <h3 className="text-base font-semibold text-semantic-text-primary m-0 leading-normal">
+                {title}
+              </h3>
+              <p className="text-sm text-semantic-text-primary tracking-[0.035px] m-0 leading-normal">
+                {price}
+              </p>
+            </div>
+          </div>
+
+          {/* Description */}
+          <p className="text-sm text-semantic-text-secondary tracking-[0.035px] m-0 leading-normal">
+            {description}
+          </p>
+        </div>
+
+        {/* CTA */}
+        <Button variant="outline" className="w-full" onClick={onCtaClick}>
+          {ctaLabel}
+        </Button>
+      </div>
+    );
+  }
+);
+
+PowerUpCard.displayName = "PowerUpCard";
+
+export { PowerUpCard };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+/**
+ * Props for the PowerUpCard component.
+ */
+export interface PowerUpCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Icon or illustration displayed in the tinted container */
+  icon?: React.ReactNode;
+  /** Service title (e.g., "Truecaller business") */
+  title: string;
+  /** Pricing text (e.g., "Starts @ \u20B930,000/month") */
+  price: string;
+  /** Description explaining the service value */
+  description: string;
+  /** CTA button label (default: "Talk to us") */
+  ctaLabel?: string;
+  /** Callback when CTA button is clicked */
+  onCtaClick?: () => void;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { PowerUpCard } from "./power-up-card";
+export type { PowerUpCardProps } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "pricing-card": {
+      name: "pricing-card",
+      description: "A pricing tier card with plan name, pricing, feature checklist, CTA button, and optional popularity badge and addon footer",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "button",
+        "badge"
+      ],
+      isMultiFile: true,
+      directory: "pricing-card",
+      mainFile: "pricing-card.tsx",
+      files: [
+        {
+          name: "pricing-card.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../button";
+import { Badge } from "../badge";
+import { CircleCheck } from "lucide-react";
+import type { PricingCardProps } from "./types";
+
+/**
+ * PricingCard displays a plan tier with pricing, features, and a CTA button.
+ * Supports current-plan state (outlined button), popularity badge, and an
+ * optional add-on footer.
+ *
+ * @example
+ * \`\`\`tsx
+ * <PricingCard
+ *   planName="Compact"
+ *   price="2,5000"
+ *   planDetails="3 Users | 12 Month plan"
+ *   description="For small teams that need a WhatsApp-first plan"
+ *   headerBgColor="#d7eae9"
+ *   features={["WhatsApp Campaigns", "Missed Call Tracking"]}
+ *   onCtaClick={() => console.log("selected")}
+ *   onFeatureDetails={() => console.log("details")}
+ * />
+ * \`\`\`
+ */
+const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
+  (
+    {
+      planName,
+      price,
+      period = "/Month",
+      planDetails,
+      planIcon,
+      description,
+      headerBgColor,
+      features = [],
+      isCurrentPlan = false,
+      showPopularBadge = false,
+      badgeText = "MOST POPULAR",
+      ctaText,
+      onCtaClick,
+      onFeatureDetails,
+      addon,
+      usageDetails,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const buttonText =
+      ctaText || (isCurrentPlan ? "Current plan" : "Select plan");
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col gap-6 rounded-t-xl rounded-b-lg border border-semantic-border-layout p-4",
+          className
+        )}
+        {...props}
+      >
+        {/* Header */}
+        <div
+          className="flex flex-col gap-4 rounded-t-xl rounded-b-lg p-4"
+          style={
+            headerBgColor ? { backgroundColor: headerBgColor } : undefined
+          }
+        >
+          {/* Plan name + badge */}
+          <div className="flex items-center gap-4">
+            <h3 className="text-xl font-semibold text-semantic-text-primary m-0">
+              {planName}
+            </h3>
+            {showPopularBadge && (
+              <Badge
+                size="sm"
+                className="bg-[#e3fdfe] text-[#119ba8] uppercase tracking-wider font-semibold"
+              >
+                {badgeText}
+              </Badge>
+            )}
+          </div>
+
+          {/* Price */}
+          <div className="flex flex-col gap-2.5">
+            <div className="flex items-end gap-1">
+              <span className="text-4xl leading-[44px] text-semantic-text-primary">
+                \u20B9{price}
+              </span>
+              <span className="text-sm text-semantic-text-muted tracking-[0.035px]">
+                {period}
+              </span>
+            </div>
+            {planDetails && (
+              <p className="text-sm tracking-[0.035px] text-semantic-text-primary m-0">
+                {planDetails}
+              </p>
+            )}
+          </div>
+
+          {/* Plan icon */}
+          {planIcon && <div className="size-[30px]">{planIcon}</div>}
+
+          {/* Description */}
+          {description && (
+            <p className="text-sm text-semantic-text-secondary tracking-[0.035px] m-0">
+              {description}
+            </p>
+          )}
+
+          {/* Feature details link + CTA */}
+          <div className="flex flex-col gap-3.5 w-full">
+            {onFeatureDetails && (
+              <div className="flex justify-center">
+                <Button
+                  variant="link"
+                  className="text-semantic-text-link p-0 h-auto min-w-0"
+                  onClick={onFeatureDetails}
+                >
+                  Feature details
+                </Button>
+              </div>
+            )}
+            <Button
+              variant={isCurrentPlan ? "outline" : "default"}
+              className="w-full"
+              onClick={onCtaClick}
+            >
+              {buttonText}
+            </Button>
+          </div>
+        </div>
+
+        {/* Features */}
+        {features.length > 0 && (
+          <div className="flex flex-col gap-4">
+            <p className="text-sm font-semibold text-semantic-text-primary tracking-[0.014px] uppercase m-0">
+              Includes
+            </p>
+            <div className="flex flex-col gap-4">
+              {features.map((feature, index) => {
+                const text =
+                  typeof feature === "string" ? feature : feature.text;
+                const isBold =
+                  typeof feature !== "string" && feature.bold;
+                return (
+                  <div key={index} className="flex items-start gap-2">
+                    <CircleCheck className="size-[18px] text-semantic-text-secondary shrink-0 mt-0.5" />
+                    <span
+                      className={cn(
+                        "text-sm text-semantic-text-secondary tracking-[0.035px]",
+                        isBold && "font-semibold"
+                      )}
+                    >
+                      {text}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Addon */}
+        {addon && (
+          <div className="flex items-center gap-2.5 rounded-md bg-[var(--color-info-25)] border border-[#f3f5f6] pl-4 py-2.5">
+            {addon.icon && (
+              <div className="size-5 shrink-0">{addon.icon}</div>
+            )}
+            <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
+              {addon.text}
+            </span>
+          </div>
+        )}
+
+        {/* Usage Details */}
+        {usageDetails && usageDetails.length > 0 && (
+          <div className="flex flex-col gap-2.5 rounded-md bg-[var(--color-info-25)] border border-[#f3f5f6] px-4 py-2.5">
+            {usageDetails.map((detail, index) => (
+              <div key={index} className="flex items-start gap-2">
+                <span className="size-1.5 rounded-full bg-semantic-primary shrink-0 mt-[7px]" />
+                <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
+                  <strong>{detail.label}:</strong> {detail.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+PricingCard.displayName = "PricingCard";
+
+export { PricingCard };
+`, prefix)
+        },
+        {
+          name: "plan-icons.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+interface PlanIconProps extends React.SVGAttributes<SVGElement> {
+  className?: string;
+}
+
+const CompactCarIcon = React.forwardRef<SVGSVGElement, PlanIconProps>(
+  ({ className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      className={className}
+      viewBox="0 0 30 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <ellipse cx="25.2" cy="14.72" rx="3.33" ry="3.03" fill="white" />
+      <path
+        d="M25.12 11.21c-1.95 0-3.5 1.56-3.5 3.5 0 1.95 1.55 3.5 3.5 3.5 1.94 0 3.5-1.55 3.5-3.5 0-1.94-1.56-3.5-3.5-3.5zm0 5.45c-1.09 0-2.02-.93-2.02-2.02s.93-2.02 2.02-2.02 2.02.93 2.02 2.02-.93 2.02-2.02 2.02z"
+        stroke="#2BBAC8"
+        strokeLinejoin="round"
+      />
+      <ellipse cx="4.09" cy="14.72" rx="3.33" ry="3.03" fill="white" />
+      <path
+        d="M4.26 11.21c-1.95 0-3.5 1.56-3.5 3.5 0 1.95 1.55 3.5 3.5 3.5 1.94 0 3.5-1.55 3.5-3.5 0-1.94-1.56-3.5-3.5-3.5zm0 5.45c-1.09 0-2.02-.93-2.02-2.02s.93-2.02 2.02-2.02 2.02.93 2.02 2.02-.93 2.02-2.02 2.02z"
+        stroke="#2BBAC8"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M28.85 12.38c-.08-.16-.31-.31-.39-.47-.16-.39-.16-1.09-.23-1.48-.31-1.17-1.17-2.02-2.02-2.72-1.64-1.25-3.66-2.57-5.45-3.74C18 2.11 15.85.78 12.35.63c-1.79-.08-4.51 0-6.23.23-.15 0-1.4.31-1.24.62 1.25.23.55.93.24 1.63-.31.62-1.09 2.49-1.64 2.8-.15 0-.23.08-.31 0-.23-.31.16-1.4.31-1.71.16-.47.86-1.4.93-1.79 0-.31 0-.7-.39-.62L2.62 4.75c-.62 1.17-.62 2.18-.78 3.42-.15 1.56-1.09 2.88-1.24 4.36 0 .16 0 .39 0 .54.08.31.23.31.47.08.54-1.17 1.71-2.02 3.11-2.02 1.4 0 3.5 1.56 3.5 3.5s-.08 1.86-.23 2.25l.85-.08h11.75c.78-.08 1.4-.47 1.56-1.24 0-1.79 1.56-3.35 3.5-3.35 1.95 0 3.5 1.56 3.5 3.5 0 1.95-.16.93 0 1.09 1.09-.54.86-2.57.23-3.35v-.08z"
+        fill="white"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.02 1.41c3.81-.23 8.56 1.4 11.44 3.89 2.88 2.49 1.79 1.64.16 1.79-3.58-.31-7.16-.62-10.74-.93-.86 0-2.65 0-3.27-.47-.62-.47-.54-1.87-.23-2.72.54-1.25 1.4-1.48 2.64-1.56z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+);
+CompactCarIcon.displayName = "CompactCarIcon";
+
+const SedanCarIcon = React.forwardRef<SVGSVGElement, PlanIconProps>(
+  ({ className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      className={className}
+      viewBox="0 0 31 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <ellipse cx="24.98" cy="9.51" rx="2.19" ry="2.56" fill="white" />
+      <path
+        d="M24.8 7.16c-1.33 0-2.38 1.09-2.38 2.45 0 1.37 1.05 2.46 2.38 2.46 1.33 0 2.38-1.09 2.38-2.46 0-1.36-1.05-2.45-2.38-2.45zm0 3.82c-.74 0-1.38-.66-1.38-1.42 0-.76.64-1.42 1.38-1.42.74 0 1.38.66 1.38 1.42 0 .76-.64 1.42-1.38 1.42z"
+        stroke="#2BBAC8"
+        strokeLinejoin="round"
+      />
+      <ellipse cx="6.33" cy="9.51" rx="2.19" ry="2.56" fill="white" />
+      <path
+        d="M6.32 7.16c-1.32 0-2.38 1.09-2.38 2.45 0 1.37 1.06 2.46 2.38 2.46 1.33 0 2.39-1.09 2.39-2.46 0-1.36-1.06-2.45-2.39-2.45zm0 3.82c-.74 0-1.38-.66-1.38-1.42 0-.76.64-1.42 1.38-1.42.74 0 1.38.66 1.38 1.42 0 .76-.64 1.42-1.38 1.42z"
+        stroke="#2BBAC8"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M29.7 7.79l-.24.81c0 .08-.16.4-.23.49-.24.16-1.97.57-2.05.49.24-1.22-.47-2.6-1.57-3 -2.05-.81-4.09 1.05-3.54 3.24H8.99v-.81c0-.32-.39-1.05-.55-1.3C7.03 5.6 4.27 6.33 3.8 8.6c-.47 2.27 0 .49 0 .49l-2.28-.41C.81 8.27.49 7.14.73 6.33c.23-.81.39-.57.39-.73.08-.49-.16-1.62.16-2.03.31-.4 1.97-.4 2.44-.57 1.42-.4 2.76-1.22 4.17-1.62 2.91-.89 6.61-1.05 9.53 0 2.91 1.05 3.7 1.95 5.51 2.51 1.81.57 4.09.65 5.83 1.62 1.73.97.62 1.05.93 1.78v.57z"
+        fill="white"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.48 1.38l.63 2.6 4.8.16c0-.32 0-.64.32-.89-1.58-1.38-3.78-1.78-5.83-1.87h.08z"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.99 1.87s-.63.97-.63 1.05c0 .16.16.65.24.81l4.41.16-.39-2.51c-.87 0-1.81 0-2.68.16-.87.16-.87.16-.95.24v.09z"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.08 3.81h1.18l1.26-1.78c-.47.32-2.2.81-2.36 1.3-.16.49 0 .32 0 .49h-.08z"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+);
+SedanCarIcon.displayName = "SedanCarIcon";
+
+const SuvCarIcon = React.forwardRef<SVGSVGElement, PlanIconProps>(
+  ({ className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      className={className}
+      viewBox="0 0 32 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <ellipse cx="25.57" cy="11.14" rx="2.65" ry="2.78" fill="white" />
+      <ellipse cx="9.12" cy="11.14" rx="2.89" ry="2.78" fill="white" />
+      <path
+        d="M25.32 8.18c-1.61 0-2.9 1.3-2.9 2.94 0 1.63 1.29 2.93 2.9 2.93 1.62 0 2.9-1.3 2.9-2.93 0-1.64-1.28-2.94-2.9-2.94zm0 4.57c-.9 0-1.68-.78-1.68-1.7 0-.91.78-1.69 1.68-1.69.9 0 1.68.78 1.68 1.7 0 .91-.78 1.69-1.68 1.69z"
+        stroke="#2BBAC8"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <ellipse cx="9.14" cy="11.09" rx="1.4" ry="1.37" fill="white" />
+      <path
+        d="M8.96 8.18c-1.61 0-2.9 1.3-2.9 2.94 0 1.63 1.29 2.93 2.9 2.93 1.61 0 2.9-1.3 2.9-2.93 0-1.64-1.29-2.94-2.9-2.94zm0 4.57c-.9 0-1.68-.78-1.68-1.7 0-.91.78-1.69 1.68-1.69.9 0 1.68.78 1.68 1.7 0 .91-.78 1.69-1.68 1.69z"
+        stroke="#2BBAC8"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M30.6 10.78l-.26.99c-.3 1-.36.56-1.09.64.48-3.15-2.66-5.79-5.13-3.7-.43.37-1.18 1.52-1.18 2.1v1.5H12.06c.33-2.62-1.84-5.01-4.24-4.06-1.53.61-2.13 2.39-1.98 4.06-1.61-.14-3.18.68-3.39-1.7-.05-.6.07-1.21-.04-1.8-.65-.34-1.63.37-1.75-.77C.57 7.13.59 4.97.67 4.03c.03-.33.06-.79.43-.87.28-.06 1.83-.08 1.83.26v1.49l.29-.06c.67-1.75.59-3.97 2.76-4.15 3.76-.3 7.87.23 11.67.02 1.75.22 4.02 3.02 5.39 4.18 1.24.15 2.5.24 3.73.44.5.09 1.95.3 2.31.56.7.49.57 2.79.67 2.91.02.03.37.04.56.26.19.23.12.47.28.67v1.03z"
+        fill="white"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.32 1.53c.25 1.41.16 2.98.61 4.32h6.22l.1-.21c-.48-1.34-1.41-2.72-2.51-3.53-.15-.11-.86-.59-.98-.59h-3.44z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.71 1.53l-.19 4.32h4.33c-.17-1.3-.17-2.78-.38-4.06-.02-.12-.04-.2-.14-.26H9.71z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.58 5.84l.29-4.07-.09-.31c-1.1.07-2.89-.32-3.46.95-.23.51-.74 2.67-.74 3.2 0 .12.01.13.1.21h3.91v-.01z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+);
+SuvCarIcon.displayName = "SuvCarIcon";
+
+export { CompactCarIcon, SedanCarIcon, SuvCarIcon };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+/**
+ * Add-on info displayed at the bottom of the pricing card.
+ */
+export interface PricingCardAddon {
+  /** Icon rendered in the addon section */
+  icon?: React.ReactNode;
+  /** Addon description text */
+  text: string;
+}
+
+/**
+ * A single usage detail item (e.g., "Usage: Includes 2,000 AI conversations/month").
+ */
+export interface UsageDetail {
+  /** Bold label (e.g., "Usage") */
+  label: string;
+  /** Value text (e.g., "Includes 2,000 AI conversations/month") */
+  value: string;
+}
+
+/**
+ * A feature can be a plain string or an object with bold styling.
+ */
+export type PricingCardFeature = string | { text: string; bold?: boolean };
+
+/**
+ * Props for the PricingCard component.
+ */
+export interface PricingCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Plan name displayed in the header (e.g., "Compact", "Sedan", "SUV") */
+  planName: string;
+  /** Price amount as formatted string (e.g., "2,5000") */
+  price: string;
+  /** Billing period label (default: "/Month") */
+  period?: string;
+  /** Plan detail line (e.g., "3 Users | 12 Month plan") */
+  planDetails?: React.ReactNode;
+  /** Plan icon or illustration */
+  planIcon?: React.ReactNode;
+  /** Plan description text */
+  description?: string;
+  /** Background color for the header section */
+  headerBgColor?: string;
+  /** List of included features shown with checkmarks. Supports bold items via object form. */
+  features?: PricingCardFeature[];
+  /** Whether this is the currently active plan (shows outlined button) */
+  isCurrentPlan?: boolean;
+  /** Show a popularity badge next to the plan name */
+  showPopularBadge?: boolean;
+  /** Custom badge text (defaults to "MOST POPULAR") */
+  badgeText?: string;
+  /** Custom CTA button text (overrides default "Select plan" / "Current plan") */
+  ctaText?: string;
+  /** Callback when CTA button is clicked */
+  onCtaClick?: () => void;
+  /** Callback when "Feature details" link is clicked */
+  onFeatureDetails?: () => void;
+  /** Add-on info displayed at the bottom of the card */
+  addon?: PricingCardAddon;
+  /** Usage details displayed in a bulleted list at the bottom (e.g., AIO plan) */
+  usageDetails?: UsageDetail[];
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { PricingCard } from "./pricing-card";
+export { CompactCarIcon, SedanCarIcon, SuvCarIcon } from "./plan-icons";
+export type {
+  PricingCardProps,
+  PricingCardAddon,
+  PricingCardFeature,
+  UsageDetail,
+} from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "pricing-page": {
+      name: "pricing-page",
+      description: "A full pricing page layout composing plan-type tabs, billing toggle, pricing cards grid, power-ups section, and let-us-drive managed services section",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "button",
+        "page-header",
+        "pricing-toggle",
+        "pricing-card",
+        "power-up-card",
+        "let-us-drive-card"
+      ],
+      isMultiFile: true,
+      directory: "pricing-page",
+      mainFile: "pricing-page.tsx",
+      files: [
+        {
+          name: "pricing-page.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { PageHeader } from "../page-header";
+import { Button } from "../button";
+import { PricingToggle } from "../pricing-toggle/pricing-toggle";
+import { PricingCard } from "../pricing-card/pricing-card";
+import { PowerUpCard } from "../power-up-card/power-up-card";
+import { LetUsDriveCard } from "../let-us-drive-card/let-us-drive-card";
+import { ExternalLink } from "lucide-react";
+import type { PricingPageProps } 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.
+ * PricingPage composes all plan-selection sub-components into a full
+ * page layout: header, plan-type tabs with billing toggle, pricing
+ * cards grid, power-ups section, and let-us-drive section.
+ *
+ * Supports controlled or uncontrolled tab / billing state.
  *
  * @example
  * \`\`\`tsx
- * const [open, setOpen] = useState(false);
- *
- * <PaymentOptionCardModal
- *   open={open}
- *   onOpenChange={setOpen}
- *   options={paymentOptions}
- *   onOptionSelect={(id) => console.log(id)}
- *   onCtaClick={() => { handlePayment(); setOpen(false); }}
+ * <PricingPage
+ *   tabs={[
+ *     { label: "Team-Led Plans", value: "team" },
+ *     { label: "Go-AI First", value: "ai" },
+ *   ]}
+ *   planCards={compactCard, sedanCard, suvCard}
+ *   powerUpCards={[truecaller, tollFree, autoDialer]}
+ *   letUsDriveCards={[onboarding, accountMgr, managed]}
  * />
  * \`\`\`
  */
-export const PaymentOptionCardModal = React.forwardRef<
-  HTMLDivElement,
-  PaymentOptionCardModalProps
->(
+const PricingPage = React.forwardRef<HTMLDivElement, PricingPageProps>(
   (
     {
-      open,
-      onOpenChange,
-      title,
-      subtitle,
-      options,
-      selectedOptionId,
-      defaultSelectedOptionId,
-      onOptionSelect,
-      ctaText,
-      onCtaClick,
-      loading,
-      disabled,
+      title = "Select business plan",
+      headerActions,
+      tabs = [],
+      activeTab: controlledTab,
+      onTabChange,
+      showBillingToggle = false,
+      billingPeriod: controlledBilling,
+      onBillingPeriodChange,
+      planCards = [],
+      powerUpCards = [],
+      powerUpsTitle = "Power-ups and charges",
+      featureComparisonText = "See full feature comparison",
+      onFeatureComparisonClick,
+      letUsDriveCards = [],
+      letUsDriveTitle = "Let us drive \u2014 Full-service management",
       className,
+      ...props
     },
     ref
   ) => {
-    const handleClose = () => {
-      onOpenChange(false);
+    // Internal state for uncontrolled mode
+    const [internalTab, setInternalTab] = React.useState(
+      tabs[0]?.value ?? ""
+    );
+    const [internalBilling, setInternalBilling] = React.useState<
+      "monthly" | "yearly"
+    >("monthly");
+
+    const currentTab = controlledTab ?? internalTab;
+    const currentBilling = controlledBilling ?? internalBilling;
+
+    const handleTabChange = (value: string) => {
+      if (!controlledTab) setInternalTab(value);
+      onTabChange?.(value);
     };
 
+    const handleBillingChange = (period: "monthly" | "yearly") => {
+      if (!controlledBilling) setInternalBilling(period);
+      onBillingPeriodChange?.(period);
+    };
+
+    const hasPowerUps = powerUpCards.length > 0;
+    const hasLetUsDrive = letUsDriveCards.length > 0;
+
     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>
+      <div
+        ref={ref}
+        className={cn("flex flex-col bg-card", className)}
+        {...props}
+      >
+        {/* \u2500\u2500\u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500 */}
+        <PageHeader
+          title={title}
+          actions={headerActions}
+          layout="horizontal"
+        />
+
+        {/* \u2500\u2500\u2500\u2500\u2500 Plan Selection Area \u2500\u2500\u2500\u2500\u2500 */}
+        <div className="flex flex-col gap-6 px-6 py-6">
+          {/* Tabs + billing toggle */}
+          {tabs.length > 0 && (
+            <PricingToggle
+              tabs={tabs}
+              activeTab={currentTab}
+              onTabChange={handleTabChange}
+              showBillingToggle={showBillingToggle}
+              billingPeriod={currentBilling}
+              onBillingPeriodChange={handleBillingChange}
+            />
+          )}
+
+          {/* Plan cards grid */}
+          {planCards.length > 0 && (
+            <div
+              className={cn(
+                "grid gap-6 justify-center",
+                planCards.length <= 2
+                  ? "grid-cols-1 md:grid-cols-2 max-w-[960px] mx-auto"
+                  : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+              )}
+            >
+              {planCards.map((cardProps, index) => (
+                <PricingCard key={index} {...cardProps} />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* \u2500\u2500\u2500\u2500\u2500 Power-ups Section \u2500\u2500\u2500\u2500\u2500 */}
+        {hasPowerUps && (
+          <div className="bg-semantic-bg-ui px-6 py-[60px]">
+            <div className="flex flex-col gap-4">
+              {/* Section header */}
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-semibold text-semantic-text-primary m-0">
+                  {powerUpsTitle}
+                </h2>
+                {onFeatureComparisonClick && (
+                  <Button
+                    variant="link"
+                    className="text-semantic-text-link p-0 h-auto min-w-0 gap-1"
+                    onClick={onFeatureComparisonClick}
+                  >
+                    {featureComparisonText}
+                    <ExternalLink className="size-3.5" />
+                  </Button>
+                )}
+              </div>
+
+              {/* Power-up cards */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {powerUpCards.map((cardProps, index) => (
+                  <PowerUpCard key={index} {...cardProps} />
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* \u2500\u2500\u2500\u2500\u2500 Let Us Drive Section \u2500\u2500\u2500\u2500\u2500 */}
+        {hasLetUsDrive && (
+          <div className="bg-card px-6 py-[60px]">
+            <div className="flex flex-col gap-4">
+              {/* Section header */}
+              <h2 className="text-lg font-semibold text-semantic-text-primary m-0">
+                {letUsDriveTitle}
+              </h2>
+
+              {/* Service cards */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {letUsDriveCards.map((cardProps, index) => (
+                  <LetUsDriveCard key={index} {...cardProps} />
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
     );
   }
 );
 
-PaymentOptionCardModal.displayName = "PaymentOptionCardModal";
+PricingPage.displayName = "PricingPage";
+
+export { PricingPage };
 `, prefix)
         },
         {
           name: "types.ts",
           content: prefixTailwindClasses(`import * as React from "react";
+import type { PricingCardProps } from "../pricing-card/types";
+import type { PowerUpCardProps } from "../power-up-card/types";
+import type { LetUsDriveCardProps } from "../let-us-drive-card/types";
+import type { PricingToggleTab } from "../pricing-toggle/types";
 
-/**
- * A single payment option entry.
- */
-export interface PaymentOption {
-  /** Unique identifier for this option */
-  id: string;
-  /** Icon rendered inside a rounded container (e.g. an SVG or Lucide icon) */
-  icon: React.ReactNode;
-  /** Primary label (e.g. "Net banking") */
-  title: string;
-  /** Secondary description (e.g. "Pay securely through your bank") */
-  description: string;
-}
+export type { PricingToggleTab };
 
 /**
- * Props for the PaymentOptionCard component.
+ * Props for the PricingPage component.
+ *
+ * PricingPage is a layout compositor that orchestrates PricingToggle,
+ * PricingCard, PowerUpCard, LetUsDriveCard, and PageHeader into
+ * the full plan selection page.
  */
-export interface PaymentOptionCardProps {
-  /** Header title */
+export interface PricingPageProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /* \u2500\u2500\u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500 */
+
+  /** Page title (default: "Select business plan") */
   title?: string;
-  /** Header subtitle */
-  subtitle?: string;
-  /** List of selectable payment options */
-  options: PaymentOption[];
-  /** Currently selected option id */
-  selectedOptionId?: string;
-  /** Default selected option id (uncontrolled mode) */
-  defaultSelectedOptionId?: string;
-  /** Callback fired when an option is selected */
-  onOptionSelect?: (optionId: string) => void;
-  /** CTA button text */
-  ctaText?: string;
-  /** Callback fired when CTA button is clicked */
-  onCtaClick?: () => void;
-  /** Callback fired when close button is clicked */
-  onClose?: () => void;
-  /** Whether the CTA button shows loading state */
-  loading?: boolean;
-  /** Whether the CTA button is disabled */
-  disabled?: boolean;
-  /** Additional className for the root element */
-  className?: string;
+  /** Actions rendered on the right side of the header (e.g., number-type dropdown) */
+  headerActions?: React.ReactNode;
+
+  /* \u2500\u2500\u2500\u2500\u2500 Tabs & Billing \u2500\u2500\u2500\u2500\u2500 */
+
+  /** Plan type tabs shown in the pill selector */
+  tabs?: PricingToggleTab[];
+  /** Currently active tab value (controlled). Falls back to first tab when unset. */
+  activeTab?: string;
+  /** Callback when the active tab changes */
+  onTabChange?: (value: string) => void;
+  /** Whether to show the monthly/yearly billing toggle */
+  showBillingToggle?: boolean;
+  /** Current billing period (controlled) */
+  billingPeriod?: "monthly" | "yearly";
+  /** Callback when the billing period changes */
+  onBillingPeriodChange?: (period: "monthly" | "yearly") => void;
+
+  /* \u2500\u2500\u2500\u2500\u2500 Plan Cards \u2500\u2500\u2500\u2500\u2500 */
+
+  /** Array of plan card props to render in the main pricing grid */
+  planCards?: PricingCardProps[];
+
+  /* \u2500\u2500\u2500\u2500\u2500 Power-ups Section \u2500\u2500\u2500\u2500\u2500 */
+
+  /** Array of power-up card props */
+  powerUpCards?: PowerUpCardProps[];
+  /** Power-ups section heading (default: "Power-ups and charges") */
+  powerUpsTitle?: string;
+  /** Feature comparison link text (default: "See full feature comparison") */
+  featureComparisonText?: string;
+  /** Callback when the feature comparison link is clicked */
+  onFeatureComparisonClick?: () => void;
+
+  /* \u2500\u2500\u2500\u2500\u2500 Let Us Drive Section \u2500\u2500\u2500\u2500\u2500 */
+
+  /** Array of let-us-drive card props */
+  letUsDriveCards?: LetUsDriveCardProps[];
+  /** Let-us-drive section heading (default: "Let us drive \u2014 Full-service management") */
+  letUsDriveTitle?: string;
 }
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { PricingPage } from "./pricing-page";
+export type { PricingPageProps, PricingToggleTab } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "pricing-toggle": {
+      name: "pricing-toggle",
+      description: "A plan type tab selector with billing period toggle for pricing pages. Pill-shaped tabs switch plan categories, and an optional switch toggles between monthly/yearly billing.",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "@radix-ui/react-switch@^1.2.6"
+      ],
+      internalDependencies: [
+        "switch"
+      ],
+      isMultiFile: true,
+      directory: "pricing-toggle",
+      mainFile: "pricing-toggle.tsx",
+      files: [
+        {
+          name: "pricing-toggle.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { Switch } from "../switch";
+import type { PricingToggleProps } from "./types";
 
 /**
- * Props for the PaymentOptionCardModal component.
- * Extends the card props with Dialog open/close control, omitting \`onClose\`
- * which is handled internally by the modal.
+ * PricingToggle provides a plan type tab selector with an optional
+ * billing period toggle. The pill-shaped tabs switch between plan
+ * categories (e.g. "Team-Led Plans" vs "Go-AI First"), and the
+ * billing toggle switches between monthly/yearly pricing.
+ *
+ * @example
+ * \`\`\`tsx
+ * <PricingToggle
+ *   tabs={[
+ *     { label: "Team-Led Plans", value: "team" },
+ *     { label: "Go-AI First", value: "ai" },
+ *   ]}
+ *   activeTab="team"
+ *   onTabChange={(value) => setActiveTab(value)}
+ *   showBillingToggle
+ *   billingPeriod="monthly"
+ *   onBillingPeriodChange={(period) => setBillingPeriod(period)}
+ * />
+ * \`\`\`
  */
-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;
+const PricingToggle = React.forwardRef<HTMLDivElement, PricingToggleProps>(
+  (
+    {
+      tabs,
+      activeTab,
+      onTabChange,
+      showBillingToggle = false,
+      billingPeriod = "monthly",
+      onBillingPeriodChange,
+      monthlyLabel = "Monthly",
+      yearlyLabel = "Yearly (Save 20%)",
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const isYearly = billingPeriod === "yearly";
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex flex-col items-center gap-4", className)}
+        {...props}
+      >
+        {/* Plan type tabs */}
+        <div className="inline-flex items-start gap-1 rounded-full bg-semantic-bg-ui p-1">
+          {tabs.map((tab) => {
+            const isActive = tab.value === activeTab;
+            return (
+              <button
+                key={tab.value}
+                type="button"
+                role="tab"
+                aria-selected={isActive}
+                className={cn(
+                  "h-10 shrink-0 rounded-full px-4 py-1 text-base transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-brand focus-visible:ring-offset-2",
+                  isActive
+                    ? "bg-semantic-brand font-semibold text-white shadow-sm"
+                    : "font-normal text-semantic-text-primary"
+                )}
+                onClick={() => onTabChange(tab.value)}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Billing period toggle */}
+        {showBillingToggle && (
+          <div className="flex items-center gap-4">
+            <span
+              className={cn(
+                "text-sm font-semibold tracking-[0.014px]",
+                !isYearly
+                  ? "text-semantic-text-secondary"
+                  : "text-semantic-text-muted"
+              )}
+            >
+              {monthlyLabel}
+            </span>
+            <Switch
+              size="sm"
+              checked={isYearly}
+              onCheckedChange={(checked) =>
+                onBillingPeriodChange?.(checked ? "yearly" : "monthly")
+              }
+            />
+            <span
+              className={cn(
+                "text-sm font-semibold tracking-[0.014px]",
+                isYearly
+                  ? "text-semantic-text-secondary"
+                  : "text-semantic-text-muted"
+              )}
+            >
+              {yearlyLabel}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+PricingToggle.displayName = "PricingToggle";
+
+export { PricingToggle };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`/** A single tab option in the plan tab selector */
+export interface PricingToggleTab {
+  /** Display label for the tab */
+  label: string;
+  /** Unique value identifier for the tab */
+  value: string;
+}
+
+export interface PricingToggleProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Array of tab options for the plan type selector */
+  tabs: PricingToggleTab[];
+  /** Currently active tab value (controlled) */
+  activeTab: string;
+  /** Callback when the active tab changes */
+  onTabChange: (value: string) => void;
+  /** Whether to show the billing period toggle below the tabs */
+  showBillingToggle?: boolean;
+  /** Current billing period \u2014 "monthly" or "yearly" (controlled) */
+  billingPeriod?: "monthly" | "yearly";
+  /** Callback when the billing period changes */
+  onBillingPeriodChange?: (period: "monthly" | "yearly") => void;
+  /** Left label for the billing toggle (default: "Monthly") */
+  monthlyLabel?: string;
+  /** Right label for the billing toggle (default: "Yearly (Save 20%)") */
+  yearlyLabel?: string;
 }
 `, prefix)
         },
         {
           name: "index.ts",
-          content: prefixTailwindClasses(`export { PaymentOptionCard } from "./payment-option-card";
-export { PaymentOptionCardModal } from "./payment-option-card-modal";
-export type {
-  PaymentOptionCardProps,
-  PaymentOptionCardModalProps,
-  PaymentOption,
-} from "./types";
+          content: prefixTailwindClasses(`export { PricingToggle } from "./pricing-toggle";
+export type { PricingToggleProps, PricingToggleTab } from "./types";
 `, prefix)
         }
       ]
@@ -8743,7 +9965,7 @@ export type {
         {
           name: "wallet-topup.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Check, Ticket } from "lucide-react";
+import { Ticket } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { Button } from "../button";
 import { Input } from "../input";
@@ -8766,7 +9988,11 @@ function normalizeAmountOption(option: number | AmountOption): AmountOption {
  * Format currency amount with symbol
  */
 function formatCurrency(amount: number, symbol: string = "\u20B9"): string {
-  return \`\${symbol}\${amount.toLocaleString("en-IN")}\`;
+  const hasDecimals = amount % 1 !== 0;
+  return \`\${symbol}\${amount.toLocaleString("en-IN", {
+    minimumFractionDigits: hasDecimals ? 2 : 0,
+    maximumFractionDigits: hasDecimals ? 2 : 0,
+  })}\`;
 }
 
 /**
@@ -8798,6 +10024,13 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
       customAmountPlaceholder = "Enter amount",
       customAmountLabel = "Custom Amount",
       currencySymbol = "\u20B9",
+      taxAmount: taxAmountProp,
+      taxCalculator,
+      taxLabel = "Taxes (GST)",
+      rechargeAmountLabel = "Recharge amount",
+      outstandingAmount,
+      outstandingLabel = "Outstanding",
+      topupLabel = "Top-up",
       showVoucherLink = true,
       voucherLinkText = "Have an offline code or voucher?",
       voucherIcon = <Ticket className="size-4" />,
@@ -8894,6 +10127,10 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
     };
 
     const normalizedAmounts = amounts.map(normalizeAmountOption);
+    const displayAmounts =
+      outstandingAmount && outstandingAmount > 0
+        ? [{ value: 0 } as AmountOption, ...normalizedAmounts]
+        : normalizedAmounts;
 
     const handleAmountSelect = (value: number) => {
       const newValue = selectedValue === value ? null : value;
@@ -8925,19 +10162,39 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
     };
 
     // Determine the effective pay amount
-    const payAmount =
-      selectedValue ?? (customValue ? Number(customValue) : 0);
+    const baseSelection =
+      selectedValue ?? (customValue ? Number(customValue) : null);
+
+    // Effective recharge amount (includes outstanding if present)
+    const effectiveRechargeAmount =
+      baseSelection !== null
+        ? outstandingAmount
+          ? outstandingAmount + baseSelection
+          : baseSelection
+        : 0;
+
+    // Tax computation
+    const hasTax = taxCalculator !== undefined || taxAmountProp !== undefined;
+    const computedTax =
+      effectiveRechargeAmount > 0
+        ? taxCalculator
+          ? taxCalculator(effectiveRechargeAmount)
+          : (taxAmountProp ?? 0)
+        : 0;
+
+    // Total payable (recharge + tax)
+    const totalPayable = effectiveRechargeAmount + computedTax;
 
     const handlePay = () => {
-      if (payAmount > 0) {
-        onPay?.(payAmount);
+      if (totalPayable > 0) {
+        onPay?.(totalPayable);
       }
     };
 
     const buttonText =
       ctaText ||
-      (payAmount > 0
-        ? \`Pay \${formatCurrency(payAmount, currencySymbol)} now\`
+      (totalPayable > 0
+        ? \`Pay \${formatCurrency(totalPayable, currencySymbol)} now\`
         : "Select an amount");
 
     return (
@@ -8974,8 +10231,15 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
                     {amountSectionLabel}
                   </label>
                   <div className="grid grid-cols-2 gap-4">
-                    {normalizedAmounts.map((option) => {
+                    {displayAmounts.map((option) => {
                       const isSelected = selectedValue === option.value;
+                      const hasOutstanding =
+                        outstandingAmount !== undefined &&
+                        outstandingAmount > 0;
+                      const totalForOption = hasOutstanding
+                        ? outstandingAmount + option.value
+                        : option.value;
+
                       return (
                         <button
                           key={option.value}
@@ -8984,18 +10248,53 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
                           aria-checked={isSelected}
                           onClick={() => handleAmountSelect(option.value)}
                           className={cn(
-                            "flex items-center justify-between h-10 px-4 py-2.5 rounded text-sm text-semantic-text-primary transition-all cursor-pointer",
+                            "flex px-4 rounded text-sm transition-all cursor-pointer",
+                            hasOutstanding
+                              ? "flex-col items-start gap-0.5 h-auto py-3"
+                              : "items-center h-10 py-2.5",
                             isSelected
-                              ? "border border-semantic-primary shadow-sm"
+                              ? "border border-[var(--semantic-brand)] shadow-sm"
                               : "border border-semantic-border-input hover:border-semantic-text-muted"
                           )}
                         >
-                          <span>
-                            {option.label ||
-                              formatCurrency(option.value, currencySymbol)}
+                          <span
+                            className={cn(
+                              isSelected
+                                ? "text-semantic-primary"
+                                : "text-semantic-text-primary",
+                              hasOutstanding && "font-medium"
+                            )}
+                          >
+                            {hasOutstanding
+                              ? formatCurrency(
+                                  totalForOption,
+                                  currencySymbol
+                                )
+                              : option.label ||
+                                formatCurrency(
+                                  option.value,
+                                  currencySymbol
+                                )}
                           </span>
-                          {isSelected && (
-                            <Check className="size-5 text-semantic-primary" />
+                          {hasOutstanding && (
+                            <>
+                              <span className="text-xs text-semantic-text-muted">
+                                {outstandingLabel}:{" "}
+                                {formatCurrency(
+                                  outstandingAmount,
+                                  currencySymbol
+                                )}
+                              </span>
+                              <span className="text-xs text-semantic-text-muted">
+                                {topupLabel}:{" "}
+                                {option.value > 0
+                                  ? formatCurrency(
+                                      option.value,
+                                      currencySymbol
+                                    )
+                                  : "-"}
+                              </span>
+                            </>
                           )}
                         </button>
                       );
@@ -9016,6 +10315,31 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
                   />
                 </div>
 
+                {/* Recharge Summary */}
+                {hasTax && effectiveRechargeAmount > 0 && (
+                  <div className="flex flex-col gap-2 rounded-lg bg-[var(--semantic-warning-surface)] px-4 py-3">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-semantic-text-primary">
+                        {rechargeAmountLabel}
+                      </span>
+                      <span className="text-semantic-text-primary font-medium">
+                        {formatCurrency(
+                          effectiveRechargeAmount,
+                          currencySymbol
+                        )}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-semantic-text-muted">
+                        {taxLabel}
+                      </span>
+                      <span className="text-semantic-text-muted">
+                        {formatCurrency(computedTax, currencySymbol)}
+                      </span>
+                    </div>
+                  </div>
+                )}
+
                 {/* Voucher Link or Voucher Code Input */}
                 {showVoucherLink && !showVoucherInput && (
                   <button
@@ -9067,7 +10391,7 @@ export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
                     className="w-full"
                     onClick={handlePay}
                     loading={loading}
-                    disabled={disabled || payAmount <= 0}
+                    disabled={disabled || totalPayable <= 0}
                   >
                     {buttonText}
                   </Button>
@@ -9136,6 +10460,24 @@ export interface WalletTopupProps {
   /** Currency symbol (default: "\u20B9") */
   currencySymbol?: string;
 
+  // Tax / Summary
+  /** Static tax amount to display in the summary section */
+  taxAmount?: number;
+  /** Function to dynamically compute tax from the recharge amount. Takes priority over taxAmount. */
+  taxCalculator?: (amount: number) => number;
+  /** Label for the tax line in the summary (default: "Taxes (GST)") */
+  taxLabel?: string;
+  /** Label for the recharge amount line in the summary (default: "Recharge amount") */
+  rechargeAmountLabel?: string;
+
+  // Outstanding balance
+  /** Outstanding balance. When set, auto-prepends an outstanding-only option and shows breakdowns in each amount button. */
+  outstandingAmount?: number;
+  /** Label for the outstanding breakdown in amount buttons (default: "Outstanding") */
+  outstandingLabel?: string;
+  /** Label for the topup breakdown in amount buttons (default: "Top-up") */
+  topupLabel?: string;
+
   // Voucher link
   /** Whether to show the voucher/code link */
   showVoucherLink?: boolean;