myoperator-ui 0.0.201 → 0.0.202

package/dist/index.js

@@ -9673,6 +9673,199 @@ export interface PaymentOptionCardProps {
           content: prefixTailwindClasses(`export { PaymentOptionCard } from "./payment-option-card";
 export { PaymentOptionCardModal } from "./payment-option-card-modal";
 export type { PaymentOptionCardProps, PaymentOption } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "plan-detail-modal": {
+      name: "plan-detail-modal",
+      description: "A read-only modal displaying plan feature breakdown with free allowances and per-unit rates",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react",
+        "@radix-ui/react-dialog"
+      ],
+      internalDependencies: [
+        "dialog"
+      ],
+      isMultiFile: true,
+      directory: "plan-detail-modal",
+      mainFile: "plan-detail-modal.tsx",
+      files: [
+        {
+          name: "plan-detail-modal.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../dialog";
+import type { PlanDetailModalProps, PlanFeature } from "./types";
+
+const DEFAULT_FEATURES: PlanFeature[] = [
+  { name: "WhatsApp Service", free: "0 Message(s)", rate: "\u20B9 0" },
+  { name: "Incoming (Missed)", free: "0 Minute(s)", rate: "\u20B9 0" },
+  { name: "WhatsApp Marketing", free: "0 Message(s)", rate: "\u20B9 0.86" },
+  { name: "Fix did(s)", free: "0 DID(s)", rate: "\u20B9 200.00" },
+  { name: "WhatsApp Utility", free: "0 Message(s)", rate: "\u20B9 0.13" },
+  { name: "User(s)", free: "3 User(s)", rate: "\u20B9 150.00" },
+  { name: "Pro license(s)", free: "3 License(s)", rate: "\u20B9 300.00" },
+  { name: "WhatsApp Authentication", free: "0 Unit(s)", rate: "\u20B9 0.13" },
+  { name: "Department(s)", free: "2 Department(s)", rate: "\u20B9 300.00" },
+  { name: "Channel(s)", free: "1 Pair(s)", rate: "\u20B9 300.00" },
+];
+
+const PlanDetailModal = React.forwardRef<HTMLDivElement, PlanDetailModalProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      title = "Plan detail",
+      features = DEFAULT_FEATURES,
+      planPrice,
+      onClose,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const handleClose = () => {
+      onClose?.();
+      onOpenChange(false);
+    };
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          size="lg"
+          hideCloseButton
+          className="p-0 gap-0 overflow-hidden"
+        >
+          <div
+            ref={ref}
+            className={cn("flex flex-col", className)}
+            {...props}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-8 py-4 border-b border-semantic-border-layout">
+              <DialogTitle className="text-lg font-semibold text-semantic-text-primary leading-none m-0">
+                {title}
+              </DialogTitle>
+              <button
+                type="button"
+                onClick={handleClose}
+                aria-label="Close"
+                className="flex items-center justify-center size-6 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus"
+              >
+                <X className="size-3" aria-hidden="true" />
+              </button>
+            </div>
+
+            {/* Body */}
+            <DialogDescription asChild>
+              <div className="flex flex-col gap-2.5 px-8 py-5 overflow-y-auto max-h-[70vh]">
+                <p className="m-0 text-base font-semibold text-semantic-text-primary leading-none">
+                  Features
+                </p>
+                <div className="w-full overflow-x-auto rounded border border-semantic-border-layout">
+                  <table className="w-full border-collapse text-sm">
+                    <thead>
+                      <tr className="bg-semantic-bg-ui">
+                        <th className="px-3 py-[11px] text-left font-semibold text-semantic-text-primary border-b border-semantic-border-layout w-[44%]">
+                          Feature
+                        </th>
+                        <th className="px-3 py-[11px] text-left font-semibold text-semantic-text-primary border-b border-semantic-border-layout w-[28%]">
+                          Free
+                        </th>
+                        <th className="px-3 py-[11px] text-left font-semibold text-semantic-text-primary border-b border-semantic-border-layout w-[28%]">
+                          Rate
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {features.map((feature, index) => (
+                        <tr
+                          key={feature.name}
+                          className={cn(
+                            index % 2 === 0
+                              ? "bg-semantic-bg-primary"
+                              : "bg-semantic-bg-ui"
+                          )}
+                        >
+                          <td className="px-3 py-[11px] text-semantic-text-secondary border-b border-semantic-border-layout">
+                            <p className="m-0 leading-none">{feature.name}</p>
+                          </td>
+                          <td className="px-3 py-[11px] text-semantic-text-secondary border-b border-semantic-border-layout">
+                            <p className="m-0 leading-none">{feature.free}</p>
+                          </td>
+                          <td className="px-3 py-[11px] text-semantic-text-secondary border-b border-semantic-border-layout">
+                            <p className="m-0 leading-none">{feature.rate}</p>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </DialogDescription>
+
+            {/* Footer */}
+            {planPrice && (
+              <div className="flex items-center px-8 py-4 border-t border-semantic-border-layout">
+                <p className="m-0 text-base text-semantic-text-primary">
+                  <span className="font-semibold">Plan price </span>
+                  <span className="font-normal">{planPrice}</span>
+                </p>
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+PlanDetailModal.displayName = "PlanDetailModal";
+
+export { PlanDetailModal };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+/**
+ * A single feature row in the plan detail table.
+ */
+export interface PlanFeature {
+  /** Feature name (e.g., "WhatsApp Service") */
+  name: string;
+  /** Free allowance (e.g., "0 Message(s)") */
+  free: string;
+  /** Rate per unit (e.g., "\u20B9 0.86") */
+  rate: string;
+}
+
+export interface PlanDetailModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Called when modal open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Modal title */
+  title?: string;
+  /** List of features to display in the table */
+  features?: PlanFeature[];
+  /** Plan price label (e.g., "\u20B9 2,500.00/month") */
+  planPrice?: string;
+  /** Called when close button is clicked */
+  onClose?: () => void;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { PlanDetailModal } from "./plan-detail-modal";
+export type { PlanDetailModalProps, PlanFeature } from "./types";
 `, prefix)
         }
       ]

package/package.json

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