myoperator-ui 0.0.194 → 0.0.195

package/dist/index.js

@@ -9009,7 +9009,7 @@ export { DateInput };
         {
           name: "payment-summary.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Info } from "lucide-react";
+import { Info, Wallet } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import {
   Tooltip,
@@ -9035,15 +9035,53 @@ export interface PaymentSummaryItem {
   bold?: boolean;
   /** Font size for the value \u2014 "lg" renders at 18px semibold */
   valueSize?: "default" | "lg";
+  /** Small 12px link-colored hint text shown below the label (e.g. remaining prepaid amount) */
+  hint?: string;
+}
+
+/** Right-side wallet info displayed in the card header */
+export interface PaymentSummaryHeaderInfo {
+  /** Label text e.g. "Prepaid Wallet Amount:" */
+  label: string;
+  /** Value text e.g. "\u20B96,771.48" */
+  value: string;
+  /** Color variant for the value \u2014 defaults to "success" */
+  valueColor?: "default" | "success" | "error";
+}
+
+/** A single row inside the breakdown card */
+export interface BreakdownCardItem {
+  label: string;
+  value: string;
+  /** Color variant for the label */
+  labelColor?: "default" | "success" | "muted";
+  /** Color variant for the value */
+  valueColor?: "default" | "success" | "muted";
+}
+
+/** The light-blue bordered breakdown card shown below the subtotal */
+export interface PaymentSummaryBreakdownCard {
+  /** Top items separated by an inner border (e.g. Gross Charges, Prepaid Deduction) */
+  topItems: BreakdownCardItem[];
+  /** Bottom items (e.g. Amount Due Without GST, Applicable GST) */
+  bottomItems?: BreakdownCardItem[];
 }
 
 export interface PaymentSummaryProps {
   /** Line items displayed in the top section */
-  items: PaymentSummaryItem[];
-  /** Summary items displayed below the divider (e.g. totals) */
+  items?: PaymentSummaryItem[];
+  /** Summary items displayed below the main sections (e.g. totals) */
   summaryItems?: PaymentSummaryItem[];
   /** Custom className for the outer container */
   className?: string;
+  /** Card header title e.g. "Detailed Bill Breakdown" */
+  title?: string;
+  /** Right-side header wallet info badge */
+  headerInfo?: PaymentSummaryHeaderInfo;
+  /** Bold subtotal row shown after line items */
+  subtotal?: { label: string; value: string };
+  /** Light-blue bordered breakdown card shown below the subtotal */
+  breakdownCard?: PaymentSummaryBreakdownCard;
 }
 
 const valueColorMap: Record<string, string> = {
@@ -9052,19 +9090,43 @@ const valueColorMap: Record<string, string> = {
   error: "text-semantic-error-primary",
 };
 
+const breakdownColorMap: Record<string, string> = {
+  default: "text-semantic-text-primary",
+  success: "text-semantic-success-primary",
+  muted: "text-semantic-text-muted",
+};
+
 const SummaryRow = ({ item }: { item: PaymentSummaryItem }) => (
-  <div className="flex items-center justify-between w-full">
-    <div className="flex items-center gap-1.5">
-      <span
-        className={cn(
-          "text-sm tracking-[0.035px]",
-          item.bold
-            ? "font-semibold text-semantic-text-primary"
-            : "text-semantic-text-muted"
-        )}
-      >
-        {item.label}
-      </span>
+  <div className={cn("flex justify-between w-full", item.hint ? "items-start" : "items-center")}>
+    <div className={cn("flex gap-1.5", item.hint ? "items-start" : "items-center")}>
+      {item.hint ? (
+        <div className="flex flex-col gap-0.5">
+          <span
+            className={cn(
+              "text-sm tracking-[0.035px]",
+              item.bold
+                ? "font-semibold text-semantic-text-primary"
+                : "text-semantic-text-muted"
+            )}
+          >
+            {item.label}
+          </span>
+          <span className="text-xs text-semantic-text-link tracking-[0.06px]">
+            {item.hint}
+          </span>
+        </div>
+      ) : (
+        <span
+          className={cn(
+            "text-sm tracking-[0.035px]",
+            item.bold
+              ? "font-semibold text-semantic-text-primary"
+              : "text-semantic-text-muted"
+          )}
+        >
+          {item.label}
+        </span>
+      )}
       {item.tooltip && (
         <Tooltip>
           <TooltipTrigger asChild>
@@ -9095,68 +9157,167 @@ const SummaryRow = ({ item }: { item: PaymentSummaryItem }) => (
   </div>
 );
 
+const BreakdownCardRow = ({ item }: { item: BreakdownCardItem }) => (
+  <div className="flex items-center justify-between w-full">
+    <span
+      className={cn(
+        "text-sm tracking-[0.035px]",
+        breakdownColorMap[item.labelColor ?? "default"]
+      )}
+    >
+      {item.label}
+    </span>
+    <span
+      className={cn(
+        "text-sm tracking-[0.035px]",
+        breakdownColorMap[item.valueColor ?? "default"]
+      )}
+    >
+      {item.value}
+    </span>
+  </div>
+);
+
 /**
- * PaymentSummary displays a card with line-item rows and an optional totals section
- * separated by a divider. Values can be color-coded (default, success, error) and
- * labels can optionally show info tooltips.
+ * PaymentSummary displays a card with line-item rows, an optional breakdown card,
+ * and a summary/totals section. Supports a rich header with wallet balance info,
+ * a subtotal row, and a nested breakdown card for GST/prepaid deduction details.
  *
  * @example
  * \`\`\`tsx
  * <PaymentSummary
+ *   title="Detailed Bill Breakdown"
+ *   headerInfo={{ label: "Prepaid Wallet Amount:", value: "\u20B92,178.75" }}
  *   items={[
+ *     { label: "Business Account Number (BAN)", value: "6LMVPG" },
  *     { label: "Pending Rental", value: "\u20B90.00" },
- *     { label: "Current Usage", value: "\u20B9163.98" },
- *     { label: "Prepaid Wallet", value: "\u20B978,682.92", valueColor: "success" },
+ *     { label: "Current Usage", value: "\u20B92,500.00" },
  *   ]}
+ *   subtotal={{ label: "Total Charges", value: "\u20B92,500.00" }}
+ *   breakdownCard={{
+ *     topItems: [
+ *       { label: "Gross Charges", value: "\u20B92,500.00" },
+ *       { label: "(-) Prepaid Deduction", value: "\u20B92,178.75", labelColor: "success", valueColor: "success" },
+ *     ],
+ *     bottomItems: [
+ *       { label: "Amount Due Without GST", value: "\u20B9321.25" },
+ *       { label: "(+) Applicable GST 18%", value: "\u20B957.83", labelColor: "muted", valueColor: "muted" },
+ *     ],
+ *   }}
  *   summaryItems={[
- *     { label: "Total amount due", value: "-\u20B978,518.94", valueColor: "error", valueSize: "lg", bold: true, tooltip: "Sum of all charges" },
- *     { label: "Credit limit", value: "\u20B910,000.00", tooltip: "Your current credit limit" },
+ *     { label: "Total amount due", value: "\u20B9379.08", bold: true, valueSize: "lg", valueColor: "error" },
  *   ]}
  * />
  * \`\`\`
  */
-export const PaymentSummary = React.forwardRef<
-  HTMLDivElement,
-  PaymentSummaryProps
->(({ items, summaryItems, className }, ref) => {
-  return (
-    <TooltipProvider delayDuration={100}>
-      <div
-        ref={ref}
-        className={cn(
-          "rounded-lg border border-semantic-border-layout bg-semantic-bg-primary p-5",
-          className
-        )}
-      >
-        <div className="flex flex-col gap-5">
-          {/* Line items */}
-          {items.length > 0 && (
-            <div
-              className={cn(
-                "flex flex-col gap-5",
-                summaryItems && summaryItems.length > 0 &&
-                  "border-b border-semantic-border-layout pb-5"
-              )}
-            >
-              {items.map((item, index) => (
-                <SummaryRow key={index} item={item} />
-              ))}
-            </div>
-          )}
+export const PaymentSummary = React.forwardRef<HTMLDivElement, PaymentSummaryProps>(
+  ({ items = [], summaryItems, className, title, headerInfo, subtotal, breakdownCard }, ref) => {
+    const hasItemsBorder =
+      items.length > 0 &&
+      (!!subtotal || !!breakdownCard || (summaryItems && summaryItems.length > 0));
 
-          {/* Summary items (below divider) */}
-          {summaryItems && summaryItems.length > 0 && (
-            <div className="flex flex-col gap-5">
-              {summaryItems.map((item, index) => (
-                <SummaryRow key={index} item={item} />
-              ))}
-            </div>
+    return (
+      <TooltipProvider delayDuration={100}>
+        <div
+          ref={ref}
+          className={cn(
+            "rounded-lg border border-semantic-border-layout bg-semantic-bg-primary p-5",
+            className
           )}
+        >
+          <div className="flex flex-col gap-4">
+            {/* Header: title + wallet info badge */}
+            {(title || headerInfo) && (
+              <div className="flex items-center justify-between border-b border-semantic-border-layout pb-4">
+                {title && (
+                  <span className="text-base font-semibold text-semantic-text-primary">
+                    {title}
+                  </span>
+                )}
+                {headerInfo && (
+                  <div className="flex items-center gap-1.5">
+                    <Wallet className="h-[18px] w-[18px] text-semantic-text-secondary" />
+                    <span className="text-base text-semantic-text-secondary">
+                      {headerInfo.label}
+                    </span>
+                    <span
+                      className={cn(
+                        "text-base font-semibold",
+                        valueColorMap[headerInfo.valueColor ?? "success"]
+                      )}
+                    >
+                      {headerInfo.value}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Line items */}
+            {items.length > 0 && (
+              <div
+                className={cn(
+                  "flex flex-col gap-5",
+                  hasItemsBorder && "border-b border-semantic-border-layout pb-4"
+                )}
+              >
+                {items.map((item, index) => (
+                  <SummaryRow key={index} item={item} />
+                ))}
+              </div>
+            )}
+
+            {/* Subtotal row */}
+            {subtotal && (
+              <div className="flex items-center justify-between w-full">
+                <span className="text-sm font-semibold text-semantic-text-primary tracking-[0.035px]">
+                  {subtotal.label}
+                </span>
+                <span className="text-sm font-semibold text-semantic-text-primary tracking-[0.035px]">
+                  {subtotal.value}
+                </span>
+              </div>
+            )}
+
+            {/* Breakdown card */}
+            {breakdownCard && (
+              <div className="rounded-lg border border-semantic-border-layout bg-semantic-info-surface px-4 py-4 flex flex-col gap-2.5">
+                <div
+                  className={cn(
+                    "flex flex-col gap-2.5",
+                    breakdownCard.bottomItems &&
+                      breakdownCard.bottomItems.length > 0 &&
+                      "border-b border-semantic-border-layout pb-2.5"
+                  )}
+                >
+                  {breakdownCard.topItems.map((item, index) => (
+                    <BreakdownCardRow key={index} item={item} />
+                  ))}
+                </div>
+                {breakdownCard.bottomItems && breakdownCard.bottomItems.length > 0 && (
+                  <div className="flex flex-col gap-2.5">
+                    {breakdownCard.bottomItems.map((item, index) => (
+                      <BreakdownCardRow key={index} item={item} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Summary items (footer totals) */}
+            {summaryItems && summaryItems.length > 0 && (
+              <div className="flex flex-col gap-4">
+                {summaryItems.map((item, index) => (
+                  <SummaryRow key={index} item={item} />
+                ))}
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </TooltipProvider>
-  );
-});
+      </TooltipProvider>
+    );
+  }
+);
 
 PaymentSummary.displayName = "PaymentSummary";
 `, prefix)

package/package.json

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