{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-styled",
  "title": "Card essentials",
  "description": "Styled card: the essentials set. 5 decorative card variations (GlassCard, GradientBorderCard, GlowCard, TiltCard, SpotlightCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/card-styled.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useMotionValue, useReducedMotion, useSpring } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Styled card family: 5 decorative opt-in card surfaces. The consumer can drop any content inside (children). Colour comes ONLY from semantic tokens (transparency via color-mix), size = the padding plus radius scale. The pointer physics (tilt and spotlight) are held with useMotionValue plus useSpring and are turned off completely under reduced-motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst sizes: Record<StyledSize, string> = {\n  sm: \"rounded-lg p-4\",\n  md: \"rounded-xl p-5\",\n  lg: \"rounded-2xl p-6\",\n  xl: \"rounded-2xl p-8\",\n}\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* Glass: buzlu token yuzey + backdrop-blur + ust highlight. backdrop-filter\n   desteklenmezse opak surface'a duser. */\nexport function GlassCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        \"relative border border-border bg-surface-2/70 text-card-foreground shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-foreground)_12%,transparent)] before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-1/2 before:rounded-[inherit] before:bg-[linear-gradient(to_bottom,color-mix(in_oklab,var(--color-foreground)_8%,transparent),transparent)] supports-[backdrop-filter]:bg-surface-2/40 supports-[backdrop-filter]:backdrop-blur-xl\",\n        sizes[size],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/* GradientBorder: a token gradient border (the padding-box/border-box background-clip trick); the inner surface stays bg-card. */\nexport function GradientBorderCard({ className, size = \"md\", children, style, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        \"relative border border-transparent bg-clip-padding text-card-foreground\",\n        sizes[size],\n        className\n      )}\n      style={{\n        background:\n          \"linear-gradient(var(--color-card),var(--color-card)) padding-box, linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 70%, transparent), color-mix(in oklab, var(--color-foreground) 15%, transparent)) border-box\",\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/* Glow: a soft token glow that strengthens on hover. */\nexport function GlowCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        \"relative border border-border bg-card text-card-foreground shadow-[0_0_24px_-12px_color-mix(in_oklab,var(--color-primary)_35%,transparent)] transition-shadow duration-(--motion-base) ease-(--motion-ease) hover:shadow-[0_0_44px_-8px_color-mix(in_oklab,var(--color-primary)_50%,transparent)] motion-reduce:transition-none\",\n        sizes[size],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/* Tilt: the card tilts in 3D towards the cursor (rotateX/rotateY from the pointer, with a spring). The tilt is off under reduced-motion. */\nexport function TiltCard({ className, size = \"md\", children, style, ...props }: Props) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const reduce = useReducedMotion()\n  const rx = useMotionValue(0)\n  const ry = useMotionValue(0)\n  const springRx = useSpring(rx, { stiffness: 300, damping: 22 })\n  const springRy = useSpring(ry, { stiffness: 300, damping: 22 })\n\n  const onMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (reduce || !ref.current) return\n    const r = ref.current.getBoundingClientRect()\n    const px = (e.clientX - r.left) / r.width - 0.5\n    const py = (e.clientY - r.top) / r.height - 0.5\n    rx.set(py * -12)\n    ry.set(px * 12)\n  }\n  const reset = () => {\n    rx.set(0)\n    ry.set(0)\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"styled-card\"\n      onPointerMove={onMove}\n      onPointerLeave={reset}\n      className={cn(\"relative\", className)}\n      style={style}\n      {...props}\n    >\n      <motion.div\n        className={cn(\n          \"relative border border-border bg-card text-card-foreground shadow-[0_10px_30px_-14px_color-mix(in_oklab,var(--color-foreground)_40%,transparent)]\",\n          sizes[size]\n        )}\n        style={\n          reduce\n            ? undefined\n            : { rotateX: springRx, rotateY: springRy, transformPerspective: 800 }\n        }\n      >\n        {children}\n      </motion.div>\n    </div>\n  )\n}\n\n/* Spotlight: a radial token light spot follows the cursor across the card. The spot is off under reduced-motion. */\nexport function SpotlightCard({ className, size = \"md\", children, ...props }: Props) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const reduce = useReducedMotion()\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const springX = useSpring(x, { stiffness: 200, damping: 26 })\n  const springY = useSpring(y, { stiffness: 200, damping: 26 })\n\n  const onMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (reduce || !ref.current) return\n    const r = ref.current.getBoundingClientRect()\n    x.set(e.clientX - r.left - 150)\n    y.set(e.clientY - r.top - 150)\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"styled-card\"\n      onPointerMove={onMove}\n      className={cn(\n        \"group relative overflow-hidden border border-border bg-card text-card-foreground\",\n        sizes[size],\n        className\n      )}\n      {...props}\n    >\n      <motion.div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-0 top-0 size-[300px] rounded-full opacity-0 transition-opacity duration-(--motion-base) group-hover:opacity-100 motion-reduce:hidden\"\n        style={\n          reduce\n            ? { display: \"none\" }\n            : {\n                x: springX,\n                y: springY,\n                background:\n                  \"radial-gradient(circle, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 70%)\",\n              }\n        }\n      />\n      <div className=\"relative\">{children}</div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/card-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "card"
  ],
  "type": "registry:component"
}