{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-view-icon",
  "title": "Cards View Icon",
  "description": "Animated icon where four square dots reorder in a 2×2 grid via Motion layout animation when active, signaling a card view mode.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/icons/cards-view-icon/index.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\n\nconst CARD_DELAY_STEP = 0.067;\n\n// Active permutation: TR BR / TL BL (indices in a 2×2 grid 0-3)\nconst ACTIVE_ORDER = [1, 3, 0, 2];\nconst DEFAULT_ORDER = [0, 1, 2, 3];\n\nexport interface CardsViewIconProps {\n  /** Whether the icon is in its active (animated) state. */\n  isActive: boolean;\n  /** Extra classes applied to the root element. */\n  className?: string;\n}\n\nexport function CardsViewIcon({ isActive, className }: CardsViewIconProps) {\n  const order = isActive ? ACTIVE_ORDER : DEFAULT_ORDER;\n\n  return (\n    <motion.span\n      className={`inline-grid h-3 w-3 place-content-center grid-cols-2 gap-[2.5px] ${className ?? \"\"}`}\n      aria-hidden=\"true\"\n    >\n      {order.map((id, i) => (\n        <motion.span\n          key={id}\n          layout\n          className=\"size-[4px] rounded-[1px] bg-current\"\n          animate={isActive ? { opacity: [0.65, 1, 1] } : { opacity: 1 }}\n          transition={{\n            duration: 0.42,\n            delay: i === 0 ? 0 : i * CARD_DELAY_STEP,\n            ease: \"easeOut\",\n            layout: {\n              duration: 0.45,\n              delay: i === 0 ? 0 : i * CARD_DELAY_STEP,\n              ease: \"easeInOut\",\n            },\n          }}\n        />\n      ))}\n    </motion.span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/cards-view-icon.tsx"
    }
  ],
  "type": "registry:ui"
}