{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-feature-tier-slider",
  "title": "Pricing Feature Tier Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pricing-feature-tier-slider/PricingFeatureTierSlider.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, CheckCircle2, Sliders } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface PricingFeatureTierSliderProps {\n  title?: string\n  description?: string\n  className?: string\n}\n\nconst TIERS = [\n  {\n    label: '10K MAU',\n    mauCount: '10,000',\n    basePriceMonthly: 19,\n    tierName: 'Starter Hobbyist',\n    features: [\n      '10,000 Monthly Users',\n      '2 Dedicated Edge Locations',\n      'Community Discord SLA',\n      'Standard 1-Day Log Retention',\n    ],\n  },\n  {\n    label: '50K MAU',\n    mauCount: '50,000',\n    basePriceMonthly: 49,\n    tierName: 'Pro Creator',\n    features: [\n      '50,000 Monthly Users',\n      '12 Global Anycast Edges',\n      'Next-Business-Day Support SLA',\n      '7-Day Immutable Log Retention',\n    ],\n  },\n  {\n    label: '250K MAU',\n    mauCount: '250,000',\n    basePriceMonthly: 149,\n    tierName: 'Growth Scale',\n    features: [\n      '250,000 Monthly Users',\n      'All 36 Global Edge Regions',\n      '4-Hour Priority Engineering SLA',\n      '30-Day SOC2 Audit Logs',\n    ],\n  },\n  {\n    label: '1M MAU',\n    mauCount: '1,000,000',\n    basePriceMonthly: 399,\n    tierName: 'Enterprise Core',\n    features: [\n      '1,000,000 Monthly Users',\n      'Dedicated VPC & Multi-Region Mesh',\n      '15-Minute Critical Incident SLA',\n      '365-Day Cold Storage Logs',\n    ],\n  },\n  {\n    label: '5M+ MAU',\n    mauCount: '5,000,000+',\n    basePriceMonthly: 899,\n    tierName: 'Hyperscale Cluster',\n    features: [\n      '5,000,000+ Monthly Users',\n      'Custom Bare-Metal Cloud Partitions',\n      'Dedicated Solutions Architect',\n      'Custom Security Review & BAA',\n    ],\n  },\n]\n\nexport function PricingFeatureTierSlider({\n  title = 'Predictable usage pricing with dynamic linear scale.',\n  description = 'Slide to your estimated monthly active users or edge invocations to calculate your exact monthly investment.',\n  className,\n}: PricingFeatureTierSliderProps) {\n  const [sliderIndex, setSliderIndex] = React.useState(2)\n  const [isAnnual, setIsAnnual] = React.useState(true)\n\n  const currentTier = TIERS[sliderIndex]\n  const effectivePrice = isAnnual ? Math.round(currentTier.basePriceMonthly * 0.8) : currentTier.basePriceMonthly\n  const annualSavings = (currentTier.basePriceMonthly - effectivePrice) * 12\n\n  return (\n    <section\n      data-slot=\"pricing-feature-tier-slider\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#scale-pricing\"\n            className=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n          >\n            <Sliders className=\"text-primary size-3.5\" />\n            <span>Continuous Scale Synthesizer</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n\n          {/* Cadence Switcher */}\n          <div className=\"flex items-center justify-center gap-3 pt-2\">\n            <span\n              className={cn(\n                'text-xs font-medium',\n                !isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground',\n              )}\n            >\n              Monthly\n            </span>\n            <button\n              type=\"button\"\n              className={cn(\n                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',\n                isAnnual ? 'bg-primary' : 'bg-muted',\n              )}\n              onClick={() => setIsAnnual(!isAnnual)}\n            >\n              <span\n                className={cn(\n                  'bg-background pointer-events-none inline-block size-5 transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out',\n                  isAnnual ? 'translate-x-5' : 'translate-x-0',\n                )}\n              />\n            </button>\n            <span\n              className={cn(\n                'flex items-center gap-1.5 text-xs font-medium',\n                isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground',\n              )}\n            >\n              <span>Annual Billing</span>\n              <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success text-xs\">\n                Save 20%\n              </Badge>\n            </span>\n          </div>\n        </div>\n\n        {/* Pricing Slider Main Card */}\n        <div className=\"mx-auto mt-12 max-w-4xl\">\n          <Card className=\"border-border bg-card overflow-hidden shadow-sm\">\n            <CardContent className=\"space-y-8 p-8\">\n              {/* Scale Indicator Bar */}\n              <div className=\"border-border flex flex-wrap items-center justify-between gap-4 border-b pb-6\">\n                <div className=\"space-y-1\">\n                  <span className=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n                    Calculated Tier Plan\n                  </span>\n                  <h3 className=\"text-foreground text-2xl font-bold\">{currentTier.tierName}</h3>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Engineered for {currentTier.mauCount} active user sessions\n                  </div>\n                </div>\n\n                {/* Price Box */}\n                <div className=\"text-right\">\n                  <div className=\"flex items-baseline justify-end gap-1\">\n                    <span className=\"text-foreground font-mono text-4xl font-bold\">${effectivePrice}</span>\n                    <span className=\"text-muted-foreground font-mono text-xs\">/ month</span>\n                  </div>\n                  {isAnnual ? (\n                    <div className=\"text-success font-mono text-xs font-medium\">Save ${annualSavings}/yr on annual</div>\n                  ) : null}\n                </div>\n              </div>\n\n              {/* Interactive Stepped Range Slider */}\n              <div className=\"space-y-3\">\n                <div className=\"text-foreground flex items-center justify-between text-xs font-bold\">\n                  <span>Monthly Traffic Volume</span>\n                  <span className=\"text-primary font-mono font-bold\">{currentTier.mauCount} Users</span>\n                </div>\n\n                <input\n                  type=\"range\"\n                  min=\"0\"\n                  max=\"4\"\n                  step=\"1\"\n                  value={sliderIndex}\n                  onChange={(e) => setSliderIndex(parseInt(e.target.value))}\n                  className=\"accent-primary h-2 w-full cursor-pointer\"\n                />\n\n                {/* Slider Step Labels */}\n                <div className=\"text-muted-foreground flex justify-between font-mono text-xs\">\n                  {TIERS.map((t, idx) => (\n                    <span\n                      key={idx}\n                      className={cn(\n                        'hover:text-foreground cursor-pointer transition-colors',\n                        sliderIndex === idx ? 'text-primary font-bold' : '',\n                      )}\n                      onClick={() => setSliderIndex(idx)}\n                    >\n                      {t.label}\n                    </span>\n                  ))}\n                </div>\n              </div>\n\n              {/* Features Checklist Grid for Current Tier */}\n              <div className=\"border-border space-y-3 border-t pt-4\">\n                <span className=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n                  Guaranteed Tier Deliverables\n                </span>\n                <div className=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n                  {currentTier.features.map((feat, fIdx) => (\n                    <div key={fIdx} className=\"text-foreground flex items-center gap-2 text-xs\">\n                      <CheckCircle2 className=\"text-success size-4 shrink-0\" />\n                      <span>{feat}</span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n\n              {/* Action Button */}\n              <div className=\"pt-2\">\n                <Button size=\"lg\" className=\"w-full gap-2 shadow-xs\">\n                  <span>Deploy with {currentTier.tierName}</span>\n                  <ArrowRight className=\"size-4\" />\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/pricing-feature-tier-slider/PricingFeatureTierSlider.tsx"
    },
    {
      "path": "packages/registry-react/blocks/pricing-feature-tier-slider/index.ts",
      "content": "export { PricingFeatureTierSlider } from './PricingFeatureTierSlider'\nexport type { PricingFeatureTierSliderProps } from './PricingFeatureTierSlider'\n",
      "type": "registry:block",
      "target": "~/components/blocks/pricing-feature-tier-slider/index.ts"
    }
  ],
  "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": "Continuous MAU and usage scale pricing slider with dynamic tier calculation and annual discount toggle.",
  "categories": [
    "pricing",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}