{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shift-card",
  "type": "registry:ui",
  "description": "Card component with shift animation effects and hover interactions",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/shift-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface ShiftCardProps\n  extends Omit<MotionProps, \"onAnimationStart\" | \"onAnimationComplete\"> {\n  className?: string\n  topContent?: React.ReactNode\n  middleContent?: React.ReactNode\n  topAnimateContent?: React.ReactNode\n  bottomContent?: React.ReactNode\n}\n\nconst ShiftCardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, ...props }, ref) => (\n  <div ref={ref} {...props}>\n    {children}\n  </div>\n))\nShiftCardHeader.displayName = \"ShiftCardHeader\"\n\ninterface ShiftCardContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  isHovered: boolean\n}\nconst ShiftCardContent = React.forwardRef<\n  HTMLDivElement,\n  ShiftCardContentProps\n>(({ isHovered, children, ...divProps }, ref) => {\n  // Explicitly define motion props to avoid passing incompatible HTML attributes\n  const motionProps: MotionProps = {\n    initial: { opacity: 0, height: 0 },\n    animate: isHovered\n      ? { opacity: 1, height: 194 }\n      : { opacity: 1, height: 38 },\n    transition: { duration: 0.3, delay: 0.1, ease: \"circIn\" },\n  }\n\n  return (\n    <motion.div\n      key=\"shift-card-content\"\n      ref={ref}\n      {...motionProps}\n      className={divProps.className}\n    >\n      {children}\n    </motion.div>\n  )\n})\nShiftCardContent.displayName = \"ShiftCardContent\"\n\nconst ShiftCard = React.forwardRef<HTMLDivElement, ShiftCardProps>(\n  (\n    {\n      className,\n      topContent,\n      topAnimateContent,\n      middleContent,\n      bottomContent,\n      ...props\n    },\n    ref\n  ) => {\n    const [isHovered, setHovered] = React.useState(false)\n    const handleMouseEnter = () => setHovered(true)\n    const handleMouseLeave = () => setHovered(false)\n    const handleTapStart = () => setHovered(true)\n    const handleTapCancel = () => setHovered(false)\n    const handleTap = () => setHovered(false)\n\n    return (\n      <motion.div\n        ref={ref}\n        className={cn(\n          \"min-h-[300px] w-[280px] md:w-[300px]\",\n          \"group relative flex flex-col items-center justify-between overflow-hidden rounded-xl p-3 text-sm\",\n          \"bg-card hover:cursor-pointer\",\n          \"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]\",\n          /*\n          Applies a multi-layer shadow effect in dark mode:\n          1. Two subtle white inset shadows: one horizontal at 1px height, and one around the entire border at 1px width, both with a very light opacity of 0.03, creating a slight inner glow.\n          2. A series of black shadows:\n              - A basic 1px black border shadow with 10% opacity to subtly outline the element.\n              - Three progressively larger diffuse shadows at 2px, 4px, and 8px, each with 10% opacity, creating a depth effect that enhances the element's visual separation from the background.\n          */\n          \"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]\",\n          className\n        )}\n        initial={{ y: 20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        whileHover={{ scale: 1.02 }}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onClick={handleTapStart}\n        onTapCancel={handleTapCancel}\n        onTap={handleTap}\n        {...props}\n      >\n        <ShiftCardHeader className=\"text-primary-foreground relative flex h-[46px] w-full flex-col\">\n          <div className=\"w-full\">\n            {topContent}\n\n            <AnimatePresence>\n              {isHovered ? <>{topAnimateContent}</> : null}\n            </AnimatePresence>\n          </div>\n        </ShiftCardHeader>\n\n        <div className=\"pb-12\">\n          <AnimatePresence>\n            {!isHovered ? <>{middleContent}</> : null}\n          </AnimatePresence>\n        </div>\n\n        <ShiftCardContent\n          isHovered={isHovered}\n          className=\"absolute right-0 -bottom-1.5 left-0 flex flex-col gap-4 rounded-xl\"\n        >\n          <motion.div className=\"flex w-full flex-col gap-1\">\n            {bottomContent}\n          </motion.div>\n        </ShiftCardContent>\n      </motion.div>\n    )\n  }\n)\n\nShiftCard.displayName = \"ShiftCard\"\n\nexport { ShiftCard, ShiftCardHeader, ShiftCardContent }\nexport default ShiftCard\n",
      "type": "registry:ui"
    }
  ]
}