@nanisoft/prism-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,62 @@
+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

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

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

@@ -0,0 +1,8 @@
+{
+  "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

@@ -0,0 +1,69 @@
+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

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

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

@@ -0,0 +1,8 @@
+{
+  "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

@@ -0,0 +1,85 @@
+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

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

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

@@ -0,0 +1,8 @@
+{
+  "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

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

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

@@ -0,0 +1,122 @@
+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

package/src/components/ds/blocks/section.meta.json

@@ -0,0 +1,6 @@
+{
+  "name": "section",
+  "title": "Section",
+  "description": "Container and heading primitives that give every block a consistent vertical rhythm.",
+  "type": "registry:component"
+}

package/src/components/ds/blocks/section.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Container primitive. Every block composes its own section from this so vertical
+ * rhythm stays consistent across the catalog instead of being re-invented per block.
+ */
+export function Section({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'section'>) {
+  return (
+    <section
+      className={cn('py-16 sm:py-24', className)}
+      {...props}
+    >
+      <div className="mx-auto w-full max-w-6xl px-6 lg:px-8">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The six heading levels a block can be composed at.
+ *
+ * Every block takes a `headingLevel` prop typed with this and forwards it to the
+ * one heading it renders, so the surrounding document decides where the block
+ * sits in the outline rather than the block deciding for itself. `h2` is the
+ * default because a block is composed, not a page.
+ *
+ * A block rendered where the document *already* owns a heading for the same
+ * content passes one level deeper. A catalog card already names the block in its
+ * own `h2`, so the copy of the block embedded inside that card passes `h3`: the
+ * embedded heading then reads as a child of the card that introduces it instead
+ * of as a second, competing sibling. This is a fact about where the block was
+ * placed, not about the block, which is why it is a prop and not a default.
+ */
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export function SectionHeading({
+  eyebrow,
+  title,
+  as: Heading = 'h2',
+  description,
+  align = 'center',
+  className,
+}: {
+  eyebrow?: ReactNode
+  title: ReactNode
+  description?: ReactNode
+  align?: 'center' | 'left'
+  /**
+   * Heading level. Defaults to `h2` because blocks compose under a page heading.
+   * A page that renders a block as its primary heading passes `as="h1"` — a
+   * document with no `h1` gives screen-reader and search engines no top-level
+   * entry point.
+   */
+  as?: HeadingLevel
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-4',
+        align === 'center' ? 'items-center text-center' : 'items-start text-left',
+        className,
+      )}
+    >
+      {eyebrow ? (
+        <span className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
+          {eyebrow}
+        </span>
+      ) : null}
+      <Heading className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+        {title}
+      </Heading>
+      {description ? (
+        <p className="text-muted-foreground max-w-2xl text-lg text-pretty">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1 @@
+export { Stats01, default } from './stats'

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

@@ -0,0 +1,92 @@
+import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { Section, SectionHeading, type HeadingLevel } from '@/components/ds/blocks/section'
+
+export type Stat = {
+  label: string
+  value: string
+  /** Percentage change. Positive reads as growth, negative as decline. */
+  delta?: number
+  /** Period the delta compares against, e.g. "vs last month". */
+  hint?: string
+}
+
+export type Stats01Props = {
+  eyebrow?: string
+  title?: string
+  stats: Stat[]
+  /** Heading level for the section title. See `HeadingLevel`. */
+  headingLevel?: HeadingLevel
+}
+
+function Delta({ value }: { value: number }) {
+  if (value === 0) {
+    return (
+      <span className="text-muted-foreground flex items-center gap-1 text-xs">
+        <Minus className="size-3" />
+        0%
+      </span>
+    )
+  }
+  const up = value > 0
+  const Icon = up ? ArrowUpRight : ArrowDownRight
+  return (
+    <span
+      className={
+        up
+          ? 'text-success flex items-center gap-1 text-xs'
+          : 'text-destructive flex items-center gap-1 text-xs'
+      }
+    >
+      <Icon className="size-3" />
+      {Math.abs(value)}%
+    </span>
+  )
+}
+
+/**
+ * A KPI row. Every number is a prop.
+ *
+ * This block used to carry a hardcoded set reading "128 blocks shipped" and "9.4k
+ * weekly installs". Those were invented figures about a library nobody installs
+ * yet, and because they lived in the component rather than at the call site, a
+ * consumer who installed the block shipped fabricated metrics into their own
+ * dashboard. A stat block with invented stats in it is worse than no stat block.
+ */
+export function Stats01({ eyebrow, title, stats, headingLevel = 'h2' }: Stats01Props) {
+  return (
+    <Section>
+      {title ? (
+        <SectionHeading
+          as={headingLevel}
+          eyebrow={eyebrow}
+          title={title}
+          align="left"
+          className="mb-10"
+        />
+      ) : null}
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat) => (
+          <Card key={stat.label} className="gap-2 py-5">
+            <CardContent className="flex flex-col gap-1">
+              <span className="text-muted-foreground text-sm">{stat.label}</span>
+              <span className="text-2xl font-semibold tracking-tight">{stat.value}</span>
+              {stat.delta === undefined && !stat.hint ? null : (
+                <div className="flex items-center gap-2">
+                  {stat.delta === undefined ? null : <Delta value={stat.delta} />}
+                  {stat.hint ? (
+                    <span className="text-muted-foreground text-xs">{stat.hint}</span>
+                  ) : null}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </Section>
+  )
+}
+
+export default Stats01

package/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  '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',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground border-transparent',
+        secondary: 'bg-secondary text-secondary-foreground border-transparent',
+        destructive: 'bg-destructive text-destructive-foreground border-transparent',
+        success: 'bg-success text-success-foreground border-transparent',
+        warning: 'bg-warning text-warning-foreground border-transparent',
+        outline: 'text-foreground border-border',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  ...props
+}: ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return (
+    <span
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }