feat(blocks): add pricing block with components and type definitions

apps/www/__registry__/default/blocks/pricing-01/page.tsx

@@ -0,0 +1,16 @@
+import { PricingSection } from "@/registry/default/blocks/pricing-01/components/pricing-section"
+import { pricingTiers } from "@/registry/default/blocks/pricing-01/constants/data"
+
+const Home = () => {
+  return (
+    <div className="min-h-svh bg-background text-foreground">
+      <PricingSection
+        title="Get unlimited access."
+        subtitle="Discover the ideal plan, beginning at under $2 per week."
+        tiers={pricingTiers}
+      />
+    </div>
+  )
+}
+
+export default Home

apps/www/__registry__/index.tsx

@@ -1234,6 +1234,33 @@ export const Index: Record<string, any> = {
       source: "__registry__/new-york/blocks/login-05/page.tsx",
       meta: undefined,
     },
+    "pricing-01": {
+      name: "pricing-01",
+      description: "Basic Pricing Page",
+      type: "registry:block",
+      registryDependencies: ["card","tooltip","tabs","button"],
+      files: [{
+        path: "registry/new-york/blocks/pricing-01/page.tsx",
+        type: "registry:page",
+        target: "app/pricing/page.tsx"
+      },{
+        path: "registry/new-york/blocks/pricing-01/components/pricing-section.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/pricing-01/constants/data.ts",
+        type: "registry:internal",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/pricing-01/types/pricing.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      categories: ["pricing"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/pricing-01/page.tsx")),
+      source: "__registry__/new-york/blocks/pricing-01/page.tsx",
+      meta: undefined,
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "",
@@ -6489,6 +6516,33 @@ export const Index: Record<string, any> = {
       source: "__registry__/default/blocks/login-05/page.tsx",
       meta: undefined,
     },
+    "pricing-01": {
+      name: "pricing-01",
+      description: "Basic Pricing Page",
+      type: "registry:block",
+      registryDependencies: ["card","tooltip","tabs","button"],
+      files: [{
+        path: "registry/default/blocks/pricing-01/page.tsx",
+        type: "registry:page",
+        target: "app/pricing/page.tsx"
+      },{
+        path: "registry/default/blocks/pricing-01/components/pricing-section.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/pricing-01/constants/data.ts",
+        type: "registry:internal",
+        target: ""
+      },{
+        path: "registry/default/blocks/pricing-01/types/pricing.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      categories: ["pricing"],
+      component: React.lazy(() => import("@/registry/default/blocks/pricing-01/page.tsx")),
+      source: "__registry__/default/blocks/pricing-01/page.tsx",
+      meta: undefined,
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "",

apps/www/__registry__/new-york/blocks/pricing-01/page.tsx

@@ -0,0 +1,16 @@
+import { PricingSection } from "@/registry/new-york/blocks/pricing-01/components/pricing-section"
+import { pricingTiers } from "@/registry/new-york/blocks/pricing-01/constants/data"
+
+const Home = () => {
+  return (
+    <div className="min-h-svh bg-background text-foreground">
+      <PricingSection
+        title="Get unlimited access."
+        subtitle="Discover the ideal plan, beginning at under $2 per week."
+        tiers={pricingTiers}
+      />
+    </div>
+  )
+}
+
+export default Home

apps/www/public/r/styles/default/pricing-01.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pricing-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Basic Pricing Page",
+  "registryDependencies": [
+    "card",
+    "tooltip",
+    "tabs",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/pricing-01/page.tsx",
+      "content": "import { PricingSection } from \"@/registry/default/blocks/pricing-01/components/pricing-section\"\nimport { pricingTiers } from \"@/registry/default/blocks/pricing-01/constants/data\"\n\nconst Home = () => {\n  return (\n    <div className=\"min-h-svh bg-background text-foreground\">\n      <PricingSection\n        title=\"Get unlimited access.\"\n        subtitle=\"Discover the ideal plan, beginning at under $2 per week.\"\n        tiers={pricingTiers}\n      />\n    </div>\n  )\n}\n\nexport default Home\n",
+      "type": "registry:page",
+      "target": "app/pricing/page.tsx"
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing-section.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Info } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type {\n  PricingProps,\n  PricingTier,\n} from \"@/registry/default/blocks/pricing-01/types/pricing\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/registry/default/ui/card\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\ntype BillingCycle = \"yearly\" | \"quarterly\"\n\nexport function PricingSection({ title, subtitle, tiers }: PricingProps) {\n  const [billingCycle, setBillingCycle] = React.useState<BillingCycle>(\"yearly\")\n\n  const getPrice = (tier: PricingTier, cycle: BillingCycle) => {\n    if (tier.price[cycle] === null) return null\n    return tier.price[cycle]\n  }\n\n  return (\n    <section className=\"container mx-auto px-4 py-16\">\n      <div className=\"mb-12 space-y-4 text-center\">\n        <div className=\"font-medium text-primary\">Pricing</div>\n        <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl\">\n          {title}\n        </h2>\n        <p className=\"mx-auto max-w-2xl text-lg text-muted-foreground sm:text-xl\">\n          {subtitle}\n        </p>\n      </div>\n\n      <div className=\"mb-8 flex flex-col items-center justify-center gap-4\">\n        <Tabs\n          className=\"w-full max-w-[400px]\"\n          defaultValue=\"yearly\"\n          value={billingCycle}\n          onValueChange={(value: string) =>\n            setBillingCycle(value as BillingCycle)\n          }\n        >\n          <TabsList className=\"grid w-full grid-cols-2\">\n            <TabsTrigger value=\"yearly\">\n              Yearly\n              <span className=\"ml-1.5 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary\">\n                Save 25%\n              </span>\n            </TabsTrigger>\n            <TabsTrigger value=\"quarterly\">Quarterly</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        {tiers.map((tier, index) => (\n          <Card\n            key={index}\n            className={cn(\n              \"relative flex flex-col\",\n              tier.highlighted && \"border-2 border-primary shadow-lg\"\n            )}\n          >\n            {tier.highlighted && (\n              <div className=\"absolute inset-x-0 -top-4 flex justify-center\">\n                <div className=\"rounded-full bg-primary px-3 py-1 text-sm text-primary-foreground\">\n                  Most Popular\n                </div>\n              </div>\n            )}\n            <CardHeader>\n              <h3 className=\"text-2xl font-bold\">{tier.name}</h3>\n              <p className=\"text-muted-foreground\">{tier.description}</p>\n            </CardHeader>\n            <CardContent className=\"flex-1\">\n              <div className=\"mt-4 flex items-baseline gap-x-2\">\n                <span className=\"text-3xl font-bold sm:text-4xl\">\n                  {getPrice(tier, billingCycle)\n                    ? `$${getPrice(tier, billingCycle)}`\n                    : \"Free\"}\n                </span>\n                {tier.price[billingCycle] && (\n                  <>\n                    <span className=\"text-muted-foreground\">\n                      {tier.price.suffix}\n                    </span>\n                    <span className=\"text-muted-foreground\">\n                      /{billingCycle}\n                    </span>\n                  </>\n                )}\n                {tier.savings && billingCycle === \"yearly\" && (\n                  <TooltipProvider>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button\n                          variant={\"ghost\"}\n                          size=\"icon\"\n                          className=\"h-6 w-6\"\n                        >\n                          <Info className=\"h-4 w-4\" />\n                          <span className=\"sr-only\">\n                            Yearly savings information\n                          </span>\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>\n                        <p>Save ${tier.savings} per year</p>\n                      </TooltipContent>\n                    </Tooltip>\n                  </TooltipProvider>\n                )}\n              </div>\n              <ul className=\"mt-8 space-y-4\">\n                {tier.features.map((feature) => (\n                  <li key={feature.text} className=\"flex items-start\">\n                    <Check\n                      className=\"h-5 w-5 shrink-0 text-primary\"\n                      aria-hidden=\"true\"\n                    />\n                    <span className=\"ml-3 text-muted-foreground\">\n                      {feature.text}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </CardContent>\n            <CardFooter>\n              <Button\n                asChild\n                className=\"w-full\"\n                size=\"lg\"\n                variant={tier.buttonVariant || \"default\"}\n              >\n                <a href={tier.buttonHref}>{tier.buttonText}</a>\n              </Button>\n            </CardFooter>\n          </Card>\n        ))}\n      </div>\n    </section>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/pricing-01/constants/data.ts",
+      "content": "import type { PricingTier } from \"@/registry/default/blocks/pricing-01/types/pricing\"\n\nexport const pricingTiers: PricingTier[] = [\n  {\n    name: \"Free\",\n    description: \"For starters and hobbyists that want to try out.\",\n    price: {\n      yearly: null,\n      quarterly: null,\n      suffix: \"\",\n    },\n    features: [\n      { text: \"10 users included\", included: true },\n      { text: \"2 GB of storage\", included: true },\n      { text: \"Help center access\", included: true },\n      { text: \"Email support\", included: true },\n    ],\n    buttonText: \"Continue with Free\",\n    buttonVariant: \"outline\",\n    buttonHref: \"#free\",\n  },\n  {\n    name: \"Pro\",\n    description: \"For small teams that have less that 10 members.\",\n    price: {\n      yearly: 72,\n      quarterly: 24,\n      suffix: \"/user\",\n    },\n    features: [\n      { text: \"20 users included\", included: true },\n      { text: \"10 GB of storage\", included: true },\n      { text: \"Help center access\", included: true },\n      { text: \"Priority email support\", included: true },\n    ],\n    buttonText: \"Get started\",\n    buttonHref: \"#pro\",\n    highlighted: true,\n    savings: 24,\n  },\n  {\n    name: \"Team\",\n    description: \"For large teams that have more than 10 members.\",\n    price: {\n      yearly: 90,\n      quarterly: 30,\n      suffix: \"/user\",\n    },\n    features: [\n      { text: \"50 users included\", included: true },\n      { text: \"30 GB of storage\", included: true },\n      { text: \"Help center access\", included: true },\n      { text: \"Phone & email support\", included: true },\n    ],\n    buttonText: \"Contact us\",\n    buttonVariant: \"outline\",\n    buttonHref: \"#team\",\n    savings: 30,\n  },\n]\n",
+      "type": "registry:internal",
+      "target": ""
+    },
+    {
+      "path": "blocks/pricing-01/types/pricing.ts",
+      "content": "export interface PricingFeature {\n  text: string\n  included: boolean\n}\n\nexport interface PricingTier {\n  name: string\n  description: string\n  price: {\n    yearly: number | null\n    quarterly: number | null\n    suffix?: string\n  }\n  features: PricingFeature[]\n  buttonText: string\n  buttonVariant?: \"default\" | \"outline\"\n  buttonHref: string\n  highlighted?: boolean\n  savings?: number\n}\n\nexport interface PricingProps {\n  title: string\n  subtitle: string\n  tiers: PricingTier[]\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "pricing"
+  ]
+}