{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "description": "Surfaces with crop marks, raised and inset styles, and a divided footer tray.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { gsap, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst cardVariants = cva(\"relative flex flex-col gap-card rounded-xl border py-card text-card-foreground\", {\n  variants: {\n    variant: {\n      outline: \"border-border bg-card\",\n      raised: \"border-border bg-card shadow-raised\",\n      inset: \"border-dashed border-border bg-muted/40\",\n      ghost: \"border-transparent bg-transparent\",\n    },\n    marks: {\n      true: \"cue-marks\",\n    },\n    interactive: {\n      true: \"transition-[border-color,box-shadow,translate] duration-200 ease-cue hover:-translate-y-0.5 hover:border-ring/40 hover:shadow-raised has-[a:focus-visible,button:focus-visible]:outline-2 has-[a:focus-visible,button:focus-visible]:outline-offset-2 has-[a:focus-visible,button:focus-visible]:outline-ring motion-reduce:hover:translate-y-0\",\n    },\n    spotlight: {\n      true: \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[radial-gradient(260px_circle_at_var(--spot-x,50%)_var(--spot-y,0%),color-mix(in_oklch,var(--signal)_12%,transparent),transparent_70%)] after:opacity-0 after:transition-opacity after:duration-300 hover:after:opacity-100\",\n    },\n  },\n  defaultVariants: { variant: \"outline\" },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> & VariantProps<typeof cardVariants>;\n\n/** `spotlight` adds a soft accent glow that trails the pointer (GSAP, eased with the house curve). */\nfunction Card({ className, variant = \"outline\", marks, interactive, spotlight, ref, onPointerMove, ...props }: CardProps) {\n  const cardRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRef(cardRef, ref);\n  return (\n    <div\n      ref={mergedRef}\n      data-slot=\"card\"\n      data-variant={variant}\n      className={cn(cardVariants({ variant, marks, interactive, spotlight }), className)}\n      onPointerMove={(e) => {\n        onPointerMove?.(e);\n        if (!spotlight) return;\n        const rect = e.currentTarget.getBoundingClientRect();\n        gsap.to(e.currentTarget, { \"--spot-x\": `${e.clientX - rect.left}px`, \"--spot-y\": `${e.clientY - rect.top}px`, duration: 0.4, ease: \"cue\", overwrite: \"auto\" });\n      }}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-card has-data-[slot=card-action]:grid-cols-[1fr_auto]\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A mono micro-label above the title, e.g. a section number or category. */\nfunction CardLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-label\" className={cn(\"cue-label\", className)} {...props} />;\n}\n\n/** Use `asChild` to render a real heading (`<h2>`, `<h3>`) for document outline and SEO. */\nfunction CardTitle({ className, asChild = false, ...props }: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return <Comp data-slot=\"card-title\" className={cn(\"text-base leading-snug font-semibold tracking-tight\", className)} {...props} />;\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />;\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-action\" className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)} {...props} />;\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"px-card\", className)} {...props} />;\n}\n\n/** `divided` adds a dashed rule and a muted tray behind the footer. */\nfunction CardFooter({ className, divided = false, ...props }: React.ComponentProps<\"div\"> & { divided?: boolean }) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center gap-2 px-card\", divided && \"cue-dash-t -mb-card rounded-b-[inherit] bg-muted/40 py-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardLabel, CardTitle, CardDescription, CardAction, CardContent, CardFooter, cardVariants };\nexport type { CardProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/card",
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}