@nanisoft/prism-ui 0.5.0 → 0.5.1

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

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

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

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

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

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

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

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

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