{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stamp",
  "title": "Stamp and seal",
  "description": "A rubber-stamp impression in ink for statuses, and an embossed seal for the moment something becomes official.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/stamp.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\n\ntype StampProps = React.ComponentProps<\"span\"> & {\n  tone?: \"red\" | \"blue\" | \"green\" | \"amber\" | \"black\"\n  shape?: \"rect\" | \"round\"\n  /** Land with a press when it appears. Use for the moment something happens, not for lists. */\n  animate?: boolean\n}\n\n/** A rubber-stamp impression: inked text that soaks into the surface. */\nfunction Stamp({ className, tone = \"red\", shape = \"rect\", animate, ...props }: StampProps) {\n  return (\n    <span\n      data-slot=\"stamp\"\n      data-tone={tone}\n      data-shape={shape}\n      data-animate={animate ? \"\" : undefined}\n      className={cn(\n        \"bevel-ink inline-flex flex-col items-center justify-center gap-0.5 border-(length:--stamp-border) border-double px-2 py-1 text-center text-(length:--bevel-label) leading-none font-black tracking-(--bevel-tracking-label) uppercase select-none\",\n        \"rotate-(--stamp-tilt) data-[shape=rect]:rounded-(--bevel-radius-xs) data-[shape=round]:aspect-square data-[shape=round]:rounded-full data-[shape=round]:p-3\",\n        \"data-animate:transition-[scale,opacity] data-animate:duration-(--bevel-duration-move) data-animate:ease-(--bevel-ease-spring)\",\n        \"data-animate:starting:scale-(--stamp-land-scale) data-animate:starting:opacity-0 motion-reduce:transition-none\",\n        \"forced-colors:mix-blend-normal forced-colors:mask-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A second, smaller line on a stamp: a date or reference. */\nfunction StampDetail({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"stamp-detail\"\n      className={cn(\"text-(length:--bevel-fine) font-bold tracking-(--bevel-tracking-print)\", className)}\n      {...props}\n    />\n  )\n}\n\ntype SealProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** Text set around the rim. */\n  text: string\n  /** A short mark in the centre. */\n  children?: React.ReactNode\n  /** Press it into the paper when it appears. */\n  animate?: boolean\n}\n\n/** An embossed seal pressed into paper: colourless relief, readable by its shadow. */\nfunction Seal({ className, text, children, animate, ...props }: SealProps) {\n  const id = React.useId()\n  return (\n    <span\n      data-slot=\"seal\"\n      role=\"img\"\n      aria-label={typeof children === \"string\" ? `${text}, ${children}` : text}\n      data-animate={animate ? \"\" : undefined}\n      className={cn(\n        \"seal-relief relative inline-flex aspect-square w-28 items-center justify-center select-none\",\n        \"data-animate:transition-[scale,opacity] data-animate:duration-(--bevel-duration-move) data-animate:ease-(--bevel-ease-spring)\",\n        \"data-animate:starting:scale-(--stamp-land-scale) data-animate:starting:opacity-0 motion-reduce:transition-none\",\n        className\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 100 100\" aria-hidden className=\"absolute inset-0 size-full\">\n        <defs>\n          <path id={id} d=\"M50,50 m-36,0 a36,36 0 1,1 72,0 a36,36 0 1,1 -72,0\" />\n        </defs>\n        <circle cx=\"50\" cy=\"50\" r=\"47\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" />\n        <circle cx=\"50\" cy=\"50\" r=\"27\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <text fill=\"currentColor\" fontSize=\"9\" fontWeight=\"700\" letterSpacing=\"2\">\n          <textPath href={`#${id}`}>{text.toUpperCase()}</textPath>\n        </text>\n      </svg>\n      <span\n        aria-hidden\n        className=\"relative text-(length:--bevel-label) font-black tracking-(--bevel-tracking-label) uppercase\"\n      >\n        {children}\n      </span>\n    </span>\n  )\n}\n\nexport { Stamp, StampDetail, Seal }\nexport type { StampProps, SealProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--stamp-border": "3px",
      "--stamp-tilt": "-4deg",
      "--stamp-land-scale": "1.4",
      "--seal-relief": "oklch(0.9 0.01 85)"
    },
    "[data-slot=\"stamp\"]": {
      "--bevel-ink": "var(--bevel-ink-red)"
    },
    "[data-slot=\"stamp\"][data-tone=\"blue\"]": {
      "--bevel-ink": "var(--bevel-ink-blue)"
    },
    "[data-slot=\"stamp\"][data-tone=\"green\"]": {
      "--bevel-ink": "var(--bevel-ink-green)"
    },
    "[data-slot=\"stamp\"][data-tone=\"amber\"]": {
      "--bevel-ink": "var(--bevel-ink-amber)"
    },
    "[data-slot=\"stamp\"][data-tone=\"black\"]": {
      "--bevel-ink": "var(--bevel-ink-black)"
    },
    "@utility seal-relief": {
      "color": "var(--seal-relief)",
      "filter": "drop-shadow(0 -1px 0 var(--bevel-highlight-strong)) drop-shadow(0 1px 1px var(--bevel-shade))"
    }
  },
  "categories": [
    "marks"
  ],
  "type": "registry:ui"
}