{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-demo",
  "type": "registry:component",
  "registryDependencies": [
    "expandable"
  ],
  "files": [
    {
      "path": "registry/default/example/expandable-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport {\n  Battery,\n  Bluetooth,\n  Calendar,\n  Clock,\n  Cloud,\n  Droplets,\n  Fingerprint,\n  MapPin,\n  MessageSquare,\n  Mic,\n  ShoppingCart,\n  Star,\n  Sun,\n  Users,\n  Video,\n  Wind,\n} from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport {\n  Expandable,\n  ExpandableCard,\n  ExpandableCardContent,\n  ExpandableCardFooter,\n  ExpandableCardHeader,\n  ExpandableContent,\n  ExpandableTrigger,\n} from \"@/registry/default/ui/expandable\"\n\n// _____________________EXAMPLES______________________\nfunction DesignSyncExample() {\n  return (\n    <Expandable\n      expandDirection=\"both\"\n      expandBehavior=\"replace\"\n      initialDelay={0.2}\n      onExpandStart={() => console.log(\"Expanding meeting card...\")}\n      onExpandEnd={() => console.log(\"Meeting card expanded!\")}\n    >\n      {({ isExpanded }) => (\n        <ExpandableTrigger>\n          <ExpandableCard\n            className=\"relative w-full\"\n            collapsedSize={{ width: 320, height: 240 }}\n            expandedSize={{ width: 420, height: 480 }}\n            hoverToExpand={false}\n            expandDelay={200}\n            collapseDelay={500}\n          >\n            <ExpandableCardHeader>\n              <div className=\"flex w-full items-start justify-between\">\n                <div className=\"flex flex-col items-start\">\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"mb-2 bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-100\"\n                  >\n                    In 15 mins\n                  </Badge>\n                  <h3 className=\"text-xl font-semibold text-gray-800 dark:text-white\">\n                    Design Sync\n                  </h3>\n                </div>\n                <TooltipProvider>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <Calendar className=\"h-4 w-4\" />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent>\n                      <p>Add to Calendar</p>\n                    </TooltipContent>\n                  </Tooltip>\n                </TooltipProvider>\n              </div>\n            </ExpandableCardHeader>\n\n            <ExpandableCardContent>\n              <div className=\"mb-4 flex flex-col items-start justify-between\">\n                <div className=\"flex items-center text-sm text-gray-600 dark:text-gray-300\">\n                  <Clock className=\"mr-1 h-4 w-4\" />\n                  <span>1:30PM → 2:30PM</span>\n                </div>\n\n                <ExpandableContent preset=\"blur-md\">\n                  <div className=\"flex items-center text-sm text-gray-600 dark:text-gray-300\">\n                    <MapPin className=\"mr-1 h-4 w-4\" />\n                    <span>Conference Room A</span>\n                  </div>\n                </ExpandableContent>\n              </div>\n              <ExpandableContent preset=\"blur-md\" stagger staggerChildren={0.2}>\n                <p className=\"mb-4 text-sm text-gray-700 dark:text-gray-200\">\n                  Weekly design sync to discuss ongoing projects, share updates,\n                  and address any design-related challenges.\n                </p>\n                <div className=\"mb-4\">\n                  <h4 className=\"mb-2 flex items-center text-sm font-medium text-gray-800 dark:text-gray-100\">\n                    <Users className=\"mr-2 h-4 w-4\" />\n                    Attendees:\n                  </h4>\n                  <div className=\"flex -space-x-2 overflow-hidden\">\n                    {[\"Alice\", \"Bob\", \"Charlie\", \"David\"].map((name, index) => (\n                      <TooltipProvider key={index}>\n                        <Tooltip>\n                          <TooltipTrigger asChild>\n                            <Avatar className=\"border-2 border-white dark:border-gray-800\">\n                              <AvatarImage\n                                src={`/placeholder.svg?height=32&width=32&text=${name[0]}`}\n                                alt={name}\n                              />\n                              <AvatarFallback>{name[0]}</AvatarFallback>\n                            </Avatar>\n                          </TooltipTrigger>\n                          <TooltipContent>\n                            <p>{name}</p>\n                          </TooltipContent>\n                        </Tooltip>\n                      </TooltipProvider>\n                    ))}\n                  </div>\n                </div>\n                <div className=\"space-y-2\">\n                  <Button className=\"w-full bg-red-600 text-white hover:bg-red-700\">\n                    <Video className=\"mr-2 h-4 w-4\" />\n                    Join Meeting\n                  </Button>\n                  {isExpanded && (\n                    <Button variant=\"outline\" className=\"w-full\">\n                      <MessageSquare className=\"mr-2 h-4 w-4\" />\n                      Open Chat\n                    </Button>\n                  )}\n                </div>\n              </ExpandableContent>\n            </ExpandableCardContent>\n            <ExpandableContent preset=\"slide-up\">\n              <ExpandableCardFooter>\n                <div className=\"flex w-full items-center justify-between text-sm text-gray-600 dark:text-gray-300\">\n                  <span>Weekly</span>\n                  <span>Next: Mon, 10:00 AM</span>\n                </div>\n              </ExpandableCardFooter>\n            </ExpandableContent>\n          </ExpandableCard>\n        </ExpandableTrigger>\n      )}\n    </Expandable>\n  )\n}\n\nexport function ProductShowcaseCard() {\n  return (\n    <Expandable\n      expandDirection=\"both\"\n      expandBehavior=\"replace\"\n      onExpandStart={() => console.log(\"Expanding product card...\")}\n      onExpandEnd={() => console.log(\"Product card expanded!\")}\n    >\n      {({ isExpanded }) => (\n        <ExpandableTrigger>\n          <ExpandableCard\n            className=\"relative w-full\"\n            collapsedSize={{ width: 330, height: 220 }}\n            expandedSize={{ width: 500, height: 520 }}\n            hoverToExpand={false}\n            expandDelay={500}\n            collapseDelay={700}\n          >\n            <ExpandableCardHeader>\n              <div className=\"flex items-center justify-between\">\n                <Badge\n                  variant=\"secondary\"\n                  className=\"bg-blue-100 text-blue-800\"\n                >\n                  New Arrival\n                </Badge>\n                <Badge variant=\"outline\" className=\"ml-2\">\n                  $129.99\n                </Badge>\n              </div>\n            </ExpandableCardHeader>\n\n            <ExpandableCardContent>\n              <div className=\"mb-4 flex items-start\">\n                <img\n                  src=\"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6505/6505727_rd.jpg;maxHeight=640;maxWidth=550;format=webp\"\n                  alt=\"Product\"\n                  className=\"mr-4 rounded-md object-cover\"\n                  style={{\n                    width: isExpanded ? \"120px\" : \"80px\",\n                    height: isExpanded ? \"120px\" : \"80px\",\n                    transition: \"width 0.3s, height 0.3s\",\n                  }}\n                />\n                <div className=\"flex-1\">\n                  <h3\n                    className=\"font-medium tracking-tight text-gray-800 transition-all duration-300 dark:text-white\"\n                    style={{\n                      fontSize: isExpanded ? \"24px\" : \"18px\",\n                      fontWeight: isExpanded ? \"700\" : \"400\",\n                    }}\n                  >\n                    Sony Headphones\n                  </h3>\n                  <div className=\"mt-1 flex items-center\">\n                    {[1, 2, 3, 4, 5].map((star) => (\n                      <Star\n                        key={star}\n                        className=\"h-4 w-4 fill-current text-yellow-400\"\n                      />\n                    ))}\n                    <AnimatePresence mode=\"wait\">\n                      {isExpanded ? (\n                        <motion.span\n                          key=\"expanded\"\n                          initial={{ opacity: 0, width: 0 }}\n                          animate={{ opacity: 1, width: \"auto\" }}\n                          exit={{ opacity: 0, width: 0 }}\n                          transition={{ duration: 0.2 }}\n                          className=\"ml-2 overflow-hidden text-sm whitespace-nowrap text-gray-600 dark:text-gray-400\"\n                        >\n                          (128 reviews)\n                        </motion.span>\n                      ) : (\n                        <motion.span\n                          key=\"collapsed\"\n                          initial={{ opacity: 0, width: 0 }}\n                          animate={{ opacity: 1, width: \"auto\" }}\n                          exit={{ opacity: 0, width: 0 }}\n                          transition={{ duration: 0.2 }}\n                          className=\"ml-2 overflow-hidden text-sm whitespace-nowrap text-gray-600 dark:text-gray-400\"\n                        >\n                          (128)\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </div>\n                </div>\n              </div>\n              <ExpandableContent\n                preset=\"fade\"\n                keepMounted={false}\n                animateIn={{\n                  initial: { opacity: 0, y: 20 },\n                  animate: { opacity: 1, y: 0 },\n                  transition: { type: \"spring\", stiffness: 300, damping: 20 },\n                }}\n              >\n                <p className=\"mb-4 max-w-xs text-sm text-gray-600 dark:text-gray-400\">\n                  Experience crystal-clear audio with our latest\n                  noise-cancelling technology. Perfect for work, travel, or\n                  relaxation.\n                </p>\n\n                <div className=\"space-y-4\">\n                  {[\n                    { icon: Battery, text: \"30-hour battery life\" },\n                    { icon: Bluetooth, text: \"Bluetooth 5.0\" },\n                    { icon: Fingerprint, text: \"Touch controls\" },\n                    { icon: Mic, text: \"Voice assistant compatible\" },\n                  ].map((feature, index) => (\n                    <div\n                      key={index}\n                      className=\"flex items-center text-sm text-gray-600 dark:text-gray-400\"\n                    >\n                      <feature.icon className=\"mr-2 h-4 w-4\" />\n                      <span>{feature.text}</span>\n                    </div>\n                  ))}\n\n                  <Button className=\"w-full bg-blue-600 text-white hover:bg-blue-700\">\n                    <ShoppingCart className=\"mr-2 h-4 w-4\" />\n                    Add to Cart\n                  </Button>\n                </div>\n              </ExpandableContent>\n            </ExpandableCardContent>\n            <ExpandableContent preset=\"slide-up\">\n              <ExpandableCardFooter>\n                <div className=\"flex w-full justify-between text-sm text-gray-600 dark:text-gray-400\">\n                  <span>Free shipping</span>\n                  <span>30-day return policy</span>\n                </div>\n              </ExpandableCardFooter>\n            </ExpandableContent>\n          </ExpandableCard>\n        </ExpandableTrigger>\n      )}\n    </Expandable>\n  )\n}\n\nexport function WeatherForecastCard() {\n  return (\n    <Expandable expandDirection=\"both\" expandBehavior=\"replace\">\n      <ExpandableTrigger>\n        <ExpandableCard\n          collapsedSize={{ width: 300, height: 220 }}\n          expandedSize={{ width: 500, height: 420 }}\n          hoverToExpand={false}\n          expandDelay={100}\n          collapseDelay={400}\n        >\n          <ExpandableCardHeader>\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center\">\n                <Sun className=\"mr-2 h-8 w-8 text-yellow-400\" />\n                <ExpandableContent preset=\"blur-sm\" keepMounted={true}>\n                  <h3 className=\"text-lg font-medium\">Today's Weather</h3>\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-blue-100 text-blue-800\"\n                  >\n                    72°F\n                  </Badge>\n                </ExpandableContent>\n              </div>\n            </div>\n          </ExpandableCardHeader>\n\n          <ExpandableCardContent>\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div>\n                <p className=\"text-2xl font-bold\">72°F</p>\n                <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n                  Feels like 75°F\n                </p>\n              </div>\n              <div className=\"text-right\">\n                <p className=\"font-medium\">Sunny</p>\n                <ExpandableContent\n                  preset=\"blur-sm\"\n                  stagger\n                  staggerChildren={0.1}\n                  keepMounted={true}\n                  animateIn={{\n                    initial: { opacity: 0, y: 20, rotate: -5 },\n                    animate: { opacity: 1, y: 0, rotate: 0 },\n                    transition: { type: \"spring\", stiffness: 300, damping: 20 },\n                  }}\n                >\n                  <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n                    High 78° / Low 65°\n                  </p>\n                </ExpandableContent>\n              </div>\n            </div>\n            <ExpandableContent\n              preset=\"blur-sm\"\n              stagger\n              staggerChildren={0.1}\n              keepMounted={true}\n              animateIn={{\n                initial: { opacity: 0, y: 20, rotate: -5 },\n                animate: { opacity: 1, y: 0, rotate: 0 },\n                transition: { type: \"spring\", stiffness: 300, damping: 20 },\n              }}\n            >\n              <div className=\"mb-4 space-y-2\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center\">\n                    <Cloud className=\"mr-2 h-5 w-5 text-gray-400\" />\n                    <span>Humidity</span>\n                  </div>\n                  <span>45%</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center\">\n                    <Wind className=\"mr-2 h-5 w-5 text-gray-400\" />\n                    <span>Wind</span>\n                  </div>\n                  <span>8 mph</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center\">\n                    <Droplets className=\"mr-2 h-5 w-5 text-gray-400\" />\n                    <span>Precipitation</span>\n                  </div>\n                  <span>0%</span>\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <h4 className=\"font-medium\">5-Day Forecast</h4>\n                {[\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\"].map((day, index) => (\n                  <div key={day} className=\"flex items-center justify-between\">\n                    <span>{day}</span>\n                    <div className=\"flex items-center\">\n                      <Sun className=\"mr-2 h-4 w-4 text-yellow-400\" />\n                      <span>{70 + index}°F</span>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </ExpandableContent>\n          </ExpandableCardContent>\n          <ExpandableCardFooter>\n            <p className=\"text-xs text-gray-500 dark:text-gray-400\">\n              Last updated: 5 minutes ago\n            </p>\n          </ExpandableCardFooter>\n        </ExpandableCard>\n      </ExpandableTrigger>\n    </Expandable>\n  )\n}\n\nexport default function ExpandableCardExamples() {\n  return (\n    <div className=\"mx-auto w-full max-w-7xl space-y-12\">\n      <div className=\"flex flex-col items-center space-y-24 p-8\">\n        <DesignSyncExample />\n        <ProductShowcaseCard />\n        <WeatherForecastCard />\n\n        <div className=\"flex min-h-[600px] gap-24\"></div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}