{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-mark",
  "title": "Gradient Mark",
  "description": "Token gradient tile that stands in for an account, workspace or app.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/components/gradient-mark.tsx",
      "content": "import { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* A token gradient standing in for an identity — an account, a workspace, an\n   app — where a photo or initials would claim more than the mark needs to.\n   It only has to be recognisable at a glance; the name beside it carries the\n   meaning, which is why the mark is hidden from assistive tech by default.\n\n   Circles are identities, the way avatars are. Squares are the tiles that sit\n   on a row and carry an action, and they take the rounded-box-* ramp, which is\n   named by edge and holds r ≈ 0.30 × edge. The surface ramp would not do: its\n   smallest step is a flat 9.6px, so a small square ends up reading as a circle.\n   Edge and radius are one decision, which is why `size` sets both. */\nconst gradientMarkVariants = cva(\"shrink-0 bg-linear-to-br\", {\n  variants: {\n    shape: {\n      circle: \"rounded-full\",\n      square: \"\",\n    },\n    size: {\n      \"16\": \"size-4\",\n      \"24\": \"size-6\",\n      \"28\": \"size-7\",\n      \"36\": \"size-9\",\n      \"40\": \"size-10\",\n      \"48\": \"size-12\",\n    },\n    hairline: {\n      true: \"shadow-hairline\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    { shape: \"square\", size: \"16\", className: \"rounded-box-16\" },\n    { shape: \"square\", size: \"24\", className: \"rounded-box-24\" },\n    { shape: \"square\", size: \"28\", className: \"rounded-box-28\" },\n    { shape: \"square\", size: \"36\", className: \"rounded-box-36\" },\n    { shape: \"square\", size: \"40\", className: \"rounded-box-40\" },\n    { shape: \"square\", size: \"48\", className: \"rounded-box-48\" },\n  ],\n  defaultVariants: {\n    shape: \"circle\",\n    size: \"40\",\n    hairline: true,\n  },\n})\n\ntype GradientMarkShape = \"circle\" | \"square\"\n\n/* The edge in pixels. */\ntype GradientMarkSize = \"16\" | \"24\" | \"28\" | \"36\" | \"40\" | \"48\"\n\ntype GradientMarkProps = React.ComponentProps<\"span\"> & {\n  /* The from-* and to-* utilities, written in full at the call site so\n     Tailwind sees them — \"from-chart-1 to-chart-4\". */\n  tint: string\n  shape?: GradientMarkShape\n  size?: GradientMarkSize\n  /* The faint drop that lifts the mark off a surface of the same lightness. */\n  hairline?: boolean\n  /* An optional glyph, centred. Its ink comes from `className` — on a mark\n     inside a menu item, force it (text-selected-foreground!), because the item\n     recolours every descendant on focus and a mark that changes colour as you\n     pass it has stopped being a mark. */\n  children?: React.ReactNode\n}\n\nfunction GradientMark({\n  tint,\n  shape = \"circle\",\n  size = \"40\",\n  hairline = true,\n  className,\n  children,\n  ...props\n}: GradientMarkProps) {\n  return (\n    <span\n      data-slot=\"gradient-mark\"\n      data-shape={shape}\n      data-size={size}\n      aria-hidden=\"true\"\n      className={cn(\n        gradientMarkVariants({ shape, size, hairline }),\n        /* A span is inline, and an inline box ignores width and height. Inside\n           a flex row that never shows, because the row blockifies its children;\n           anywhere else the mark would collapse to nothing. */\n        children != null ? \"flex items-center justify-center\" : \"block\",\n        tint,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport { GradientMark, gradientMarkVariants }\nexport type { GradientMarkProps, GradientMarkShape, GradientMarkSize }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}