{
  "name": "smooth-drawer",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "drawer",
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Smooth Drawer\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { Fingerprint } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/components/ui/drawer\";\n\ninterface PriceTagProps {\n  price: number;\n  discountedPrice: number;\n}\n\nfunction PriceTag({ price, discountedPrice }: PriceTagProps) {\n  return (\n    <div className=\"mx-auto flex max-w-fit items-center justify-around gap-4\">\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"bg-gradient-to-br from-zinc-900 to-zinc-700 bg-clip-text font-bold text-4xl text-transparent dark:from-white dark:to-zinc-300\">\n          ${discountedPrice}\n        </span>\n        <span className=\"text-lg text-zinc-400 line-through dark:text-zinc-500\">\n          ${price}\n        </span>\n      </div>\n      <div className=\"flex flex-col items-center gap-0.5\">\n        <span className=\"font-medium text-sm text-zinc-900 dark:text-zinc-100\">\n          Lifetime access\n        </span>\n        <span className=\"text-xs text-zinc-700 dark:text-zinc-300\">\n          One-time payment\n        </span>\n      </div>\n    </div>\n  );\n}\n\ninterface DrawerDemoProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  description?: string;\n  primaryButtonText?: string;\n  secondaryButtonText?: string;\n  onPrimaryAction?: () => void;\n  onSecondaryAction?: () => void;\n  price?: number;\n  discountedPrice?: number;\n}\n\nconst drawerVariants = {\n  hidden: {\n    y: \"100%\",\n    opacity: 0,\n    rotateX: 5,\n    transition: {\n      type: \"spring\",\n      stiffness: 300,\n      damping: 30,\n    },\n  },\n  visible: {\n    y: 0,\n    opacity: 1,\n    rotateX: 0,\n    transition: {\n      type: \"spring\",\n      stiffness: 300,\n      damping: 30,\n      mass: 0.8,\n      staggerChildren: 0.07,\n      delayChildren: 0.2,\n    },\n  },\n};\n\nconst itemVariants = {\n  hidden: {\n    y: 20,\n    opacity: 0,\n    transition: {\n      type: \"spring\",\n      stiffness: 300,\n      damping: 30,\n    },\n  },\n  visible: {\n    y: 0,\n    opacity: 1,\n    transition: {\n      type: \"spring\",\n      stiffness: 300,\n      damping: 30,\n      mass: 0.8,\n    },\n  },\n};\n\nexport default function SmoothDrawer({\n  title = \"KokonutUI - Pro\",\n  description = \"100+ collection of UI Components and templates built for React, Next.js, and Tailwind CSS. Spend no time on design and focus on shipping.\",\n  primaryButtonText = \"Buy Now\",\n  secondaryButtonText = \"Maybe Later\",\n  onSecondaryAction,\n  price = 169,\n  discountedPrice = 99,\n}: DrawerDemoProps) {\n  const handleSecondaryClick = () => {\n    onSecondaryAction?.();\n  };\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent className=\"mx-auto max-w-fit rounded-2xl p-6 shadow-xl\">\n        <motion.div\n          animate=\"visible\"\n          className=\"mx-auto w-full max-w-[340px] space-y-6\"\n          initial=\"hidden\"\n          variants={drawerVariants as any}\n        >\n          <motion.div variants={itemVariants as any}>\n            <DrawerHeader className=\"space-y-2.5 px-0\">\n              <DrawerTitle className=\"flex items-center gap-2.5 font-semibold text-2xl tracking-tighter\">\n                <motion.div variants={itemVariants as any}>\n                  <div className=\"rounded-xl bg-gradient-to-br from-zinc-100 to-zinc-200 p-1.5 shadow-inner dark:from-zinc-800 dark:to-zinc-900\">\n                    <Image alt=\"Logo\" height={32} src=\"/logo.svg\" width={32} />\n                  </div>\n                </motion.div>\n                <motion.span variants={itemVariants as any}>\n                  {title}\n                </motion.span>\n              </DrawerTitle>\n              <motion.div variants={itemVariants as any}>\n                <DrawerDescription className=\"text-sm text-zinc-600 leading-relaxed tracking-tighter dark:text-zinc-400\">\n                  {description}\n                </DrawerDescription>\n              </motion.div>\n            </DrawerHeader>\n          </motion.div>\n\n          <motion.div variants={itemVariants as any}>\n            <PriceTag discountedPrice={discountedPrice} price={price} />\n          </motion.div>\n\n          <motion.div variants={itemVariants as any}>\n            <DrawerFooter className=\"flex flex-col gap-3 px-0\">\n              <div className=\"w-full\">\n                <Link\n                  className=\"group relative inline-flex h-11 w-full items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-rose-500 to-pink-500 font-semibold text-sm text-white tracking-wide shadow-lg shadow-rose-500/20 transition-all duration-500 hover:from-rose-600 hover:to-pink-600 hover:shadow-rose-500/30 hover:shadow-xl dark:from-rose-600 dark:to-pink-600 dark:hover:from-rose-500 dark:hover:to-pink-500\"\n                  href=\"https://kokonutui.pro/#pricing\"\n                  target=\"_blank\"\n                >\n                  <motion.span\n                    className=\"absolute inset-0 translate-x-[-200%] bg-gradient-to-r from-transparent via-white/20 to-transparent\"\n                    transition={{\n                      duration: 1.5,\n                      ease: \"easeInOut\",\n                      repeat: 0,\n                    }}\n                    whileHover={{\n                      x: [\"-200%\", \"200%\"],\n                    }}\n                  />\n                  <motion.div\n                    animate={{ opacity: 1 }}\n                    className=\"relative flex items-center gap-2 tracking-tighter\"\n                    initial={{ opacity: 0 }}\n                    transition={{ duration: 0.3 }}\n                  >\n                    {primaryButtonText}\n                    <motion.div\n                      animate={{\n                        rotate: [0, 15, -15, 0],\n                        y: [0, -2, 2, 0],\n                      }}\n                      transition={{\n                        duration: 2,\n                        ease: \"easeInOut\",\n                        repeat: Number.POSITIVE_INFINITY,\n                        repeatDelay: 1,\n                      }}\n                    >\n                      <Fingerprint className=\"h-4 w-4\" />\n                    </motion.div>\n                  </motion.div>\n                </Link>\n              </div>\n              <DrawerClose asChild>\n                <Button\n                  className=\"h-11 w-full rounded-xl border-zinc-200 font-semibold text-sm tracking-tighter transition-colors hover:bg-zinc-100 dark:border-zinc-800 dark:hover:bg-zinc-800/80\"\n                  onClick={handleSecondaryClick}\n                  variant=\"outline\"\n                >\n                  {secondaryButtonText}\n                </Button>\n              </DrawerClose>\n            </DrawerFooter>\n          </motion.div>\n        </motion.div>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n",
      "path": "/components/kokonutui/smooth-drawer.tsx",
      "target": "components/kokonutui/smooth-drawer.tsx"
    }
  ]
}