{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "brand-grok-icon",
  "dependencies": ["motion"],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "icons/brand-grok-icon.tsx",
      "content": "import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst BrandGrokIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  ({ size = 24, color = \"currentColor\", className = \"\" }, ref) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(() => {\n      // Subtle container pulse\n      animate(\n        scope.current,\n        { scale: 1.05 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n\n      // Upper flows up-right\n      animate(\n        \".grok-upper\",\n        { x: 3, y: -3, opacity: 0.85 },\n        { duration: 0.35, ease: \"easeOut\" },\n      );\n\n      // Lower flows down-left\n      animate(\n        \".grok-lower\",\n        { x: -3, y: 3, opacity: 0.85 },\n        { duration: 0.35, ease: \"easeOut\" },\n      );\n    }, [animate, scope]);\n\n    const stop = useCallback(() => {\n      animate(scope.current, { scale: 1 }, { duration: 0.2 });\n\n      animate(\n        \".grok-upper\",\n        { x: 0, y: 0, opacity: 1 },\n        { duration: 0.25, ease: \"easeInOut\" },\n      );\n\n      animate(\n        \".grok-lower\",\n        { x: 0, y: 0, opacity: 1 },\n        { duration: 0.25, ease: \"easeInOut\" },\n      );\n    }, [animate, scope]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={start}\n        onHoverEnd={stop}\n        fill={color}\n        viewBox=\"0 0 24 24\"\n        width={size}\n        height={size}\n        className={`grok-icon cursor-pointer ${className}`}\n        style={{ flex: \"none\", lineHeight: 1 }}\n      >\n        <title>Grok</title>\n\n        {/* Upper shard */}\n        <motion.path\n          className=\"grok-upper\"\n          d=\"M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292\"\n        />\n\n        {/* Lower shard */}\n        <motion.path\n          className=\"grok-lower\"\n          d=\"M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815\"\n        />\n      </motion.svg>\n    );\n  },\n);\n\nBrandGrokIcon.displayName = \"BrandGrokIcon\";\nexport default BrandGrokIcon;\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"
}