{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-table-seven",
  "title": "Pricing Table Seven",
  "description": "A modern pricing table component with contact us plan",
  "dependencies": ["lucide-react", "motion"],
  "registryDependencies": ["button", "card", "badge", "slider", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/pricing-table-seven.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Check, Info } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n// Define variants using CVA\nconst sectionVariants = cva(\"py-32\", {\n  variants: {\n    size: {\n      small: \"py-6 md:py-12\",\n      medium: \"py-10 md:py-20\",\n      large: \"py-16 md:py-32\",\n    },\n    theme: {\n      minimal: \"\",\n      classic:\n        \"bg-gradient-to-b from-background to-muted/20 relative overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n    theme: \"minimal\",\n  },\n});\n\nconst titleVariants = cva(\"text-pretty text-center font-bold\", {\n  variants: {\n    size: {\n      small: \"text-3xl lg:text-4xl\",\n      medium: \"text-4xl lg:text-5xl\",\n      large: \"text-4xl lg:text-6xl\",\n    },\n    theme: {\n      minimal: \"\",\n      classic:\n        \"bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst descriptionVariants = cva(\n  \"text-muted-foreground max-w-2xl mx-auto text-center\",\n  {\n    variants: {\n      size: {\n        small: \"text-base lg:text-lg\",\n        medium: \"text-lg lg:text-xl\",\n        large: \"lg:text-xl\",\n      },\n      theme: {\n        minimal: \"\",\n        classic: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"large\",\n      theme: \"minimal\",\n    },\n  },\n);\n\nconst cardVariants = cva(\n  \"relative cursor-pointer transition-all duration-300 hover:shadow-lg\",\n  {\n    variants: {\n      size: {\n        small: \"p-4\",\n        medium: \"p-5\",\n        large: \"p-6\",\n      },\n      theme: {\n        minimal: \"bg-card border-border\",\n        classic:\n          \"bg-card border-border/50 hover:shadow-xl backdrop-blur-sm shadow-md\",\n      },\n      selected: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        theme: \"minimal\",\n        selected: true,\n        className: \"border-primary shadow-lg ring-2 ring-primary/50\",\n      },\n      {\n        theme: \"minimal\",\n        selected: false,\n        className: \"hover:border-muted-foreground\",\n      },\n      {\n        theme: \"classic\",\n        selected: true,\n        className:\n          \"border-primary/30 shadow-xl ring-1 ring-primary/20 bg-gradient-to-b from-primary/5 to-card\",\n      },\n      {\n        theme: \"classic\",\n        selected: false,\n        className: \"hover:border-primary/20\",\n      },\n    ],\n    defaultVariants: {\n      size: \"large\",\n      theme: \"minimal\",\n      selected: false,\n    },\n  },\n);\n\nconst buttonVariants = cva(\n  \"w-full transition-all duration-300 hover:cursor-pointer\",\n  {\n    variants: {\n      theme: {\n        minimal: \"\",\n        classic: \"\",\n      },\n      selected: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        theme: \"minimal\",\n        selected: true,\n        className:\n          \"shadow hover:bg-primary/90 h-9 py-2 group bg-primary text-primary-foreground ring-primary before:from-primary-foreground/20 after:from-primary-foreground/10 relative isolate inline-flex w-full items-center justify-center overflow-hidden rounded-md px-3 text-sm font-medium ring-1 before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-gradient-to-b before:opacity-80 before:transition-opacity before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-md after:bg-gradient-to-b after:to-transparent after:mix-blend-overlay\",\n      },\n      {\n        theme: \"minimal\",\n        selected: false,\n        className:\n          \"bg-secondary hover:bg-secondary/80 text-secondary-foreground\",\n      },\n      {\n        theme: \"classic\",\n        selected: true,\n        className:\n          \"bg-gradient-to-r from-primary to-primary/80 text-primary-foreground font-semibold hover:shadow-xl active:scale-95 border border-primary/20\",\n      },\n      {\n        theme: \"classic\",\n        selected: false,\n        className:\n          \"bg-secondary hover:bg-secondary/80 text-secondary-foreground\",\n      },\n    ],\n    defaultVariants: {\n      theme: \"minimal\",\n      selected: false,\n    },\n  },\n);\n\n// TypeScript interfaces\nexport interface PricingTableSevenPlan {\n  id: string;\n  name: string;\n  description: string;\n  price: number;\n  users: number;\n  popular?: boolean;\n}\n\nexport interface FeatureItemRecord {\n  name: string;\n  tooltip?: boolean;\n  [planId: string]: boolean | string | undefined;\n}\n\nexport interface FeatureCategory {\n  category: string;\n  items: FeatureItemRecord[];\n}\n\nexport interface PricingTableSevenProps extends VariantProps<\n  typeof sectionVariants\n> {\n  plans: PricingTableSevenPlan[];\n  features: FeatureCategory[];\n  title?: string;\n  description?: string;\n  onPlanSelect?: (planId: string) => void;\n  className?: string;\n}\n\nexport function PricingTableSeven({\n  className,\n  plans,\n  features,\n  title = \"Choose a plan that's right for you\",\n  description = \"We believe Untitled should be accessible to all companies, no matter the size of your startup.\",\n  onPlanSelect,\n  size,\n  theme = \"minimal\",\n}: PricingTableSevenProps) {\n  const [selectedPlan, setSelectedPlan] = useState(\n    plans.find((p) => p.popular)?.id || plans[0]?.id || \"\",\n  );\n\n  const [sliderValue, setSliderValue] = useState<number[]>([\n    plans.find((p) => p.popular)?.users || 0,\n  ]);\n\n  const renderFeatureValue = (value: boolean | string | undefined) => {\n    if (typeof value === \"boolean\") {\n      return value ? (\n        <Check className=\"text-primary h-5 w-5\" />\n      ) : (\n        <span className=\"text-muted-foreground\">—</span>\n      );\n    }\n    if (typeof value === \"string\") {\n      return <span className=\"text-foreground text-sm\">{value}</span>;\n    }\n    return <span className=\"text-muted-foreground\">—</span>;\n  };\n\n  const handlePlanSelect = (planId: string) => {\n    setSelectedPlan(planId);\n    const selected = plans.find((p) => p.id === planId);\n    if (selected && typeof selected.users === \"number\") {\n      setSliderValue([selected.users]);\n    }\n    onPlanSelect?.(planId);\n  };\n\n  return (\n    <section className={cn(sectionVariants({ size, theme }), className)}>\n      {/* Classic theme background elements */}\n      {theme === \"classic\" && (\n        <>\n          <div className=\"bg-grid-pattern absolute inset-0 opacity-5\" />\n          <div className=\"bg-primary/5 absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl\" />\n          <div className=\"bg-secondary/5 absolute top-1/4 right-1/4 h-64 w-64 rounded-full blur-2xl\" />\n        </>\n      )}\n\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Hero Section */}\n        <div className=\"pb-1 text-center\">\n          <h1 className={cn(titleVariants({ size, theme }), \"leading-[1.12]\")}>\n            {title}\n          </h1>\n          <p className={cn(descriptionVariants({ size, theme }), \"mt-6\")}>\n            {description}\n          </p>\n        </div>\n\n        {/* User Slider */}\n        <div className=\"mx-auto mt-12 max-w-md px-4\">\n          <div className=\"relative\">\n            <Slider\n              value={sliderValue}\n              onValueChange={(e) => {\n                setSliderValue(e);\n                setSelectedPlan(\n                  plans.filter((plan) => plan.users >= e[0])[0]?.id ||\n                    plans.find((plan) => plan.popular)?.id!,\n                );\n              }}\n              max={25}\n              min={1}\n              step={1}\n              className=\"text-primary w-full\"\n            />\n            <div className=\"mt-2 text-center\">\n              <span className=\"text-foreground text-sm font-medium\">\n                {sliderValue[0]} users\n              </span>\n            </div>\n          </div>\n        </div>\n\n        {/* Pricing Cards */}\n        <div className=\"mt-16\">\n          <div className=\"mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {plans.map((plan) => (\n              <motion.div\n                key={plan.id}\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.3 }}\n              >\n                <Card\n                  className={cn(\n                    cardVariants({\n                      size,\n                      theme,\n                      selected: selectedPlan === plan.id,\n                    }),\n                  )}\n                  onClick={() => handlePlanSelect(plan.id)}\n                >\n                  {plan.popular && (\n                    <Badge\n                      className={cn(\n                        \"absolute -top-3 left-1/2 z-10 -translate-x-1/2 px-4 py-1 text-sm font-medium shadow-lg\",\n                        theme === \"classic\"\n                          ? \"from-primary to-primary/80 text-primary-foreground border-primary/20 bg-gradient-to-r\"\n                          : \"bg-primary text-primary-foreground\",\n                      )}\n                    >\n                      Most popular\n                    </Badge>\n                  )}\n                  <CardHeader className=\"text-center\">\n                    <CardTitle className=\"text-lg font-semibold\">\n                      {plan.name}\n                    </CardTitle>\n                    <CardDescription className=\"text-muted-foreground text-sm\">\n                      {plan.description}\n                    </CardDescription>\n                    <div className=\"mt-4\">\n                      <span\n                        className={cn(\n                          \"text-4xl font-bold\",\n                          theme === \"classic\"\n                            ? \"from-foreground to-muted-foreground bg-gradient-to-r bg-clip-text text-transparent\"\n                            : \"text-foreground\",\n                        )}\n                      >\n                        ${plan.price}\n                      </span>\n                    </div>\n                  </CardHeader>\n                  <CardContent>\n                    <Button\n                      className={cn(\n                        buttonVariants({\n                          theme,\n                          selected: selectedPlan === plan.id,\n                        }),\n                      )}\n                    >\n                      Get started\n                    </Button>\n                  </CardContent>\n                </Card>\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Feature Comparison Table */}\n          <div\n            className={cn(\n              \"overflow-hidden overflow-x-auto rounded-lg border\",\n              theme === \"classic\"\n                ? \"bg-card/50 border-border/50 shadow-md backdrop-blur-sm\"\n                : \"bg-card\",\n            )}\n          >\n            <AnimatePresence>\n              {features.map((category, categoryIndex) => (\n                <motion.div\n                  key={category.category}\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ duration: 0.3, delay: categoryIndex * 0.1 }}\n                >\n                  {categoryIndex > 0 && <div className=\"border-t\" />}\n\n                  {/* Category Header */}\n                  <div\n                    className={cn(\n                      \"px-4 py-4 sm:px-6\",\n                      theme === \"classic\" ? \"bg-muted/30\" : \"bg-muted/50\",\n                    )}\n                  >\n                    <h3 className=\"text-foreground text-sm font-semibold\">\n                      {category.category}\n                    </h3>\n                  </div>\n\n                  {/* Feature Rows */}\n                  {category.items.map((feature, featureIndex) => (\n                    <div\n                      key={feature.name}\n                      className={cn(\n                        \"px-4 py-4 sm:px-6\",\n                        featureIndex > 0 && \"border-border/50 border-t\",\n                      )}\n                    >\n                      {/* Mobile Layout */}\n                      <div className=\"block sm:hidden\">\n                        <div className=\"mb-3 flex items-center space-x-2\">\n                          <span className=\"text-foreground text-sm font-medium\">\n                            {feature.name}\n                          </span>\n                          {feature.tooltip && (\n                            <Info className=\"text-muted-foreground h-4 w-4\" />\n                          )}\n                        </div>\n                        <div className=\"space-y-2\">\n                          {plans.map((plan) => (\n                            <div\n                              key={plan.id}\n                              className=\"flex items-center justify-between\"\n                            >\n                              <span className=\"text-muted-foreground text-sm\">\n                                {plan.name}\n                              </span>\n                              <div className=\"flex items-center\">\n                                {renderFeatureValue(feature[plan.id])}\n                              </div>\n                            </div>\n                          ))}\n                        </div>\n                      </div>\n\n                      {/* Desktop Layout - Match pricing cards grid */}\n                      <div className=\"hidden gap-4 sm:grid sm:grid-cols-[minmax(0,1.5fr)_repeat(3,minmax(0,1fr))] lg:grid-cols-4\">\n                        <div className=\"flex items-center space-x-2\">\n                          <span className=\"text-foreground text-sm font-medium\">\n                            {feature.name}\n                          </span>\n                          {feature.tooltip && (\n                            <Info className=\"text-muted-foreground h-4 w-4\" />\n                          )}\n                        </div>\n                        {plans.map((plan) => (\n                          <div\n                            key={plan.id}\n                            className=\"flex items-center justify-center\"\n                          >\n                            {renderFeatureValue(feature[plan.id])}\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  ))}\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n\n          {/* Bottom CTA Buttons */}\n          <div className=\"mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {plans.map((plan) => (\n              <Button\n                key={plan.id}\n                className={cn(\n                  buttonVariants({ theme, selected: selectedPlan === plan.id }),\n                )}\n                onClick={() => handlePlanSelect(plan.id)}\n              >\n                Get started\n              </Button>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/pricing-table-seven.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/pricing-table-seven-demo.tsx",
      "content": "\"use client\";\n\nimport { PricingTableSeven } from \"@/components/billingsdk/pricing-table-seven\";\n\nconst plans = [\n  {\n    id: \"basic\",\n    name: \"Basic plan\",\n    description: \"Our most popular plan.\",\n    price: 10,\n    popular: false,\n    users: 5,\n  },\n  {\n    id: \"business\",\n    name: \"Business plan\",\n    description: \"Best for growing teams.\",\n    price: 20,\n    popular: true,\n    users: 15,\n  },\n  {\n    id: \"enterprise\",\n    name: \"Enterprise plan\",\n    description: \"Best for large teams.\",\n    price: 40,\n    popular: false,\n    users: 25,\n  },\n];\n\nconst features = [\n  {\n    category: \"Overview\",\n    items: [\n      {\n        name: \"Basic features\",\n        tooltip: true,\n        basic: true,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Users\",\n        tooltip: true,\n        basic: \"10\",\n        business: \"20\",\n        enterprise: \"Unlimited\",\n      },\n      {\n        name: \"Individual data\",\n        tooltip: true,\n        basic: \"20GB\",\n        business: \"40GB\",\n        enterprise: \"Unlimited\",\n      },\n      {\n        name: \"Support\",\n        tooltip: true,\n        basic: true,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Automated workflows\",\n        tooltip: true,\n        basic: false,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"200+ integrations\",\n        tooltip: true,\n        basic: false,\n        business: true,\n        enterprise: true,\n      },\n    ],\n  },\n  {\n    category: \"Reporting and analytics\",\n    items: [\n      {\n        name: \"Analytics\",\n        tooltip: true,\n        basic: \"Basic\",\n        business: \"Advanced\",\n        enterprise: \"Advanced\",\n      },\n      {\n        name: \"Export reports\",\n        tooltip: true,\n        basic: true,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Scheduled reports\",\n        tooltip: true,\n        basic: true,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"API access\",\n        tooltip: true,\n        basic: false,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Advanced reports\",\n        tooltip: true,\n        basic: false,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Saved reports\",\n        tooltip: true,\n        basic: false,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Customer properties\",\n        tooltip: true,\n        basic: false,\n        business: false,\n        enterprise: true,\n      },\n      {\n        name: \"Custom fields\",\n        tooltip: true,\n        basic: false,\n        business: false,\n        enterprise: true,\n      },\n    ],\n  },\n  {\n    category: \"User access\",\n    items: [\n      {\n        name: \"SSO/SAML authentication\",\n        tooltip: true,\n        basic: true,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Advanced permissions\",\n        tooltip: true,\n        basic: false,\n        business: true,\n        enterprise: true,\n      },\n      {\n        name: \"Audit log\",\n        tooltip: true,\n        basic: false,\n        business: false,\n        enterprise: true,\n      },\n      {\n        name: \"Data history\",\n        tooltip: true,\n        basic: false,\n        business: false,\n        enterprise: true,\n      },\n    ],\n  },\n];\n\nexport function PricingTableSevenDemo() {\n  return (\n    <PricingTableSeven\n      plans={plans}\n      features={features}\n      title=\"Choose a plan that's right for you\"\n      description=\"We believe Untitled should be accessible to all companies, no matter the size of your startup.\"\n      onPlanSelect={(planId: string) => console.log(\"Selected plan:\", planId)}\n      size=\"medium\"\n      theme=\"classic\"\n      className=\"w-full\"\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pricing-table-seven-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"
}