{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-form",
  "title": "Order Form",
  "description": "A take profit and stop loss order form for open trading positions with auto-syncing price/percent fields.",
  "dependencies": [
    "react-number-format"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "separator",
    "https://solanaui.dev/r/sol-lib-types.json"
  ],
  "files": [
    {
      "path": "src/registry/sol/order-form.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { NumericFormat } from \"react-number-format\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport type { DetailRow } from \"@/registry/lib/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype OrderFormDetail = DetailRow;\n\ninterface OrderFormProps {\n  title?: string;\n  description?: string;\n  entryPrice?: number;\n  details?: OrderFormDetail[];\n  onSubmit?: (values: {\n    tpPrice: string;\n    tpPercent: string;\n    slPrice: string;\n    slPercent: string;\n  }) => void;\n  className?: string;\n}\n\nconst OrderForm = ({\n  title = \"Edit TP/SL\",\n  description = \"Adjust the parameters on your order\",\n  entryPrice,\n  details,\n  onSubmit,\n  className,\n}: OrderFormProps) => {\n  const [tpPrice, setTpPrice] = React.useState(\"\");\n  const [tpPercent, setTpPercent] = React.useState(\"\");\n  const [slPrice, setSlPrice] = React.useState(\"\");\n  const [slPercent, setSlPercent] = React.useState(\"\");\n\n  const entryNum = entryPrice ?? 0;\n\n  const handleTpPriceChange = (value: string) => {\n    setTpPrice(value);\n    if (entryNum > 0) {\n      const priceNum = Number.parseFloat(value);\n      if (!Number.isNaN(priceNum)) {\n        setTpPercent((((priceNum - entryNum) / entryNum) * 100).toFixed(2));\n      } else {\n        setTpPercent(\"\");\n      }\n    }\n  };\n\n  const handleTpPercentChange = (value: string) => {\n    setTpPercent(value);\n    if (entryNum > 0) {\n      const pctNum = Number.parseFloat(value);\n      if (!Number.isNaN(pctNum)) {\n        setTpPrice((entryNum * (1 + pctNum / 100)).toFixed(2));\n      } else {\n        setTpPrice(\"\");\n      }\n    }\n  };\n\n  const handleSlPriceChange = (value: string) => {\n    setSlPrice(value);\n    if (entryNum > 0) {\n      const priceNum = Number.parseFloat(value);\n      if (!Number.isNaN(priceNum)) {\n        setSlPercent((((entryNum - priceNum) / entryNum) * 100).toFixed(2));\n      } else {\n        setSlPercent(\"\");\n      }\n    }\n  };\n\n  const handleSlPercentChange = (value: string) => {\n    setSlPercent(value);\n    if (entryNum > 0) {\n      const pctNum = Number.parseFloat(value);\n      if (!Number.isNaN(pctNum)) {\n        setSlPrice((entryNum * (1 - pctNum / 100)).toFixed(2));\n      } else {\n        setSlPrice(\"\");\n      }\n    }\n  };\n\n  const handleClearTp = () => {\n    setTpPrice(\"\");\n    setTpPercent(\"\");\n  };\n\n  const handleClearSl = () => {\n    setSlPrice(\"\");\n    setSlPercent(\"\");\n  };\n\n  const handleSubmit = () => {\n    onSubmit?.({ tpPrice, tpPercent, slPrice, slPercent });\n  };\n\n  return (\n    <Card className={cn(\"w-full max-w-sm\", className)}>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        <CardDescription>{description}</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4\">\n        {/* Details summary */}\n        {details && details.length > 0 && (\n          <>\n            <div className=\"flex flex-col gap-2\">\n              {details.map((detail) => (\n                <div\n                  key={detail.label}\n                  className=\"flex items-center justify-between\"\n                >\n                  <span className=\"text-sm text-muted-foreground\">\n                    {detail.label}\n                  </span>\n                  <span className={cn(\"text-sm font-medium\", detail.className)}>\n                    {detail.value}\n                  </span>\n                </div>\n              ))}\n            </div>\n\n            <Separator />\n          </>\n        )}\n\n        {/* Take Profit */}\n        <div className=\"flex flex-col gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm font-medium text-emerald-500\">\n              Take Profit\n            </span>\n            {(tpPrice || tpPercent) && (\n              <button\n                type=\"button\"\n                onClick={handleClearTp}\n                className=\"text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer\"\n              >\n                Clear\n              </button>\n            )}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <NumericFormat\n              value={tpPrice}\n              onValueChange={(values) => handleTpPriceChange(values.value)}\n              thousandSeparator=\",\"\n              decimalSeparator=\".\"\n              allowNegative={false}\n              placeholder=\"TP Price\"\n              inputMode=\"decimal\"\n              customInput={Input}\n              className=\"text-sm\"\n            />\n            <NumericFormat\n              value={tpPercent}\n              onValueChange={(values) => handleTpPercentChange(values.value)}\n              decimalSeparator=\".\"\n              allowNegative={false}\n              placeholder=\"Gain\"\n              suffix=\" %\"\n              inputMode=\"decimal\"\n              customInput={Input}\n              className=\"text-sm\"\n            />\n          </div>\n        </div>\n\n        <Separator />\n\n        {/* Stop Loss */}\n        <div className=\"flex flex-col gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm font-medium text-red-400\">Stop Loss</span>\n            {(slPrice || slPercent) && (\n              <button\n                type=\"button\"\n                onClick={handleClearSl}\n                className=\"text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer\"\n              >\n                Clear\n              </button>\n            )}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <NumericFormat\n              value={slPrice}\n              onValueChange={(values) => handleSlPriceChange(values.value)}\n              thousandSeparator=\",\"\n              decimalSeparator=\".\"\n              allowNegative={false}\n              placeholder=\"SL Price\"\n              inputMode=\"decimal\"\n              customInput={Input}\n              className=\"text-sm\"\n            />\n            <NumericFormat\n              value={slPercent}\n              onValueChange={(values) => handleSlPercentChange(values.value)}\n              decimalSeparator=\".\"\n              allowNegative={false}\n              placeholder=\"Loss\"\n              suffix=\" %\"\n              inputMode=\"decimal\"\n              customInput={Input}\n              className=\"text-sm\"\n            />\n          </div>\n        </div>\n\n        <Button onClick={handleSubmit} className=\"w-full\" size=\"lg\">\n          Confirm TP / SL\n        </Button>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport type { OrderFormProps, OrderFormDetail };\nexport { OrderForm };\n",
      "type": "registry:component",
      "target": "components/sol/order-form.tsx"
    }
  ],
  "type": "registry:component"
}