{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "book",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/book.tsx",
      "content": "import React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface BookProps {\n  children: React.ReactNode\n  color?: string\n  textColor?: string\n  texture?: boolean\n  depth?: number\n  variant?: \"default\" | \"simple\" | \"hardcover\" | \"notebook\"\n  illustration?: React.ReactNode\n  width?: number\n  height?: number\n  spineText?: string\n  bookmark?: boolean\n  bookmarkColor?: string\n  animation?: \"hover\" | \"float\" | \"pulse\" | \"flip\" | \"none\"\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  orientation?: \"portrait\" | \"landscape\"\n  pages?: number\n  author?: string\n  title?: string\n}\n\nconst sizePresets = {\n  xs: { width: 120, height: 160 },\n  sm: { width: 150, height: 200 },\n  md: { width: 196, height: 240 },\n  lg: { width: 240, height: 320 },\n  xl: { width: 300, height: 400 },\n}\n\nexport function Book({\n  children,\n  color = \"#555555\",\n  textColor = \"currentColor\",\n  depth = 5,\n  variant = \"default\",\n  illustration,\n  width,\n  height,\n  spineText,\n  bookmark = false,\n  bookmarkColor = \"#fff200\",\n  animation = \"hover\",\n  size = \"md\",\n  orientation = \"portrait\",\n  pages = 100,\n  author,\n  title,\n}: BookProps) {\n  const dimensions = sizePresets[size]\n  const bookWidth = width || dimensions.width\n  const bookHeight = height || dimensions.height\n\n  const getVariantStyles = () => {\n    switch (variant) {\n      case \"hardcover\":\n        return {\n          borderRadius: \"4px\",\n          border: \"2px solid rgba(0,0,0,0.1)\",\n        }\n      case \"notebook\":\n        return {\n          borderRadius: \"6px\",\n          background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`,\n        }\n      default:\n        return {\n          borderRadius: \"4px\",\n        }\n    }\n  }\n\n  const getAnimationClass = () => {\n    switch (animation) {\n      case \"hover\":\n        return \"group-hover:[transform:rotateY(-25deg)_scale(1.05)_translateX(-12px)]\"\n      case \"none\":\n        return \"\"\n      default:\n        return \"group-hover:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]\"\n    }\n  }\n\n  const bindBg =\n    variant === \"notebook\"\n      ? \"linear-gradient(90deg, transparent 0%, rgba(255,0,0,0.3) 2%, transparent 4%, transparent 96%, rgba(255,0,0,0.5) 98%, transparent 100%)\"\n      : \"linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 12%,hsla(0,0%,100%,.25) 29.25%,hsla(0,0%,100%,0) 50.5%,hsla(0,0%,100%,0) 75.25%,hsla(0,0%,100%,.25) 91%,hsla(0,0%,100%,0)),linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.1) 12%,transparent 30%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.2) 73.5%,rgba(0,0,0,.5) 75.25%,rgba(0,0,0,.15) 85.25%,transparent)\"\n\n  const pageGradient =\n    variant === \"notebook\"\n      ? \"repeating-linear-gradient(90deg, #f8f9fa 0px, #e9ecef 1px, #f8f9fa 2px, #dee2e6 3px)\"\n      : \"repeating-linear-gradient(90deg,#fff,#a3a3a3 1px,#fff 4px,#9a9a9a 0)\"\n\n  const variantStyles = getVariantStyles()\n\n  return (\n    <div\n      className={cn(\n        \"group inline-block w-fit cursor-pointer transition-all duration-300 [perspective:1200px]\"\n      )}\n      style={\n        {\n          \"--book-color\": color,\n          \"--text-color\": textColor,\n          \"--book-depth\": `${depth}cqw`,\n          \"--book-width\": `${bookWidth}px`,\n          \"--book-height\": `${bookHeight}px`,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          \"relative w-fit min-w-[calc(var(--book-width))] rotate-0 transition-all duration-700 ease-out contain-inline-size [transform-style:preserve-3d]\",\n          orientation === \"landscape\" ? \"aspect-[4/3]\" : \"aspect-[3/4]\",\n          getAnimationClass()\n        )}\n      >\n        {/* Main Book Cover */}\n        <div\n          className=\"absolute size-full overflow-hidden border\"\n          style={{\n            backgroundColor: color,\n            ...variantStyles,\n            height: bookHeight,\n          }}\n        >\n          {/* Bookmark Ribbon */}\n          {bookmark && (\n            <div\n              className=\"absolute top-0 right-4 z-10 h-16 w-4 shadow-sm\"\n              style={{\n                backgroundColor: bookmarkColor,\n                clipPath: \"polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%)\",\n              }}\n            />\n          )}\n\n          {/* Spine Text */}\n          {spineText && (\n            <div\n              className=\"absolute top-1/2 left-0 z-10 -translate-y-1/2 -rotate-90 px-2 text-xs font-semibold whitespace-nowrap\"\n              style={{ color: textColor, transformOrigin: \"center\" }}\n            >\n              {spineText}\n            </div>\n          )}\n\n          {/* Cover Content */}\n          {variant !== \"simple\" && (\n            <div\n              className=\"relative flex h-full flex-col overflow-hidden\"\n              style={{ backgroundColor: color }}\n            >\n              {/* Bind Effect */}\n              <div\n                className=\"absolute inset-y-0 left-0 w-[10%] opacity-100 mix-blend-overlay\"\n                style={{ backgroundImage: bindBg }}\n              />\n\n              {/* Title and Author */}\n              {(title || author) && (\n                <div className=\"p-4 text-center\">\n                  {title && (\n                    <h3\n                      className={cn(\"mb-2 text-lg font-bold\")}\n                      style={{ color: textColor }}\n                    >\n                      {title}\n                    </h3>\n                  )}\n                  {author && (\n                    <p\n                      className=\"absolute bottom-2 left-7 text-xs opacity-70\"\n                      style={{ color: textColor }}\n                    >\n                      {author}\n                    </p>\n                  )}\n                </div>\n              )}\n\n              {/* Illustration */}\n              {illustration && (\n                <div className=\"flex flex-1 items-center justify-center p-4\">\n                  {illustration}\n                </div>\n              )}\n\n              {/* Content */}\n              <div className=\"flex-1 p-4\">\n                <div className=\"h-full w-full\">{children}</div>\n              </div>\n\n              {/* Page Count */}\n              {pages && (\n                <div\n                  className=\"absolute right-2 bottom-2 text-xs opacity-70\"\n                  style={{ color: textColor }}\n                >\n                  {pages}p\n                </div>\n              )}\n            </div>\n          )}\n\n          {/* Simple Variant Content */}\n          {variant === \"simple\" && (\n            <div className=\"flex h-full items-center justify-center p-4\">\n              {children}\n            </div>\n          )}\n        </div>\n\n        {/* Book Pages (Side) */}\n        <div\n          aria-hidden={true}\n          className=\"absolute top-[3px] h-[calc(88%)] w-[calc(var(--book-depth)-2px)]\"\n          style={{\n            backgroundImage: pageGradient,\n            transform: `translateX(calc(var(--book-width) - var(--book-depth) / 2 - 6px)) rotateY(90deg) translateX(calc(var(--book-depth) / 2))`,\n          }}\n        />\n\n        {/* Book Back Cover */}\n        <div\n          aria-hidden={true}\n          className=\"absolute left-0 h-[calc(90%)] w-full\"\n          style={{\n            backgroundColor: color,\n            ...variantStyles,\n            transform: \"translateZ(calc(-1 * var(--book-depth)))\",\n            filter: \"brightness(0.8)\",\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/book.tsx"
    }
  ],
  "type": "registry:ui"
}