{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logos12",
  "title": "Hairline Client Wall",
  "description": "A client wall that sets six greyscale logos in a hairline cell grid, each lifting to full colour on hover, with an eyebrow and a short claim on the left, a reach line on the right, and a credit note underneath.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/logos12/logos12.tsx",
      "content": "\"use client\";\n\nimport { Badge23 } from \"@/components/beste/component/badge23\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Badge {\n  label: string;\n}\n\ninterface Logo {\n  src: string;\n  alt: string;\n}\n\ninterface Logos12Props {\n  badge?: Badge;\n  heading?: string;\n  items?: Logo[];\n  stat?: string;\n  footnote?: string;\n  className?: string;\n}\n\nexport const logos12Demo: Logos12Props = {\n  badge: { label: \"Trusted by\" },\n  heading: \"Groups, clinics, and single rooms, running the same quiet workflow\",\n  items: [\n    { src: \"https://oud.pics/sm/l/logoipsum-380.png\", alt: \"Logoipsum\" },\n    { src: \"https://oud.pics/sm/l/logoipsum-388.png\", alt: \"Logoipsum\" },\n    { src: \"https://oud.pics/sm/l/logoipsum-395.png\", alt: \"Logoipsum\" },\n    { src: \"https://oud.pics/sm/l/logoipsum-406.png\", alt: \"Logoipsum\" },\n    { src: \"https://oud.pics/sm/l/logoipsum-410.png\", alt: \"Logoipsum\" },\n    { src: \"https://oud.pics/sm/l/logoipsum-414.png\", alt: \"Logoipsum\" },\n  ],\n  stat: \"240 practices, 9 countries, one shared way of working\",\n  footnote: \"Names used with permission. Logos available in the press kit.\",\n};\n\nexport function Logos12({ badge, heading, items = [], stat, footnote, className }: Logos12Props) {\n  return (\n    <section className={cn(\"bg-background py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-6\">\n        <div className=\"grid gap-6 md:grid-cols-2 md:items-end md:gap-12\">\n          <div>\n            {badge && <Badge23 label={badge.label} />}\n            {heading && (\n              <h2 className=\"mt-6 max-w-xl text-2xl font-light leading-[1.1] tracking-tight text-foreground md:text-3xl\">\n                {heading}\n              </h2>\n            )}\n          </div>\n          {stat && (\n            <div className=\"flex md:justify-end\">\n              <p className=\"max-w-xs text-base leading-relaxed text-muted-foreground\">{stat}</p>\n            </div>\n          )}\n        </div>\n\n        <div className=\"mt-10 grid overflow-hidden rounded-md border-l border-t border-border sm:grid-cols-2 lg:grid-cols-3\">\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className=\"flex h-24 items-center justify-center border-b border-r border-border px-6 md:h-28\"\n            >\n              <img\n                className=\"h-7 w-auto object-contain opacity-50 grayscale transition-opacity hover:opacity-100 md:h-8\"\n                src={item.src}\n                alt={item.alt}\n                width={120}\n                height={28}\n              />\n            </div>\n          ))}\n        </div>\n\n        {footnote && <p className=\"mt-6 text-sm text-muted-foreground\">{footnote}</p>}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/logos12.tsx"
    },
    {
      "path": "registry-components/badge23/badge23.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"muted\" | \"foreground\" | \"primary\";\n\ninterface Badge23Props {\n  /** Eyebrow label (rendered uppercase) */\n  label: string;\n  /** Text/border tone */\n  tone?: Tone;\n  /** Additional classes merged onto the root */\n  className?: string;\n}\n\nconst toneStyles: Record<Tone, string> = {\n  muted: \"border-border text-muted-foreground\",\n  foreground: \"border-foreground/30 text-foreground\",\n  primary: \"border-primary/40 text-primary\",\n};\n\nexport const badge23Demo: Badge23Props = {\n  label: \"Product\",\n};\n\nexport function Badge23({ label, tone = \"muted\", className }: Badge23Props) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-md border bg-transparent px-2.5 py-1 font-mono text-sm uppercase leading-none tracking-widest\",\n        toneStyles[tone],\n        className\n      )}\n    >\n      {label}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/component/badge23.tsx"
    }
  ],
  "type": "registry:block"
}