{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilt-card",
  "title": "Tilt Card",
  "description": "A card with 3D spring tilt, optional floating image, badge and radial shine on hover.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@unlumen-ui/tilt",
    "@unlumen-ui/clipped-circle"
  ],
  "files": [
    {
      "path": "registry/components/unlumen/tilt-card/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ClippedCircle } from \"@/components/unlumen-ui/primitives/clipped-circle\";\nimport { Tilt, type TiltProps } from \"@/components/unlumen-ui/primitives/tilt\";\n\nexport interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  description?: string;\n  /** left half of the split badge pill; shown as a simple pill if `badgeLabel` is omitted */\n  price?: string;\n  /** right half of the split pill, coloured by `badgeVariant` */\n  badgeLabel?: string;\n  badgeVariant?: \"success\" | \"warning\";\n  imageSrc?: string;\n  imageAlt?: string;\n  /** wraps the card in a plain `<a>` tag */\n  href?: string;\n  children?: React.ReactNode;\n  tiltProps?: Omit<TiltProps, \"children\" | \"className\">;\n}\n\nconst BADGE_LABEL_CLASSES: Record<\n  NonNullable<TiltCardProps[\"badgeVariant\"]>,\n  string\n> = {\n  success: \"bg-emerald-500/15 text-emerald-700 dark:text-emerald-300\",\n  warning: \"bg-amber-500/20 text-amber-700 dark:text-amber-300\",\n};\n\nexport function TiltCard({\n  title,\n  description,\n  price,\n  badgeLabel,\n  badgeVariant = \"success\",\n  imageSrc,\n  imageAlt = \"\",\n  href,\n  children,\n  tiltProps,\n  className,\n  ...props\n}: TiltCardProps) {\n  const inner = (\n    <Tilt\n      rotationFactor={11}\n      {...tiltProps}\n      className={cn(\n        \"relative group overflow-hidden\",\n        \"bg-background border border-border rounded-lg\",\n        \"flex flex-col gap-4\",\n        \"h-48 sm:h-52 md:h-56 w-full\",\n        \"hover:shadow-lg hover:scale-105 transition-all duration-400 ease-out\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-row transition-all duration-200 justify-between px-4 sm:px-6 py-4 sm:py-5\">\n        <div className=\"flex flex-col gap-1 flex-1 mr-2\">\n          <h2 className=\"text-lg tracking-tight leading-tight font-medium\">\n            {title}\n          </h2>\n          {description && (\n            <p className=\"text-foreground/50 text-sm\">{description}</p>\n          )}\n          {children && <div className=\"mt-2\">{children}</div>}\n        </div>\n\n        {price && badgeLabel ? (\n          <div className=\"inline-flex h-fit items-center text-sm whitespace-nowrap shrink-0\">\n            <span className=\"rounded-l-full bg-secondary h-fit py-1 px-2 font-medium\">\n              {price}\n            </span>\n            <span\n              className={cn(\n                \"rounded-r-full text-sm h-fit py-1 px-2 font-medium\",\n                BADGE_LABEL_CLASSES[badgeVariant],\n              )}\n            >\n              {badgeLabel}\n            </span>\n          </div>\n        ) : price ? (\n          <span className=\"h-fit rounded-full bg-secondary px-3 py-1 text-sm font-medium whitespace-nowrap shrink-0\">\n            {price}\n          </span>\n        ) : null}\n      </div>\n\n      {imageSrc && (\n        <img\n          src={imageSrc}\n          alt={imageAlt}\n          width={288}\n          height={224}\n          loading=\"lazy\"\n          decoding=\"async\"\n          className={cn(\n            \"absolute z-10 top-27 w-72 -right-10\",\n            \"rotate-[-5deg] border-border border rounded-md\",\n            \"transition-transform duration-300 ease-out\",\n            \"group-hover:-rotate-3 group-hover:-translate-y-1 group-hover:-translate-x-0.5\",\n          )}\n        />\n      )}\n\n      <ClippedCircle circleClassName=\"bg-white\" circleSize={800} />\n    </Tilt>\n  );\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        className=\"block cursor-pointer\"\n        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {inner}\n      </a>\n    );\n  }\n\n  return <div {...props}>{inner}</div>;\n}\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/tilt-card.tsx"
    }
  ],
  "type": "registry:ui"
}