{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "amount",
  "title": "Amount",
  "description": "A formatted figure with steady digits, in any currency and locale. Every amount in Bevel is one of these.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/lib/format-amount.ts",
      "content": "import * as React from \"react\"\n\nexport type AmountFormat = {\n  value: number\n  /** ISO 4217 code. Omit for a plain number (credits, tokens…). */\n  currency?: string\n  /** Fixed by default so server and client render the same string. */\n  locale?: Intl.LocalesArgument\n  /** Merged over the defaults. */\n  format?: Intl.NumberFormatOptions\n}\n\nexport function formatAmountParts({ value, currency, locale = \"en-US\", format }: AmountFormat) {\n  return new Intl.NumberFormat(locale, {\n    ...(currency ? { style: \"currency\", currency } : { maximumFractionDigits: 0 }),\n    ...format,\n  }).formatToParts(value)\n}\n\nexport function formatAmount(options: AmountFormat) {\n  return formatAmountParts(options)\n    .map((part) => part.value)\n    .join(\"\")\n}\n\nexport function useAmountParts({ value, currency, locale, format }: AmountFormat) {\n  return React.useMemo(\n    () => formatAmountParts({ value, currency, locale, format }),\n    [value, currency, locale, format]\n  )\n}\n\n// Tabular figures keep digits from shifting as amounts change, but some\n// fonts make separators tabular too, so apply them to digit groups only.\nexport const isDigitPart = (type: Intl.NumberFormatPartTypes) =>\n  type === \"integer\" || type === \"fraction\"\n",
      "type": "registry:lib"
    },
    {
      "path": "registry/bevel/ui/amount.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport { isDigitPart, useAmountParts, type AmountFormat } from \"@/lib/format-amount\"\n\ntype AmountProps = AmountFormat &\n  Omit<React.ComponentProps<\"span\">, \"children\"> & {\n    /** Show a leading + for positive values, for credits in a ledger. */\n    signed?: boolean\n  }\n\n/** A formatted amount with steady digits. The building block for every figure in Bevel. */\nfunction Amount({ value, currency, locale, format, signed, className, ...props }: AmountProps) {\n  const parts = useAmountParts({\n    value,\n    currency,\n    locale,\n    format: signed ? { signDisplay: \"exceptZero\", ...format } : format,\n  })\n  return (\n    <span\n      data-slot=\"amount\"\n      data-sign={value > 0 ? \"positive\" : value < 0 ? \"negative\" : \"zero\"}\n      className={cn(\"whitespace-nowrap\", className)}\n      {...props}\n    >\n      {parts.map((part, i) => (\n        <span key={i} className={isDigitPart(part.type) ? \"tabular-nums\" : undefined}>\n          {part.value}\n        </span>\n      ))}\n    </span>\n  )\n}\n\nexport { Amount }\nexport type { AmountProps }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "money"
  ],
  "type": "registry:ui"
}