{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "z-onboarding-card",
  "title": "Z Onboarding Card",
  "dependencies": [
    "motion@12.23.15"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/spectrum/molecules/z-onboarding-card/z-onboarding-card.tsx",
      "content": "\"use client\";\nimport { motion, type TargetAndTransition } from 'motion/react';\nimport { type ReactNode } from 'react';\nimport { cn } from \"../../../lib/ui-utils\";\ninterface ZOnboardingCardProps {\n    children: ReactNode;\n    background?: boolean;\n    backgroundColor?: string;\n    backgroundImage?: string;\n    className?: string;\n}\nfunction ZOnboardingCardRoot({ children, background = true, backgroundColor, backgroundImage, className, }: ZOnboardingCardProps) {\n    return (<div className={cn('border-neutral relative flex min-h-[500px] w-[500px] flex-col overflow-hidden rounded-[14px]', 'shadow-[0px_34px_20px_-24px_var(--background-color-surface-strong)]', background && !backgroundColor && !backgroundImage && 'bg-surface-intense', backgroundColor, className)}>\n      {backgroundImage && (<div className=\"absolute inset-0 opacity-90 will-change-transform\" style={{\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: 'cover',\n                backgroundPosition: 'center',\n                transform: 'translateZ(0)',\n            }}/>)}\n      \n      <div className=\"relative flex flex-1 flex-col\">{children}</div>\n    </div>);\n}\ninterface ContentProps {\n    children: ReactNode;\n    className?: string;\n    initial?: TargetAndTransition;\n    animate?: TargetAndTransition;\n}\nconst DEFAULT_INITIAL = { opacity: 0, scale: 0.96, y: 8 };\nconst DEFAULT_ANIMATE = { opacity: 1, scale: 1, y: 0 };\nfunction Content({ children, className, initial, animate }: ContentProps) {\n    return (<div className={cn('user-drag-none flex flex-1 flex-col', className)}>\n      <motion.div className=\"[&_img]:drag-none grid size-full flex-1 place-items-center\" initial={initial ?? DEFAULT_INITIAL} animate={animate ?? DEFAULT_ANIMATE} transition={{\n            duration: 0.5,\n            ease: [0.25, 0.1, 0.25, 1]\n        }}>\n        {children}\n      </motion.div>\n    </div>);\n}\ninterface InfoCardProps {\n    children: ReactNode;\n    className?: string;\n}\nfunction InfoCard({ children, className }: InfoCardProps) {\n    return (<div className=\"p-1\">\n      <div className={cn('bg-surface border-neutral relative z-10 flex w-full flex-col overflow-hidden rounded-lg border shadow-md', className)}>\n        {children}\n      </div>\n    </div>);\n}\ninterface TitleProps {\n    children: ReactNode;\n    className?: string;\n}\nfunction Title({ children, className }: TitleProps) {\n    return <h2 className={cn('text-copy text-neutral font-semibold', className)}>{children}</h2>;\n}\ninterface DescriptionProps {\n    children: ReactNode;\n    className?: string;\n}\nfunction Description({ children, className }: DescriptionProps) {\n    return <p className={cn('text-copy text-neutral-subtle', className)}>{children}</p>;\n}\ninterface HeaderProps {\n    children: ReactNode;\n    className?: string;\n}\nfunction Header({ children, className }: HeaderProps) {\n    return <div className={cn('flex flex-col gap-1 p-4.5', className)}>{children}</div>;\n}\ninterface FooterProps {\n    children: ReactNode;\n    className?: string;\n}\nfunction Footer({ children, className }: FooterProps) {\n    return (<div className={cn('flex items-center justify-between gap-2 p-4.5 pt-0', className)}>\n      {children}\n    </div>);\n}\nexport const ZOnboardingCard = Object.assign(ZOnboardingCardRoot, {\n    Content,\n    InfoCard,\n    Title,\n    Description,\n    Header,\n    Footer,\n});\nexport default ZOnboardingCard;\n",
      "type": "registry:ui",
      "target": "@ui/orchid/spectrum/molecules/z-onboarding-card/z-onboarding-card.tsx"
    }
  ],
  "type": "registry:ui"
}