{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-view-icon",
  "title": "List View Icon",
  "description": "Animated icon where three horizontal lines shuffle vertically when active, signaling a list view mode.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/icons/list-view-icon/index.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\n\nconst LINE_DELAY_STEP = 0.02;\nconst LINE_STEP = 5; // 2px line + 3px gap\n\nconst LINE_TRAVEL: Record<number, number> = {\n  0: LINE_STEP,\n  1: LINE_STEP,\n  2: -LINE_STEP * 2,\n};\n\nexport interface ListViewIconProps {\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 ListViewIcon({ isActive, className }: ListViewIconProps) {\n  return (\n    <motion.span\n      className={`inline-flex h-4 w-4 flex-col items-center justify-center gap-[3px] ${className ?? \"\"}`}\n      aria-hidden=\"true\"\n    >\n      {[0, 1, 2].map((i) => (\n        <motion.span\n          key={i}\n          className=\"h-[2px] w-3 rounded-full bg-current\"\n          animate={\n            isActive\n              ? { y: LINE_TRAVEL[i], opacity: [0.55, 1, 1] }\n              : { y: 0, opacity: 0.9 }\n          }\n          transition={{\n            duration: 0.36,\n            delay: i === 0 ? 0 : i * LINE_DELAY_STEP,\n            ease: \"easeOut\",\n          }}\n        />\n      ))}\n    </motion.span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/list-view-icon.tsx"
    }
  ],
  "type": "registry:ui"
}