{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pdp-low-stock",
  "type": "registry:component",
  "title": "Low stock line",
  "description": "Exact count from real inventory, hidden above the threshold and at zero. Plain ink, no urgency color.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "pdp",
    "any"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "pdp/pdp-low-stock.tsx",
      "content": "\"use client\"\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Exact low-stock line. Reads the real inventory count and renders nothing\n   above the threshold or at zero (sold out is its own state). The copy is\n   the number, not a nudge: no accent, no red, no timer. An optional meter\n   shows the count against the threshold in plain ink. */\n\nexport function PdpLowStock({\n  inventory,\n  threshold = 10,\n  variantLabel,\n  restockNote,\n  showMeter = true,\n  className,\n}: {\n  /** Real units on hand for the selected variant. */\n  inventory: number\n  /** Show the line only at or below this count. */\n  threshold?: number\n  variantLabel?: string\n  /** Optional honest follow up, e.g. \"More arriving Nov 4\". */\n  restockNote?: string\n  showMeter?: boolean\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const visible = Number.isFinite(inventory) && inventory > 0 && inventory <= threshold\n  const n = Math.floor(inventory)\n  const copy = `${n} left${variantLabel ? ` in ${variantLabel}` : \" in stock\"}`\n  const segments = Math.min(threshold, 10)\n  const filled = Math.max(1, Math.round((n / threshold) * segments))\n\n  return (\n    <div data-sk-section=\"pdp\" data-sk-variant=\"pdp-low-stock\" className={cn(\"w-full\", className)} aria-live=\"polite\">\n      <AnimatePresence initial={false} mode=\"popLayout\">\n        {visible ? (\n          <motion.p\n            key={copy}\n            initial={{ opacity: 0, y: reduce ? 0 : 6 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: reduce ? 0 : -6 }}\n            transition={{ duration: reduce ? 0 : 0.3, ease: [0.16, 1, 0.3, 1] }}\n            className=\"flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm\"\n          >\n            {showMeter ? (\n              <span aria-hidden className=\"flex gap-[3px]\">\n                {Array.from({ length: segments }).map((_, i) => (\n                  <span key={i} className={cn(\"h-2.5 w-1.5 rounded-[1px]\", i < filled ? \"bg-sk-ink\" : \"bg-sk-ink/15\")} />\n                ))}\n              </span>\n            ) : null}\n            <span className=\"font-medium tabular-nums text-sk-ink\">{copy}</span>\n            {restockNote ? <span className=\"text-sk-muted\">{restockNote}</span> : null}\n          </motion.p>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/pdp/pdp-low-stock.tsx"
    }
  ],
  "docs": "Pass the live inventory count of the selected variant. Never pass a made up number.",
  "meta": {
    "section": "pdp",
    "variant": "stock",
    "niche": [
      "any"
    ],
    "commerce": [
      "inventory"
    ],
    "previewHeight": 240
  }
}