@nanisoft/prism-ui 0.3.0 → 0.5.0

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/package.json

@@ -1,100 +1,48 @@
 {
   "name": "@nanisoft/prism-ui",
-  "version": "0.3.0",
-  "description": "Prism's React surface — components, blocks, and pages over Ant Design v6. Apps import from here, never from antd directly.",
-  "license": "MIT",
+  "version": "0.5.0",
   "type": "module",
-  "sideEffects": false,
-  "engines": {
-    "node": ">=22"
+  "description": "Component + block source of truth, published as a shadcn registry.",
+  "license": "MIT",
+  "author": "NaniSoft",
+  "homepage": "https://prism.nanisoft.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NaniSoft/prism.git",
+    "directory": "packages/ui"
   },
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./provider": {
-      "types": "./dist/provider/index.d.ts",
-      "import": "./dist/provider/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*/index.d.ts",
-      "import": "./dist/components/*/index.js"
-    },
-    "./blocks": {
-      "types": "./dist/blocks/index.d.ts",
-      "import": "./dist/blocks/index.js"
-    },
-    "./blocks/*": {
-      "types": "./dist/blocks/*/index.d.ts",
-      "import": "./dist/blocks/*/index.js"
-    },
-    "./pages": {
-      "types": "./dist/pages/index.d.ts",
-      "import": "./dist/pages/index.js"
-    },
-    "./pages/*": {
-      "types": "./dist/pages/*/index.d.ts",
-      "import": "./dist/pages/*/index.js"
-    },
-    "./icons": {
-      "types": "./dist/generated/icons.d.ts",
-      "import": "./dist/generated/icons.js"
-    },
-    "./wrapped-registry": {
-      "types": "./dist/wrapped-registry.d.ts",
-      "import": "./dist/wrapped-registry.js"
-    },
-    "./generated/pass-throughs": {
-      "types": "./dist/generated/pass-throughs.d.ts",
-      "import": "./dist/generated/pass-throughs.js"
-    },
-    "./prototype": {
-      "types": "./dist/prototype/index.d.ts",
-      "import": "./dist/prototype/index.js"
-    },
-    "./styles.css": "./dist/styles.css",
+    "./components/*": "./src/components/*.tsx",
+    "./registry.json": "./registry.json",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "src",
+    "registry.json",
+    "public/r",
+    "components.json"
   ],
-  "peerDependencies": {
-    "react": "^19.3.0"
+  "publishConfig": {
+    "access": "public"
   },
-  "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.3",
-    "@types/node": "^26.5.1",
-    "@types/react": "^19.3.0",
-    "jsdom": "^30.0.1",
-    "publint": "^0.3.24",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "typescript": "^7.0.2",
-    "tsx": "^4.0.0",
-    "vitest": "^5.0.0"
+  "scripts": {
+    "sync": "node scripts/sync-registry.mjs",
+    "validate": "node scripts/validate-registry.mjs",
+    "build": "pnpm sync && pnpm validate && shadcn build",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@ant-design/icons": "^6.3.4",
-    "antd": "^6.6.4",
-    "@nanisoft/prism-tokens": "0.3.0"
+    "@base-ui/react": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.545.0",
+    "tailwind-merge": "^3.3.1"
   },
-  "author": "NaniSoft",
-  "homepage": "https://prism.nanisoft.com",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NaniSoft/prism.git",
-    "directory": "packages/ui"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json && node scripts/copy-styles.mjs",
-    "generate": "tsx scripts/generateAntdExports.mjs",
-    "lint": "oxlint .",
-    "test": "vitest run"
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "shadcn": "^3.6.0",
+    "typescript": "^5.7.0"
   }
-}
+}

package/public/r/badge.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "title": "Badge",
+  "description": "Shared badge primitive. Installed automatically as a dependency of any block that uses it.",
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/badge.tsx",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst badgeVariants = cva(\n  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground border-transparent',\n        secondary: 'bg-secondary text-secondary-foreground border-transparent',\n        destructive: 'bg-destructive text-destructive-foreground border-transparent',\n        success: 'bg-success text-success-foreground border-transparent',\n        warning: 'bg-warning text-warning-foreground border-transparent',\n        outline: 'text-foreground border-border',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n)\n\nfunction Badge({\n  className,\n  variant,\n  ...props\n}: ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n  return (\n    <span\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:component",
+      "target": "components/ui/badge.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:component"
+}

package/public/r/button.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "title": "Button",
+  "description": "Shared button primitive. Installed automatically as a dependency of any block that uses it.",
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/button.tsx",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst buttonVariants = cva(\n  // The focus ring is `ring-ring` at full strength, not shadcn's stock\n  // `focus-visible:ring-ring/50`. The token build pins `--ring` to a step that\n  // clears 3:1 against the surface, and half alpha throws that away: 50% of this\n  // ring composites to between 1.14:1 and 2.74:1 against every surface in all\n  // six themes and clears 3:1 in none of them, which fails WCAG 1.4.11 on the one\n  // indicator a keyboard user has. The stock value is kept here deliberately as a\n  // deviation from upstream: a consumer's button must not fail the threshold the\n  // ring exists to meet.\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium outline-none transition-[color,box-shadow,background-color] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        // `primary` is a surface token, not a text token: in the pastel themes it\n        // compiles to a light tint (e.g. #ec88a0) that fails 4.5:1 on the page\n        // background. Link text uses the foreground and keeps the underline as its\n        // affordance, so emphasis comes from weight rather than a failing colour.\n        link: 'text-foreground underline-offset-4 hover:underline',\n      },\n      // Touch targets are enlarged by input method, not by viewport. The\n      // metrics below are the designed desktop sizes and stay untouched for\n      // mouse and trackpad; only a coarse pointer — finger or stylus — gets\n      // the 44px iOS/Android HIG target. `pointer-coarse:` compiles to\n      // `@media (pointer: coarse)` inside `@layer utilities`, which lands\n      // after the base utility in the cascade, so it wins without needing\n      // `!important` or a specificity fight.\n      //\n      // `min-w-11` is what makes the second axis safe: an icon-only `default`\n      // is `size-4` plus `px-3` = 40px wide and an icon-only `sm` is `size-4`\n      // plus `px-2.5` = 36px, so growing the height alone would still leave\n      // both under 44px across. The coarse padding step on `default` lifts the\n      // common cases clear of the floor outright, and `min-w-11` backstops\n      // whatever content a consumer passes.\n      size: {\n        default:\n          'h-9 px-4 py-2 has-[>svg]:px-3 pointer-coarse:h-11 pointer-coarse:min-w-11 pointer-coarse:px-5 pointer-coarse:has-[>svg]:px-4',\n        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5 pointer-coarse:h-11 pointer-coarse:min-w-11',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4 pointer-coarse:h-11',\n        icon: 'size-9 pointer-coarse:size-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  ...props\n}: ComponentProps<'button'> & VariantProps<typeof buttonVariants>) {\n  return (\n    <button\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:component",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:component"
+}

package/public/r/card.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "title": "Card",
+  "description": "Shared card primitive. Installed automatically as a dependency of any block that uses it.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/card.tsx",
+      "content": "import type { ComponentProps } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nfunction Card({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        '@container/card-header grid auto-rows-min items-start gap-1.5 px-6',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('font-semibold leading-none', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('px-6', className)} {...props} />\n}\n\nfunction CardFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center px-6', className)}\n      {...props}\n    />\n  )\n}\n\nexport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }\n",
+      "type": "registry:component",
+      "target": "components/ui/card.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:component"
+}

package/public/r/cta-01.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cta-01",
+  "title": "CTA 01 - Filled Banner",
+  "description": "A closing call to action on a filled primary surface. Headline, supporting line and the action are passed in as props.",
+  "dependencies": [
+    "clsx",
+    "lucide-react",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "src/components/ds/blocks/cta-01/cta.tsx",
+      "content": "import { ArrowRight } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Section, type HeadingLevel } from '@/components/ds/blocks/section'\n\nexport type Cta01Props = {\n  title: string\n  description?: string\n  action?: { label: string; href?: string; variant?: 'default' | 'secondary' | 'outline' }\n  /** Heading level for the headline. See `HeadingLevel`. */\n  headingLevel?: HeadingLevel\n}\n\n/**\n * A closing call to action on a filled primary surface.\n *\n * The copy and the action are props. It previously shipped the catalog's own\n * pitch (\"Start with one block, keep the tokens\") and a hardcoded \"Browse the\n * catalog\" button, both of which described the library rather than whatever\n * product installed the block.\n */\nexport function Cta01({ title, description, action, headingLevel = 'h2' }: Cta01Props) {\n  /*\n   * The same mechanism `SectionHeading` uses for its own `as` prop, which this\n   * block cannot borrow: its copy sits on a filled `bg-primary` surface, where\n   * `SectionHeading`'s muted-surface description colour and `gap-4` would be\n   * wrong. So the tag is resolved here and the classes stay surface-specific\n   * rather than the heading level being the reason the markup stays hardcoded.\n   */\n  const Heading = headingLevel\n\n  return (\n    <Section className=\"py-20\">\n      <div className=\"bg-primary text-primary-foreground relative overflow-hidden rounded-2xl px-8 py-16 text-center\">\n        <div\n          aria-hidden\n          className=\"from-primary-foreground/15 pointer-events-none absolute inset-0 bg-gradient-to-tr to-transparent\"\n        />\n        <div className=\"relative flex flex-col items-center gap-6\">\n          <Heading className=\"max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            {title}\n          </Heading>\n          {description ? (\n            <p className=\"max-w-xl text-lg text-pretty opacity-90\">{description}</p>\n          ) : null}\n          {action ? (\n            <Button\n              size=\"lg\"\n              variant={action.variant ?? 'secondary'}\n              className=\"group\"\n            >\n              {action.label}\n              <ArrowRight className=\"motion-safe:transition-transform size-4 group-hover:translate-x-0.5\" />\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </Section>\n  )\n}\n\nexport default Cta01\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/cta-01/cta.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/cta-01/index.tsx",
+      "content": "export { Cta01, default } from './cta'\r\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/cta-01/index.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/section.tsx",
+      "content": "import type { ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Container primitive. Every block composes its own section from this so vertical\n * rhythm stays consistent across the catalog instead of being re-invented per block.\n */\nexport function Section({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'section'>) {\n  return (\n    <section\n      className={cn('py-16 sm:py-24', className)}\n      {...props}\n    >\n      <div className=\"mx-auto w-full max-w-6xl px-6 lg:px-8\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * The six heading levels a block can be composed at.\n *\n * Every block takes a `headingLevel` prop typed with this and forwards it to the\n * one heading it renders, so the surrounding document decides where the block\n * sits in the outline rather than the block deciding for itself. `h2` is the\n * default because a block is composed, not a page.\n *\n * A block rendered where the document *already* owns a heading for the same\n * content passes one level deeper. A catalog card already names the block in its\n * own `h2`, so the copy of the block embedded inside that card passes `h3`: the\n * embedded heading then reads as a child of the card that introduces it instead\n * of as a second, competing sibling. This is a fact about where the block was\n * placed, not about the block, which is why it is a prop and not a default.\n */\nexport type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport function SectionHeading({\n  eyebrow,\n  title,\n  as: Heading = 'h2',\n  description,\n  align = 'center',\n  className,\n}: {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  align?: 'center' | 'left'\n  /**\n   * Heading level. Defaults to `h2` because blocks compose under a page heading.\n   * A page that renders a block as its primary heading passes `as=\"h1\"` — a\n   * document with no `h1` gives screen-reader and search engines no top-level\n   * entry point.\n   */\n  as?: HeadingLevel\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4',\n        align === 'center' ? 'items-center text-center' : 'items-start text-left',\n        className,\n      )}\n    >\n      {eyebrow ? (\n        <span className=\"text-muted-foreground text-sm font-medium tracking-wide uppercase\">\n          {eyebrow}\n        </span>\n      ) : null}\n      <Heading className=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </Heading>\n      {description ? (\n        <p className=\"text-muted-foreground max-w-2xl text-lg text-pretty\">\n          {description}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/section.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "categories": [
+    "marketing"
+  ],
+  "type": "registry:block"
+}

package/public/r/feature-grid-01.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "feature-grid-01",
+  "title": "Feature Grid 01 - Four Up With Icons",
+  "description": "A four-up feature grid with icon tiles. Pass the items in; the section heading is optional.",
+  "dependencies": [
+    "clsx",
+    "lucide-react",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "src/components/ds/blocks/feature-grid-01/feature-grid.tsx",
+      "content": "import type { LucideIcon } from 'lucide-react'\n\nimport { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'\n\nexport type Feature = {\n  icon: LucideIcon\n  title: string\n  body: string\n}\n\nexport type FeatureGrid01Props = {\n  eyebrow?: string\n  title?: string\n  description?: string\n  features: Feature[]\n  /** `icon` tiles read well at 2-up; `bare` leans on the type alone. */\n  variant?: 'icon' | 'bare'\n  /** Heading level for the section title. See `HeadingLevel`. */\n  headingLevel?: HeadingLevel\n}\n\n/**\n * A grid of short feature blurbs.\n *\n * The feature list is a prop. It previously hardcoded the catalog's own selling\n * points under the heading \"Why this catalog\", so an installed block argued for\n * the library inside the consumer's product.\n */\nexport function FeatureGrid01({\n  eyebrow,\n  title,\n  description,\n  features,\n  variant = 'icon',\n  headingLevel = 'h2',\n}: FeatureGrid01Props) {\n  return (\n    <Section>\n      {title ? (\n        <SectionHeading\n          as={headingLevel}\n          eyebrow={eyebrow}\n          title={title}\n          description={description}\n          className=\"mb-12\"\n        />\n      ) : null}\n\n      <div className=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <Card key={feature.title} className=\"gap-4 py-6\">\n            <CardHeader>\n              {variant === 'icon' ? (\n                <span className=\"bg-accent text-accent-foreground mb-2 flex size-10 items-center justify-center rounded-lg\">\n                  <feature.icon className=\"size-5\" />\n                </span>\n              ) : null}\n              <CardTitle>{feature.title}</CardTitle>\n              <CardDescription>{feature.body}</CardDescription>\n            </CardHeader>\n          </Card>\n        ))}\n      </div>\n    </Section>\n  )\n}\n\nexport default FeatureGrid01\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/feature-grid-01/feature-grid.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/feature-grid-01/index.tsx",
+      "content": "export { FeatureGrid01, default } from './feature-grid'\r\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/feature-grid-01/index.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/section.tsx",
+      "content": "import type { ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Container primitive. Every block composes its own section from this so vertical\n * rhythm stays consistent across the catalog instead of being re-invented per block.\n */\nexport function Section({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'section'>) {\n  return (\n    <section\n      className={cn('py-16 sm:py-24', className)}\n      {...props}\n    >\n      <div className=\"mx-auto w-full max-w-6xl px-6 lg:px-8\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * The six heading levels a block can be composed at.\n *\n * Every block takes a `headingLevel` prop typed with this and forwards it to the\n * one heading it renders, so the surrounding document decides where the block\n * sits in the outline rather than the block deciding for itself. `h2` is the\n * default because a block is composed, not a page.\n *\n * A block rendered where the document *already* owns a heading for the same\n * content passes one level deeper. A catalog card already names the block in its\n * own `h2`, so the copy of the block embedded inside that card passes `h3`: the\n * embedded heading then reads as a child of the card that introduces it instead\n * of as a second, competing sibling. This is a fact about where the block was\n * placed, not about the block, which is why it is a prop and not a default.\n */\nexport type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport function SectionHeading({\n  eyebrow,\n  title,\n  as: Heading = 'h2',\n  description,\n  align = 'center',\n  className,\n}: {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  align?: 'center' | 'left'\n  /**\n   * Heading level. Defaults to `h2` because blocks compose under a page heading.\n   * A page that renders a block as its primary heading passes `as=\"h1\"` — a\n   * document with no `h1` gives screen-reader and search engines no top-level\n   * entry point.\n   */\n  as?: HeadingLevel\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4',\n        align === 'center' ? 'items-center text-center' : 'items-start text-left',\n        className,\n      )}\n    >\n      {eyebrow ? (\n        <span className=\"text-muted-foreground text-sm font-medium tracking-wide uppercase\">\n          {eyebrow}\n        </span>\n      ) : null}\n      <Heading className=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </Heading>\n      {description ? (\n        <p className=\"text-muted-foreground max-w-2xl text-lg text-pretty\">\n          {description}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/section.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "categories": [
+    "marketing"
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-01.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hero-01",
+  "title": "Hero 01 - Centered Marketing Hero",
+  "description": "A centered hero with an optional eyebrow, headline, supporting line and one or two actions. All copy is passed in as props.",
+  "dependencies": [
+    "clsx",
+    "lucide-react",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "src/components/ds/blocks/hero-01/hero.tsx",
+      "content": "import { ArrowRight } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'\n\nexport type HeroAction = {\n  label: string\n  href?: string\n  variant?: 'default' | 'outline' | 'secondary' | 'ghost'\n}\n\nexport type Hero01Props = {\n  /**\n   * Optional label above the headline. Intentionally has no default: an earlier\n   * version shipped a hardcoded \"Now in open beta\" pill, which meant every\n   * consumer who installed this block inherited a status badge making a claim\n   * about their product. Pass one if you mean it.\n   */\n  eyebrow?: string\n  title: string\n  description?: string\n  actions?: HeroAction[]\n  /**\n   * Heading level for the title. Defaults to `h2` because a block is composed,\n   * not a page: it installs into a consumer's layout via `shadcn add` and renders\n   * inside catalog previews, so the surrounding document already owns the `h1`.\n   * A page that uses this block as its top-level heading opts in with\n   * `headingLevel=\"h1\"`; a document that already names this section in its own\n   * heading passes one level deeper. See `HeadingLevel`.\n   */\n  headingLevel?: HeadingLevel\n}\n\nexport function Hero01({\n  eyebrow,\n  title,\n  description,\n  actions = [],\n  headingLevel = 'h2',\n}: Hero01Props) {\n  return (\n    <Section className=\"relative overflow-hidden\">\n      <div\n        aria-hidden\n        className=\"from-primary/5 pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b to-transparent\"\n      />\n      <div className=\"flex flex-col items-center gap-10 text-center\">\n        {eyebrow ? (\n          <span className=\"bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs font-medium\">\n            {eyebrow}\n          </span>\n        ) : null}\n\n        <SectionHeading\n          as={headingLevel}\n          title={title}\n          description={description}\n        />\n\n        {actions.length ? (\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            {actions.map((action, index) => (\n              // Positional, for the same reason as `pricing-01`'s feature list:\n              // the label is display content, and two actions may share one.\n              // Safe here because the list is static and never reordered.\n              <Button\n                key={index}\n                size=\"lg\"\n                variant={action.variant ?? (index === 0 ? 'default' : 'outline')}\n                className=\"group\"\n              >\n                {action.label}\n                {index === 0 ? (\n                  <ArrowRight className=\"motion-safe:transition-transform size-4 group-hover:translate-x-0.5\" />\n                ) : null}\n              </Button>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </Section>\n  )\n}\n\nexport default Hero01\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/hero-01/hero.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/hero-01/index.tsx",
+      "content": "export { Hero01, default } from './hero'\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/hero-01/index.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/section.tsx",
+      "content": "import type { ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Container primitive. Every block composes its own section from this so vertical\n * rhythm stays consistent across the catalog instead of being re-invented per block.\n */\nexport function Section({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'section'>) {\n  return (\n    <section\n      className={cn('py-16 sm:py-24', className)}\n      {...props}\n    >\n      <div className=\"mx-auto w-full max-w-6xl px-6 lg:px-8\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * The six heading levels a block can be composed at.\n *\n * Every block takes a `headingLevel` prop typed with this and forwards it to the\n * one heading it renders, so the surrounding document decides where the block\n * sits in the outline rather than the block deciding for itself. `h2` is the\n * default because a block is composed, not a page.\n *\n * A block rendered where the document *already* owns a heading for the same\n * content passes one level deeper. A catalog card already names the block in its\n * own `h2`, so the copy of the block embedded inside that card passes `h3`: the\n * embedded heading then reads as a child of the card that introduces it instead\n * of as a second, competing sibling. This is a fact about where the block was\n * placed, not about the block, which is why it is a prop and not a default.\n */\nexport type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport function SectionHeading({\n  eyebrow,\n  title,\n  as: Heading = 'h2',\n  description,\n  align = 'center',\n  className,\n}: {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  align?: 'center' | 'left'\n  /**\n   * Heading level. Defaults to `h2` because blocks compose under a page heading.\n   * A page that renders a block as its primary heading passes `as=\"h1\"` — a\n   * document with no `h1` gives screen-reader and search engines no top-level\n   * entry point.\n   */\n  as?: HeadingLevel\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4',\n        align === 'center' ? 'items-center text-center' : 'items-start text-left',\n        className,\n      )}\n    >\n      {eyebrow ? (\n        <span className=\"text-muted-foreground text-sm font-medium tracking-wide uppercase\">\n          {eyebrow}\n        </span>\n      ) : null}\n      <Heading className=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </Heading>\n      {description ? (\n        <p className=\"text-muted-foreground max-w-2xl text-lg text-pretty\">\n          {description}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/section.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "categories": [
+    "marketing"
+  ],
+  "type": "registry:block"
+}

package/public/r/pricing-01.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pricing-01",
+  "title": "Pricing 01 - Three Tier With Highlight",
+  "description": "A three-up plan comparison with one plan lifted. Plans, prices, features and actions are all passed in as props.",
+  "dependencies": [
+    "clsx",
+    "lucide-react",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "button",
+    "badge",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "src/components/ds/blocks/pricing-01/index.tsx",
+      "content": "export { Pricing01, default } from './pricing'\r\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/pricing-01/index.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/pricing-01/pricing.tsx",
+      "content": "import { Check } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'\n\nexport type Plan = {\n  name: string\n  price: string\n  /** Rendered after the price, e.g. \" / month\". Omit for a one-off figure. */\n  period?: string\n  body?: string\n  features: string[]\n  cta: string\n  /** Lifts the plan with a primary border and a filled button. */\n  featured?: boolean\n  /** Overrides the \"Popular\" badge on the featured plan. */\n  badge?: string\n}\n\nexport type Pricing01Props = {\n  eyebrow?: string\n  title?: string\n  description?: string\n  plans: Plan[]\n  /** Heading level for the section title. See `HeadingLevel`. */\n  headingLevel?: HeadingLevel\n}\n\n/**\n * A three-up plan comparison.\n *\n * Every plan is a prop, including the price and the call to action. It previously\n * hardcoded \"$0 / $24 / $68\", \"Talk to us\", \"MIT licence\" and \"Figma library\",\n * and shipped a heading reading \"Pricing\" above a title already reading \"Pick a\n * plan\". A shared library has no plans to sell, so those strings described a\n * business that does not exist here, and every consumer who installed the block\n * inherited them.\n */\nexport function Pricing01({\n  eyebrow,\n  title,\n  description,\n  plans,\n  headingLevel = 'h2',\n}: Pricing01Props) {\n  return (\n    <Section>\n      {title ? (\n        <SectionHeading\n          as={headingLevel}\n          eyebrow={eyebrow}\n          title={title}\n          description={description}\n          className=\"mb-12\"\n        />\n      ) : null}\n\n      <div className=\"grid gap-6 lg:grid-cols-3\">\n        {plans.map((plan) => (\n          <Card\n            key={plan.name}\n            className={plan.featured ? 'border-primary shadow-md' : undefined}\n          >\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <CardTitle>{plan.name}</CardTitle>\n                {plan.featured ? <Badge>{plan.badge ?? 'Popular'}</Badge> : null}\n              </div>\n              {plan.body ? <CardDescription>{plan.body}</CardDescription> : null}\n              <p className=\"mt-2 text-3xl font-semibold tracking-tight\">\n                {plan.price}\n                {plan.period ? (\n                  <span className=\"text-muted-foreground text-sm font-normal\">\n                    {plan.period}\n                  </span>\n                ) : null}\n              </p>\n            </CardHeader>\n\n            <CardContent className=\"flex flex-col gap-3\">\n              {/*\n                Keyed by position, not by the feature string. The string is display\n                content rather than identity, and a plan is free to list the same\n                line twice; keying on it logged React's duplicate-key error and let\n                React drop and reorder rows. `key={index}` is correct here because\n                this list is static: it is rendered once from props and never\n                reordered, filtered or appended to, so there is no state to\n                preserve across a reorder that a positional key could lose.\n              */}\n              {plan.features.map((feature, index) => (\n                <p key={index} className=\"flex items-start gap-2 text-sm\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </p>\n              ))}\n            </CardContent>\n\n            <CardFooter className=\"mt-auto\">\n              <Button\n                className=\"w-full\"\n                variant={plan.featured ? 'default' : 'outline'}\n              >\n                {plan.cta}\n              </Button>\n            </CardFooter>\n          </Card>\n        ))}\n      </div>\n    </Section>\n  )\n}\n\nexport default Pricing01\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/pricing-01/pricing.tsx"
+    },
+    {
+      "path": "src/components/ds/blocks/section.tsx",
+      "content": "import type { ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Container primitive. Every block composes its own section from this so vertical\n * rhythm stays consistent across the catalog instead of being re-invented per block.\n */\nexport function Section({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'section'>) {\n  return (\n    <section\n      className={cn('py-16 sm:py-24', className)}\n      {...props}\n    >\n      <div className=\"mx-auto w-full max-w-6xl px-6 lg:px-8\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * The six heading levels a block can be composed at.\n *\n * Every block takes a `headingLevel` prop typed with this and forwards it to the\n * one heading it renders, so the surrounding document decides where the block\n * sits in the outline rather than the block deciding for itself. `h2` is the\n * default because a block is composed, not a page.\n *\n * A block rendered where the document *already* owns a heading for the same\n * content passes one level deeper. A catalog card already names the block in its\n * own `h2`, so the copy of the block embedded inside that card passes `h3`: the\n * embedded heading then reads as a child of the card that introduces it instead\n * of as a second, competing sibling. This is a fact about where the block was\n * placed, not about the block, which is why it is a prop and not a default.\n */\nexport type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport function SectionHeading({\n  eyebrow,\n  title,\n  as: Heading = 'h2',\n  description,\n  align = 'center',\n  className,\n}: {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  align?: 'center' | 'left'\n  /**\n   * Heading level. Defaults to `h2` because blocks compose under a page heading.\n   * A page that renders a block as its primary heading passes `as=\"h1\"` — a\n   * document with no `h1` gives screen-reader and search engines no top-level\n   * entry point.\n   */\n  as?: HeadingLevel\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4',\n        align === 'center' ? 'items-center text-center' : 'items-start text-left',\n        className,\n      )}\n    >\n      {eyebrow ? (\n        <span className=\"text-muted-foreground text-sm font-medium tracking-wide uppercase\">\n          {eyebrow}\n        </span>\n      ) : null}\n      <Heading className=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </Heading>\n      {description ? (\n        <p className=\"text-muted-foreground max-w-2xl text-lg text-pretty\">\n          {description}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/ds/blocks/section.tsx"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "categories": [
+    "marketing"
+  ],
+  "type": "registry:block"
+}