{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "amount-input",
  "title": "Amount input",
  "description": "hero money field · MAX and currency switch",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/amount-input.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport { ArrowUpDownIcon } from 'lucide-react';\nimport * as React from 'react';\n\ntype Props = {\n  value: string;\n  onChangeText: (next: string) => void;\n  /** \"$\", \"€\", \"BTC\"… */\n  symbol: string;\n  symbolPosition?: 'leading' | 'trailing';\n  /** Line under the field: conversion, balance. */\n  helper?: string;\n  onMax?: () => void;\n  onToggleCurrency?: () => void;\n  error?: string;\n  placeholder?: string;\n  /** Names the field (\"Amount to send\"). Default \"Amount\". */\n  'aria-label'?: string;\n  className?: string;\n};\n\n/** Hero amount field for send, trade and deposit screens. */\nexport function AmountInput({ value, onChangeText, symbol, symbolPosition = 'leading', helper, onMax, onToggleCurrency, error, placeholder = '0', className, ...props }: Props) {\n  const id = React.useId();\n  const symbolEl = <span className=\"text-muted-foreground text-3xl font-semibold\">{symbol}</span>;\n  return (\n    <div className={className}>\n      <div\n        className={cn(\n          'bg-card focus-within:ring-ring/50 flex items-center gap-2 rounded-lg border px-4 py-3 focus-within:ring-[3px]',\n          error ? 'border-destructive' : 'border-border focus-within:border-ring'\n        )}>\n        {symbolPosition === 'leading' ? symbolEl : null}\n        <input\n          value={value}\n          onChange={(e) => onChangeText(e.target.value.replace(/[^\\d.,]/g, ''))}\n          placeholder={placeholder}\n          inputMode=\"decimal\"\n          aria-label={props['aria-label'] ?? 'Amount'}\n          aria-invalid={!!error}\n          aria-describedby={error || helper ? `${id}-note` : undefined}\n          className=\"text-foreground placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-3xl font-semibold tabular-nums outline-none\"\n        />\n        {symbolPosition === 'trailing' ? symbolEl : null}\n        {onToggleCurrency ? (\n          <button type=\"button\" aria-label=\"Switch currency\" onClick={onToggleCurrency} className=\"bg-muted hover:bg-accent focus-visible:ring-ring/50 flex size-9 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\">\n            <ArrowUpDownIcon className=\"size-4\" aria-hidden />\n          </button>\n        ) : null}\n        {onMax ? (\n          <button type=\"button\" aria-label=\"Use maximum\" onClick={onMax} className=\"bg-muted hover:bg-accent text-primary focus-visible:ring-ring/50 h-8 shrink-0 rounded-full px-3 text-xs font-bold outline-none focus-visible:ring-[3px]\">\n            MAX\n          </button>\n        ) : null}\n      </div>\n      {error || helper ? (\n        <p id={`${id}-note`} role={error ? 'alert' : undefined} className={cn('mt-2 text-sm', error ? 'text-destructive' : 'text-muted-foreground text-right')}>\n          {error ?? helper}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/amount-input.tsx"
    }
  ],
  "meta": {
    "exports": [
      "AmountInput"
    ],
    "api": "<AmountInput value onChangeText symbol helper? onMax? onToggleCurrency? error? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}