{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "brand-logo",
  "type": "registry:ui",
  "title": "Brand Logo",
  "description": "The locked two-bar Interlace mark plus the lowercase monospace wordmark \"interlace\". This is the SAME lockup eslint.interlace.tools ships in its top nav — one component so every *.interlace.tools site renders an identical brand header instead of…",
  "author": "ofri-peretz <https://github.com/ofri-peretz>",
  "categories": [
    "foundation",
    "pattern"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://ds.interlace.tools/r/theme.json",
    "https://ds.interlace.tools/r/cn.json"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/patterns/brand-logo.tsx",
      "target": "components/ui/patterns/brand-logo.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react';\n\n// @interlace/brand-logo v1.0.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/brand-logo\n// What changed since: https://ds.interlace.tools/c/brand-logo#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — BrandMark + BrandLogo (the canonical Interlace nav lockup)\n *\n * The locked two-bar Interlace mark plus the lowercase monospace wordmark\n * \"interlace\". This is the SAME lockup eslint.interlace.tools ships in its\n * top nav — one component so every *.interlace.tools site renders an\n * identical brand header instead of hand-copied SVG.\n *\n * ## Geometry (locked — never bend)\n *\n * viewBox 0 0 100 100, two rx-14 bars (62×28) rotated -30° about the\n * center; orange bar leads upper-left, green bar lower-right. See the\n * brand-mark favicons (apps/registry/public/favicon.svg) for the same\n * geometry.\n *\n * ## Color contract\n *\n * Bar fills read `var(--brand-mark-bar-o)` / `var(--brand-mark-bar-g)` —\n * theme-paired decorative fills defined in\n * `packages/ui/styles/interlace-theme.css` (light #a84c17/#0a6b47, dark\n * #f4794a/#0d9460). Consumers outside this monorepo (e.g. the eslint docs\n * site) define the same two custom properties and the lockup follows their\n * theme switch automatically.\n *\n * | Rule | Concept                        | Where in this file                              |\n * | ---- | ------------------------------ | ----------------------------------------------- |\n * | R2   | Travels (high)                 | Zero product nouns beyond the brand itself      |\n * | R4   | Extends native el              | `React.ComponentProps<'svg'>` / `<'span'>`      |\n * | R6   | data-slot on every named part  | `brand-mark` / `brand-logo`                     |\n * | R7   | className merged + ...rest     | `cn(...)` + `{...props}` on both parts          |\n * | R18  | Tailwind only — no inline style| SVG geometry is numeric attrs, fills are tokens |\n * | R19  | Tokens only — no raw hex       | `var(--brand-mark-bar-*)`                       |\n * | R23  | CLS=0                          | Fixed width/height on the SVG                   |\n * | R25  | Server component               | no hooks → no 'use client'                      |\n * | R26  | a11y                           | Mark is aria-hidden; the wordmark names the brand |\n */\n\nimport { cn } from '@/lib/utils';\n\ninterface BrandMarkProps extends React.ComponentProps<'svg'> {\n  /** Rendered size in px (width = height). @default 22 */\n  size?: number;\n}\n\n/** The two-bar Interlace mark alone (decorative — pair with visible text). */\nfunction BrandMark({ size = 22, className, ...props }: BrandMarkProps) {\n  return (\n    <svg\n      data-slot=\"brand-mark\"\n      viewBox=\"0 0 100 100\"\n      width={size}\n      height={size}\n      aria-hidden=\"true\"\n      className={cn('shrink-0', className)}\n      {...props}\n    >\n      <g transform=\"rotate(-30 50 50)\">\n        <rect\n          x=\"10\"\n          y=\"18\"\n          width=\"62\"\n          height=\"28\"\n          rx=\"14\"\n          fill=\"var(--brand-mark-bar-o)\"\n        />\n        <rect\n          x=\"28\"\n          y=\"54\"\n          width=\"62\"\n          height=\"28\"\n          rx=\"14\"\n          fill=\"var(--brand-mark-bar-g)\"\n        />\n      </g>\n    </svg>\n  );\n}\n\ninterface BrandLogoProps extends React.ComponentProps<'span'> {\n  /** Mark size in px. @default 22 */\n  markSize?: number;\n}\n\n/**\n * Mark + wordmark lockup: the two-bar mark followed by lowercase monospace\n * \"interlace\". Wrap in your own `<Link href=\"/\">` — the lockup is display\n * only, so each site keeps its own routing.\n */\nfunction BrandLogo({ markSize = 22, className, children, ...props }: BrandLogoProps) {\n  return (\n    <span\n      data-slot=\"brand-logo\"\n      className={cn('inline-flex items-center gap-2.5', className)}\n      {...props}\n    >\n      <BrandMark size={markSize} />\n      <span className=\"font-mono font-semibold lowercase tracking-tight\">\n        interlace\n      </span>\n      {children}\n    </span>\n  );\n}\n\nexport { BrandMark, BrandLogo };\nexport type { BrandMarkProps, BrandLogoProps };\n"
    }
  ],
  "meta": {
    "tier": "pattern",
    "client": false,
    "minViewport": null,
    "loading": false,
    "version": "1.0.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/brand-logo\n\nInstalled to `components/ui/patterns/brand-logo.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/patterns/brand-logo';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/brand-logo\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}