{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price-tag",
  "title": "Price Tag",
  "author": "ecomcn <hello@ecomcn.dev>",
  "description": "Locale-aware price with compare-at strike, computed discount badge and a screen-reader announcement. No dependencies.",
  "files": [
    {
      "path": "src/registry/ecomcn/price-tag/price-tag.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface PriceTagProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current price, in major units (e.g. 42.5 for $42.50). */\n  price: number\n  /** Was-price. Rendered struck through only when it is higher than `price`. */\n  compareAt?: number\n  /** ISO 4217 code. Never hardcode a symbol — stores are not all in the US. */\n  currency?: string\n  /** BCP 47 tag. `undefined` follows the visitor's locale. */\n  locale?: string\n  size?: \"sm\" | \"lg\"\n}\n\n/**\n * The single most-copied component in any storefront, and the one most often\n * shipped with a hardcoded dollar sign. Everything here goes through Intl.\n */\nexport const PriceTag = React.forwardRef<HTMLDivElement, PriceTagProps>(\n  (\n    { price, compareAt, currency = \"USD\", locale, size = \"lg\", className, ...props },\n    ref\n  ) => {\n    const format = React.useMemo(\n      () =>\n        new Intl.NumberFormat(locale, {\n          style: \"currency\",\n          currency,\n          maximumFractionDigits: Number.isInteger(price) ? 0 : 2,\n        }),\n      [locale, currency, price]\n    )\n\n    const onSale = typeof compareAt === \"number\" && compareAt > price\n    const percentOff = onSale ? Math.round((1 - price / compareAt) * 100) : 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-wrap items-baseline gap-x-3 gap-y-1\", className)}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"tabular-nums\",\n            size === \"lg\" ? \"text-3xl\" : \"text-lg\",\n            onSale && \"text-[var(--sale)]\"\n          )}\n        >\n          {format.format(price)}\n        </span>\n\n        {onSale ? (\n          <>\n            <span\n              aria-hidden\n              className=\"text-sm text-muted-foreground line-through tabular-nums\"\n            >\n              {format.format(compareAt)}\n            </span>\n            <span\n              aria-hidden\n              className=\"bg-[var(--sale)] px-1.5 py-0.5 text-[11px] uppercase tracking-[0.14em] text-background tabular-nums\"\n            >\n              Save {percentOff}%\n            </span>\n            {/* one clean announcement instead of three fragments */}\n            <span className=\"sr-only\">\n              Reduced from {format.format(compareAt)}, {percentOff} percent off\n            </span>\n          </>\n        ) : null}\n      </div>\n    )\n  }\n)\nPriceTag.displayName = \"PriceTag\"\n",
      "type": "registry:ui",
      "target": "components/ecomcn/price-tag.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "sale": "0 72% 42%"
    },
    "dark": {
      "sale": "4 74% 58%"
    }
  },
  "categories": [
    "ecommerce",
    "product",
    "pricing"
  ],
  "type": "registry:ui"
}