@nanisoft/prism-ui 0.5.0 → 0.6.0

package/registry.json

@@ -1,294 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry.json",
-  "name": "nanisoft",
-  "homepage": "https://prism.nanisoft.com",
-  "items": [
-    {
-      "name": "badge",
-      "title": "Badge",
-      "description": "Shared badge primitive. Installed automatically as a dependency of any block that uses it.",
-      "type": "registry:component",
-      "dependencies": [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ui/badge.tsx",
-          "type": "registry:component",
-          "target": "components/ui/badge.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "name": "button",
-      "title": "Button",
-      "description": "Shared button primitive. Installed automatically as a dependency of any block that uses it.",
-      "type": "registry:component",
-      "dependencies": [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ui/button.tsx",
-          "type": "registry:component",
-          "target": "components/ui/button.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "name": "card",
-      "title": "Card",
-      "description": "Shared card primitive. Installed automatically as a dependency of any block that uses it.",
-      "type": "registry:component",
-      "dependencies": [
-        "clsx",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ui/card.tsx",
-          "type": "registry:component",
-          "target": "components/ui/card.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "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.",
-      "type": "registry:block",
-      "categories": [
-        "marketing"
-      ],
-      "registryDependencies": [
-        "button"
-      ],
-      "dependencies": [
-        "clsx",
-        "lucide-react",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ds/blocks/cta-01/cta.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/cta-01/cta.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/cta-01/index.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/cta-01/index.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/section.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/section.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "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.",
-      "type": "registry:block",
-      "categories": [
-        "marketing"
-      ],
-      "registryDependencies": [
-        "card"
-      ],
-      "dependencies": [
-        "clsx",
-        "lucide-react",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ds/blocks/feature-grid-01/feature-grid.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/feature-grid-01/feature-grid.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/feature-grid-01/index.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/feature-grid-01/index.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/section.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/section.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "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.",
-      "type": "registry:block",
-      "categories": [
-        "marketing"
-      ],
-      "registryDependencies": [
-        "button"
-      ],
-      "dependencies": [
-        "clsx",
-        "lucide-react",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ds/blocks/hero-01/hero.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/hero-01/hero.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/hero-01/index.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/hero-01/index.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/section.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/section.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "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.",
-      "type": "registry:block",
-      "categories": [
-        "marketing"
-      ],
-      "registryDependencies": [
-        "button",
-        "badge",
-        "card"
-      ],
-      "dependencies": [
-        "clsx",
-        "lucide-react",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ds/blocks/pricing-01/index.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/pricing-01/index.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/pricing-01/pricing.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/pricing-01/pricing.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/section.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/section.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "name": "section",
-      "title": "Section",
-      "description": "Container and heading primitives that give every block a consistent vertical rhythm.",
-      "type": "registry:component",
-      "dependencies": [
-        "clsx",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ds/blocks/section.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/section.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    },
-    {
-      "name": "stats-01",
-      "title": "Stats 01 - KPI Row With Trend",
-      "description": "A four-up KPI row with optional directional deltas. Every metric is passed in; the block ships no sample data.",
-      "type": "registry:block",
-      "categories": [
-        "application"
-      ],
-      "registryDependencies": [
-        "card"
-      ],
-      "dependencies": [
-        "clsx",
-        "lucide-react",
-        "tailwind-merge"
-      ],
-      "files": [
-        {
-          "path": "src/components/ds/blocks/stats-01/index.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/stats-01/index.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/stats-01/stats.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/stats-01/stats.tsx"
-        },
-        {
-          "path": "src/components/ds/blocks/section.tsx",
-          "type": "registry:component",
-          "target": "components/ds/blocks/section.tsx"
-        },
-        {
-          "path": "src/lib/utils.ts",
-          "type": "registry:lib",
-          "target": "lib/utils.ts"
-        }
-      ]
-    }
-  ]
-}

package/src/components/ds/blocks/cta-01/block.json

@@ -1,8 +0,0 @@
-{
-  "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.",
-  "categories": ["marketing"],
-  "registryDependencies": ["button"],
-  "dependencies": ["lucide-react"]
-}

package/src/components/ds/blocks/cta-01/cta.tsx

@@ -1,62 +0,0 @@
-import { ArrowRight } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Section, type HeadingLevel } from '@/components/ds/blocks/section'
-
-export type Cta01Props = {
-  title: string
-  description?: string
-  action?: { label: string; href?: string; variant?: 'default' | 'secondary' | 'outline' }
-  /** Heading level for the headline. See `HeadingLevel`. */
-  headingLevel?: HeadingLevel
-}
-
-/**
- * A closing call to action on a filled primary surface.
- *
- * The copy and the action are props. It previously shipped the catalog's own
- * pitch ("Start with one block, keep the tokens") and a hardcoded "Browse the
- * catalog" button, both of which described the library rather than whatever
- * product installed the block.
- */
-export function Cta01({ title, description, action, headingLevel = 'h2' }: Cta01Props) {
-  /*
-   * The same mechanism `SectionHeading` uses for its own `as` prop, which this
-   * block cannot borrow: its copy sits on a filled `bg-primary` surface, where
-   * `SectionHeading`'s muted-surface description colour and `gap-4` would be
-   * wrong. So the tag is resolved here and the classes stay surface-specific
-   * rather than the heading level being the reason the markup stays hardcoded.
-   */
-  const Heading = headingLevel
-
-  return (
-    <Section className="py-20">
-      <div className="bg-primary text-primary-foreground relative overflow-hidden rounded-2xl px-8 py-16 text-center">
-        <div
-          aria-hidden
-          className="from-primary-foreground/15 pointer-events-none absolute inset-0 bg-gradient-to-tr to-transparent"
-        />
-        <div className="relative flex flex-col items-center gap-6">
-          <Heading className="max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
-            {title}
-          </Heading>
-          {description ? (
-            <p className="max-w-xl text-lg text-pretty opacity-90">{description}</p>
-          ) : null}
-          {action ? (
-            <Button
-              size="lg"
-              variant={action.variant ?? 'secondary'}
-              className="group"
-            >
-              {action.label}
-              <ArrowRight className="motion-safe:transition-transform size-4 group-hover:translate-x-0.5" />
-            </Button>
-          ) : null}
-        </div>
-      </div>
-    </Section>
-  )
-}
-
-export default Cta01

package/src/components/ds/blocks/cta-01/index.tsx

@@ -1 +0,0 @@
-export { Cta01, default } from './cta'

package/src/components/ds/blocks/feature-grid-01/block.json

@@ -1,8 +0,0 @@
-{
-  "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.",
-  "categories": ["marketing"],
-  "registryDependencies": ["card"],
-  "dependencies": ["lucide-react"]
-}

package/src/components/ds/blocks/feature-grid-01/feature-grid.tsx

@@ -1,69 +0,0 @@
-import type { LucideIcon } from 'lucide-react'
-
-import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'
-
-export type Feature = {
-  icon: LucideIcon
-  title: string
-  body: string
-}
-
-export type FeatureGrid01Props = {
-  eyebrow?: string
-  title?: string
-  description?: string
-  features: Feature[]
-  /** `icon` tiles read well at 2-up; `bare` leans on the type alone. */
-  variant?: 'icon' | 'bare'
-  /** Heading level for the section title. See `HeadingLevel`. */
-  headingLevel?: HeadingLevel
-}
-
-/**
- * A grid of short feature blurbs.
- *
- * The feature list is a prop. It previously hardcoded the catalog's own selling
- * points under the heading "Why this catalog", so an installed block argued for
- * the library inside the consumer's product.
- */
-export function FeatureGrid01({
-  eyebrow,
-  title,
-  description,
-  features,
-  variant = 'icon',
-  headingLevel = 'h2',
-}: FeatureGrid01Props) {
-  return (
-    <Section>
-      {title ? (
-        <SectionHeading
-          as={headingLevel}
-          eyebrow={eyebrow}
-          title={title}
-          description={description}
-          className="mb-12"
-        />
-      ) : null}
-
-      <div className="grid gap-6 sm:grid-cols-2">
-        {features.map((feature) => (
-          <Card key={feature.title} className="gap-4 py-6">
-            <CardHeader>
-              {variant === 'icon' ? (
-                <span className="bg-accent text-accent-foreground mb-2 flex size-10 items-center justify-center rounded-lg">
-                  <feature.icon className="size-5" />
-                </span>
-              ) : null}
-              <CardTitle>{feature.title}</CardTitle>
-              <CardDescription>{feature.body}</CardDescription>
-            </CardHeader>
-          </Card>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-export default FeatureGrid01

package/src/components/ds/blocks/feature-grid-01/index.tsx

@@ -1 +0,0 @@
-export { FeatureGrid01, default } from './feature-grid'

package/src/components/ds/blocks/hero-01/block.json

@@ -1,8 +0,0 @@
-{
-  "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.",
-  "categories": ["marketing"],
-  "registryDependencies": ["button"],
-  "dependencies": ["lucide-react"]
-}

package/src/components/ds/blocks/hero-01/hero.tsx

@@ -1,85 +0,0 @@
-import { ArrowRight } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'
-
-export type HeroAction = {
-  label: string
-  href?: string
-  variant?: 'default' | 'outline' | 'secondary' | 'ghost'
-}
-
-export type Hero01Props = {
-  /**
-   * Optional label above the headline. Intentionally has no default: an earlier
-   * version shipped a hardcoded "Now in open beta" pill, which meant every
-   * consumer who installed this block inherited a status badge making a claim
-   * about their product. Pass one if you mean it.
-   */
-  eyebrow?: string
-  title: string
-  description?: string
-  actions?: HeroAction[]
-  /**
-   * Heading level for the title. Defaults to `h2` because a block is composed,
-   * not a page: it installs into a consumer's layout via `shadcn add` and renders
-   * inside catalog previews, so the surrounding document already owns the `h1`.
-   * A page that uses this block as its top-level heading opts in with
-   * `headingLevel="h1"`; a document that already names this section in its own
-   * heading passes one level deeper. See `HeadingLevel`.
-   */
-  headingLevel?: HeadingLevel
-}
-
-export function Hero01({
-  eyebrow,
-  title,
-  description,
-  actions = [],
-  headingLevel = 'h2',
-}: Hero01Props) {
-  return (
-    <Section className="relative overflow-hidden">
-      <div
-        aria-hidden
-        className="from-primary/5 pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b to-transparent"
-      />
-      <div className="flex flex-col items-center gap-10 text-center">
-        {eyebrow ? (
-          <span className="bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs font-medium">
-            {eyebrow}
-          </span>
-        ) : null}
-
-        <SectionHeading
-          as={headingLevel}
-          title={title}
-          description={description}
-        />
-
-        {actions.length ? (
-          <div className="flex flex-col gap-3 sm:flex-row">
-            {actions.map((action, index) => (
-              // Positional, for the same reason as `pricing-01`'s feature list:
-              // the label is display content, and two actions may share one.
-              // Safe here because the list is static and never reordered.
-              <Button
-                key={index}
-                size="lg"
-                variant={action.variant ?? (index === 0 ? 'default' : 'outline')}
-                className="group"
-              >
-                {action.label}
-                {index === 0 ? (
-                  <ArrowRight className="motion-safe:transition-transform size-4 group-hover:translate-x-0.5" />
-                ) : null}
-              </Button>
-            ))}
-          </div>
-        ) : null}
-      </div>
-    </Section>
-  )
-}
-
-export default Hero01

package/src/components/ds/blocks/hero-01/index.tsx

@@ -1 +0,0 @@
-export { Hero01, default } from './hero'

package/src/components/ds/blocks/pricing-01/block.json

@@ -1,8 +0,0 @@
-{
-  "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.",
-  "categories": ["marketing"],
-  "registryDependencies": ["button", "badge", "card"],
-  "dependencies": ["lucide-react"]
-}

package/src/components/ds/blocks/pricing-01/index.tsx

@@ -1 +0,0 @@
-export { Pricing01, default } from './pricing'

package/src/components/ds/blocks/pricing-01/pricing.tsx

@@ -1,122 +0,0 @@
-import { Check } from 'lucide-react'
-
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'
-
-export type Plan = {
-  name: string
-  price: string
-  /** Rendered after the price, e.g. " / month". Omit for a one-off figure. */
-  period?: string
-  body?: string
-  features: string[]
-  cta: string
-  /** Lifts the plan with a primary border and a filled button. */
-  featured?: boolean
-  /** Overrides the "Popular" badge on the featured plan. */
-  badge?: string
-}
-
-export type Pricing01Props = {
-  eyebrow?: string
-  title?: string
-  description?: string
-  plans: Plan[]
-  /** Heading level for the section title. See `HeadingLevel`. */
-  headingLevel?: HeadingLevel
-}
-
-/**
- * A three-up plan comparison.
- *
- * Every plan is a prop, including the price and the call to action. It previously
- * hardcoded "$0 / $24 / $68", "Talk to us", "MIT licence" and "Figma library",
- * and shipped a heading reading "Pricing" above a title already reading "Pick a
- * plan". A shared library has no plans to sell, so those strings described a
- * business that does not exist here, and every consumer who installed the block
- * inherited them.
- */
-export function Pricing01({
-  eyebrow,
-  title,
-  description,
-  plans,
-  headingLevel = 'h2',
-}: Pricing01Props) {
-  return (
-    <Section>
-      {title ? (
-        <SectionHeading
-          as={headingLevel}
-          eyebrow={eyebrow}
-          title={title}
-          description={description}
-          className="mb-12"
-        />
-      ) : null}
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        {plans.map((plan) => (
-          <Card
-            key={plan.name}
-            className={plan.featured ? 'border-primary shadow-md' : undefined}
-          >
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <CardTitle>{plan.name}</CardTitle>
-                {plan.featured ? <Badge>{plan.badge ?? 'Popular'}</Badge> : null}
-              </div>
-              {plan.body ? <CardDescription>{plan.body}</CardDescription> : null}
-              <p className="mt-2 text-3xl font-semibold tracking-tight">
-                {plan.price}
-                {plan.period ? (
-                  <span className="text-muted-foreground text-sm font-normal">
-                    {plan.period}
-                  </span>
-                ) : null}
-              </p>
-            </CardHeader>
-
-            <CardContent className="flex flex-col gap-3">
-              {/*
-                Keyed by position, not by the feature string. The string is display
-                content rather than identity, and a plan is free to list the same
-                line twice; keying on it logged React's duplicate-key error and let
-                React drop and reorder rows. `key={index}` is correct here because
-                this list is static: it is rendered once from props and never
-                reordered, filtered or appended to, so there is no state to
-                preserve across a reorder that a positional key could lose.
-              */}
-              {plan.features.map((feature, index) => (
-                <p key={index} className="flex items-start gap-2 text-sm">
-                  <Check className="text-success mt-0.5 size-4 shrink-0" />
-                  {feature}
-                </p>
-              ))}
-            </CardContent>
-
-            <CardFooter className="mt-auto">
-              <Button
-                className="w-full"
-                variant={plan.featured ? 'default' : 'outline'}
-              >
-                {plan.cta}
-              </Button>
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-export default Pricing01