{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "disclaimer-banner",
  "type": "registry:component",
  "title": "Disclaimer banner",
  "description": "Slim supplement disclaimer band with an expandable full statement.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "compliance",
    "any"
  ],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "compliance/disclaimer-banner.tsx",
      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { ChevronDown, Info } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Slim bordered disclaimer band. \"Read more\" expands the full statement\n   in place; the summary stays visible so the disclaimer is never hidden. */\n\nexport function DisclaimerBanner({\n  summary = \"These statements have not been evaluated by the FDA.\",\n  details = \"These statements have not been evaluated by the Food and Drug Administration. Our products are dietary supplements and are not intended to diagnose, treat, cure, or prevent any disease. Talk to your doctor before use if you are pregnant, nursing, taking medication or have a medical condition. Keep out of reach of children.\",\n  className,\n}: {\n  summary?: string\n  details?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const [open, setOpen] = useState(false)\n  const id = useId()\n  return (\n    <aside aria-label=\"Disclaimer\" data-sk-section=\"compliance\" data-sk-variant=\"disclaimer-banner\" className={cn(\"rounded-sk-card border border-sk-line bg-sk-surface text-sk-ink\", className)}>\n      <div className=\"flex min-h-11 items-start gap-3 py-1 pl-4 pr-1 sm:items-center\">\n        <Info size={16} aria-hidden className=\"mt-3 shrink-0 text-sk-muted sm:mt-0\" />\n        <div className=\"flex min-w-0 flex-1 flex-col sm:flex-row sm:items-center sm:gap-3\">\n          <p className=\"flex-1 pt-2.5 text-[13px] font-medium leading-[1.5] sm:py-2.5\">{summary}</p>\n          <button\n            type=\"button\"\n            aria-expanded={open}\n            aria-controls={id}\n            onClick={() => setOpen((o) => !o)}\n            className=\"-ml-3 inline-flex h-11 shrink-0 items-center gap-1 self-start rounded-sk-btn px-3 text-[13px] text-sk-muted outline-none transition-colors duration-200 hover:text-sk-ink focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-surface sm:ml-0 sm:self-auto\"\n          >\n            {open ? \"Show less\" : \"Read more\"}\n            <ChevronDown size={14} aria-hidden className={cn(\"transition-transform duration-200\", open && \"rotate-180\")} />\n          </button>\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {open ? (\n          <motion.div\n            id={id}\n            initial={reduce ? { opacity: 0 } : { height: 0, opacity: 0 }}\n            animate={reduce ? { opacity: 1 } : { height: \"auto\", opacity: 1 }}\n            exit={reduce ? { opacity: 0 } : { height: 0, opacity: 0 }}\n            transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}\n            className=\"overflow-hidden\"\n          >\n            <p className=\"border-t border-sk-line px-4 py-3 pl-11 text-[13px] leading-[1.5] text-sk-muted\">{details}</p>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </aside>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/compliance/disclaimer-banner.tsx"
    }
  ],
  "meta": {
    "section": "compliance",
    "variant": "banner",
    "niche": [
      "any"
    ],
    "commerce": [
      "disclaimer"
    ],
    "previewHeight": 220
  }
}