{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-tile",
  "title": "Logo Tile",
  "description": "Logo Tile from the Get IT Done design system.",
  "dependencies": [
    "class-variance-authority@^0.7.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/avatar.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/logo-tile.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { avatarFallbackColors } from '@/components/ui/avatar';\n\n// Figma `_Logo tile` (10526:297214): Color=1..8 -> colors/data/project/N, initials in the logo tile font size per size (11/13/16px, weight 700), on-brand text.\n// Radius is size x 0.25 (prototype): 24px 6, 32px 8, 40px 10.\n// The colour map is shared with Avatar (`project-N`), so the two stay in lockstep.\ntype LogoTileColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nconst logoTileVariants = cva('inline-flex shrink-0 select-none items-center justify-center', {\n  variants: {\n    size: {\n      xs: 'h-avatar-xs w-avatar-xs rounded-logo-tile-24 text-logo-tile-24 font-bold leading-none',\n      sm: 'h-avatar-sm w-avatar-sm rounded-logo-tile-32 text-logo-tile-32 font-bold leading-none',\n      md: 'h-avatar-md w-avatar-md rounded-logo-tile-40 text-logo-tile-40 font-bold leading-none',\n    },\n  },\n  defaultVariants: { size: 'xs' },\n});\n\nexport interface LogoTileProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,\n    VariantProps<typeof logoTileVariants> {\n  // `color` (default) is the project-coloured initials tile. `neutral` is a bordered surface tile for third-party brand logos (integrations), so the logo keeps its own colours. `outline` is the same bordered surface tile: it shows `src` or the children when given, otherwise the initials in the default text colour.\n  tone?: 'color' | 'neutral' | 'outline';\n  // Logo image for the neutral and outline tiles. Alternatively pass the logo (svg) as children. Decorative inside the tile; `label` names the tile.\n  src?: string;\n  // Project colour 1..8 (`colors/data/project/N`).\n  color?: LogoTileColor;\n  // One to three characters, e.g. `AC`.\n  initials?: string;\n  // Accessible name. Without it the tile is decorative (`aria-hidden`), which is right next to a visible name.\n  label?: string;\n}\n\nconst LogoTile = React.forwardRef<HTMLSpanElement, LogoTileProps>(\n  ({ className, color = 1, tone = 'color', src, initials, label, size, children, ...props }, ref) => {\n    const neutral = tone === 'neutral';\n    const outline = tone === 'outline';\n    return (\n      <span\n        ref={ref}\n        role={label ? 'img' : undefined}\n        aria-label={label}\n        aria-hidden={label ? undefined : true}\n        data-color={neutral || outline ? undefined : color}\n        data-tone={tone}\n        className={cn(\n          logoTileVariants({ size }),\n          outline\n            ? 'border border-solid border-border-default bg-background text-text-default [&>img]:h-3/5 [&>img]:w-3/5 [&>img]:object-contain [&>svg]:h-3/5 [&>svg]:w-3/5'\n            : neutral\n            ? 'border border-solid border-border bg-background text-text-default [&>img]:h-3/5 [&>img]:w-3/5 [&>img]:object-contain [&>svg]:h-3/5 [&>svg]:w-3/5'\n            : avatarFallbackColors[`project-${color}`],\n          className,\n        )}\n        {...props}\n      >\n        {neutral || outline ? (\n          <>\n            {src ? <img src={src} alt=\"\" /> : null}\n            {children}\n            {src || children ? null : initials}\n          </>\n        ) : (\n          initials\n        )}\n      </span>\n    );\n  },\n);\nLogoTile.displayName = 'LogoTile';\n\nexport { LogoTile, logoTileVariants, type LogoTileColor };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}