@nanisoft/prism-ui 0.5.0 → 0.6.0

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 }

package/src/components/ui/button.tsx

@@ -1,77 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import type { ComponentProps } from 'react'
-
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  // The focus ring is `ring-ring` at full strength, not shadcn's stock
-  // `focus-visible:ring-ring/50`. The token build pins `--ring` to a step that
-  // clears 3:1 against the surface, and half alpha throws that away: 50% of this
-  // ring composites to between 1.14:1 and 2.74:1 against every surface in all
-  // six themes and clears 3:1 in none of them, which fails WCAG 1.4.11 on the one
-  // indicator a keyboard user has. The stock value is kept here deliberately as a
-  // deviation from upstream: a consumer's button must not fail the threshold the
-  // ring exists to meet.
-  "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",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        // `primary` is a surface token, not a text token: in the pastel themes it
-        // compiles to a light tint (e.g. #ec88a0) that fails 4.5:1 on the page
-        // background. Link text uses the foreground and keeps the underline as its
-        // affordance, so emphasis comes from weight rather than a failing colour.
-        link: 'text-foreground underline-offset-4 hover:underline',
-      },
-      // Touch targets are enlarged by input method, not by viewport. The
-      // metrics below are the designed desktop sizes and stay untouched for
-      // mouse and trackpad; only a coarse pointer — finger or stylus — gets
-      // the 44px iOS/Android HIG target. `pointer-coarse:` compiles to
-      // `@media (pointer: coarse)` inside `@layer utilities`, which lands
-      // after the base utility in the cascade, so it wins without needing
-      // `!important` or a specificity fight.
-      //
-      // `min-w-11` is what makes the second axis safe: an icon-only `default`
-      // is `size-4` plus `px-3` = 40px wide and an icon-only `sm` is `size-4`
-      // plus `px-2.5` = 36px, so growing the height alone would still leave
-      // both under 44px across. The coarse padding step on `default` lifts the
-      // common cases clear of the floor outright, and `min-w-11` backstops
-      // whatever content a consumer passes.
-      size: {
-        default:
-          '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',
-        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5 pointer-coarse:h-11 pointer-coarse:min-w-11',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4 pointer-coarse:h-11',
-        icon: 'size-9 pointer-coarse:size-11',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  ...props
-}: ComponentProps<'button'> & VariantProps<typeof buttonVariants>) {
-  return (
-    <button
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -1,65 +0,0 @@
-import type { ComponentProps } from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Card({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        '@container/card-header grid auto-rows-min items-start gap-1.5 px-6',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn('font-semibold leading-none', className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: ComponentProps<'div'>) {
-  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
-}
-
-function CardFooter({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn('flex items-center px-6', className)}
-      {...props}
-    />
-  )
-}
-
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}