{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price",
  "type": "registry:ui",
  "title": "Price",
  "description": "Tabular price with compare-at strike, sale color, savings chip, and per-unit or per-serving pricing.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "ui"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "ui/price.tsx",
      "content": "\"use client\"\n\nimport { cn, money } from \"@/components/storekit/lib/cn\"\n\n/* Price with optional compare-at and savings. Tabular numerals so prices in a\n   grid line up. The amount is in integer cents. `per` adds unit economics in\n   muted text, e.g. { amount: 112, unit: \"serving\" } renders \"$1.12 / serving\". */\n\nexport function Price({\n  amount,\n  compareAt,\n  className,\n  size = \"md\",\n  showSavings = false,\n  suffix,\n  per,\n}: {\n  amount: number\n  compareAt?: number\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\"\n  showSavings?: boolean\n  suffix?: string\n  /** Unit economics: amount in integer cents per one unit (\"serving\", \"day\", \"each\"). */\n  per?: { amount: number; unit: string }\n}) {\n  const onSale = typeof compareAt === \"number\" && compareAt > amount\n  const sizes = { sm: \"text-sm\", md: \"text-base\", lg: \"text-xl\", xl: \"text-3xl\" }[size]\n  const pct = onSale ? Math.round((1 - amount / compareAt) * 100) : 0\n  return (\n    <span className={cn(\"inline-flex flex-wrap items-baseline gap-x-2 gap-y-0.5 tabular-nums\", sizes, className)}>\n      <span className={cn(\"font-semibold\", onSale ? \"text-sk-sale\" : \"text-sk-price\")}>{money(amount)}</span>\n      {onSale ? <s className=\"text-[0.8em] text-sk-muted decoration-sk-muted/60\">{money(compareAt)}</s> : null}\n      {onSale && showSavings ? (\n        <span className=\"rounded-sk-chip bg-sk-savings/[0.12] px-1.5 py-0.5 text-[0.7em] font-semibold text-sk-savings\">Save {pct}%</span>\n      ) : null}\n      {suffix ? <span className=\"text-[0.75em] text-sk-muted\">{suffix}</span> : null}\n      {per ? (\n        <span className=\"text-[0.75em] font-normal text-sk-muted\">\n          {money(per.amount)} / {per.unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/storekit/ui/price.tsx"
    }
  ],
  "meta": {
    "section": "ui",
    "previewHeight": 160
  }
}