38:I[84082,["/_next/static/chunks/0j52qan26yqbq.js","/_next/static/chunks/1250nlp1rleuf.js","/_next/static/chunks/0b5095-guo4jx.js","/_next/static/chunks/1s2rd5uubk-qh.js","/_next/static/chunks/2ktmsr5tfz_d7.js","/_next/static/chunks/2wxx-khloqf6k.js","/_next/static/chunks/20mb_fgt1pftf.js"],"InstallCommand"] 39:I[76581,["/_next/static/chunks/0j52qan26yqbq.js","/_next/static/chunks/1250nlp1rleuf.js","/_next/static/chunks/0b5095-guo4jx.js","/_next/static/chunks/1s2rd5uubk-qh.js","/_next/static/chunks/2ktmsr5tfz_d7.js","/_next/static/chunks/2wxx-khloqf6k.js","/_next/static/chunks/20mb_fgt1pftf.js"],"Separator"] 37:T3f02,

import { cva, cx } from 'class-variance-authority'
import type { ReactNode } from 'react'
import { toneClass, type Tone } from './tone'
import { renderIcon, type IconLike } from './Icon'

interface BlobProps {
  /** A named role (Tabler-backed, from Icon) OR any icon element from any
   *  library — lucide, phosphor, your own SVG. The named set is a convenience,
   *  not a requirement. */
  icon: IconLike
  tone?: Tone
  size?: 'sm' | 'md' | 'lg'
  /** Decorative by default — a blob beside a visible label is noise to a
   *  screen reader. Pass a label only when the icon is the sole meaning. */
  label?: string
}

/* Optically centred, not geometrically centred: the blob carries a 4px white
 * highlight on top and an 8px dark floor on the bottom. That floor reads as
 * the cushion's underside rather than its face, so the face a viewer sees is
 * the upper portion — and a mathematically perfect centre sits visibly low in
 * it. Nudging the glyph by half the difference, (8-4)/2, puts it in the middle
 * of the face people actually perceive. */
const blob = cva(
  [
    'pouf-blob inline-flex items-center justify-center flex-none text-[var(--on-accent)]',
    'bg-[var(--tone,var(--purple))] cushion-blob [&>svg]:[transform:translateY(-2px)]',
  ],
  {
    variants: {
      size: {
        sm: 'w-11 h-11 rounded-[14px] text-[20px]',
        md: 'w-[60px] h-[60px] rounded-[18px] text-[26px]',
        lg: 'w-20 h-20 rounded-blob text-[36px]',
      },
    },
    defaultVariants: { size: 'lg' },
  },
)

/** The reference's icon tile. */
export function Blob({ icon, tone = 'purple', size = 'lg', label }: BlobProps) {
  return (
    <span
      className={cx(blob({ size }), toneClass(tone))}
      role={label ? 'img' : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
    >
      {renderIcon(icon, size === 'sm' ? 'sm' : size === 'md' ? 'md' : 'lg')}
    </span>
  )
}

/* FLAT, deliberately. A badge is a label, not a control. It used to carry the
 * cushion recipe and so read as a small pressable pill. In a design system
 * whose entire vocabulary for "interactive" is depth, letting a static label
 * borrow that depth devalues the signal for every real button on screen.
 * flex-none + self-start: never squashed by a long neighbour, and never
 * stretched into a banner by a flex column. A badge hugs its own text. */
export function Badge({ children, tone = 'purple' }: { children: ReactNode; tone?: Tone }) {
  return (
    <span
      className={cx(
        'pouf-badge inline-flex items-center gap-[6px] text-[12px] font-black tracking-[0.4px] uppercase',
        'text-[var(--on-accent)] bg-[var(--tone,var(--purple))] rounded-pill px-3 py-[5px] [box-shadow:none]',
        'flex-none whitespace-nowrap self-start',
        toneClass(tone),
      )}
    >
      {children}
    </span>
  )
}

/** A status dot. Always pair with text — colour alone can't carry state. */
export function Dot({ tone = 'purple' }: { tone?: Tone }) {
  return (
    <span
      className={cx(
        'pouf-dot w-[9px] h-[9px] rounded-[50%] bg-[var(--tone,var(--purple))]',
        '[box-shadow:inset_0_-2px_0_rgba(0,0,0,0.15)] flex-none',
        toneClass(tone),
      )}
      aria-hidden="true"
    />
  )
}

/** An image, framed in clay.
 *
 * `alt` is required with no default: these render user-supplied screenshots,
 * and an unlabelled image is exactly the case alt text exists for.
 * Lazy by default — a gallery can be dozens of photos. */
export function Figure({ src, alt, width, height }: { src: string; alt: string; width: number; height: number }) {
  return (
    <img
      className="pouf-figure block max-w-[420px] w-full h-auto rounded-control bg-bg cushion-field"
      src={src}
      alt={alt}
      width={width}
      height={height}
      loading="lazy"
    />
  )
}

31:["$","div",null,{"className":"code-block max-h-[36rem] overflow-auto px-4 py-3 font-mono text-xs leading-relaxed [&_pre]:m-0 [&_pre]:w-max [&_pre]:min-w-full [&_pre]:bg-transparent [&_pre]:whitespace-pre","dangerouslySetInnerHTML":{"__html":"$37"}}] 32:["$","aside",null,{"className":"space-y-6 lg:sticky lg:top-24 lg:self-start","children":[["$","div",null,{"className":"space-y-2","children":[["$","h2",null,{"className":"text-xs font-medium uppercase tracking-wider text-muted-foreground","children":"Install"}],["$","$L38",null,{"namespace":"1st-pouf","name":"media","sourceUrl":"https://1st-pouf.worksonmy.dev/r/media.json"}]]}],["$","$L39",null,{}],["$","dl",null,{"className":"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm","children":[["$","dt",null,{"className":"text-muted-foreground","children":"Registry"}],["$","dd",null,{"className":"truncate","children":["$","a",null,{"ref":"$undefined","href":"/browse?registry=1st-pouf","className":"hover:underline","children":"@1st-pouf"}]}],["$","dt",null,{"className":"text-muted-foreground","children":"Kind"}],["$","dd",null,{"children":"Component"}],["$","dt",null,{"className":"text-muted-foreground","children":"Framework"}],["$","dd",null,{"children":"React"}],[["$","dt",null,{"className":"text-muted-foreground","children":"Files"}],["$","dd",null,{"children":[1," · ","3.8 KB"]}]],["$","dt",null,{"className":"text-muted-foreground","children":"Preview"}],["$","dd",null,{"children":"Live"}],["$","dt",null,{"className":"text-muted-foreground","children":"License"}],["$","dd",null,{"children":["$","a",null,{"className":"inline-flex items-center gap-0.5 hover:underline","href":"https://github.com/moji2002/1st-pouf/blob/main/LICENSE","target":"_blank","rel":"noreferrer","title":"Read the license file in the registry's repository","children":["MIT",["$","$L9",null,{"ref":"$undefined","iconNode":"$24:props:children:0:props:children:1:props:iconNode","className":"lucide-arrow-up-right size-3 text-muted-foreground"}]]}]}]]}],[["$","$L39",null,{}],["$","div",null,{"className":"space-y-2","children":[["$","h2",null,{"className":"text-xs font-medium uppercase tracking-wider text-muted-foreground","children":"npm dependencies"}],["$","div",null,{"className":"flex flex-wrap gap-1.5","children":[["$","a","class-variance-authority",{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noreferrer","children":"class-variance-authority","data-slot":"badge","data-variant":"outline","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! border-border [a]:hover:bg-muted [a]:hover:text-muted-foreground font-normal font-mono text-caption","ref":null}]]}]]}]],[["$","$L39",null,{}],["$","div",null,{"className":"space-y-2","children":[["$","h2",null,{"className":"text-xs font-medium uppercase tracking-wider text-muted-foreground","children":"Registry dependencies"}],["$","ul",null,{"className":"space-y-1 text-sm","children":[["$","li","https://1st-pouf.worksonmy.dev/r/base.json",{"className":"flex items-center justify-between gap-2","children":[["$","span",null,{"className":"truncate font-mono text-xs text-muted-foreground","title":"https://1st-pouf.worksonmy.dev/r/base.json","children":"base"}],["$","span",null,{"className":"shrink-0 text-2xs text-muted-foreground","children":"@1st-pouf"}]]}],["$","li","https://1st-pouf.worksonmy.dev/r/icon.json",{"className":"flex items-center justify-between gap-2","children":[["$","span",null,{"className":"truncate font-mono text-xs text-muted-foreground","title":"https://1st-pouf.worksonmy.dev/r/icon.json","children":"icon"}],["$","span",null,{"className":"shrink-0 text-2xs text-muted-foreground","children":"@1st-pouf"}]]}],["$","li","https://1st-pouf.worksonmy.dev/r/tone.json",{"className":"flex items-center justify-between gap-2","children":[["$","span",null,{"className":"truncate font-mono text-xs text-muted-foreground","title":"https://1st-pouf.worksonmy.dev/r/tone.json","children":"tone"}],["$","span",null,{"className":"shrink-0 text-2xs text-muted-foreground","children":"@1st-pouf"}]]}]]}]]}]]]}] 34:["$","$L33","1st-pouf/dashboard",{"item":{"id":"1st-pouf/dashboard","registryId":"1st-pouf","itemId":"dashboard","name":"dashboard","title":"Dashboard","kind":"block","framework":"react","namespace":"1st-pouf","liveKey":"1st-pouf__dashboard","liveHeight":543,"isDemo":false,"description":"An example dashboard — sidebar nav, KPI row, chart, and data table.","previewWidth":1082,"previewHeight":572}}] 35:["$","$L33","1st-pouf/game",{"item":{"id":"1st-pouf/game","registryId":"1st-pouf","itemId":"game","name":"game","title":"Game HUD","kind":"block","framework":"react","namespace":"1st-pouf","liveKey":"1st-pouf__game","liveHeight":664,"isDemo":false,"description":"An example game interface — score, health/XP bars, and a leaderboard.","previewWidth":480,"previewHeight":652}}] 36:["$","$L33","1st-pouf/inventory",{"item":{"id":"1st-pouf/inventory","registryId":"1st-pouf","itemId":"inventory","name":"inventory","title":"Inventory","kind":"block","framework":"react","namespace":"1st-pouf","liveKey":"1st-pouf__inventory","liveHeight":409,"isDemo":false,"description":"A complete inventory workspace with searchable stock, filters, sortable records, item detail, and receiving actions.","previewWidth":1195,"previewHeight":427}}]

Search the catalog

Blob, Badge, Dot, Figure

Built on Blob, Badge, Dot, Figure

More from @1st-pouf