{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-button",
  "type": "registry:component",
  "title": "Command Button",
  "description": "Keyboard-shortcut button with a hover shimmer sweep (KokonutUI, MIT), bridged to contract tokens.",
  "registryDependencies": [
    "https://design.subconscious.ai/r/utils.json",
    "button"
  ],
  "files": [
    {
      "path": "registry/components/command-button.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/registry/lib/utils\";\n\n/**\n * @author: @dorianbaffier\n * @description: Command Button\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n *\n * Bridged to the Subconscious design contract: the single lucide-react import\n * (Command) was inlined as raw SVG per issue #463. Stroke style matches the\n * brand iconography canon (1.5px, square cap, miter join) rather than lucide's\n * round/round default. Icon path data from lucide-react@0.400.0 (ISC).\n */\n\nfunction CommandIcon({\n  className,\n  ...props\n}: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"miter\"\n      strokeWidth={1.5}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\" />\n    </svg>\n  );\n}\n\nexport default function CommandButton({\n  className,\n  children,\n  ...props\n}: React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <Button\n      {...props}\n      className={cn(\n        \"relative p-2\",\n        \"overflow-hidden rounded-lg\",\n        \"transition-all duration-300 ease-out\",\n        \"group\",\n        \"inline-flex items-center justify-center\",\n        \"gap-2\",\n        className\n      )}\n      style={{\n        background: \"var(--backgroundColor)\",\n        color: \"color-mix(in srgb, var(--color) 60%, transparent)\",\n        border: \"1px solid color-mix(in srgb, var(--color) 15%, transparent)\",\n      }}\n    >\n      <CommandIcon\n        className={cn(\n          \"h-4 w-4\",\n          \"transition-all duration-300\",\n          \"group-hover:rotate-[-4deg]\"\n        )}\n      />\n      <span className=\"text-sm\">{children || \"CMD + K\"}</span>\n      <span\n        className={cn(\n          \"absolute inset-0\",\n          \"opacity-0\",\n          \"group-hover:opacity-100\",\n          \"transition-opacity duration-500\",\n          \"ease-out\"\n        )}\n        style={{\n          backgroundImage:\n            \"linear-gradient(to right, transparent, color-mix(in srgb, var(--color) 10%, transparent), transparent)\",\n        }}\n      />\n    </Button>\n  );\n}\n"
    }
  ]
}