{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-styled",
  "title": "Item essentials",
  "description": "Styled item: the essentials set. 5 decorative item variations (SimpleItem, IconItem, AvatarItem, ActionItem, CardItem) 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-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ChevronRight, Layers, Sparkles } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Item family: 5 decorative list rows (row / cell). An \"item\" = a leading media slot plus title plus an optional description plus an optional trailing slot (chevron or action). Used in lists, settings rows and menus. Colour comes ONLY from tokens; alpha via color-mix. No framer (no animation). 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\nconst tile: Record<StyledSize, string> = {\n  sm: \"size-8 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  md: \"size-9 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  lg: \"size-10 rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n  xl: \"size-12 rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n}\n\nconst avatarBox: Record<StyledSize, string> = {\n  sm: \"size-8 text-xs\",\n  md: \"size-9 text-sm\",\n  lg: \"size-10 text-sm\",\n  xl: \"size-12 text-base\",\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\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/* Simple: title plus description, a trailing chevron, a token tint on hover. */\nexport function SimpleItem({\n  className,\n  size = \"md\",\n  title = \"Account settings\",\n  description = \"Manage your profile and preferences\",\n  leading,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div\n      data-slot=\"styled-item\"\n      className={cn(\n        base,\n        box[size],\n        \"cursor-default transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent\",\n        className\n      )}\n      {...props}\n    >\n      {leading}\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      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n\n/* Icon: bastaki token ikon karesi (tile) + baslik/aciklama. */\nexport function IconItem({\n  className,\n  size = \"md\",\n  title = \"Integrations\",\n  description = \"Connect your favorite tools\",\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          \"inline-flex items-center justify-center text-brand\",\n          tile[size],\n          \"bg-[color-mix(in_oklab,var(--brand)_12%,transparent)]\"\n        )}\n      >\n        {leading}\n      </span>\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      {trailing}\n    </div>\n  )\n}\n\n/* Avatar: bastaki bas-harf avatari + baslik/aciklama + sondaki token badge. */\nexport function AvatarItem({\n  className,\n  size = \"md\",\n  title = \"Ada Lovelace\",\n  description = \"ada@example.com\",\n  leading = \"AL\",\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          \"inline-flex select-none items-center justify-center rounded-full bg-secondary font-medium text-secondary-foreground\",\n          avatarBox[size]\n        )}\n      >\n        {leading}\n      </span>\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      {trailing ?? (\n        <span className=\"inline-flex h-5 shrink-0 items-center rounded-md bg-[color-mix(in_oklab,var(--success)_14%,transparent)] px-2 text-xs font-medium text-success\">\n          Active\n        </span>\n      )}\n    </div>\n  )\n}\n\n/* Action: baslik/aciklama + sondaki token aksiyon butonu (orn. \"Manage\"). */\nexport function ActionItem({\n  className,\n  size = \"md\",\n  title = \"Billing plan\",\n  description = \"You are on the Pro plan\",\n  leading,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div data-slot=\"styled-item\" className={cn(base, box[size], className)} {...props}>\n      {leading}\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      {trailing ?? (\n        <button\n          type=\"button\"\n          className=\"inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-secondary px-3 text-xs font-medium text-secondary-foreground transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        >\n          Manage\n        </button>\n      )}\n    </div>\n  )\n}\n\n/* Card: satirin tamami koseleri yuvarlatilmis token karti. */\nexport function CardItem({\n  className,\n  size = \"md\",\n  title = \"New release\",\n  description = \"Version 2.0 is now available\",\n  leading = <Sparkles />,\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div\n      data-slot=\"styled-item\"\n      className={cn(\n        base,\n        box[size],\n        \"border border-border bg-card text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    >\n      {leading ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"inline-flex items-center justify-center text-brand\",\n            tile[size],\n            \"bg-[color-mix(in_oklab,var(--brand)_12%,transparent)]\"\n          )}\n        >\n          {leading}\n        </span>\n      ) : null}\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      {trailing ?? <ChevronRight className=\"size-4 text-muted-foreground\" />}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/item-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "item"
  ],
  "type": "registry:component"
}