{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-feature-tier-slider",
  "title": "Pricing Feature Tier Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-feature-tier-slider/PricingFeatureTierSlider.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, CheckCircle2, Sliders } from 'lucide-vue-next'\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  class?: string\n}\n\nconst props = withDefaults(defineProps<PricingFeatureTierSliderProps>(), {\n  title: 'Predictable usage pricing with dynamic linear scale.',\n  description:\n    'Slide to your estimated monthly active users or edge invocations to calculate your exact monthly investment.',\n})\n\n// Slider value from 0 to 100\nconst sliderIndex = ref(2)\nconst isAnnual = ref(true)\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\nconst currentTier = computed(() => TIERS[sliderIndex.value])\n\nconst effectivePrice = computed(() => {\n  const base = currentTier.value.basePriceMonthly\n  return isAnnual.value ? Math.round(base * 0.8) : base\n})\n\nconst annualSavings = computed(() => {\n  return (currentTier.value.basePriceMonthly - effectivePrice.value) * 12\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-feature-tier-slider\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#scale-pricing\"\n          class=\"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 class=\"text-primary size-3.5\" />\n          <span>Continuous Scale Synthesizer</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <!-- Cadence Switcher -->\n        <div class=\"flex items-center justify-center gap-3 pt-2\">\n          <span\n            :class=\"cn('text-xs font-medium', !isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground')\"\n          >\n            Monthly\n          </span>\n          <button\n            type=\"button\"\n            :class=\"\n              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            \"\n            @click=\"isAnnual = !isAnnual\"\n          >\n            <span\n              :class=\"\n                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            />\n          </button>\n          <span\n            :class=\"\n              cn(\n                'flex items-center gap-1.5 text-xs font-medium',\n                isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground',\n              )\n            \"\n          >\n            <span>Annual Billing</span>\n            <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs\"> Save 20% </Badge>\n          </span>\n        </div>\n      </div>\n\n      <!-- Pricing Slider Main Card -->\n      <div class=\"mx-auto mt-12 max-w-4xl\">\n        <Card class=\"border-border bg-card overflow-hidden shadow-sm\">\n          <CardContent class=\"space-y-8 p-8\">\n            <!-- Scale Indicator Bar -->\n            <div class=\"border-border flex flex-wrap items-center justify-between gap-4 border-b pb-6\">\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\"\n                  >Calculated Tier Plan</span\n                >\n                <h3 class=\"text-foreground text-2xl font-bold\">{{ currentTier.tierName }}</h3>\n                <div class=\"text-muted-foreground text-xs\">\n                  Engineered for {{ currentTier.mauCount }} active user sessions\n                </div>\n              </div>\n\n              <!-- Price Box -->\n              <div class=\"text-right\">\n                <div class=\"flex items-baseline justify-end gap-1\">\n                  <span class=\"text-foreground font-mono text-4xl font-bold\">${{ effectivePrice }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">/ month</span>\n                </div>\n                <div v-if=\"isAnnual\" class=\"text-success font-mono text-xs font-medium\">\n                  Save ${{ annualSavings }}/yr on annual\n                </div>\n              </div>\n            </div>\n\n            <!-- Interactive Stepped Range Slider -->\n            <div class=\"space-y-3\">\n              <div class=\"text-foreground flex items-center justify-between text-xs font-bold\">\n                <span>Monthly Traffic Volume</span>\n                <span class=\"text-primary font-mono font-bold\">{{ currentTier.mauCount }} Users</span>\n              </div>\n\n              <input\n                v-model.number=\"sliderIndex\"\n                type=\"range\"\n                min=\"0\"\n                max=\"4\"\n                step=\"1\"\n                class=\"accent-primary h-2 w-full cursor-pointer\"\n              />\n\n              <!-- Slider Step Labels -->\n              <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n                <span\n                  v-for=\"(t, idx) in TIERS\"\n                  :key=\"idx\"\n                  :class=\"\n                    cn(\n                      'hover:text-foreground cursor-pointer transition-colors',\n                      sliderIndex === idx ? 'text-primary font-bold' : '',\n                    )\n                  \"\n                  @click=\"sliderIndex = idx\"\n                >\n                  {{ t.label }}\n                </span>\n              </div>\n            </div>\n\n            <!-- Features Checklist Grid for Current Tier -->\n            <div class=\"border-border space-y-3 border-t pt-4\">\n              <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\"\n                >Guaranteed Tier Deliverables</span\n              >\n              <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n                <div\n                  v-for=\"(feat, fIdx) in currentTier.features\"\n                  :key=\"fIdx\"\n                  class=\"text-foreground flex items-center gap-2 text-xs\"\n                >\n                  <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n                  <span>{{ feat }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Action Button -->\n            <div class=\"pt-2\">\n              <Button size=\"lg\" class=\"w-full gap-2 shadow-xs\">\n                <span>Deploy with {{ currentTier.tierName }}</span>\n                <ArrowRight class=\"size-4\" />\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing-feature-tier-slider/PricingFeatureTierSlider.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing-feature-tier-slider/index.ts",
      "content": "export { default as PricingFeatureTierSlider } from './PricingFeatureTierSlider.vue'\nexport type { PricingFeatureTierSliderProps } from './PricingFeatureTierSlider.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing-feature-tier-slider/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
}