{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-demo",
  "title": "Pricing Demo",
  "description": "Demo showing pricing component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/pricing",
    "https://systaliko-ui.vercel.app/r/badge",
    "https://systaliko-ui.vercel.app/r/button",
    "https://systaliko-ui.vercel.app/r/label"
  ],
  "files": [
    {
      "path": "registry/demo/ecommerce/pricing/index.tsx",
      "content": "'use client';\nimport {\n  calculateYearlySavings,\n  Pricing,\n  PricingCard,\n  PricingFeature,\n  PricingIncludesPrevious,\n  PricingIntervalSwitch,\n  PricingPackage,\n  PricingValue,\n} from '@/components/systaliko-ui/ecommerce/pricing';\nimport { Badge } from '@/components/systaliko-ui/shadcn/badge';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nimport { Label } from '@/components/systaliko-ui/shadcn/field';\nimport { ArrowUpRightIcon } from 'lucide-react';\n\ninterface PlanConfig {\n  id: string;\n  name: string;\n  description: string;\n  pricing: { monthly: number; yearly: number };\n  features: string[];\n  includesPrevious?: boolean;\n  featured?: boolean;\n}\nconst feature_style = `\n  text-sm\n  [&_[data-slot='icon-wrapper']]:rounded-full [&_[data-slot='icon-wrapper']]:bg-muted/20 \n  [&_[data-slot='icon-wrapper']]:border [&_[data-slot='icon-wrapper']]:border-border/50 \n  [&_[data-slot='icon-wrapper']]:aspect-square  [&_[data-slot='icon-wrapper']]:[&>svg]:w-2.5\n`;\nconst plans: PlanConfig[] = [\n  {\n    id: 'plan-free',\n    name: 'Free',\n    description: 'Perfect for personal use.',\n    pricing: { monthly: 0, yearly: 0 },\n    features: [\n      '30 monthly tasks',\n      'Up to 3 active projects',\n      'Solo workspace',\n      'Basic reminders and due dates',\n      'Mobile + desktop app',\n      'Community support',\n    ],\n  },\n  {\n    id: 'plan-team',\n    name: 'Team',\n    description: 'Perfect for small teams.',\n    pricing: { monthly: 12, yearly: 100 },\n    features: [\n      'Unlimited projects and tasks',\n      'Team workspaces with roles & permissions',\n      'Real-time collaboration & comments',\n      'Kanban, calendar & timeline views',\n      'File sharing + integrations (Google Drive, Slack...)',\n      'Priority email & chat support',\n    ],\n    includesPrevious: true,\n    featured: true,\n  },\n  {\n    id: 'plan-enterprise',\n    name: 'Enterprise',\n    description: 'Perfect for large organizations.',\n    pricing: { monthly: 24, yearly: 200 },\n    features: [\n      'Workflow automations (triggers & actions)',\n      'Advanced reporting dashboards',\n      'Custom fields & templates',\n      'Time tracking & workload view',\n      'External client access',\n      'SSO + enhanced security',\n    ],\n    includesPrevious: true,\n  },\n];\nexport function PricingDemo() {\n  const savings = calculateYearlySavings(plans[1].pricing);\n\n  return (\n    <Pricing className=\"p-8 w-full max-w-7xl mx-auto space-y-8\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <PricingIntervalSwitch />\n        <Label className=\"text-muted-foreground\">Billed annually</Label>\n        <Badge\n          className=\"rounded-full shadow-2xs ring-2 ring-ring/10 py-1 bg-emerald-200 text-emerald-950\"\n          variant={'outline'}\n        >\n          💰 Save up to {savings}% with annual billing\n        </Badge>\n      </div>\n      <div className=\"flex gap-4 items-end justify-center flex-wrap\">\n        {plans.map((plan) => (\n          <PricingCard\n            className={`\n              shadow-2xs ring-2 ring-ring/10 rounded-xl p-0 space-y-0 \n              ${plan.featured ? 'bg-primary text-primary-foreground' : 'bg-card text-card-foreground'}\n            `}\n            key={plan.id}\n          >\n            <div className=\"shadow-2xs flex p-8 flex-col gap-8\">\n              <PricingPackage className=\"flex-col gap-2 justify-start items-start\">\n                <Badge variant={'secondary'}>{plan.name}</Badge>\n                <p className=\"text-muted-foreground\">{plan.description}</p>\n              </PricingPackage>\n\n              <PricingValue\n                yearlyValue={plan.pricing.yearly}\n                monthlyValue={plan.pricing.monthly}\n                className=\"font-semibold\"\n              />\n              <Button className=\"w-full\" variant={'secondary'} size=\"lg\">\n                Get Started\n                <ArrowUpRightIcon className=\"size-4\" />\n              </Button>\n            </div>\n\n            <div className=\"p-8 flex flex-col gap-1.5\">\n              {plan.includesPrevious && (\n                <PricingIncludesPrevious className={feature_style}>\n                  Everything in previous plan\n                </PricingIncludesPrevious>\n              )}\n              {plan.features.map((feature) => (\n                <PricingFeature className={feature_style} key={feature}>\n                  {feature}\n                </PricingFeature>\n              ))}\n            </div>\n          </PricingCard>\n        ))}\n      </div>\n      <div className=\"text-center text-sm text-muted-foreground\">\n        <p>All plans include a 30-day money-back guarantee. No hidden fees.</p>\n      </div>\n    </Pricing>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/pricing.tsx"
    }
  ],
  "type": "registry:block"
}