{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "prediction-market",
  "type": "registry:component",
  "title": "Prediction Market",
  "description": "A market detail view with outcome odds and a trade panel.",
  "dependencies": [
    "lucide-react@^0.577.0",
    "motion@^14.0.0"
  ],
  "registryDependencies": [
    "@dx/lib-ease",
    "@dx/motion-button",
    "@dx/motion-tabs",
    "@dx/number-ticker",
    "@dx/utils"
  ],
  "files": [
    {
      "path": "components/motion/prediction-market.tsx",
      "type": "registry:component",
      "target": "components/motion/prediction-market.tsx",
      "content": "import { Banknote, ChevronDown } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  motion,\n  useReducedMotion,\n} from \"motion/react\";\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport { StatefulButton, type ButtonState } from \"./button/stateful\";\nimport { NumberTicker } from \"./number-ticker\";\nimport { Tabs, TabsList, TabsTrigger } from \"./tabs\";\n\nexport type PredictionMarketMode = \"buy\" | \"sell\";\n\nexport type PredictionMarketOutcome = {\n  id: string;\n  label: string;\n  price: number;\n};\n\nexport type PredictionMarketOrderValue = {\n  mode: PredictionMarketMode;\n  outcomeId: string;\n  amount: string;\n};\n\nexport type PredictionMarketQuote = {\n  valid: boolean;\n  amount: number;\n  price: number;\n  shares: number;\n  payout: number;\n  error?: string;\n};\n\nexport type PredictionMarketClassNames = {\n  root?: string;\n  header?: string;\n  tabs?: string;\n  outcomes?: string;\n  amount?: string;\n  chips?: string;\n  footer?: string;\n  action?: string;\n};\n\nexport interface PredictionMarketProps {\n  outcomes?: PredictionMarketOutcome[];\n  value?: PredictionMarketOrderValue;\n  defaultValue?: Partial<PredictionMarketOrderValue>;\n  onValueChange?: (value: PredictionMarketOrderValue) => void;\n  onTrade?: (\n    order: PredictionMarketOrderValue,\n    quote: PredictionMarketQuote,\n  ) => void;\n  onSignIn?: () => void;\n  authenticated?: boolean;\n  orderTypeLabel?: string;\n  balance?: number;\n  positions?: Record<string, number>;\n  quickAmounts?: number[];\n  minTrade?: number;\n  className?: string;\n  classNames?: PredictionMarketClassNames;\n}\n\nconst DEFAULT_OUTCOMES: PredictionMarketOutcome[] = [\n  { id: \"up\", label: \"Up\", price: 0.09 },\n  { id: \"down\", label: \"Down\", price: 0.91 },\n];\n\nconst MODES: { id: PredictionMarketMode; label: string }[] = [\n  { id: \"buy\", label: \"Buy\" },\n  { id: \"sell\", label: \"Sell\" },\n];\n\nconst DEFAULT_QUICK_AMOUNTS = [10, 50, 100, 500];\nconst DIGIT_TRANSITION = { duration: 0.18, ease: EASE_OUT } as const;\ntype AmountInputStyle = CSSProperties & { \"--amount-chars\": string };\n\nfunction useControllableOrder({\n  value,\n  defaultValue,\n  outcomes,\n  onValueChange,\n}: {\n  value?: PredictionMarketOrderValue;\n  defaultValue?: Partial<PredictionMarketOrderValue>;\n  outcomes: PredictionMarketOutcome[];\n  onValueChange?: (value: PredictionMarketOrderValue) => void;\n}) {\n  const initialValue: PredictionMarketOrderValue = {\n    mode: defaultValue?.mode ?? \"buy\",\n    outcomeId: defaultValue?.outcomeId ?? outcomes[0]?.id ?? \"\",\n    amount: defaultValue?.amount ?? \"\",\n  };\n\n  const [internalValue, setInternalValue] = useState(initialValue);\n  const controlled = value !== undefined;\n  const order = value ?? internalValue;\n\n  const setOrder = useCallback(\n    (next: PredictionMarketOrderValue) => {\n      if (!controlled) {\n        setInternalValue(next);\n      }\n\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n\n  return [order, setOrder] as const;\n}\n\nfunction sanitizeAmount(value: string) {\n  const normalized = value.replace(/[^\\d.]/g, \"\");\n  const [whole, ...decimalParts] = normalized.split(\".\");\n  const decimal = decimalParts.join(\"\");\n  if (decimalParts.length === 0) return whole;\n  return `${whole}.${decimal.slice(0, 2)}`;\n}\n\nfunction parseAmount(value: string) {\n  return Number(value) || 0;\n}\n\nfunction formatCurrency(value: number, maximumFractionDigits = 2) {\n  return new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\",\n    maximumFractionDigits,\n  }).format(value);\n}\n\nfunction formatCompactCurrency(value: number) {\n  return value >= 100\n    ? formatCurrency(value, 0)\n    : formatCurrency(value, value % 1 === 0 ? 0 : 2);\n}\n\nfunction formatCents(value: number) {\n  const cents = value * 100;\n  const precision = Number.isInteger(cents) ? 0 : 1;\n  return `${cents.toFixed(precision)}¢`;\n}\n\nfunction buildQuote({\n  order,\n  outcome,\n  balance,\n  position,\n  minTrade,\n}: {\n  order: PredictionMarketOrderValue;\n  outcome: PredictionMarketOutcome;\n  balance: number;\n  position: number;\n  minTrade: number;\n}): PredictionMarketQuote {\n  const amount = parseAmount(order.amount);\n  const price = Math.max(0.01, Math.min(0.99, outcome.price));\n  const shares = order.mode === \"buy\" ? amount / price : amount;\n  const payout = order.mode === \"buy\" ? shares : amount * price;\n\n  if (amount <= 0) {\n    return {\n      valid: false,\n      amount,\n      price,\n      shares: 0,\n      payout: 0,\n      error: \"Enter an amount\",\n    };\n  }\n\n  if (order.mode === \"buy\" && amount < minTrade) {\n    return {\n      valid: false,\n      amount,\n      price,\n      shares,\n      payout,\n      error: `Minimum ${formatCompactCurrency(minTrade)}`,\n    };\n  }\n\n  if (order.mode === \"buy\" && amount > balance) {\n    return {\n      valid: false,\n      amount,\n      price,\n      shares,\n      payout,\n      error: \"Insufficient balance\",\n    };\n  }\n\n  if (order.mode === \"sell\" && amount > position) {\n    return {\n      valid: false,\n      amount,\n      price,\n      shares,\n      payout,\n      error: \"Not enough shares\",\n    };\n  }\n\n  return {\n    valid: true,\n    amount,\n    price,\n    shares,\n    payout,\n  };\n}\n\nfunction keyedAmountChars(value: string) {\n  const seen = new Map<string, number>();\n  return value.split(\"\").map((char) => {\n    const count = seen.get(char) ?? 0;\n    seen.set(char, count + 1);\n    return { id: `${char}-${count}`, char };\n  });\n}\n\nfunction amountInputSize(value: string) {\n  const length = value.replace(/\\D/g, \"\").length;\n  if (length >= 10) return \"text-3xl sm:text-4xl\";\n  if (length >= 8) return \"text-4xl sm:text-5xl\";\n  if (length >= 6) return \"text-[44px] sm:text-[56px]\";\n  return \"text-5xl sm:text-6xl\";\n}\n\nfunction payoutTickerSize(value: number) {\n  const length = formatCurrency(value).length;\n  if (length >= 16) return \"text-xl sm:text-2xl\";\n  if (length >= 13) return \"text-2xl\";\n  if (length >= 10) return \"text-3xl\";\n  return \"text-4xl\";\n}\n\nfunction AnimatedAmountInput({\n  id,\n  value,\n  mode,\n  inputSize,\n  disabled,\n  reduce,\n  onChange,\n}: {\n  id: string;\n  value: string;\n  mode: PredictionMarketMode;\n  inputSize: string;\n  disabled: boolean;\n  reduce: boolean;\n  onChange: (value: string) => void;\n}) {\n  const displayValue = value || \"0\";\n  const chars = keyedAmountChars(displayValue);\n  const inputStyle = {\n    \"--amount-chars\": String(chars.length),\n  } as AmountInputStyle;\n  const label = mode === \"buy\" ? \"Amount\" : \"Shares\";\n\n  return (\n    <div className=\"flex min-w-0 items-center justify-center overflow-hidden\">\n      {mode === \"buy\" ? (\n        <span\n          aria-hidden\n          className={cn(\n            \"shrink-0 font-semibold leading-none tracking-normal text-muted-foreground/65 tabular-nums transition-[font-size] duration-200\",\n            inputSize,\n          )}\n        >\n          $\n        </span>\n      ) : null}\n\n      <div className=\"relative min-w-0 shrink\">\n        <input\n          id={id}\n          value={value}\n          disabled={disabled}\n          onChange={(event) => onChange(sanitizeAmount(event.target.value))}\n          placeholder=\"0\"\n          inputMode=\"decimal\"\n          aria-label={label}\n          autoComplete=\"off\"\n          className={cn(\n            \"w-[calc((var(--amount-chars)+1)*0.62em)] min-w-[0.8em] max-w-[260px] bg-transparent text-left font-semibold leading-none tracking-normal text-transparent outline-none tabular-nums\",\n            \"caret-foreground transition-[font-size] duration-200 placeholder:text-transparent selection:bg-foreground/10 disabled:cursor-not-allowed\",\n            inputSize,\n          )}\n          style={inputStyle}\n        />\n        <div\n          aria-hidden\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex min-w-0 items-center justify-start overflow-hidden font-semibold leading-none tracking-normal text-foreground tabular-nums transition-[font-size] duration-200\",\n            !value && \"text-muted-foreground/55\",\n            inputSize,\n          )}\n          style={inputStyle}\n        >\n          <AnimatePresence initial={false} mode=\"popLayout\">\n            {chars.map(({ id: charId, char }) => (\n              <motion.span\n                key={charId}\n                layout={reduce ? false : \"position\"}\n                initial={\n                  reduce\n                    ? { opacity: 0 }\n                    : { opacity: 0, y: 18, filter: \"blur(10px)\" }\n                }\n                animate={\n                  reduce\n                    ? { opacity: 1 }\n                    : { opacity: 1, y: 0, filter: \"blur(0px)\" }\n                }\n                exit={\n                  reduce\n                    ? { opacity: 0 }\n                    : { opacity: 0, y: -14, filter: \"blur(10px)\" }\n                }\n                transition={DIGIT_TRANSITION}\n                className=\"inline-block min-w-[0.55em] text-center will-change-[transform,opacity,filter]\"\n              >\n                {char}\n              </motion.span>\n            ))}\n          </AnimatePresence>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function PredictionMarket({\n  outcomes = DEFAULT_OUTCOMES,\n  value,\n  defaultValue,\n  onValueChange,\n  onTrade,\n  onSignIn,\n  authenticated = true,\n  orderTypeLabel = \"Market\",\n  balance = 500,\n  positions = { up: 24, down: 16 },\n  quickAmounts = DEFAULT_QUICK_AMOUNTS,\n  minTrade = 1,\n  className,\n  classNames,\n}: PredictionMarketProps) {\n  const inputId = useId();\n  const reduce = useReducedMotion() ?? false;\n  const amountRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [status, setStatus] = useState<\"idle\" | \"placing\" | \"filled\">(\"idle\");\n  const [shakeKey, setShakeKey] = useState(0);\n  const [order, setOrder] = useControllableOrder({\n    value,\n    defaultValue,\n    outcomes,\n    onValueChange,\n  });\n\n  const selectedOutcome =\n    outcomes.find((outcome) => outcome.id === order.outcomeId) ?? outcomes[0];\n  const position = positions[selectedOutcome.id] ?? 0;\n  const quote = useMemo(\n    () =>\n      buildQuote({\n        order,\n        outcome: selectedOutcome,\n        balance,\n        position,\n        minTrade,\n      }),\n    [balance, minTrade, order, position, selectedOutcome],\n  );\n\n  const setOrderValue = useCallback(\n    (next: Partial<PredictionMarketOrderValue>) => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n\n      setStatus(\"idle\");\n      setOrder({ ...order, ...next });\n    },\n    [order, setOrder],\n  );\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (shakeKey === 0 || reduce || !amountRef.current) return;\n    animate(\n      amountRef.current,\n      { x: [0, -5, 5, -3, 3, -1, 0] },\n      { duration: 0.38, ease: EASE_OUT },\n    );\n  }, [reduce, shakeKey]);\n\n  const addAmount = (increment: number) => {\n    const next = parseAmount(order.amount) + increment;\n    setOrderValue({ amount: String(next) });\n  };\n\n  const setMax = () => {\n    if (order.mode === \"buy\") {\n      setOrderValue({ amount: String(Math.floor(balance)) });\n      return;\n    }\n\n    setOrderValue({ amount: position.toFixed(position % 1 === 0 ? 0 : 2) });\n  };\n\n  const submit = () => {\n    if (!authenticated) {\n      onSignIn?.();\n      return;\n    }\n\n    if (!quote.valid) {\n      setShakeKey((key) => key + 1);\n      return;\n    }\n\n    setStatus(\"placing\");\n    timeoutRef.current = setTimeout(() => {\n      setStatus(\"filled\");\n      onTrade?.(order, quote);\n    }, 650);\n  };\n\n  const inputSize = amountInputSize(order.amount);\n  const payoutSize = payoutTickerSize(quote.payout);\n  const actionState: ButtonState =\n    status === \"placing\"\n      ? \"loading\"\n      : status === \"filled\"\n        ? \"success\"\n        : quote.valid\n          ? \"idle\"\n          : \"error\";\n  const showFooter = authenticated;\n\n  return (\n    <div\n      className={cn(\n        \"w-full max-w-[400px] overflow-hidden rounded-3xl border border-border bg-background\",\n        className,\n        classNames?.root,\n      )}\n    >\n      <div\n        className={cn(\n          \"border-b border-border/80 px-4 pt-4\",\n          classNames?.header,\n        )}\n      >\n        <div className=\"flex items-end justify-between gap-4\">\n          <Tabs\n            value={order.mode}\n            onValueChange={(mode) =>\n              setOrderValue({\n                mode: mode as PredictionMarketMode,\n                amount: \"\",\n              })\n            }\n            variant=\"underline\"\n            className={cn(\"shrink-0\", classNames?.tabs)}\n          >\n            <TabsList className=\"gap-5 border-b-0 bg-transparent p-0\">\n              {MODES.map((mode) => (\n                <TabsTrigger\n                  key={mode.id}\n                  value={mode.id}\n                  className=\"px-0 pb-3 pt-0 text-2xl font-semibold\"\n                  indicatorClassName=\"h-0.5 bg-foreground\"\n                >\n                  {mode.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\n\n          <button\n            type=\"button\"\n            disabled={status === \"placing\"}\n            className=\"mb-3 inline-flex items-center gap-2 text-xl font-semibold text-foreground transition-opacity disabled:opacity-50\"\n          >\n            {orderTypeLabel}\n            <ChevronDown className=\"h-5 w-5\" />\n          </button>\n        </div>\n      </div>\n\n      <div className=\"space-y-4 p-3\">\n        <Tabs\n          value={selectedOutcome.id}\n          onValueChange={(outcomeId) => setOrderValue({ outcomeId })}\n          variant=\"pill\"\n          className={classNames?.outcomes}\n        >\n          <TabsList className=\"grid w-full grid-cols-2 gap-2 p-1.5\">\n            {outcomes.map((outcome) => {\n              const selected = outcome.id === selectedOutcome.id;\n              const isNo =\n                outcome.label.toLowerCase() === \"no\" ||\n                outcome.label.toLowerCase() === \"down\";\n\n              return (\n                <TabsTrigger\n                  key={outcome.id}\n                  value={outcome.id}\n                  indicatorClassName={\n                    isNo\n                      ? \"bg-red-500/10 dark:bg-red-500/15\"\n                      : \"bg-emerald-500/20\"\n                  }\n                  className={cn(\n                    \"h-14 w-full rounded-[1.35rem] px-0 py-0 text-base font-semibold active:scale-[0.99]\",\n                    isNo\n                      ? selected\n                        ? \"text-red-300 dark:text-red-300\"\n                        : \"text-red-300/55 dark:text-red-300/50\"\n                      : selected\n                        ? \"text-emerald-400 dark:text-emerald-300\"\n                        : \"text-muted-foreground\",\n                  )}\n                >\n                  {outcome.label} {formatCents(outcome.price)}\n                </TabsTrigger>\n              );\n            })}\n          </TabsList>\n        </Tabs>\n\n        <div\n          ref={amountRef}\n          className={cn(\"rounded-3xl bg-card p-4\", classNames?.amount)}\n        >\n          <div className=\"flex min-h-24 flex-col items-center justify-center gap-5 text-center\">\n            <label\n              htmlFor={inputId}\n              className=\"text-xl font-medium text-foreground mr-6\"\n            >\n              {order.mode === \"buy\" ? \"Amount\" : \"Shares\"}\n            </label>\n\n            <div className=\"w-full min-w-0\">\n              <AnimatedAmountInput\n                id={inputId}\n                mode={order.mode}\n                value={order.amount}\n                disabled={status === \"placing\"}\n                inputSize={inputSize}\n                reduce={reduce}\n                onChange={(amount) => setOrderValue({ amount })}\n              />\n            </div>\n          </div>\n\n          <div\n            className={cn(\n              \"mt-8 flex flex-wrap justify-center gap-2\",\n              classNames?.chips,\n            )}\n          >\n            {quickAmounts.map((amount) => (\n              <button\n                key={amount}\n                type=\"button\"\n                disabled={status === \"placing\"}\n                onClick={() => addAmount(amount)}\n                className=\"h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 disabled:pointer-events-none disabled:opacity-50\"\n              >\n                +{order.mode === \"buy\" ? formatCompactCurrency(amount) : amount}\n              </button>\n            ))}\n            <button\n              type=\"button\"\n              disabled={status === \"placing\"}\n              onClick={setMax}\n              className=\"h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 disabled:pointer-events-none disabled:opacity-50\"\n            >\n              Max\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {showFooter ? (\n        <div\n          className={cn(\n            \"border-t border-border/80 px-4 py-4\",\n            classNames?.footer,\n          )}\n        >\n          <div className=\"mb-4 flex items-end justify-between gap-3\">\n            <div className=\"min-w-0 shrink\">\n              <div className=\"flex items-center gap-2 text-xl font-semibold text-foreground\">\n                {order.mode === \"buy\" ? \"To win\" : \"To receive\"}\n                <Banknote className=\"h-5 w-5 text-emerald-500\" />\n              </div>\n              <p className=\"text-sm font-medium text-muted-foreground\">\n                Avg. Price {formatCents(quote.price)}\n              </p>\n            </div>\n            <NumberTicker\n              value={quote.payout * 100}\n              startOnView={false}\n              duration={0.45}\n              stagger={0}\n              blur\n              className={cn(\n                \"ml-auto min-w-0 shrink-0 justify-end whitespace-nowrap text-right font-semibold leading-none tracking-tight text-emerald-500 tabular-nums transition-[font-size] duration-200\",\n                payoutSize,\n              )}\n              format={(cents) => formatCurrency(cents / 100)}\n            />\n          </div>\n\n          <StatefulButton\n            state={actionState}\n            variant=\"primary\"\n            size=\"lg\"\n            pressScale={0.98}\n            onClick={submit}\n            loadingText=\"Trading\"\n            successText=\"Trade filled\"\n            errorText={quote.error ?? \"Enter an amount\"}\n            className={cn(\n              \"h-12 w-full rounded-2xl text-base font-semibold\",\n              classNames?.action,\n            )}\n          >\n            Trade\n          </StatefulButton>\n        </div>\n      ) : (\n        <div className=\"px-4 pb-5\">\n          <StatefulButton\n            state=\"idle\"\n            variant=\"primary\"\n            size=\"lg\"\n            pressScale={0.98}\n            onClick={submit}\n            className={cn(\n              \"h-14 w-full rounded-2xl text-base font-semibold\",\n              classNames?.action,\n            )}\n          >\n            Connect\n          </StatefulButton>\n        </div>\n      )}\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "motion-kit"
  ],
  "meta": {
    "group": "motion",
    "docs": "https://dxuireact.com/docs/components/prediction-market"
  }
}