{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pdp-usage-note",
  "type": "registry:component",
  "title": "Usage note",
  "description": "Calm bordered note with numbered how-to-use steps and a fine-print line.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "pdp",
    "supplements",
    "wellness"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "pdp/pdp-usage-note.tsx",
      "content": "import { GlassWater } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* A calm, bordered note for how to use a product. Numbered steps in mono,\n   a short fine-print line at the foot. No shadow, no motion. */\n\nconst DEFAULT_STEPS = [\n  \"Add one scoop to 8 to 10 oz of cold water or your morning smoothie.\",\n  \"Shake or stir for about ten seconds. It mixes clean, no clumps.\",\n  \"Take it once a day, ideally with breakfast. Reseal the pouch to keep it fresh.\",\n]\n\nexport function PdpUsageNote({\n  title = \"How to use\",\n  steps = DEFAULT_STEPS,\n  disclaimer = \"Pregnant, nursing or on medication? Check with your doctor first.\",\n  icon,\n  className,\n}: {\n  title?: string\n  steps?: string[]\n  disclaimer?: string\n  icon?: React.ReactNode\n  className?: string\n}) {\n  return (\n    <aside data-sk-section=\"pdp\" data-sk-variant=\"pdp-usage-note\" className={cn(\"w-full rounded-sk-card border border-sk-line bg-sk-card p-5 sm:p-6\", className)} aria-label={title}>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"grid h-9 w-9 shrink-0 place-items-center rounded-sk-btn bg-sk-surface text-sk-accent\" aria-hidden>\n          {icon ?? <GlassWater size={18} />}\n        </span>\n        <h3 className=\"font-sk-display text-base font-semibold tracking-[-0.02em] text-sk-ink\">{title}</h3>\n      </div>\n      <ol className=\"mt-5 flex flex-col gap-4\">\n        {steps.map((s, i) => (\n          <li key={i} className=\"flex gap-4\">\n            <span className=\"w-6 shrink-0 pt-px font-sk-mono text-[13px] tabular-nums text-sk-accent\">{String(i + 1).padStart(2, \"0\")}</span>\n            <span className=\"text-sm leading-[1.5] text-sk-ink\">{s}</span>\n          </li>\n        ))}\n      </ol>\n      <p className=\"mt-5 border-t border-sk-line pt-4 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{disclaimer}</p>\n    </aside>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/pdp/pdp-usage-note.tsx"
    }
  ],
  "meta": {
    "section": "pdp",
    "variant": "note",
    "niche": [
      "supplements",
      "wellness"
    ],
    "commerce": [],
    "previewHeight": 320
  }
}