{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "support-box",
  "title": "Support Box",
  "description": "A collapsible animated support widget for quick help actions using Framer Motion.",
  "dependencies": [
    "react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/gammaui/support-box.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { AnimatePresence, motion, Variants } from \"motion/react\"\n\ninterface MenuItem {\n  title: string\n  description: string\n  icon: React.ReactNode\n  onPress: () => void\n}\n\ninterface SupportBoxProps {\n  title?: string\n  items: MenuItem[]\n  collapsedWidth?: number\n  collapsedHeight?: number\n  expandedWidth?: number\n  expandedHeight?: number\n  className?: string\n  containerClassName?: string\n  titleClassName?: string\n  itemClassName?: string\n  bgColor?: string\n  borderColor?: string\n}\n\nexport function SupportBox({\n  items,\n  title = \"Need Help?\",\n  collapsedWidth = 120,\n  collapsedHeight = 40,\n  expandedWidth = 300,\n  expandedHeight = 320,\n  className = \"\",\n  containerClassName = \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700\",\n  titleClassName = \"text-gray-800 dark:text-gray-100\",\n  itemClassName = \"text-gray-800 dark:text-gray-100\",\n  bgColor = \"\",\n  borderColor = \"\",\n}: SupportBoxProps) {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  const boxVariants: Variants = {\n    collapsed: {\n      width: collapsedWidth,\n      height: collapsedHeight,\n      transition: { type: \"spring\" as const, stiffness: 200, damping: 25 },\n    },\n    expanded: {\n      width: expandedWidth,\n      height: expandedHeight,\n      transition: { type: \"spring\" as const, stiffness: 180, damping: 22 },\n    },\n  }\n\n  const contentVariants: Variants = {\n    hidden: { opacity: 0, y: 20 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: { delay: 0.1, duration: 0.25, ease: \"easeOut\" },\n    },\n    exit: { opacity: 0, y: 20, transition: { duration: 0.2 } },\n  }\n\n  return (\n    <motion.div\n      className={`relative ${className}`}\n      variants={boxVariants}\n      animate={isExpanded ? \"expanded\" : \"collapsed\"}\n      initial=\"collapsed\"\n      layout\n    >\n      <div\n        className={`${containerClassName} ${bgColor} ${borderColor} h-full overflow-hidden rounded-xl p-2 shadow-lg`}\n      >\n        <AnimatePresence mode=\"wait\">\n          {isExpanded ? (\n            <motion.div\n              key=\"expanded\"\n              className=\"flex h-full flex-col p-4\"\n              variants={contentVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"exit\"\n            >\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h3 className={`text-lg font-semibold ${titleClassName}`}>\n                  {title}\n                </h3>\n                <motion.button\n                  onClick={() => setIsExpanded(false)}\n                  className=\"text-gray-500 transition-all hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n                  aria-label=\"Close menu\"\n                  whileHover={{ scale: 1.2 }}\n                  whileTap={{ scale: 0.9 }}\n                >\n                  ✕\n                </motion.button>\n              </div>\n\n              <motion.div\n                className=\"flex-1 space-y-3 overflow-y-auto\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ delay: 0.15 }}\n              >\n                {items.map((option, index) => (\n                  <motion.button\n                    key={`${option.title}-${index}`}\n                    onClick={option.onPress}\n                    className={`flex w-full cursor-pointer items-center rounded-lg border border-gray-100 p-3 text-left transition-all hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 ${itemClassName}`}\n                    whileHover={{ scale: 1.02 }}\n                    whileTap={{ scale: 0.97 }}\n                  >\n                    <span className=\"mr-3 shrink-0 text-2xl text-gray-700 dark:text-gray-300\">\n                      {option.icon}\n                    </span>\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"font-medium\">{option.title}</p>\n                      <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n                        {option.description}\n                      </p>\n                    </div>\n                  </motion.button>\n                ))}\n              </motion.div>\n            </motion.div>\n          ) : (\n            <motion.button\n              key=\"collapsed\"\n              onClick={() => setIsExpanded(true)}\n              className={`flex h-full w-full items-center justify-center font-medium ${titleClassName}`}\n              aria-label={`Expand ${title}`}\n              variants={contentVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"exit\"\n              whileHover={{ scale: 1.05 }}\n              whileTap={{ scale: 0.95 }}\n            >\n              {title}\n            </motion.button>\n          )}\n        </AnimatePresence>\n      </div>\n    </motion.div>\n  )\n}\n\nexport default SupportBox\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}