{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "brand-xai-icon",
  "dependencies": ["motion"],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "icons/brand-xai-icon.tsx",
      "content": "import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst BrandXaiIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  ({ size = 24, color = \"currentColor\", className = \"\" }, ref) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(() => {\n      // Explode: all 4 parts move outward in different directions\n      animate(\n        \".xai-part-1\",\n        { x: -4, y: -2 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n      animate(\n        \".xai-part-2\",\n        { x: -3, y: 3 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n      animate(\n        \".xai-part-3\",\n        { x: 4, y: -3 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n      animate(\n        \".xai-part-4\",\n        { x: 3, y: 2 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n\n      // Then merge back\n      setTimeout(() => {\n        animate(\n          \".xai-part-1\",\n          { x: 0, y: 0 },\n          { duration: 0.3, ease: \"easeInOut\" },\n        );\n        animate(\n          \".xai-part-2\",\n          { x: 0, y: 0 },\n          { duration: 0.3, ease: \"easeInOut\" },\n        );\n        animate(\n          \".xai-part-3\",\n          { x: 0, y: 0 },\n          { duration: 0.3, ease: \"easeInOut\" },\n        );\n        animate(\n          \".xai-part-4\",\n          { x: 0, y: 0 },\n          { duration: 0.3, ease: \"easeInOut\" },\n        );\n      }, 250);\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\".xai-part-1\", { x: 0, y: 0 }, { duration: 0.2 });\n      animate(\".xai-part-2\", { x: 0, y: 0 }, { duration: 0.2 });\n      animate(\".xai-part-3\", { x: 0, y: 0 }, { duration: 0.2 });\n      animate(\".xai-part-4\", { x: 0, y: 0 }, { duration: 0.2 });\n    }, [animate]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        startAnimation: start,\n        stopAnimation: stop,\n      }),\n      [start, stop],\n    );\n\n    return (\n      <motion.svg\n        ref={scope}\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill={color}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={className}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <title>xAI</title>\n\n        {/* Part 1: Top-left diagonal */}\n        <motion.path\n          className=\"xai-part-1\"\n          style={{ transformBox: \"fill-box\", transformOrigin: \"center\" }}\n          d=\"M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47z\"\n        />\n\n        {/* Part 2: Bottom-left shape */}\n        <motion.path\n          className=\"xai-part-2\"\n          style={{ transformBox: \"fill-box\", transformOrigin: \"center\" }}\n          d=\"M6.465 16.676l2.233 3.164L6.467 23H2l4.465-6.324z\"\n        />\n\n        {/* Part 3: Top-right diagonal */}\n        <motion.path\n          className=\"xai-part-3\"\n          style={{ transformBox: \"fill-box\", transformOrigin: \"center\" }}\n          d=\"M22 1l-9.952 14.095-2.233-3.163L17.533 1H22z\"\n        />\n\n        {/* Part 4: Vertical bar (I) */}\n        <motion.path\n          className=\"xai-part-4\"\n          style={{ transformBox: \"fill-box\", transformOrigin: \"center\" }}\n          d=\"M22 2.582V23h-3.659V7.764L22 2.582z\"\n        />\n      </motion.svg>\n    );\n  },\n);\n\nBrandXaiIcon.displayName = \"BrandXaiIcon\";\nexport default BrandXaiIcon;\n",
      "type": "registry:ui"
    },
    {
      "path": "icons/types.ts",
      "content": "import type { SVGProps } from \"react\";\n\n/** Standard stroke width for 24×24 outline icons */\nexport const DEFAULT_STROKE_WIDTH = 2;\n\n/** Scale stroke to match DEFAULT_STROKE_WIDTH on non-24 viewBoxes */\nexport function scaledStrokeWidth(\n  strokeWidth: number,\n  viewBoxSize: number,\n): number {\n  return strokeWidth * (viewBoxSize / 24);\n}\n\nexport type IconEasing =\n  | \"linear\"\n  | \"easeIn\"\n  | \"easeOut\"\n  | \"easeInOut\"\n  | \"circIn\"\n  | \"circOut\"\n  | \"circInOut\"\n  | \"backIn\"\n  | \"backOut\"\n  | \"backInOut\"\n  | \"anticipate\";\n\nexport interface AnimatedIconProps extends Omit<\n  SVGProps<SVGSVGElement>,\n  | \"ref\"\n  | \"onAnimationStart\"\n  | \"onAnimationEnd\"\n  | \"onAnimationIteration\"\n  | \"onDrag\"\n  | \"onDragEnd\"\n  | \"onDragEnter\"\n  | \"onDragExit\"\n  | \"onDragLeave\"\n  | \"onDragOver\"\n  | \"onDragStart\"\n  | \"onDrop\"\n  | \"values\"\n> {\n  /** Icon size in pixels or CSS string */\n  size?: number | string;\n  /** Icon color (defaults to currentColor) */\n  color?: string;\n  /** SVG stroke width */\n  strokeWidth?: number;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport interface AnimatedIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}