{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layout-panel-left",
  "type": "registry:ui",
  "addGlobalCss": false,
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "files": [
    {
      "path": "layout-panel-left-icon.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { Variants } from \"motion/react\";\nimport {\n LazyMotion,\n domMin,\n m,\n useAnimation,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n forwardRef,\n useCallback,\n useImperativeHandle,\n useRef,\n type HTMLAttributes,\n} from \"react\";\nexport interface LayoutPanelLeftIconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n}\n\ninterface LayoutPanelLeftIconProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n | \"color\"\n | \"onDrag\"\n | \"onDragStart\"\n | \"onDragEnd\"\n | \"onAnimationStart\"\n | \"onAnimationEnd\"\n | \"onAnimationIteration\"\n> {\n size?: number;\n duration?: number;\n isAnimated?: boolean;\n color?: string;\n}\n\nconst LayoutPanelLeftIcon = forwardRef<\n LayoutPanelLeftIconHandle,\n LayoutPanelLeftIconProps\n>(\n (\n  {\n   onMouseEnter,\n   onMouseLeave,\n   className,\n   size = 24,\n   duration = 1,\n   isAnimated = true,\n   color,\n   ...props\n  },\n  ref,\n ) => {\n  const controls = useAnimation();\n  const reduced = useReducedMotion();\n  const isControlled = useRef(false);\n\n  useImperativeHandle(ref, () => {\n   isControlled.current = true;\n   return {\n    startAnimation: () =>\n     reduced ? controls.start(\"normal\") : controls.start(\"animate\"),\n    stopAnimation: () => controls.start(\"normal\"),\n   };\n  });\n\n  const handleEnter = useCallback(\n   (e?: React.MouseEvent<HTMLDivElement>) => {\n    if (!isAnimated || reduced) return;\n    if (!isControlled.current) controls.start(\"animate\");\n    else onMouseEnter?.(e as any);\n   },\n   [controls, reduced, isAnimated, onMouseEnter],\n  );\n\n  const handleLeave = useCallback(\n   (e?: React.MouseEvent<HTMLDivElement>) => {\n    if (!isControlled.current) controls.start(\"normal\");\n    else onMouseLeave?.(e as any);\n   },\n   [controls, onMouseLeave],\n  );\n\n  const tileVariants = (delay: number): Variants => ({\n   normal: { scale: 1 },\n   animate: {\n    scale: [1, 0.85, 1.05, 1],\n    transition: {\n     duration: 0.5 * duration,\n     ease: \"easeInOut\",\n     times: [0, 0.35, 0.7, 1],\n     delay: delay * duration,\n    },\n   },\n  });\n\n  return (\n   <LazyMotion features={domMin} strict>\n    <m.div\n     className={cn(\"inline-flex items-center justify-center\", className)}\n     onMouseEnter={handleEnter}\n     onMouseLeave={handleLeave}\n     {...props}\n     style={{ color, ...props.style }}\n    >\n     <m.svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      animate={controls}\n      initial=\"normal\"\n     >\n      <m.path\n       d=\"M2.49591 6.25C2.49591 4.60626 2.49591 3.78439 2.94989 3.23121C3.033 3.12995 3.12586 3.03709 3.22712 2.95398C3.7803 2.5 4.60217 2.5 6.24591 2.5C7.88965 2.5 8.71152 2.5 9.2647 2.95398C9.36597 3.03709 9.45882 3.12995 9.54193 3.23121C9.99591 3.78439 9.99591 4.60626 9.99591 6.25V17.25C9.99591 18.8937 9.99591 19.7156 9.54193 20.2688C9.45882 20.3701 9.36597 20.4629 9.2647 20.546C8.71152 21 7.88965 21 6.24591 21C4.60217 21 3.7803 21 3.22712 20.546C3.12586 20.4629 3.033 20.3701 2.94989 20.2688C2.49591 19.7156 2.49591 18.8937 2.49591 17.25V6.25Z\"\n       variants={tileVariants(0)}\n       style={{\n        transformBox: \"view-box\",\n        originX: \"6.25px\",\n        originY: \"11.75px\",\n       }}\n      />\n      <m.path\n       d=\"M13.9959 6.2501C13.9959 4.60632 13.9958 3.78443 14.4498 3.23124C14.5329 3.12996 14.6258 3.0371 14.7271 2.95399C15.2802 2.5 16.1022 2.5 17.746 2.5C19.3898 2.5 20.2117 2.5 20.7648 2.95396C20.8661 3.03707 20.959 3.12993 21.0421 3.23119C21.496 3.78435 21.4961 4.6062 21.4961 6.2499C21.4961 7.89368 21.4962 8.71557 21.0422 9.26876C20.9591 9.37004 20.8662 9.4629 20.765 9.54601C20.2118 10 19.3899 10 17.746 10C16.1022 10 15.2804 10 14.7272 9.54604C14.6259 9.46293 14.5331 9.37007 14.45 9.26881C13.996 8.71565 13.996 7.8938 13.9959 6.2501Z\"\n       variants={tileVariants(0.1)}\n       style={{\n        transformBox: \"view-box\",\n        originX: \"17.75px\",\n        originY: \"6.25px\",\n       }}\n      />\n      <m.path\n       d=\"M13.9958 17.75C13.9958 16.1063 13.9958 15.2844 14.4498 14.7312C14.5329 14.6299 14.6257 14.5371 14.727 14.454C15.2802 14 16.1021 14 17.746 14C19.3899 14 20.2118 14 20.765 14.454C20.8662 14.5371 20.9591 14.6299 21.0422 14.7312C21.4962 15.2844 21.4962 16.1063 21.4962 17.75C21.4962 19.3937 21.4962 20.2156 21.0422 20.7688C20.9591 20.8701 20.8662 20.9629 20.765 21.046C20.2118 21.5 19.3899 21.5 17.746 21.5C16.1021 21.5 15.2802 21.5 14.727 21.046C14.6257 20.9629 14.5329 20.8701 14.4498 20.7688C13.9958 20.2156 13.9958 19.3937 13.9958 17.75Z\"\n       variants={tileVariants(0.2)}\n       style={{\n        transformBox: \"view-box\",\n        originX: \"17.75px\",\n        originY: \"17.75px\",\n       }}\n      />\n     </m.svg>\n    </m.div>\n   </LazyMotion>\n  );\n },\n);\n\nLayoutPanelLeftIcon.displayName = \"LayoutPanelLeftIcon\";\nexport { LayoutPanelLeftIcon };\n",
      "type": "registry:ui"
    }
  ]
}