{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-feature-matrix",
  "type": "registry:ui",
  "title": "Pricing Feature Matrix",
  "description": "A comprehensive pricing comparison matrix with feature categories, plan columns, and tooltips.",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-feature-matrix.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n  Rocket01Icon,\n  DiamondIcon,\n  CrownIcon,\n  Tick02Icon,\n  Cancel01Icon,\n  SparklesIcon,\n  Database01Icon,\n  CustomerSupportIcon,\n  Analytics01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\n// Types\ntype FeatureValue = boolean | string;\ntype IconType = typeof SparklesIcon;\n\ninterface Feature {\n  name: string;\n  description?: string;\n}\n\ninterface FeatureCategory {\n  title: string;\n  description: string;\n  icon: IconType;\n  features: Feature[];\n}\n\ninterface Plan {\n  name: string;\n  icon: IconType;\n  isHighlighted?: boolean;\n  features: Record<string, FeatureValue>;\n  cta: {\n    label: string;\n    href: string;\n    variant: \"default\" | \"primary\" | \"outline\";\n  };\n}\n\ninterface PricingFeatureMatrixProps {\n  categories?: FeatureCategory[];\n  plans?: Plan[];\n  className?: string;\n}\n\n// Default data - Design System themed\nconst defaultCategories: FeatureCategory[] = [\n  {\n    title: \"Design System\",\n    description: \"Core design tools that power your product development\",\n    icon: SparklesIcon,\n    features: [\n      {\n        name: \"Component Library\",\n        description: \"Access to pre-built UI components\",\n      },\n      {\n        name: \"Design Tokens\",\n        description: \"Centralized style variables and themes\",\n      },\n      {\n        name: \"Figma Integration\",\n        description: \"Sync designs directly from Figma\",\n      },\n      {\n        name: \"Theme Builder\",\n        description: \"Create and customize themes visually\",\n      },\n      { name: \"Dark Mode\", description: \"Built-in dark mode support\" },\n      {\n        name: \"White Labeling\",\n        description: \"Remove branding for enterprise use\",\n      },\n    ],\n  },\n  {\n    title: \"Developer Tools\",\n    description: \"Tools and APIs for seamless integration\",\n    icon: Database01Icon,\n    features: [\n      {\n        name: \"CLI Tools\",\n        description: \"Command-line interface for automation\",\n      },\n      {\n        name: \"TypeScript Support\",\n        description: \"Full TypeScript definitions included\",\n      },\n      {\n        name: \"Code Generation\",\n        description: \"Auto-generate code from designs\",\n      },\n      {\n        name: \"API Access\",\n        description: \"Programmatic access to all features\",\n      },\n      {\n        name: \"CI/CD Integration\",\n        description: \"Integrate with your deployment pipeline\",\n      },\n      {\n        name: \"Custom Plugins\",\n        description: \"Build and deploy custom extensions\",\n      },\n    ],\n  },\n  {\n    title: \"Collaboration\",\n    description: \"Work together seamlessly across teams\",\n    icon: CustomerSupportIcon,\n    features: [\n      {\n        name: \"Team Workspaces\",\n        description: \"Shared spaces for team collaboration\",\n      },\n      {\n        name: \"Real-time Editing\",\n        description: \"Edit components simultaneously\",\n      },\n      {\n        name: \"Version History\",\n        description: \"Track and restore previous versions\",\n      },\n      {\n        name: \"Code Reviews\",\n        description: \"Built-in review and approval workflow\",\n      },\n      {\n        name: \"Comments & Feedback\",\n        description: \"Leave inline comments on components\",\n      },\n      {\n        name: \"Dedicated Manager\",\n        description: \"Personal account manager for support\",\n      },\n    ],\n  },\n  {\n    title: \"Analytics\",\n    description: \"Insights to optimize your design system\",\n    icon: Analytics01Icon,\n    features: [\n      { name: \"Usage Metrics\", description: \"Track component adoption rates\" },\n      {\n        name: \"Performance Reports\",\n        description: \"Monitor bundle size and load times\",\n      },\n      {\n        name: \"Custom Dashboards\",\n        description: \"Build personalized analytics views\",\n      },\n      {\n        name: \"Accessibility Audits\",\n        description: \"Automated WCAG compliance checks\",\n      },\n      {\n        name: \"Predictive Insights\",\n        description: \"AI-powered usage predictions\",\n      },\n    ],\n  },\n];\n\nconst defaultPlans: Plan[] = [\n  {\n    name: \"Starter\",\n    icon: Rocket01Icon,\n    features: {\n      \"Component Library\": true,\n      \"Design Tokens\": \"50 tokens\",\n      \"Figma Integration\": true,\n      \"Theme Builder\": true,\n      \"Dark Mode\": false,\n      \"White Labeling\": false,\n      \"CLI Tools\": true,\n      \"TypeScript Support\": false,\n      \"Code Generation\": false,\n      \"API Access\": false,\n      \"CI/CD Integration\": false,\n      \"Custom Plugins\": false,\n      \"Team Workspaces\": false,\n      \"Real-time Editing\": false,\n      \"Version History\": true,\n      \"Code Reviews\": false,\n      \"Comments & Feedback\": true,\n      \"Dedicated Manager\": false,\n      \"Usage Metrics\": false,\n      \"Performance Reports\": false,\n      \"Custom Dashboards\": false,\n      \"Accessibility Audits\": false,\n      \"Predictive Insights\": false,\n    },\n    cta: { label: \"Get Started\", href: \"#\", variant: \"outline\" },\n  },\n  {\n    name: \"Pro\",\n    icon: DiamondIcon,\n    isHighlighted: true,\n    features: {\n      \"Component Library\": true,\n      \"Design Tokens\": \"500 tokens\",\n      \"Figma Integration\": true,\n      \"Theme Builder\": true,\n      \"Dark Mode\": true,\n      \"White Labeling\": false,\n      \"CLI Tools\": true,\n      \"TypeScript Support\": true,\n      \"Code Generation\": \"100/mo\",\n      \"API Access\": true,\n      \"CI/CD Integration\": true,\n      \"Custom Plugins\": false,\n      \"Team Workspaces\": true,\n      \"Real-time Editing\": true,\n      \"Version History\": \"30 days\",\n      \"Code Reviews\": \"5 reviewers\",\n      \"Comments & Feedback\": true,\n      \"Dedicated Manager\": false,\n      \"Usage Metrics\": true,\n      \"Performance Reports\": true,\n      \"Custom Dashboards\": \"5 dashboards\",\n      \"Accessibility Audits\": false,\n      \"Predictive Insights\": false,\n    },\n    cta: { label: \"Start Free Trial\", href: \"#\", variant: \"primary\" },\n  },\n  {\n    name: \"Enterprise\",\n    icon: CrownIcon,\n    features: {\n      \"Component Library\": true,\n      \"Design Tokens\": \"Unlimited\",\n      \"Figma Integration\": true,\n      \"Theme Builder\": true,\n      \"Dark Mode\": true,\n      \"White Labeling\": true,\n      \"CLI Tools\": true,\n      \"TypeScript Support\": true,\n      \"Code Generation\": \"Unlimited\",\n      \"API Access\": true,\n      \"CI/CD Integration\": true,\n      \"Custom Plugins\": true,\n      \"Team Workspaces\": true,\n      \"Real-time Editing\": true,\n      \"Version History\": \"Unlimited\",\n      \"Code Reviews\": \"Unlimited\",\n      \"Comments & Feedback\": true,\n      \"Dedicated Manager\": true,\n      \"Usage Metrics\": true,\n      \"Performance Reports\": true,\n      \"Custom Dashboards\": \"Unlimited\",\n      \"Accessibility Audits\": true,\n      \"Predictive Insights\": true,\n    },\n    cta: { label: \"Contact Sales\", href: \"#\", variant: \"outline\" },\n  },\n];\n\n// Feature value display component\nfunction FeatureValueCell({ value }: { value: FeatureValue }) {\n  if (typeof value === \"string\") {\n    return <div>{value}</div>;\n  }\n\n  if (value) {\n    return (\n      <span className=\"flex size-5 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600\">\n        <HugeiconsIcon icon={Tick02Icon} size={12} strokeWidth={2.5} />\n      </span>\n    );\n  }\n\n  return (\n    <span className=\"flex size-5 items-center justify-center rounded-full bg-foreground/[0.065] text-foreground/65\">\n      <HugeiconsIcon icon={Cancel01Icon} size={10} strokeWidth={2} />\n    </span>\n  );\n}\n\nexport default function PricingFeatureMatrix({\n  categories = defaultCategories,\n  plans = defaultPlans,\n  className,\n}: PricingFeatureMatrixProps) {\n  // Flatten all features from all categories\n  const allFeatures = categories.flatMap((category) => category.features);\n\n  return (\n    <div className={cn(\"mx-auto max-w-5xl md:px-6\", className)}>\n      <div className=\"grid grid-cols-2 md:grid-cols-4\">\n        {/* Features Column */}\n        <div>\n          {/* Header */}\n          <div className=\"bg-background sticky top-0 z-[1] flex h-18 items-end gap-1.5 border-b px-6 py-2 max-md:hidden\">\n            <div className=\"text-muted-foreground text-sm font-medium\">\n              Features\n            </div>\n          </div>\n\n          {/* Feature Rows */}\n          {allFeatures.map((feature, idx) => (\n            <div\n              key={feature.name}\n              className={cn(\n                \"text-muted-foreground flex h-14 items-center border-t px-6 md:border-l\",\n                idx === allFeatures.length - 1 &&\n                  \"h-[calc(3.5rem+1px)] border-b\",\n              )}\n            >\n              <div className=\"text-sm\">{feature.name}</div>\n              {feature.description && (\n                <TooltipProvider delayDuration={0}>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <button className=\"ml-1.5 flex size-7 items-center justify-center\">\n                        <span className=\"bg-foreground/10 text-foreground/65 flex size-4 items-center justify-center rounded-full text-[10px] font-medium\">\n                          ?\n                        </span>\n                      </button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"top\" className=\"max-w-xs text-xs\">\n                      {feature.description}\n                    </TooltipContent>\n                  </Tooltip>\n                </TooltipProvider>\n              )}\n            </div>\n          ))}\n        </div>\n\n        {/* Plan Columns */}\n        <div className=\"grid md:col-span-3 md:grid-cols-3\">\n          {plans.map((plan, planIdx) => (\n            <div key={plan.name} className=\"group\">\n              <div\n                data-plan={plan.name.toLowerCase()}\n                className={cn(\n                  plan.isHighlighted &&\n                    \"relative z-[1] md:bg-card md:ring-border md:shadow-black/[0.065] md:shadow-xl md:ring-1\",\n                )}\n              >\n                {/* Plan Header */}\n                <div\n                  className={cn(\n                    \"bg-background sticky top-0 z-10 flex h-18 flex-col items-center justify-center gap-1.5 border-b px-4 pt-2 text-center max-md:hidden lg:px-8\",\n                    plan.isHighlighted && \"bg-card\",\n                  )}\n                >\n                  <HugeiconsIcon icon={plan.icon} size={16} strokeWidth={1.5} />\n                  <div className=\"text-sm font-medium\">{plan.name}</div>\n                </div>\n\n                {/* Feature Values */}\n                {allFeatures.map((feature, idx) => (\n                  <div\n                    key={feature.name}\n                    className={cn(\n                      \"flex h-14 items-center justify-center border-t px-6 text-sm max-md:border-l\",\n                      idx === allFeatures.length - 1 &&\n                        \"h-[calc(3.5rem+1px)] border-b\",\n                      planIdx === plans.length - 1 && \"md:border-r\",\n                    )}\n                  >\n                    <FeatureValueCell value={plan.features[feature.name]} />\n                  </div>\n                ))}\n\n                {/* CTA Button */}\n                <div className=\"flex h-20 items-center justify-center px-4 text-sm max-md:hidden lg:px-6\">\n                  <a\n                    href={plan.cta.href}\n                    className={cn(\n                      \"inline-flex h-8 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 lg:w-full\",\n                      plan.cta.variant === \"primary\"\n                        ? \"shadow-md border-[0.5px] border-white/10 shadow-black/15 bg-primary ring-1 ring-[color-mix(in_oklab,black_15%,var(--color-primary))] dark:border-transparent dark:ring-[color-mix(in_oklab,white_15%,var(--color-primary))] text-primary-foreground hover:bg-primary/90\"\n                        : \"shadow-sm shadow-black/10 border border-transparent bg-card ring-1 ring-foreground/10 duration-200 hover:bg-muted/50 dark:ring-foreground/15 dark:hover:bg-muted/50\",\n                    )}\n                  >\n                    {plan.cta.label}\n                  </a>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-feature-matrix.tsx"
    }
  ]
}