{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-media",
  "title": "Media item",
  "description": "Styled item: the Media set. 5 decorative item variations (ThumbItem, CoverItem, VideoItem, BadgeItem, StackItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/item-media.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ChevronRight, Image as ImageIcon, Layers, Play } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Item media family: 5 list rows that rotate the leading image or thumbnail slot. There are NO remote image URLs - every media slot is drawn as a token-coloured surface plus an inline lucide glyph, which keeps the component entirely self-contained and lets it render without a network on the consumer's side. Colour comes ONLY from tokens; alpha via color-mix. No animation. Every export renders without props too. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"gap-2.5 rounded-lg p-2 text-sm\",\n  md: \"gap-3 rounded-lg p-3 text-sm\",\n  lg: \"gap-3.5 rounded-xl p-4 text-base\",\n  xl: \"gap-4 rounded-xl p-5 text-base\",\n}\n\n/* Kare kucuk resim (1:1). */\nconst thumbBox: Record<StyledSize, string> = {\n  sm: \"size-9 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  md: \"size-10 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  lg: \"size-12 rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n  xl: \"size-14 rounded-lg [&_svg]:size-6 [&_i]:text-xl\",\n}\n\n/* Dikey kapak (3:4). */\nconst coverBox: Record<StyledSize, string> = {\n  sm: \"h-10 w-8 rounded-md [&_svg]:size-3.5 [&_i]:text-sm\",\n  md: \"h-12 w-9 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  lg: \"h-14 w-11 rounded-lg [&_svg]:size-4 [&_i]:text-base\",\n  xl: \"h-16 w-12 rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n}\n\n/* Yatay video karesi (16:9). */\nconst videoBox: Record<StyledSize, string> = {\n  sm: \"h-8 w-14 rounded-md [&_svg]:size-3.5 [&_i]:text-sm\",\n  md: \"h-9 w-16 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  lg: \"h-11 w-[4.75rem] rounded-lg [&_svg]:size-4 [&_i]:text-base\",\n  xl: \"h-12 w-[5.5rem] rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n}\n\nconst base =\n  \"flex w-full items-center [&_svg]:shrink-0 [&_i]:not-italic [&_i]:leading-none\"\n\nconst titleCls = \"truncate font-medium text-foreground\"\nconst descCls = \"truncate text-muted-foreground text-[0.85em]\"\n\n/* The shared media surface: a token muted background + a brand-toned diagonal\n   gradient over it. */\nconst surface =\n  \"relative shrink-0 overflow-hidden bg-muted text-muted-foreground\"\n\nconst surfaceWash =\n  \"pointer-events-none absolute inset-0 bg-gradient-to-br from-[color-mix(in_oklab,var(--color-brand)_20%,transparent)] to-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]\"\n\ntype Props = React.ComponentProps<\"div\"> & {\n  size?: StyledSize\n  title?: React.ReactNode\n  description?: React.ReactNode\n  leading?: React.ReactNode\n  trailing?: React.ReactNode\n}\n\n/* The text block is the same in every variant. */\nfunction Body({\n  title,\n  description,\n}: {\n  title: React.ReactNode\n  description: React.ReactNode\n}) {\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <span className={titleCls}>{title}</span>\n      {description ? <span className={descCls}>{description}</span> : null}\n    </div>\n  )\n}\n\n/* Thumb: kare token kucuk resim yuzeyi + baslik/aciklama + chevron. */\nexport function ThumbItem({\n  className,\n  size = \"md\",\n  title = \"Brand guidelines\",\n  description = \"PDF - 2.4 MB\",\n  leading = <ImageIcon />,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div data-slot=\"styled-item\" className={cn(base, box[size], className)} {...props}>\n      <span\n        aria-hidden=\"true\"\n        className={cn(surface, thumbBox[size], \"inline-flex items-center justify-center\")}\n      >\n        <span className={surfaceWash} />\n        <span className=\"relative inline-flex\">{leading}</span>\n      </span>\n      <Body title={title} description={description} />\n      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n\n/* Cover: a vertical (3:4) cover surface - for book and album rows. */\nexport function CoverItem({\n  className,\n  size = \"md\",\n  title = \"Design of Everyday Things\",\n  description = \"Don Norman\",\n  leading = <Layers />,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div data-slot=\"styled-item\" className={cn(base, box[size], className)} {...props}>\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          surface,\n          coverBox[size],\n          \"inline-flex items-center justify-center shadow-sm ring-1 ring-border\"\n        )}\n      >\n        <span className={surfaceWash} />\n        {/* Kapak sirti: sol kenarda ince koyu serit. */}\n        <span className=\"pointer-events-none absolute inset-y-0 left-0 w-1 bg-[color-mix(in_oklab,var(--color-foreground)_18%,transparent)]\" />\n        <span className=\"relative inline-flex\">{leading}</span>\n      </span>\n      <Body title={title} description={description} />\n      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n\n/* Video: 16:9 kare + ortada play diski + kosede sure pili. */\nexport function VideoItem({\n  className,\n  size = \"md\",\n  title = \"Getting started\",\n  description = \"Chapter 1 of 6\",\n  leading,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div data-slot=\"styled-item\" className={cn(base, box[size], className)} {...props}>\n      <span\n        aria-hidden=\"true\"\n        className={cn(surface, videoBox[size], \"inline-flex items-center justify-center\")}\n      >\n        <span className={surfaceWash} />\n        <span className=\"relative inline-flex size-6 items-center justify-center rounded-full bg-[color-mix(in_oklab,var(--color-background)_80%,transparent)] text-foreground [&_svg]:size-3 [&_i]:text-xs\">\n          {leading ?? <Play />}\n        </span>\n        <span className=\"absolute bottom-0.5 right-0.5 rounded-sm bg-[color-mix(in_oklab,var(--color-foreground)_72%,transparent)] px-1 text-[10px] font-medium leading-4 text-background\">\n          4:12\n        </span>\n      </span>\n      <Body title={title} description={description} />\n      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n\n/* Badge: kucuk resmin sag ust kosesinde sayac rozeti. */\nexport function BadgeItem({\n  className,\n  size = \"md\",\n  title = \"Product shots\",\n  description = \"Updated yesterday\",\n  leading = <ImageIcon />,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div data-slot=\"styled-item\" className={cn(base, box[size], className)} {...props}>\n      <span aria-hidden=\"true\" className={cn(\"relative shrink-0\", thumbBox[size])}>\n        <span\n          className={cn(\n            surface,\n            \"inline-flex size-full items-center justify-center rounded-[inherit]\"\n          )}\n        >\n          <span className={surfaceWash} />\n          <span className=\"relative inline-flex\">{leading}</span>\n        </span>\n        <span className=\"absolute -right-1.5 -top-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand px-1 text-[10px] font-medium leading-none text-brand-foreground ring-2 ring-background\">\n          12\n        </span>\n      </span>\n      <Body title={title} description={description} />\n      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n\n/* Stack: ust uste binmis 3 kucuk resim - albüm/koleksiyon satiri. */\nexport function StackItem({\n  className,\n  size = \"md\",\n  title = \"Q3 campaign\",\n  description = \"24 assets\",\n  leading = <Layers />,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div data-slot=\"styled-item\" className={cn(base, box[size], className)} {...props}>\n      <span aria-hidden=\"true\" className={cn(\"relative shrink-0\", thumbBox[size])}>\n        {/* The two layers behind: they only hint at an edge. */}\n        <span className=\"absolute inset-0 -translate-y-1.5 translate-x-1.5 rounded-[inherit] border border-border bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)]\" />\n        <span className=\"absolute inset-0 -translate-y-0.5 translate-x-0.5 rounded-[inherit] border border-border bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\" />\n        <span\n          className={cn(\n            surface,\n            \"inline-flex size-full items-center justify-center rounded-[inherit] ring-1 ring-border\"\n          )}\n        >\n          <span className={surfaceWash} />\n          <span className=\"relative inline-flex\">{leading}</span>\n        </span>\n      </span>\n      <Body title={title} description={description} />\n      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/item-media.tsx"
    }
  ],
  "categories": [
    "styled",
    "item"
  ],
  "type": "registry:component"
}