{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swatch",
  "type": "registry:ui",
  "title": "Swatch",
  "description": "A colour as a hard, glossy chip in its own colour: a sheen, an engraved hex in dark or light ink by the colour's luma, a recessed LED dimple. A click hands it to the host's colour picker.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/swatch/swatch.tsx",
      "type": "registry:ui",
      "target": "components/metalui/components/swatch/swatch.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\n/* ─────────────────────────────────────────────────────────\n * SWATCH (the reference design's .swatchobj)\n *\n * A lone hex on the canvas becomes a hard, glossy chip in its own colour: a 135° sheen, a bright\n * top edge and a dark bottom rim, an inner glow, a contact shadow and a drop shadow in its own\n * colour; the hex engraved in the corner in dark or light ink by the colour's luminance; a recessed\n * LED dimple top right. A click opens the host's colour picker. Its look is the swatch recipe.\n * ───────────────────────────────────────────────────────── */\n\nexport interface SwatchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** The colour: #RGB or #RRGGBB. */\n  hex: string;\n  /** What is engraved: the hex as written (default `hex`). */\n  label?: string;\n}\n\n/** Luma as the demo computes it (Rec. 601); above 150 the engraving is dark. */\nexport function swatchInk(hex: string): 'dark' | 'light' {\n  const v = hex.replace('#', '');\n  const n = parseInt(v.length === 3 ? v.replace(/./g, '$&$&') : v, 16);\n  const luma = 0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255);\n  return luma > 150 ? 'dark' : 'light';\n}\n\n/* Styled with the theme's utilities (the swatch recipe, in the object's own colour, --mu-self). */\nconst SWATCH = 'mu-swatch relative box-border size-swatch-size rounded-swatch-radius recipe-swatch cursor-pointer focus-visible:focus-ring';\nconst LABEL = {\n  dark: 'mu-swatch-label absolute start-swatch-label-x bottom-swatch-label-y type-swatch-label whitespace-nowrap text-swatch-label-ink-dark',\n  light: 'mu-swatch-label absolute start-swatch-label-x bottom-swatch-label-y type-swatch-label whitespace-nowrap text-swatch-label-ink-light',\n};\nconst LED = 'mu-swatch-led absolute end-swatch-led-inset top-swatch-led-inset size-swatch-led-size rounded-round recipe-swatch-led';\n\nexport const Swatch = React.forwardRef<HTMLDivElement, SwatchProps>(function Swatch({ hex, label, className, style, ...props }, ref) {\n  const ink = swatchInk(hex);\n  return (\n    <div\n      ref={ref}\n      role={props.onClick ? 'button' : undefined}\n      tabIndex={props.onClick ? 0 : undefined}\n      aria-label={props['aria-label'] ?? `Colour ${hex}`}\n      data-ink={ink}\n      data-mu-self=\"\"\n      className={className ? `${SWATCH} ${className}` : SWATCH}\n      style={{ '--mu-self': hex, ...style } as React.CSSProperties}\n      {...props}\n    >\n      <span className={LABEL[ink]}>{label ?? hex}</span>\n      <span aria-hidden className={LED} />\n    </div>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/swatch.md. SwiftUI: MetalSwatch in the MetalUI Swift package."
}