{
  "name": "availability-badge",
  "title": "AvailabilityBadge",
  "description": "Displays in-stock / out-of-stock status for tracked products.",
  "type": "component",
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "availability-badge.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface AvailabilityBadgeClassNames {\n  root?: string;\n  dot?: string;\n  label?: string;\n  lowStock?: string;\n  stockCount?: string;\n}\n\nexport interface AvailabilityBadgeProps {\n  /** The product to check availability for. */\n  product: Product;\n  /** Override availability (e.g. from location_availability). */\n  isAvailable?: boolean;\n  /** Override stock status (e.g. from location_availability). */\n  isInStock?: boolean;\n  /** Current stock quantity. When provided, enables \"Only X left\" display. */\n  stockQuantity?: number;\n  /** Threshold at which stock is considered low. Default: 5. */\n  lowStockThreshold?: number;\n  /** Location context for availability checks. Passed through as a data attribute. */\n  locationId?: string;\n  className?: string;\n  classNames?: AvailabilityBadgeClassNames;\n}\n\n/**\n * AvailabilityBadge — displays in-stock / out-of-stock status for tracked products.\n *\n * Returns `null` for products that don't have inventory tracking enabled,\n * since there's no meaningful stock state to show.\n */\nexport function AvailabilityBadge({\n  product,\n  isAvailable,\n  isInStock,\n  stockQuantity,\n  lowStockThreshold = 5,\n  locationId,\n  className,\n  classNames,\n}: AvailabilityBadgeProps): React.ReactElement | null {\n  if (product.is_tracked !== true) {\n    return null;\n  }\n\n  const outOfStock =\n    isInStock === false ||\n    isAvailable === false ||\n    (stockQuantity !== undefined && stockQuantity <= 0);\n  const isLowStock =\n    !outOfStock &&\n    stockQuantity !== undefined &&\n    stockQuantity > 0 &&\n    stockQuantity <= lowStockThreshold;\n\n  const stockState = outOfStock\n    ? \"out_of_stock\"\n    : isLowStock\n      ? \"low_stock\"\n      : \"in_stock\";\n  const label = outOfStock ? \"Out of Stock\" : \"In Stock\";\n\n  return (\n    <span\n      data-cimplify-availability-badge\n      data-stock-state={stockState}\n      {...(locationId ? { \"data-location-id\": locationId } : undefined)}\n      className={cn(className, classNames?.root, isLowStock && classNames?.lowStock)}\n      style={{ display: \"inline-flex\", alignItems: \"center\", gap: \"0.375rem\" }}\n    >\n      <span\n        data-cimplify-availability-dot\n        className={classNames?.dot}\n        style={{\n          display: \"inline-block\",\n          width: \"0.5rem\",\n          height: \"0.5rem\",\n          borderRadius: \"9999px\",\n        }}\n      />\n      <span data-cimplify-availability-label className={classNames?.label}>\n        {label}\n      </span>\n      {stockQuantity !== undefined && isLowStock && (\n        <span data-cimplify-availability-stock-count className={classNames?.stockCount}>\n          Only {stockQuantity} left\n        </span>\n      )}\n    </span>\n  );\n}\n"
    }
  ]
}