{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-note",
  "type": "registry:ui",
  "title": "Sticky Note",
  "description": "A sticky note with a curled corner, tape or a push pin.",
  "files": [
    {
      "path": "ui/sticky-note.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nconst COLORS = {\n  yellow: [\"#fff3a3\", \"#fbe77c\"],\n  pink: [\"#ffd1dc\", \"#fbbccb\"],\n  blue: [\"#cfe8ff\", \"#b8dcfb\"],\n  green: [\"#d6f5c7\", \"#c1ecae\"],\n  orange: [\"#ffdcb3\", \"#fcc994\"],\n} as const;\n\nexport interface StickyNoteProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  color?: keyof typeof COLORS;\n  rotate?: number;\n  /** Hold it down with a strip of tape or a push pin. */\n  attach?: \"none\" | \"tape\" | \"pin\";\n  size?: number;\n}\n\nconst TAPE =\n  \"conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% 8px repeat-y, conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% 8px repeat-y\";\n\nexport function StickyNote({\n  children,\n  color = \"yellow\",\n  rotate = 2,\n  attach = \"none\",\n  size = 220,\n  className = \"\",\n  style,\n  ...props\n}: StickyNoteProps) {\n  const [light, dark] = COLORS[color];\n  return (\n    <div\n      className={`relative isolate inline-block align-top ${className}`}\n      style={{ width: size, maxWidth: \"100%\", transform: `rotate(${rotate}deg)`, ...style }}\n      {...props}\n    >\n      {/* curled-corner shadow */}\n      <div\n        aria-hidden\n        className=\"absolute bottom-[6px] right-[6px] -z-10 h-[30%] w-[45%]\"\n        style={{ boxShadow: \"8px 12px 14px rgb(0 0 0 / .28)\", transform: \"rotate(4deg) skewX(8deg)\" }}\n      />\n      <div\n        className=\"aspect-square p-[11%] pt-[14%] text-[22px] leading-[1.25]\"\n        style={{\n          background: `linear-gradient(180deg, ${dark} 0, ${light} 13%, ${light} 70%, color-mix(in srgb, ${light} 85%, #fff) 100%)`,\n          boxShadow: \"0 1px 2px rgb(0 0 0 / .12), 0 4px 8px -2px rgb(0 0 0 / .14)\",\n          borderBottomRightRadius: \"38px 6px\",\n          color: \"#2a2a4a\",\n          fontFamily: \"var(--font-hand, 'Bradley Hand', 'Segoe Print', cursive)\",\n        }}\n      >\n        {children}\n      </div>\n      {attach === \"tape\" && (\n        <div\n          aria-hidden\n          className=\"absolute left-1/2 top-0 h-7 w-[46%]\"\n          style={{\n            transform: \"translate(-50%, -50%) rotate(-3deg)\",\n            background: \"linear-gradient(180deg, rgb(240 232 210 / .75), rgb(228 218 190 / .7))\",\n            mask: TAPE,\n            WebkitMask: TAPE,\n          }}\n        />\n      )}\n      {attach === \"pin\" && (\n        <div aria-hidden className=\"absolute left-1/2 top-[7%] -translate-x-1/2\">\n          <div\n            className=\"h-5 w-5 rounded-full\"\n            style={{\n              background: \"radial-gradient(circle at 35% 30%, #ff8a8a, #d1262f 55%, #8c1218)\",\n              boxShadow: \"2px 4px 5px rgb(0 0 0 / .35)\",\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "extras"
  ]
}