{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-usage-calculator-slider",
  "title": "Pricing Usage Calculator Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pricing-usage-calculator-slider/PricingUsageCalculatorSlider.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Calculator, Globe, Server, Users } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface PricingUsageCalculatorSliderProps {\n  className?: string\n}\n\nexport function PricingUsageCalculatorSlider({ className }: PricingUsageCalculatorSliderProps) {\n  const [mau, setMau] = React.useState(100000)\n  const [qps, setQps] = React.useState(500)\n  const [edgeReplicas, setEdgeReplicas] = React.useState(3)\n\n  const formatNumber = (num: number): string => {\n    if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'\n    if (num >= 1000) return (num / 1000).toFixed(0) + 'k'\n    return num.toString()\n  }\n\n  const applyPreset = (preset: 'seed' | 'growth' | 'scale') => {\n    if (preset === 'seed') {\n      setMau(25000)\n      setQps(150)\n      setEdgeReplicas(2)\n    } else if (preset === 'growth') {\n      setMau(350000)\n      setQps(2500)\n      setEdgeReplicas(5)\n    } else {\n      setMau(2500000)\n      setQps(12000)\n      setEdgeReplicas(10)\n    }\n  }\n\n  const traditionalCost = React.useMemo(() => {\n    const baseSeatFee = 350\n    const perUserFee = (mau / 1000) * 1.8\n    const qpsSurcharge = qps * 0.25\n    return Math.round(baseSeatFee + perUserFee + qpsSurcharge)\n  }, [mau, qps])\n\n  const uipkgeCost = React.useMemo(() => {\n    const rawBandwidth = (mau / 100000) * 4\n    const flatProLicense = 24\n    return Math.round(flatProLicense + rawBandwidth)\n  }, [mau])\n\n  const monthlySavings = Math.max(0, traditionalCost - uipkgeCost)\n  const annualSavings = monthlySavings * 12\n\n  return (\n    <section\n      data-slot=\"pricing-usage-calculator-slider\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-6xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Calculator className=\"text-primary size-3.5\" />\n            Interactive Infrastructure ROI Calculator\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Calculate your annual savings with unbundled architecture.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            See how eliminating proprietary seat licenses and runtime SaaS wrappers cuts your front-end TCO.\n          </p>\n\n          {/* Presets Bar */}\n          <div className=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n            <Button size=\"sm\" variant=\"outline\" className=\"font-mono text-xs\" onClick={() => applyPreset('seed')}>\n              Seed Startup (25k MAU)\n            </Button>\n            <Button size=\"sm\" variant=\"outline\" className=\"font-mono text-xs\" onClick={() => applyPreset('growth')}>\n              Growth Scale (350k MAU)\n            </Button>\n            <Button size=\"sm\" variant=\"outline\" className=\"font-mono text-xs\" onClick={() => applyPreset('scale')}>\n              Hypergrowth (2.5M MAU)\n            </Button>\n          </div>\n        </div>\n\n        {/* 2-Column Split: Sliders Workbench Left (7 Cols), Savings Scorecard Right (5 Cols) */}\n        <div className=\"grid grid-cols-1 items-stretch gap-8 lg:grid-cols-12\">\n          {/* Sliders Controls (7 Cols) */}\n          <Card className=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl sm:p-8 lg:col-span-7\">\n            <div className=\"space-y-6\">\n              <div className=\"border-border flex items-center justify-between border-b pb-4\">\n                <h3 className=\"text-foreground font-mono text-sm font-bold\">Traffic &amp; Telemetry Inputs</h3>\n                <span className=\"text-muted-foreground font-mono text-xs\">Dynamic Projection</span>\n              </div>\n\n              {/* Slider 1: MAU */}\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center justify-between font-mono text-xs\">\n                  <span className=\"text-muted-foreground flex items-center gap-1.5\">\n                    <Users className=\"text-primary size-3.5\" /> Monthly Active Users (MAU)\n                  </span>\n                  <span className=\"text-foreground text-sm font-bold\">{formatNumber(mau)} users</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"10000\"\n                  max=\"5000000\"\n                  step=\"25000\"\n                  value={mau}\n                  onChange={(e) => setMau(Number(e.target.value))}\n                  className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n                />\n              </div>\n\n              {/* Slider 2: QPS */}\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center justify-between font-mono text-xs\">\n                  <span className=\"text-muted-foreground flex items-center gap-1.5\">\n                    <Server className=\"text-primary size-3.5\" /> Peak Query Throughput\n                  </span>\n                  <span className=\"text-foreground text-sm font-bold\">{formatNumber(qps)} QPS</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"100\"\n                  max=\"20000\"\n                  step=\"100\"\n                  value={qps}\n                  onChange={(e) => setQps(Number(e.target.value))}\n                  className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n                />\n              </div>\n\n              {/* Slider 3: Global Replicas */}\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center justify-between font-mono text-xs\">\n                  <span className=\"text-muted-foreground flex items-center gap-1.5\">\n                    <Globe className=\"text-primary size-3.5\" /> Global Edge POP Replicas\n                  </span>\n                  <span className=\"text-foreground text-sm font-bold\">{edgeReplicas} Edge Regions</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"1\"\n                  max=\"12\"\n                  step=\"1\"\n                  value={edgeReplicas}\n                  onChange={(e) => setEdgeReplicas(Number(e.target.value))}\n                  className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n                />\n              </div>\n            </div>\n\n            <div className=\"border-border text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\">\n              <span>Formula: Direct AST + Raw Static Hosting</span>\n              <span className=\"text-success font-semibold\">&check; Zero Seat Surcharges</span>\n            </div>\n          </Card>\n\n          {/* ROI Cost & Savings Projection Card (5 Cols) */}\n          <Card className=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-sm sm:p-8 lg:col-span-5\">\n            <div className=\"space-y-6\">\n              <Badge variant=\"outline\" className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                Projected Annual Net Savings\n              </Badge>\n\n              {/* Big Stat Display */}\n              <div className=\"space-y-1\">\n                <div className=\"text-success font-mono text-4xl font-bold tracking-tight sm:text-5xl\">\n                  ${annualSavings.toLocaleString()}\n                </div>\n                <p className=\"text-muted-foreground font-mono text-xs\">\n                  Saved every year (${monthlySavings.toLocaleString()}/month)\n                </p>\n              </div>\n\n              {/* Comparative Cost Bars */}\n              <div className=\"space-y-3 pt-2\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center justify-between font-mono text-xs\">\n                    <span className=\"text-destructive font-medium\">Traditional Monolith Stack:</span>\n                    <span className=\"text-foreground font-bold\">${traditionalCost.toLocaleString()}/mo</span>\n                  </div>\n                  <div className=\"bg-destructive/20 h-2 overflow-hidden rounded-full\">\n                    <div className=\"bg-destructive h-full w-full\" />\n                  </div>\n                </div>\n\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center justify-between font-mono text-xs\">\n                    <span className=\"text-success font-semibold\">UIPKGE Unbundled Registry:</span>\n                    <span className=\"text-foreground font-bold\">${uipkgeCost.toLocaleString()}/mo</span>\n                  </div>\n                  <div className=\"bg-success/20 h-2 overflow-hidden rounded-full\">\n                    <div\n                      className=\"bg-success h-full transition-[width] duration-300\"\n                      style={{ width: `${Math.max(5, (uipkgeCost / traditionalCost) * 100)}%` }}\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <Button className=\"mt-4 h-10 w-full gap-1.5 font-mono text-xs shadow-md\">\n              <span>Lock In Pro Savings</span>\n              <ArrowRight className=\"size-3.5\" />\n            </Button>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default PricingUsageCalculatorSlider\n",
      "type": "registry:block",
      "target": "~/components/blocks/PricingUsageCalculatorSlider.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Interactive frontend infrastructure ROI calculator with real-time MAU, QPS, and edge replica sliders and annual cost savings scorecard.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}