{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "book",
  "type": "registry:ui",
  "title": "Book",
  "description": "A book component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "files": [
    {
      "path": "registry/bucharitesh/book.tsx",
      "content": "import type React from 'react';\nimport type { CSSProperties } from 'react';\nimport '@/registry/styles/book.css';\nimport { cn } from '@/lib/utils';\nimport { VercelLogoIcon } from '@radix-ui/react-icons';\n\nconst defaultIllustration = (\n  <svg\n    fill=\"none\"\n    height=\"56\"\n    viewBox=\"0 0 36 56\"\n    width=\"36\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M3.03113 28.0005C6.26017 23.1765 11.7592 20.0005 18 20.0005C24.2409 20.0005 29.7399 23.1765 32.9689 28.0005C29.7399 32.8244 24.2409 36.0005 18 36.0005C11.7592 36.0005 6.26017 32.8244 3.03113 28.0005Z\"\n      fill=\"#0070F3\"\n      fillRule=\"evenodd\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M32.9691 28.0012C34.8835 25.1411 36 21.7017 36 18.0015C36 8.06034 27.9411 0.00146484 18 0.00146484C8.05887 0.00146484 0 8.06034 0 18.0015C0 21.7017 1.11648 25.1411 3.03094 28.0012C6.25996 23.1771 11.7591 20.001 18 20.001C24.2409 20.001 29.74 23.1771 32.9691 28.0012Z\"\n      fill=\"#45DEC4\"\n      fillRule=\"evenodd\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M32.9692 28.0005C29.7402 32.8247 24.241 36.001 18 36.001C11.759 36.001 6.25977 32.8247 3.03077 28.0005C1.11642 30.8606 0 34.2999 0 38C0 47.9411 8.05887 56 18 56C27.9411 56 36 47.9411 36 38C36 34.2999 34.8836 30.8606 32.9692 28.0005Z\"\n      fill=\"#E5484D\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst Book = ({\n  title,\n  enableTexture,\n  width = 196,\n  variant = 'stripe',\n  color = '#e79d13',\n  textColor = '#ffffff',\n  illustration,\n}: {\n  title: string;\n  enableTexture?: boolean;\n  variant?: 'stripe' | 'simple';\n  width?: number;\n  color?: string;\n  textColor?: string;\n  illustration?: React.ReactNode;\n}) => {\n  return (\n    <div\n      className=\"book-perspective\"\n      style={{ '--book-width': width } as React.CSSProperties}\n    >\n      <div\n        className={cn('book-rotate-wrapper book-color', {\n          'book-stripe': variant === 'stripe',\n          'book-simple': variant === 'simple',\n        })}\n        style={\n          {\n            '--book-color': color,\n            '--book-text-color': textColor,\n          } as React.CSSProperties\n        }\n      >\n        <div\n          className=\"stack-stack stack book-book\"\n          data-version=\"v1\"\n          style={\n            {\n              '--stack-flex': 'initial',\n              '--stack-direction': 'column',\n              '--stack-align': 'stretch',\n              '--stack-justify': 'flex-start',\n              '--stack-padding': '0px',\n              '--stack-gap': '0px',\n            } as React.CSSProperties\n          }\n        >\n          <div\n            className=\"stack-stack stack book-stripe\"\n            data-version=\"v1\"\n            aria-hidden=\"true\"\n            style={\n              {\n                '--stack-flex': 'initial',\n                '--stack-direction': 'row',\n                '--stack-align': 'stretch',\n                '--stack-justify': 'flex-start',\n                '--stack-padding': '0px',\n                '--stack-gap': '8px',\n              } as React.CSSProperties\n            }\n          >\n            {variant === 'stripe' && illustration && (\n              <div className=\"book-illustration\">{illustration}</div>\n            )}\n            <div className=\"book-bind\" />\n          </div>\n          <div\n            className=\"stack-stack stack book-body\"\n            data-version=\"v1\"\n            style={\n              {\n                '--stack-flex': 'initial',\n                '--stack-direction': 'row',\n                '--stack-align': 'stretch',\n                '--stack-justify': 'flex-start',\n                '--stack-padding': '0px',\n                '--stack-gap': '0px',\n              } as React.CSSProperties\n            }\n          >\n            <div aria-hidden=\"true\" className=\"book-bind\" />\n            <div\n              className=\"stack-stack stack book-content\"\n              data-version=\"v1\"\n              style={\n                {\n                  '--stack-flex': 'initial',\n                  '--stack-direction': 'column',\n                  '--stack-align': 'stretch',\n                  '--stack-justify':\n                    variant === 'stripe' ? 'space-between' : 'flex-start',\n                  '--stack-padding': '0px',\n                  '--stack-gap': '0px',\n                } as React.CSSProperties\n              }\n            >\n              <span className=\"book-title\" data-version=\"v1\">\n                {title}\n              </span>\n              {variant === 'simple' && (\n                <div className=\"book-illustration\">\n                  {illustration ? illustration : defaultIllustration}\n                </div>\n              )}\n              {variant === 'stripe' && (\n                <VercelLogoIcon\n                  fill=\"black\"\n                  className=\" geist-hide-on-dark text-black\"\n                />\n              )}\n            </div>\n          </div>\n          {enableTexture && (\n            <div\n              aria-hidden=\"true\"\n              className=\"book-texture\"\n              style={\n                {\n                  transform: 'rotate(0deg)',\n                } as CSSProperties\n              }\n            />\n          )}\n        </div>\n        <div aria-hidden=\"true\" className=\"book-pages\" />\n        <div aria-hidden=\"true\" className=\"book-back\" />\n      </div>\n    </div>\n  );\n};\n\nexport default Book;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/styles/book.css",
      "content": ".book-perspective {\n  --book-default-width: 196;\n  --book-depth: 29cqw;\n  --book-border-radius: 6px 4px 4px 6px;\n  --hover-rotate: -20deg;\n  --hover-scale: 1.066;\n  --hover-translate-x: -8px;\n  --aspect-ratio: 49 / 60;\n  --bg-shadow: linear-gradient(\n      90deg,\n      hsla(0, 0%, 100%, 0),\n      hsla(0, 0%, 100%, 0) 12%,\n      hsla(0, 0%, 100%, 0.25) 29.25%,\n      hsla(0, 0%, 100%, 0) 50.5%,\n      hsla(0, 0%, 100%, 0) 75.25%,\n      hsla(0, 0%, 100%, 0.25) 91%,\n      hsla(0, 0%, 100%, 0)\n    ),\n    linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.03),\n      rgba(0, 0, 0, 0.1) 12%,\n      transparent 30%,\n      rgba(0, 0, 0, 0.02) 50%,\n      rgba(0, 0, 0, 0.2) 73.5%,\n      rgba(0, 0, 0, 0.5) 75.25%,\n      rgba(0, 0, 0, 0.15) 85.25%,\n      transparent\n    );\n  perspective: 900px;\n  display: inline-block;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n@media (hover: hover) {\n  .book-perspective:hover .book-rotate-wrapper {\n    transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale))\n      translateX(var(--hover-translate-x));\n  }\n}\n\n.book-rotate-wrapper {\n  aspect-ratio: var(--aspect-ratio);\n  width: -moz-fit-content;\n  width: fit-content;\n  transform: rotate(0deg);\n  position: relative;\n  transform-style: preserve-3d;\n  min-width: calc(var(--book-width) * 1px);\n  transition: transform .25s ease-out;\n  container-type: inline-size;\n}\n\n.book-rotate-wrapper > :first-child {\n  position: absolute;\n  min-width: calc(var(--book-width) * 1px);\n}\n\n.book-rotate-wrapper .book-pages {\n  background: linear-gradient(90deg, #eaeaea, transparent 70%),\n    linear-gradient(#fff, #fafafa);\n}\n\n.book-rotate-wrapper .book-pages.book-textured {\n  background: repeating-linear-gradient(\n    90deg,\n    #fff,\n    #efefef 1px,\n    #fff 3px,\n    #9a9a9a 0\n  );\n}\n\n.book-rotate-wrapper .book-pages {\n  height: calc(100% - 2 * 3px);\n  width: calc(var(--book-depth) - 2px);\n  top: 3px;\n  position: absolute;\n  transform: translateX(\n      calc(var(--book-width) * 1px - var(--book-depth) / 2 - 3px)\n    )\n    rotateY(90deg) translateX(calc(var(--book-depth) / 2));\n}\n\n.book-rotate-wrapper .book-back {\n  position: absolute;\n  left: 0;\n  width: calc(var(--book-width) * 1px);\n  height: 100%;\n  border-radius: var(--book-border-radius);\n  transform: translateZ(calc(-1 * var(--book-depth)));\n}\n\n.book-rotate-wrapper.book-stripe .book-content {\n  gap: calc((24px / var(--book-default-width)) * var(--book-width));\n}\n\n.book-rotate-wrapper.book-stripe .book-content .book-title {\n  line-height: 1.25em;\n  font-size: 10.5cqw;\n  letter-spacing: -.02em;\n}\n\n.book-rotate-wrapper.book-stripe .book-back {\n  background-color: var(--book-color);\n}\n\n.book-rotate-wrapper.book-stripe .book-stripe {\n  background: var(--book-color);\n  width: 100%;\n  position: relative;\n  flex: 1 1;\n  overflow: hidden;\n}\n\n.book-rotate-wrapper.book-stripe .book-stripe .book-illustration {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n\n.book-rotate-wrapper.book-stripe .book-stripe .book-bind {\n  position: absolute;\n  background: var(--bg-shadow);\n  mix-blend-mode: overlay;\n}\n\n.book-rotate-wrapper.book-simple.book-color .book-book {\n  background: var(--book-color);\n}\n\n.book-rotate-wrapper.book-simple.book-color .book-bind {\n  mix-blend-mode: overlay;\n  opacity: 1;\n}\n\n.book-rotate-wrapper.book-simple:not(.book-color) .book-book:after {\n  box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 100%, 0.1);\n}\n\n.book-rotate-wrapper.book-simple .book-back {\n  background: var(--book-color);\n}\n\n.book-rotate-wrapper.book-simple .book-body {\n  width: 100%;\n  height: 100%;\n}\n\n.book-rotate-wrapper.book-simple .book-content {\n  gap: calc((16px / var(--book-default-width)) * var(--book-width));\n}\n\n.book-rotate-wrapper.book-simple .book-content .book-title {\n  line-height: 1.25em;\n  font-size: 12cqw;\n  letter-spacing: -.02em;\n  text-shadow: 0 .025em .5px hsla(0, 0%, 100%, 0.5), -.02em -.02em .5px\n    rgba(0, 0, 0, 0.5);\n  text-shadow: 0 .025em .5px color-mix(in srgb, var(--book-color) 80%, #fff 20%),\n    -.02em -.02em .5px color-mix(in srgb, var(--book-color) 80%, #000 20%);\n}\n\n.book-book {\n  width: calc(var(--book-width) * 1px);\n  height: 100%;\n  border-radius: var(--book-border-radius);\n  overflow: hidden;\n  /* background: var(--ds-background-200); */\n  position: relative;\n  /* box-shadow: 0 1px 1px 0 rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.1),0 16px 24px -8px rgba(0,0,0,.03); */\n  background: linear-gradient(\n      180deg,\n      hsla(0, 0%, 100%, 0.1),\n      hsla(0, 0%, 100%, 0) 50%,\n      hsla(0, 0%, 100%, 0)\n    ), #1f1f1f;\n  box-shadow:\n    0 1.8px 3.6px rgba(0, 0, 0, 0.05), 0 10.8px 21.6px rgba(0, 0, 0, 0.08), inset 0 -.9px 0 rgba(\n      0,\n      0,\n      0,\n      0.1\n    ), inset 0 1.8px 1.8px hsla(0, 0%, 100%, 0.1), inset 3.6px 0 3.6px rgba(\n      0,\n      0,\n      0,\n      0.1\n    );\n}\n\n.book-book .book-texture {\n  background-image: url(https://assets.vercel.com/image/upload/v1720554484/front/design/book-texture.avif);\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--book-border-radius);\n  mix-blend-mode: hard-light;\n  background-repeat: no-repeat;\n  opacity: 0.5;\n  pointer-events: none;\n  filter: brightness(1.1);\n}\n\n.book-book .book-texture {\n  opacity: 1;\n  filter: brightness(1);\n}\n\n.book-book:after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--ds-gray-alpha-400);\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 100%, 0.3);\n  pointer-events: none;\n}\n\n.book-book:after {\n  border: none;\n}\n\n.book-book .book-bind {\n  height: 100%;\n  width: 8.2%;\n}\n\n.book-book .book-content {\n  padding: 6.1%;\n  container-type: inline-size;\n  width: 100%;\n}\n\n.book-book .book-content .book-title {\n  text-wrap: balance;\n  color: var(--book-text-color);\n}\n\n.book-body .book-bind {\n  min-width: 8.2%;\n  background: var(--bg-shadow);\n  opacity: 0.2;\n}\n\n@media screen and (max-width: 400px) {\n  .book-perspective {\n    --book-width: var(--xs-book-width, var(--sm-book-width));\n  }\n}\n\n@media screen and (min-width: 401px) and (max-width: 600px) {\n  .book-perspective {\n    --book-width: var(--sm-book-width);\n  }\n}\n\n@media screen and (min-width: 601px) and (max-width: 768px) {\n  .book-perspective {\n    --book-width: var(\n      --smd-book-width,\n      var(--md-book-width, var(--sm-book-width))\n    );\n  }\n}\n\n@media screen and (min-width: 769px) and (max-width: 960px) {\n  .book-perspective {\n    --book-width: var(\n      --md-book-width,\n      var(--smd-book-width, var(--sm-book-width))\n    );\n  }\n}\n\n@media screen and (min-width: 961px) {\n  .book-perspective {\n    --book-width: var(\n      --lg-book-width,\n      var(--md-book-width, var(--smd-book-width, var(--sm-book-width)))\n    );\n  }\n}\n\n@layer geist {\n  .stack-stack {\n    display: flex;\n    flex-direction: var(--stack-direction, column);\n    align-items: var(--stack-align, stretch);\n    justify-content: var(--stack-justify, flex-start);\n    flex: var(--stack-flex, initial);\n    gap: var(--stack-gap, 0);\n  }\n\n  /* .stack_padding__ox8JS {\n        padding: var(--stack-padding,0)\n    } */\n\n  @media screen and (max-width: 600px) {\n    .stack-stack {\n      --stack-direction: var(--sm-stack-direction);\n      --stack-align: var(--sm-stack-align);\n      --stack-justify: var(--sm-stack-justify);\n      --stack-padding: var(--sm-stack-padding);\n      --stack-gap: var(--sm-stack-gap);\n    }\n  }\n\n  @media screen and (min-width: 601px) and (max-width: 960px) {\n    .stack-stack {\n      --stack-direction: var(--md-stack-direction, var(--sm-stack-direction));\n      --stack-align: var(--md-stack-align, var(--sm-stack-align));\n      --stack-justify: var(--md-stack-justify, var(--sm-stack-justify));\n      --stack-padding: var(--md-stack-padding, var(--sm-stack-padding));\n      --stack-gap: var(--md-stack-gap, var(--sm-stack-gap));\n    }\n  }\n\n  @media screen and (min-width: 961px) and (max-width: 1200px) {\n    .stack-stack {\n      --stack-direction: var(\n        --lg-stack-direction,\n        var(--md-stack-direction, var(--sm-stack-direction))\n      );\n      --stack-align: var(\n        --lg-stack-align,\n        var(--md-stack-align, var(--sm-stack-align))\n      );\n      --stack-justify: var(\n        --lg-stack-justify,\n        var(--md-stack-justify, var(--sm-stack-justify))\n      );\n      --stack-padding: var(\n        --lg-stack-padding,\n        var(--md-stack-padding, var(--sm-stack-padding))\n      );\n      --stack-gap: var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap)));\n    }\n  }\n\n  @media screen and (min-width: 1201px) {\n    .stack-stack {\n      --stack-direction: var(\n        --xl-stack-direction,\n        var(\n          --lg-stack-direction,\n          var(--md-stack-direction, var(--sm-stack-direction))\n        )\n      );\n      --stack-align: var(\n        --xl-stack-align,\n        var(--lg-stack-align, var(--md-stack-align, var(--sm-stack-align)))\n      );\n      --stack-justify: var(\n        --xl-stack-justify,\n        var(\n          --lg-stack-justify,\n          var(--md-stack-justify, var(--sm-stack-justify))\n        )\n      );\n      --stack-padding: var(\n        --xl-stack-padding,\n        var(\n          --lg-stack-padding,\n          var(--md-stack-padding, var(--sm-stack-padding))\n        )\n      );\n      --stack-gap: var(\n        --xl-stack-gap,\n        var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap)))\n      );\n    }\n  }\n}\n",
      "type": "registry:style"
    }
  ]
}