{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-toggle-icon",
  "title": "Sidebar Toggle Icon",
  "description": "Animated SVG icon that morphs between open and closed sidebar panel states using Motion path interpolation.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/icons/sidebar-toggle-icon/index.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\n\n// Outer rounded rectangle — fill + stroke, common to both states\nconst OUTER =\n  \"M11 3H13C16.7712 3 18.6569 3 19.8284 4.17157C21 5.34315 21 7.22876 21 11V13C21 16.7712 21 18.6569 19.8284 19.8284C18.6569 21 16.7712 21 13 21H11C7.2288 21 5.3431 21 4.1716 19.8284C3 18.6569 3 16.7712 3 13V11C3 7.22876 3 5.34315 4.1716 4.17157C5.3431 3 7.2288 3 11 3Z\";\n\n// Narrow left column (right edge at x = 10) — closed state\nconst PANEL_CLOSED =\n  \"M10 5.5 C10 4.793 10 4.439 9.780 4.220 C9.560 4 9.207 4 8.5 4 H8.5 C6.379 4 5.318 4 4.659 4.659 C4 5.318 4 6.379 4 8.5 V15.5 C4 17.621 4 18.682 4.659 19.341 C5.318 20 6.379 20 8.5 20 H8.5 C9.207 20 9.561 20 9.780 19.780 C10 19.561 10 19.207 10 18.5 V5.5 Z\";\n\n// Wide left panel (right edge at x = 14) — open state\nconst PANEL_OPEN =\n  \"M14 6 C14 5.057 14 4.586 13.707 4.293 C13.414 4 12.943 4 12 4 H10 C7.172 4 5.757 4 4.879 4.879 C4 5.757 4 7.172 4 10 V14 C4 16.828 4 18.243 4.879 19.121 C5.757 20 7.172 20 10 20 H12 C12.943 20 13.414 20 13.707 19.707 C14 19.414 14 18.943 14 18 V6 Z\";\n\nexport interface SidebarToggleIconProps {\n  /** Whether the sidebar panel is open. Controls the morphed path. */\n  isOpen: boolean;\n  /** SVG stroke width. @default 1.5 */\n  strokeWidth?: number;\n  /** Extra classes applied to the `<svg>` element. */\n  className?: string;\n}\n\nexport function SidebarToggleIcon({\n  isOpen,\n  strokeWidth = 1.5,\n  className,\n}: SidebarToggleIconProps) {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      {/* Outer border — foreground fill + stroke */}\n      <path\n        d={OUTER}\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n\n      {/* Inner panel — pure path morph, no opacity / translate tricks */}\n      <motion.path\n        d={isOpen ? PANEL_OPEN : PANEL_CLOSED}\n        animate={{ d: isOpen ? PANEL_OPEN : PANEL_CLOSED }}\n        style={{ fill: \"var(--background)\" }}\n        transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/sidebar-toggle-icon.tsx"
    }
  ],
  "type": "registry:ui"
}