myoperator-ui 0.0.202 → 0.0.204-beta.0

package/dist/index.js

@@ -9114,6 +9114,8 @@ export interface PaymentSummaryProps {
   subtotal?: { label: string; value: string };
   /** Light-blue bordered breakdown card shown below the subtotal */
   breakdownCard?: PaymentSummaryBreakdownCard;
+  /** Credit limit row shown at the bottom, separated by a top border */
+  creditLimit?: { value: string; tooltip?: string };
 }
 
 const valueColorMap: Record<string, string> = {
@@ -9243,7 +9245,7 @@ const BreakdownCardRow = ({ item }: { item: BreakdownCardItem }) => (
  * \`\`\`
  */
 export const PaymentSummary = React.forwardRef<HTMLDivElement, PaymentSummaryProps>(
-  ({ items = [], summaryItems, className, title, headerInfo, subtotal, breakdownCard }, ref) => {
+  ({ items = [], summaryItems, className, title, headerInfo, subtotal, breakdownCard, creditLimit }, ref) => {
     const hasItemsBorder =
       items.length > 0 &&
       (!!subtotal || !!breakdownCard || (summaryItems && summaryItems.length > 0));
@@ -9344,6 +9346,37 @@ export const PaymentSummary = React.forwardRef<HTMLDivElement, PaymentSummaryPro
                 ))}
               </div>
             )}
+
+            {/* Credit limit row */}
+            {creditLimit && (
+              <div className="flex items-center justify-between border-t border-semantic-border-layout pt-3">
+                <div className="flex items-center gap-1.5">
+                  <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
+                    Credit limit
+                  </span>
+                  {creditLimit.tooltip && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className="inline-flex items-center justify-center rounded-full w-5 h-5 text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-ui transition-colors"
+                          aria-label="Info about Credit limit"
+                        >
+                          <Info className="h-3.5 w-3.5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <TooltipArrow />
+                        {creditLimit.tooltip}
+                      </TooltipContent>
+                    </Tooltip>
+                  )}
+                </div>
+                <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
+                  {creditLimit.value}
+                </span>
+              </div>
+            )}
           </div>
         </div>
       </TooltipProvider>
@@ -12527,6 +12560,173 @@ export interface WalletTopupProps {
           name: "index.ts",
           content: prefixTailwindClasses(`export { WalletTopup } from "./wallet-topup";
 export type { WalletTopupProps, AmountOption } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "service-pricing-panel": {
+      name: "service-pricing-panel",
+      description: "A pricing panel card displaying managed service pricing with billing cycle badge, price, description, details toggle, and CTA button",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      internalDependencies: [
+        "button",
+        "badge"
+      ],
+      isMultiFile: true,
+      directory: "service-pricing-panel",
+      mainFile: "service-pricing-panel.tsx",
+      files: [
+        {
+          name: "service-pricing-panel.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../button";
+import { Badge } from "../badge";
+import type { ServicePricingPanelProps } from "./types";
+
+const ServicePricingPanel = React.forwardRef<
+  HTMLDivElement,
+  ServicePricingPanelProps
+>(
+  (
+    {
+      className,
+      title = "Managed Prices",
+      billingCycle,
+      startsAtLabel = "Starts at",
+      price,
+      period = "/month",
+      description,
+      hideDetailsLabel = "Don't Show details",
+      showDetailsLabel = "Show details",
+      ctaText = "Talk to us",
+      defaultShowDetails = true,
+      onCtaClick,
+      onToggleDetails,
+      ...props
+    },
+    ref
+  ) => {
+    const [detailsVisible, setDetailsVisible] =
+      React.useState(defaultShowDetails);
+
+    const handleToggle = () => {
+      const next = !detailsVisible;
+      setDetailsVisible(next);
+      onToggleDetails?.(next);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-semantic-bg-primary border border-semantic-border-layout rounded-2xl p-5 flex flex-col gap-2.5 w-full",
+          className
+        )}
+        {...props}
+      >
+        {/* Header row: title + billing cycle badge */}
+        <div className="flex items-center justify-between h-6">
+          <p className="m-0 text-base font-semibold text-semantic-text-primary whitespace-nowrap">
+            {title}
+          </p>
+          {billingCycle && (
+            <Badge
+              variant="default"
+              size="sm"
+              className="bg-semantic-info-surface text-semantic-info-primary rounded-full px-2 py-1"
+            >
+              {billingCycle}
+            </Badge>
+          )}
+        </div>
+
+        {/* Price + description section */}
+        <div className="flex flex-col gap-2.5">
+          <div className="flex flex-col gap-0.5">
+            <p className="m-0 text-xs text-semantic-text-muted tracking-wide whitespace-nowrap">{startsAtLabel}</p>
+            <div className="flex items-end gap-1">
+              <p className="m-0 text-[28px] font-semibold leading-9 text-semantic-text-primary whitespace-nowrap">
+                {price}
+              </p>
+              <p className="m-0 text-sm text-semantic-text-muted pb-0.5">
+                {period}
+              </p>
+            </div>
+          </div>
+          {description && (
+            <p className="m-0 text-sm text-semantic-text-secondary">
+              {description}
+            </p>
+          )}
+        </div>
+
+        {/* Toggle link + CTA button */}
+        <div className="flex flex-col gap-3">
+          <button
+            type="button"
+            onClick={handleToggle}
+            className="m-0 text-sm font-semibold text-semantic-text-link text-left bg-transparent border-0 p-0 cursor-pointer w-fit"
+          >
+            {detailsVisible ? hideDetailsLabel : showDetailsLabel}
+          </button>
+          <Button variant="outline" className="w-full" onClick={onCtaClick}>
+            {ctaText}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+ServicePricingPanel.displayName = "ServicePricingPanel";
+
+export { ServicePricingPanel };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+/**
+ * Props for the ServicePricingPanel component.
+ */
+export interface ServicePricingPanelProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Panel title displayed in the header (e.g., "Managed Prices") */
+  title?: string;
+  /** Billing cycle label displayed as a badge (e.g., "Quarterly", "Monthly") */
+  billingCycle?: string;
+  /** Label above the price (default: "Starts at") */
+  startsAtLabel?: string;
+  /** Formatted price string (e.g., "\u20B950,000") */
+  price: string;
+  /** Billing period suffix (default: "/month") */
+  period?: string;
+  /** Supporting description text shown below the price */
+  description?: string;
+  /** Label for the toggle link when details are visible (default: "Don't Show details") */
+  hideDetailsLabel?: string;
+  /** Label for the toggle link when details are hidden (default: "Show details") */
+  showDetailsLabel?: string;
+  /** CTA button text (default: "Talk to us") */
+  ctaText?: string;
+  /** Whether details are shown by default (default: true) */
+  defaultShowDetails?: boolean;
+  /** Callback when the CTA button is clicked */
+  onCtaClick?: () => void;
+  /** Callback when the toggle link is clicked, receives the new visibility state */
+  onToggleDetails?: (detailsVisible: boolean) => void;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { ServicePricingPanel } from "./service-pricing-panel";
+export type { ServicePricingPanelProps } from "./types";
 `, prefix)
         }
       ]

package/package.json

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