{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trade-buttons",
  "title": "Trade Buttons",
  "description": "A long/short toggle button group for selecting trade direction.",
  "registryDependencies": [
    "toggle-group"
  ],
  "files": [
    {
      "path": "src/registry/sol/trade-buttons.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TradeButtonsProps {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  labels?: [string, string];\n  className?: string;\n}\n\nconst TradeButtons = ({\n  defaultValue = \"long\",\n  value,\n  onValueChange,\n  labels = [\"Long\", \"Short\"],\n  className,\n}: TradeButtonsProps) => {\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\n  const currentValue = value ?? internalValue;\n\n  const handleValueChange = (newValue: string) => {\n    if (!newValue) return;\n    setInternalValue(newValue);\n    onValueChange?.(newValue);\n  };\n\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      spacing={2}\n      value={currentValue}\n      onValueChange={handleValueChange}\n      className={cn(\"w-full\", className)}\n    >\n      <ToggleGroupItem\n        value=\"long\"\n        aria-label={`Toggle ${labels[0]}`}\n        className={cn(\n          \"flex-1 shrink transition-colors\",\n          currentValue === \"long\"\n            ? \"bg-emerald-500/15 text-emerald-500 border-emerald-500/25 hover:bg-emerald-500/25 hover:text-emerald-500 data-[state=on]:bg-emerald-500/15 data-[state=on]:text-emerald-500\"\n            : \"hover:bg-muted/80\",\n        )}\n      >\n        {labels[0]}\n      </ToggleGroupItem>\n      <ToggleGroupItem\n        value=\"short\"\n        aria-label={`Toggle ${labels[1]}`}\n        className={cn(\n          \"flex-1 shrink transition-colors\",\n          currentValue === \"short\"\n            ? \"bg-red-400/15 text-red-400 border-red-400/25 hover:bg-red-400/25 hover:text-red-400 data-[state=on]:bg-red-400/15 data-[state=on]:text-red-400\"\n            : \"hover:bg-muted/80\",\n        )}\n      >\n        {labels[1]}\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n\nexport type { TradeButtonsProps };\nexport { TradeButtons };\n",
      "type": "registry:component",
      "target": "components/sol/trade-buttons.tsx"
    }
  ],
  "type": "registry:component"
}