{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "swaps-fx",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Tolerance setting with an explicit worst case.",
  "files": [
    {
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Money } from \"@/components/ledger/money\";\n\nexport interface SlippageControlProps {\n  className?: string;\n  onValueChange: (percent: number) => void;\n  value: number;\n  /** The worst case, in absolute money. A percentage alone is not decision-grade. */\n  worstCase: MoneyValue;\n}\n\nconst PRESETS = [0.1, 0.5, 1];\n\nexport function SlippageControl({ value, onValueChange, worstCase, className }: SlippageControlProps) {\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      <span className=\"block text-label font-medium text-text-secondary\">Slippage tolerance</span>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {PRESETS.map((p) => (\n          <button\n            aria-pressed={value === p}\n            className={cn(\n              \"numeric h-8 rounded-sm border px-3 text-label font-medium\",\n              \"transition-colors duration-1 ease-standard\",\n              value === p\n                ? \"border-accent bg-accent-subtle text-accent\"\n                : \"border-border hover:bg-surface-hover\",\n            )}\n            key={p}\n            onClick={() => onValueChange(p)}\n            type=\"button\"\n          >\n            {p}%\n          </button>\n        ))}\n        <label className=\"flex items-center gap-2\">\n          <span className=\"sr-only\">Custom slippage tolerance, percent</span>\n          <input\n            className=\"numeric h-8 w-16 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent\"\n            inputMode=\"decimal\"\n            onChange={(e) => onValueChange(Number(e.target.value.replace(/[^\\d.]/g, \"\")) || 0)}\n            type=\"text\"\n            value={value}\n          />\n          <span aria-hidden=\"true\" className=\"text-label text-text-secondary\">\n            %\n          </span>\n        </label>\n      </div>\n      <p className=\"text-caption text-text-secondary\">\n        You’ll receive at least <Money showCode size=\"xs\" tone=\"inherit\" value={worstCase} />.\n      </p>\n    </div>\n  );\n}\n",
      "path": "components/ledger/slippage-control.tsx",
      "target": "components/ledger/slippage-control.tsx",
      "type": "registry:component"
    }
  ],
  "name": "slippage-control",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/money",
    "@lopifi/money.types"
  ],
  "title": "SlippageControl",
  "type": "registry:component"
}