{
  "name": "volume-pricing",
  "title": "VolumePricing",
  "description": "Collapsible volume pricing tier table.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn"
  ],
  "files": [
    {
      "path": "volume-pricing.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { QuantityPricingTier } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface VolumePricingClassNames {\n  root?: string;\n  trigger?: string;\n  triggerIcon?: string;\n  panel?: string;\n  tier?: string;\n  tierActive?: string;\n  tierRange?: string;\n  tierPrice?: string;\n}\n\nexport interface VolumePricingProps {\n  tiers: QuantityPricingTier[];\n  currentQuantity?: number;\n  defaultOpen?: boolean;\n  currency?: CurrencyCode;\n  className?: string;\n  classNames?: VolumePricingClassNames;\n}\n\nfunction formatRange(tier: QuantityPricingTier): string {\n  if (tier.max_quantity != null) {\n    return `${tier.min_quantity}–${tier.max_quantity} units`;\n  }\n  return `${tier.min_quantity}+ units`;\n}\n\nfunction isActiveTier(tier: QuantityPricingTier, quantity: number): boolean {\n  if (quantity < tier.min_quantity) return false;\n  if (tier.max_quantity != null && quantity > tier.max_quantity) return false;\n  return true;\n}\n\nexport function VolumePricing({\n  tiers,\n  currentQuantity,\n  defaultOpen = false,\n  currency,\n  className,\n  classNames,\n}: VolumePricingProps): React.ReactElement | null {\n  if (tiers.length < 2) return null;\n\n  const sorted = [...tiers].sort((a, b) => a.min_quantity - b.min_quantity);\n\n  return (\n    <details\n      open={defaultOpen || undefined}\n      data-cimplify-volume-pricing\n      className={cn(\"border border-border\", className, classNames?.root)}\n    >\n      <summary\n        data-cimplify-volume-pricing-trigger\n        className={cn(\n          \"flex items-center justify-between px-4 py-3 cursor-pointer select-none text-sm font-medium list-none [&::-webkit-details-marker]:hidden\",\n          classNames?.trigger,\n        )}\n      >\n        Volume pricing\n        <svg\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"w-3.5 h-3.5 text-muted-foreground transition-transform [[open]>&]:rotate-180\",\n            classNames?.triggerIcon,\n          )}\n        >\n          <path d=\"M2 4.5l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </summary>\n      <div\n        data-cimplify-volume-pricing-panel\n        className={cn(\"border-t border-border divide-y divide-border\", classNames?.panel)}\n      >\n        {sorted.map((tier, i) => {\n          const active = currentQuantity != null && isActiveTier(tier, currentQuantity);\n          return (\n            <div\n              key={i}\n              data-cimplify-volume-pricing-tier\n              data-active={active || undefined}\n              className={cn(\n                \"flex items-center justify-between px-4 py-2.5 text-sm\",\n                active\n                  ? cn(\"bg-primary/5 font-medium\", classNames?.tierActive)\n                  : classNames?.tier,\n              )}\n            >\n              <span\n                data-cimplify-volume-pricing-range\n                className={cn(\"text-muted-foreground\", classNames?.tierRange)}\n              >\n                {formatRange(tier)}\n              </span>\n              <span data-cimplify-volume-pricing-price className={classNames?.tierPrice}>\n                <Price amount={tier.unit_price} currency={currency} prefix=\"\" /> /ea\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </details>\n  );\n}\n"
    }
  ]
}