{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-table-six",
  "title": "Pricing Table Six",
  "description": "A modern pricing table component with contact us plan",
  "dependencies": ["lucide-react", "class-variance-authority", "framer-motion"],
  "registryDependencies": ["button", "card", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/pricing-table-six.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nexport interface PlanProps {\n  id: string;\n  title: string;\n  description: string;\n  monthlyPrice: number;\n  yearlyPrice: number;\n  features: string[];\n  isFeatured?: boolean;\n  isCustom?: boolean;\n}\n\nexport interface PricingTableSixProps {\n  plans: PlanProps[];\n  onPlanSelect: (planId: string) => void;\n}\n\nconst gradientFrom = [\"from-chart-1/70\", \"from-chart-2/70\", \"from-chart-3/70\"];\n\nconst getDiscountPercent = (plan: PlanProps) => {\n  return Math.min(\n    100,\n    Math.max(\n      0,\n      Math.round((1 - plan.yearlyPrice / (plan.monthlyPrice * 12)) * 100),\n    ),\n  );\n};\n\nexport function PricingTableSix({ plans, onPlanSelect }: PricingTableSixProps) {\n  const [isYearly, setIsYearly] = useState(false);\n\n  return (\n    <section className=\"px-4 py-16 sm:px-6 lg:px-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        {/* Header */}\n        <div className=\"mb-16 grid items-start gap-8 lg:grid-cols-2 lg:gap-16\">\n          <div>\n            <h2 className=\"text-foreground text-4xl leading-tight font-bold tracking-tight sm:text-5xl lg:text-[3.5rem]\">\n              Tailored plans for\n              <span className=\"font-light italic\">every stage</span>\n            </h2>\n          </div>\n\n          <div className=\"lg:pt-4\">\n            <p className=\"text-muted-foreground mb-6 text-base leading-relaxed\">\n              No matter where you are in your journey, find a plan that fits\n              your goals and budget.\n            </p>\n\n            {/* Toggle */}\n\n            {/* Toggle with layoutId */}\n            <div className=\"bg-primary-foreground/70 relative inline-flex items-center rounded-full p-1.5 dark:!shadow-[inset_0_1.5px_0_color-mix(in_oklch,_var(--primary)_15%,_transparent)]\">\n              <button\n                onClick={() => setIsYearly(false)}\n                className={`text-foreground relative z-10 cursor-pointer rounded-full px-4 py-2 text-sm font-medium ${\n                  !isYearly\n                    ? \"text-foreground border-muted-foreground/10 border\"\n                    : \"text-muted-foreground\"\n                }`}\n                aria-pressed={!isYearly}\n              >\n                {!isYearly && (\n                  <motion.div\n                    layoutId=\"toggle-indicator\"\n                    className=\"bg-primary-foreground absolute inset-0 rounded-full shadow-sm\"\n                    transition={{ type: \"spring\", stiffness: 300, damping: 30 }}\n                  />\n                )}\n                <span className=\"relative z-10\">Monthly</span>\n              </button>\n\n              <button\n                onClick={() => setIsYearly(true)}\n                className={`text-foreground relative z-10 cursor-pointer rounded-full px-4 py-2 text-sm font-medium ${\n                  isYearly\n                    ? \"text-foreground border-muted-foreground/10 border\"\n                    : \"text-muted-foreground\"\n                }`}\n                aria-pressed={isYearly}\n              >\n                {isYearly && (\n                  <motion.div\n                    layoutId=\"toggle-indicator\"\n                    className=\"bg-primary-foreground absolute inset-0 rounded-full shadow-sm\"\n                    transition={{ type: \"spring\", stiffness: 300, damping: 30 }}\n                  />\n                )}\n                <span className=\"relative z-10\">Yearly</span>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Pricing Cards */}\n        <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-7\">\n          {plans.map((plan, index) => (\n            <div\n              key={plan.id}\n              className={`border-primary-foreground relative rounded-3xl border bg-gradient-to-b p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01] ${gradientFrom[index]} via-primary-foreground/10 to-primary-foreground from-[0%] via-[40%] to-[100%]`}\n            >\n              {/* Most Popular Badge */}\n              {plan.isFeatured && (\n                <div className=\"absolute -top-3 left-1/2 -translate-x-1/2 transform\">\n                  <div className=\"bg-primary-foreground text-foreground ring-muted-foreground/50 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap ring-1\">\n                    Most popular\n                  </div>\n                </div>\n              )}\n\n              {/* Title and Description */}\n              <div className=\"mb-6\">\n                <div className=\"mb-2 flex items-center justify-between\">\n                  <h3 className=\"text-foreground text-xl font-bold\">\n                    {plan.title}\n                  </h3>\n                  {isYearly &&\n                    plan.monthlyPrice > 0 &&\n                    plan.yearlyPrice < plan.monthlyPrice * 12 && (\n                      <motion.div\n                        className=\"\"\n                        initial={{ opacity: 0, y: 10 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: -10 }}\n                        transition={{ duration: 0.3 }}\n                      >\n                        <span className=\"bg-primary-foreground text-foreground shadow-muted-foreground/40 inline-block rounded-full px-2 py-1 text-xs whitespace-nowrap shadow-sm\">\n                          Save {getDiscountPercent(plan)}%\n                        </span>\n                      </motion.div>\n                    )}\n                </div>\n                <p className=\"text-muted-foreground text-sm\">\n                  {plan.description}\n                </p>\n              </div>\n\n              {/* Price */}\n              <div className=\"mb-8\">\n                <div className=\"flex items-baseline\">\n                  <span className=\"text-muted-foreground text-base\">$</span>\n                  <AnimatePresence mode=\"wait\" initial={false}>\n                    <motion.span\n                      key={isYearly ? \"yearly-price\" : \"monthly-price\"}\n                      className=\"text-foreground ml-1 text-5xl font-bold\"\n                      initial={{ opacity: 0, y: 8 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -8 }}\n                      transition={{ duration: 0.2 }}\n                    >\n                      {isYearly ? plan.yearlyPrice : plan.monthlyPrice}\n                    </motion.span>\n                  </AnimatePresence>\n                  <AnimatePresence mode=\"wait\" initial={false}>\n                    <motion.span\n                      key={isYearly ? \"per-year\" : \"per-month\"}\n                      className=\"text-muted-foreground ml-2 text-sm\"\n                      initial={{ opacity: 0, y: 8 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -8 }}\n                      transition={{ duration: 0.2 }}\n                    >\n                      / {isYearly ? \"year\" : \"month\"}\n                    </motion.span>\n                  </AnimatePresence>\n                </div>\n              </div>\n\n              {/* CTA Button */}\n              <div className=\"mb-8\">\n                <Button\n                  className={`bg-foreground text-primary-foreground hover:bg-foreground/90 border-primary-foreground h-12 w-full rounded-xl border font-medium transition-all duration-200 hover:cursor-pointer ${!plan.isFeatured ? \"bg-foreground/80 text-primary-foreground hover:bg-foreground/70\" : \"\"} `}\n                  aria-label={`Start ${plan.title} plan${(isYearly ? plan.yearlyPrice : plan.monthlyPrice) === 0 ? \" — free\" : \"\"}`}\n                  onClick={() => onPlanSelect(plan.id)}\n                >\n                  {plan.isCustom ? \"Contact team\" : \"Get started\"}\n                </Button>\n              </div>\n\n              {/* Features */}\n              <div>\n                <h4 className=\"text-muted-foreground mb-4 text-sm font-medium\">\n                  What's included:\n                </h4>\n                <ul className=\"space-y-3\">\n                  {plan.features.map((feature, index) => (\n                    <li key={index} className=\"flex items-start\">\n                      <div className=\"bg-primary-foreground mt-0.5 mr-3 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full\">\n                        <Check className=\"text-foreground h-2.5 w-2.5\" />\n                      </div>\n                      <span className=\"text-foreground text-sm leading-relaxed\">\n                        {feature}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/pricing-table-six.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/pricing-table-six-demo.tsx",
      "content": "\"use client\";\n\nimport {\n  PlanProps,\n  PricingTableSix,\n} from \"@/registry/billingsdk/pricing-table-six\";\n\nexport function PricingTableSixDemo() {\n  const plans: PlanProps[] = [\n    {\n      id: \"basic\",\n      title: \"Starter\",\n      description: \"Best for individuals and small teams\",\n      monthlyPrice: 0,\n      yearlyPrice: 0,\n      features: [\n        \"Core tools with modest usage allowances\",\n        \"Getting-started guides to launch quickly\",\n        \"Fundamental analytics and reports\",\n        \"Standard email assistance\",\n      ],\n    },\n    {\n      id: \"premium\",\n      title: \"Growth\",\n      description: \"Built for expanding teams\",\n      monthlyPrice: 50,\n      yearlyPrice: 500,\n      isFeatured: true,\n      features: [\n        \"Advanced tools with priority updates\",\n        \"Onboarding guides to ramp fast\",\n        \"Live chat support access\",\n        \"Automation to streamline workflows\",\n        \"Premium tutorials and webinars access\",\n      ],\n    },\n    {\n      id: \"custom\",\n      title: \"Enterprise\",\n      description: \"Tailored for specialized requirements\",\n      monthlyPrice: 99,\n      yearlyPrice: 990,\n      isCustom: true,\n      features: [\n        \"Unlimited users, projects, and data\",\n        \"Resources that scale with your needs\",\n        \"24/7 priority support\",\n        \"White-label reports, dashboards, and UIs\",\n        \"Support for custom API integrations\",\n        \"Works with advanced or proprietary systems\",\n      ],\n    },\n  ];\n\n  return (\n    <PricingTableSix\n      plans={plans}\n      onPlanSelect={(planId: string) => console.log(\"Selected plan:\", planId)}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pricing-table-six-demo.tsx"
    },
    {
      "path": "src/registry/lib/billingsdk-config.ts",
      "content": "export interface Plan {\n  id: string;\n  title: string;\n  description: string;\n  highlight?: boolean;\n  type?: \"monthly\" | \"yearly\";\n  currency?: string;\n  monthlyPrice: string;\n  yearlyPrice: string;\n  buttonText: string;\n  badge?: string;\n  features: {\n    name: string;\n    icon: string;\n    iconColor?: string;\n  }[];\n}\n\nexport interface CurrentPlan {\n  plan: Plan;\n  type: \"monthly\" | \"yearly\" | \"custom\";\n  price?: string;\n  nextBillingDate: string;\n  paymentMethod: string;\n  status: \"active\" | \"inactive\" | \"past_due\" | \"cancelled\";\n}\n\nexport const plans: Plan[] = [\n  {\n    id: \"starter\",\n    title: \"Starter\",\n    description: \"For developers testing out Liveblocks locally.\",\n    currency: \"$\",\n    monthlyPrice: \"0\",\n    yearlyPrice: \"0\",\n    buttonText: \"Start today for free\",\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n  {\n    id: \"pro\",\n    title: \"Pro\",\n    description: \"For companies adding collaboration in production.\",\n    currency: \"$\",\n    monthlyPrice: \"20\",\n    yearlyPrice: \"199\",\n    buttonText: \"Sign up\",\n    badge: \"Most popular\",\n    highlight: true,\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise\",\n    description:\n      \"For organizations that need more support and compliance features.\",\n    currency: \"$\",\n    monthlyPrice: \"Custom\",\n    yearlyPrice: \"Custom\",\n    buttonText: \"Contact sales\",\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n];\n",
      "type": "registry:lib",
      "target": "lib/billingsdk-config.ts"
    }
  ],
  "type": "registry:block"
}