{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "name-tag",
  "title": "Name tag",
  "description": "Who someone is: an agent, a person, a guest. The “HELLO my name is” sticker, a visitor badge for outside collaborators, and a plain tag for lists.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/name-tag.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\n\ntype NameTagVariant = \"sticker\" | \"visitor\" | \"plain\"\n\ntype NameTagProps = React.ComponentProps<\"div\"> & {\n  /** sticker: \"HELLO my name is\". visitor: a clip-on guest badge. plain: compact, for dense lists. */\n  variant?: NameTagVariant\n  /** The printed greeting. Translate it: \"Hola\", \"Bonjour\". */\n  greeting?: string\n  /** The line under the greeting on the sticker. */\n  caption?: string\n}\n\n/**\n * Says who someone is: an agent, a person, a guest. The printed greeting is\n * decoration; screen readers hear only the name and detail.\n */\nfunction NameTag({\n  className,\n  variant = \"sticker\",\n  greeting,\n  caption,\n  children,\n  ...props\n}: NameTagProps) {\n  return (\n    <div\n      data-slot=\"name-tag\"\n      data-variant={variant}\n      className={cn(\n        \"relative not-italic select-none\",\n        variant === \"sticker\" &&\n          \"name-tag-sticker flex w-56 flex-col overflow-hidden rounded-(--bevel-radius-md) pb-2\",\n        variant === \"visitor\" &&\n          \"bevel-plastic flex w-52 flex-col items-center overflow-visible rounded-(--bevel-radius-md) bg-(--name-tag-card) pb-4 [--bevel-material:var(--name-tag-card)]\",\n        variant === \"plain\" &&\n          \"inline-flex max-w-full items-baseline gap-1.5 rounded-(--bevel-radius-xs) border-l-4 border-(--name-tag-band) bg-(--name-tag-card) py-0.5 pr-2 pl-1.5 shadow-(--bevel-depth-sheet)\",\n        \"forced-colors:border forced-colors:border-[CanvasText]\",\n        className\n      )}\n      {...props}\n    >\n      {variant === \"visitor\" && (\n        <span\n          aria-hidden\n          data-slot=\"name-tag-clip\"\n          className=\"bevel-metal absolute -top-2 left-1/2 h-4 w-10 -translate-x-1/2 rounded-(--bevel-radius-xs)\"\n        />\n      )}\n      {variant !== \"plain\" && (\n        <span\n          aria-hidden\n          data-slot=\"name-tag-band\"\n          className={cn(\n            \"flex w-full flex-col items-center pt-2 pb-1.5 text-(--name-tag-band-foreground) uppercase\",\n            variant === \"visitor\" && \"rounded-t-(--bevel-radius-md) bg-(--name-tag-band) pt-4\"\n          )}\n        >\n          <span className=\"text-2xl leading-none font-black tracking-(--bevel-tracking-label)\">\n            {greeting ?? (variant === \"sticker\" ? \"Hello\" : \"Visitor\")}\n          </span>\n          {variant === \"sticker\" && (\n            <span className=\"mt-0.5 text-(length:--bevel-fine) font-semibold tracking-(--bevel-tracking-print) normal-case\">\n              {caption ?? \"my name is\"}\n            </span>\n          )}\n        </span>\n      )}\n      {variant === \"sticker\" ? (\n        <span\n          data-slot=\"name-tag-body\"\n          className=\"mx-2 flex min-h-16 flex-col items-center justify-center gap-0.5 rounded-(--bevel-radius-xs) bg-(--name-tag-card) px-3 py-2 text-center text-(--name-tag-ink)\"\n        >\n          {children}\n        </span>\n      ) : variant === \"visitor\" ? (\n        <span\n          data-slot=\"name-tag-body\"\n          className=\"flex flex-col items-center gap-0.5 px-4 pt-3 text-center text-(--name-tag-ink)\"\n        >\n          {children}\n        </span>\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n\n/** The name, written in marker on the sticker and badge; set plainly on the plain tag. */\nfunction NameTagName({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"name-tag-name\"\n      className={cn(\n        \"max-w-full truncate leading-tight text-(length:--name-tag-name-size) text-(--name-tag-ink)\",\n        \"in-data-[variant=sticker]:font-(family-name:--bevel-font-marker) in-data-[variant=sticker]:-rotate-1\",\n        \"in-data-[variant=visitor]:font-(family-name:--bevel-font-marker)\",\n        \"in-data-[variant=plain]:font-semibold\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A second line: a role, or who the agent acts for. */\nfunction NameTagDetail({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"name-tag-detail\"\n      className={cn(\n        \"max-w-full truncate text-(length:--bevel-fine) text-(--bevel-paper-muted)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Write a new name on the tag. Labelled \"Name\" unless you pass aria-label. */\nfunction NameTagInput({ className, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      data-slot=\"name-tag-input\"\n      aria-label=\"Name\"\n      className={cn(\n        \"w-full min-w-0 rounded-(--bevel-radius-xs) bg-transparent text-center leading-tight text-(length:--name-tag-name-size) text-(--name-tag-ink) outline-none\",\n        \"font-(family-name:--bevel-font-marker) placeholder:text-(--bevel-pencil)\",\n        \"focus-visible:ring-2 focus-visible:ring-(--name-tag-band)/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { NameTag, NameTagName, NameTagDetail, NameTagInput }\nexport type { NameTagProps, NameTagVariant }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--name-tag-red": "oklch(0.55 0.2 27)",
      "--name-tag-blue": "oklch(0.45 0.15 262)",
      "--name-tag-card": "oklch(0.99 0.004 90)",
      "--name-tag-ink": "oklch(0.22 0.02 260)",
      "--name-tag-band-foreground": "oklch(0.99 0 0)"
    },
    "[data-slot=\"name-tag\"]": {
      "--name-tag-band": "var(--name-tag-red)",
      "--name-tag-name-size": "1.75rem"
    },
    "[data-slot=\"name-tag\"][data-variant=\"visitor\"]": {
      "--name-tag-band": "var(--name-tag-blue)",
      "--name-tag-name-size": "1.5rem"
    },
    "[data-slot=\"name-tag\"][data-variant=\"plain\"]": {
      "--name-tag-name-size": "0.875rem"
    },
    "@utility name-tag-sticker": {
      "background-color": "var(--name-tag-band)",
      "background-image": "linear-gradient(115deg, var(--bevel-highlight-strong), transparent 35%)",
      "box-shadow": "var(--bevel-depth-sheet)"
    }
  },
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}