{
  "name": "item",
  "type": "registry:component",
  "files": [
    {
      "name": "item.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  itemActionsVariants,\n  itemContentVariants,\n  itemDescriptionVariants,\n  itemFooterVariants,\n  itemGroupVariants,\n  itemHeaderVariants,\n  itemMediaVariants,\n  itemSeparatorVariants,\n  itemTitleVariants,\n  itemVariants,\n  type ZardItemMediaVariantVariants,\n  type ZardItemSizeVariants,\n  type ZardItemVariantVariants,\n} from './item.variants';\n\n@Component({\n  selector: 'z-item-group, [z-item-group]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'list',\n    'data-slot': 'item-group',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemGroup',\n})\nexport class ZardItemGroupComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemGroupVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item-separator, [z-item-separator]',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'separator',\n    'aria-orientation': 'horizontal',\n    'data-slot': 'item-separator',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemSeparator',\n})\nexport class ZardItemSeparatorComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemSeparatorVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item, [z-item]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item',\n    '[attr.data-variant]': 'zVariant()',\n    '[attr.data-size]': 'zSize()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItem',\n})\nexport class ZardItemComponent {\n  readonly class = input<ClassValue>('');\n  readonly zVariant = input<ZardItemVariantVariants>('default');\n  readonly zSize = input<ZardItemSizeVariants>('default');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(itemVariants({ zVariant: this.zVariant(), zSize: this.zSize() }), this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-item-media, [z-item-media]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-media',\n    '[attr.data-variant]': 'zVariant()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemMedia',\n})\nexport class ZardItemMediaComponent {\n  readonly class = input<ClassValue>('');\n  readonly zVariant = input<ZardItemMediaVariantVariants>('default');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(itemMediaVariants({ zVariant: this.zVariant() }), this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-item-content, [z-item-content]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-content',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemContent',\n})\nexport class ZardItemContentComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemContentVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item-title, [z-item-title]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-title',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemTitle',\n})\nexport class ZardItemTitleComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemTitleVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item-description, p[z-item-description]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-description',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemDescription',\n})\nexport class ZardItemDescriptionComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemDescriptionVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item-actions, [z-item-actions]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-actions',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemActions',\n})\nexport class ZardItemActionsComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemActionsVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item-header, [z-item-header]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-header',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemHeader',\n})\nexport class ZardItemHeaderComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemHeaderVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-item-footer, [z-item-footer]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'item-footer',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zItemFooter',\n})\nexport class ZardItemFooterComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(itemFooterVariants(), this.class()));\n}\n"
    },
    {
      "name": "item.imports.ts",
      "content": "export {\n  ZardItemActionsComponent,\n  ZardItemComponent,\n  ZardItemContentComponent,\n  ZardItemDescriptionComponent,\n  ZardItemFooterComponent,\n  ZardItemGroupComponent,\n  ZardItemHeaderComponent,\n  ZardItemMediaComponent,\n  ZardItemSeparatorComponent,\n  ZardItemTitleComponent,\n} from './item.component';\n\nimport {\n  ZardItemActionsComponent,\n  ZardItemComponent,\n  ZardItemContentComponent,\n  ZardItemDescriptionComponent,\n  ZardItemFooterComponent,\n  ZardItemGroupComponent,\n  ZardItemHeaderComponent,\n  ZardItemMediaComponent,\n  ZardItemSeparatorComponent,\n  ZardItemTitleComponent,\n} from './item.component';\n\nexport const ZardItemImports = [\n  ZardItemGroupComponent,\n  ZardItemSeparatorComponent,\n  ZardItemComponent,\n  ZardItemMediaComponent,\n  ZardItemContentComponent,\n  ZardItemTitleComponent,\n  ZardItemDescriptionComponent,\n  ZardItemActionsComponent,\n  ZardItemHeaderComponent,\n  ZardItemFooterComponent,\n] as const;\n"
    },
    {
      "name": "item.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nexport const itemGroupVariants = cva(\n  'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',\n);\n\nexport const itemSeparatorVariants = cva('bg-border my-2 block h-px w-full shrink-0');\n\nexport const itemVariants = cva(\n  mergeClasses(\n    'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none',\n    'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n    '[a]:transition-colors [a]:hover:bg-muted',\n  ),\n  {\n    variants: {\n      zVariant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'border-transparent bg-muted/50',\n      },\n      zSize: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',\n      },\n    },\n    defaultVariants: {\n      zVariant: 'default',\n      zSize: 'default',\n    },\n  },\n);\n\nexport const itemMediaVariants = cva(\n  mergeClasses(\n    'flex shrink-0 items-center justify-center gap-2',\n    'group-has-data-[slot=item-description]/item:translate-y-0.5',\n    'group-has-data-[slot=item-description]/item:self-start',\n    '[&_svg]:pointer-events-none',\n  ),\n  {\n    variants: {\n      zVariant: {\n        default: 'bg-transparent',\n        icon: \"[--ng-icon__size:1rem] [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      zVariant: 'default',\n    },\n  },\n);\n\nexport const itemContentVariants = cva(\n  'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',\n);\n\nexport const itemTitleVariants = cva(\n  'line-clamp-1 flex w-fit items-center gap-2 text-sm font-medium leading-snug underline-offset-4',\n);\n\nexport const itemDescriptionVariants = cva(\n  mergeClasses(\n    'line-clamp-2 text-left text-sm font-normal leading-normal text-muted-foreground',\n    'group-data-[size=xs]/item:text-xs',\n    '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n  ),\n);\n\nexport const itemActionsVariants = cva('flex items-center gap-2');\n\nexport const itemHeaderVariants = cva('flex basis-full items-center justify-between gap-2');\n\nexport const itemFooterVariants = cva('flex basis-full items-center justify-between gap-2');\n\nexport type ZardItemVariantVariants = NonNullable<VariantProps<typeof itemVariants>['zVariant']>;\nexport type ZardItemSizeVariants = NonNullable<VariantProps<typeof itemVariants>['zSize']>;\nexport type ZardItemMediaVariantVariants = NonNullable<VariantProps<typeof itemMediaVariants>['zVariant']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './item.component';\nexport * from './item.imports';\nexport * from './item.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "avatar.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardAvatarComponent, ZardAvatarGroupComponent } from '@/shared/components/avatar';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\n@Component({\n  selector: 'z-demo-item-avatar',\n  imports: [ZardAvatarComponent, ZardAvatarGroupComponent, ZardButtonComponent, NgIcon, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-lg flex-col gap-6\">\n      <z-item zVariant=\"outline\">\n        <z-item-media>\n          <z-avatar zSrc=\"https://github.com/evilrabbit.png\" zFallback=\"ER\" class=\"size-10\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Evil Rabbit</z-item-title>\n          <z-item-description>Last seen 5 months ago</z-item-description>\n        </z-item-content>\n        <z-item-actions>\n          <button type=\"button\" z-button zType=\"outline\" zSize=\"icon-sm\" zShape=\"circle\" aria-label=\"Invite\">\n            <ng-icon name=\"lucidePlus\" />\n          </button>\n        </z-item-actions>\n      </z-item>\n\n      <z-item zVariant=\"outline\">\n        <z-item-media>\n          <z-avatar-group>\n            <z-avatar zSrc=\"https://github.com/shadcn.png\" zAlt=\"@shadcn\" zFallback=\"CN\" class=\"grayscale\" />\n            <z-avatar zSrc=\"https://github.com/maxleiter.png\" zAlt=\"@maxleiter\" zFallback=\"LR\" class=\"grayscale\" />\n            <z-avatar zSrc=\"https://github.com/evilrabbit.png\" zAlt=\"@evilrabbit\" zFallback=\"ER\" class=\"grayscale\" />\n          </z-avatar-group>\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>No Team Members</z-item-title>\n          <z-item-description>Invite your team to collaborate on this project.</z-item-description>\n        </z-item-content>\n        <z-item-actions>\n          <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Invite</button>\n        </z-item-actions>\n      </z-item>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucidePlus })],\n})\nexport class ZardDemoItemAvatarComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBadgeCheck, lucideChevronRight } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\n@Component({\n  selector: 'z-demo-item-default',\n  imports: [ZardButtonComponent, NgIcon, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-md flex-col gap-6\">\n      <z-item zVariant=\"outline\">\n        <z-item-content>\n          <z-item-title>Basic Item</z-item-title>\n          <z-item-description>A simple item with title and description.</z-item-description>\n        </z-item-content>\n        <z-item-actions>\n          <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Action</button>\n        </z-item-actions>\n      </z-item>\n\n      <a z-item href=\"#\" zVariant=\"outline\" zSize=\"sm\">\n        <z-item-media>\n          <ng-icon name=\"lucideBadgeCheck\" size=\"1.25rem\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Your profile has been verified.</z-item-title>\n        </z-item-content>\n        <z-item-actions>\n          <ng-icon name=\"lucideChevronRight\" size=\"1rem\" />\n        </z-item-actions>\n      </a>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideBadgeCheck, lucideChevronRight })],\n})\nexport class ZardDemoItemDefaultComponent {}\n"
    },
    {
      "name": "dropdown.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown } from '@ng-icons/lucide';\n\nimport { ZardAvatarComponent } from '@/shared/components/avatar';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardDropdownImports } from '@/shared/components/dropdown/dropdown.imports';\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\ninterface Person {\n  username: string;\n  avatar: string;\n  email: string;\n}\n\n@Component({\n  selector: 'z-demo-item-dropdown',\n  imports: [ZardAvatarComponent, ZardButtonComponent, NgIcon, ...ZardDropdownImports, ...ZardItemImports],\n  template: `\n    <button type=\"button\" z-button zType=\"outline\" z-dropdown [zDropdownMenu]=\"menu\">\n      Select\n      <ng-icon name=\"lucideChevronDown\" />\n    </button>\n\n    <z-dropdown-menu-content #menu=\"zDropdownMenuContent\" class=\"w-56\">\n      @for (person of people; track person.username) {\n        <z-dropdown-menu-item>\n          <z-item zSize=\"xs\" class=\"w-full p-2\">\n            <z-item-media>\n              <z-avatar\n                [zSrc]=\"person.avatar\"\n                [zFallback]=\"person.username.charAt(0).toUpperCase()\"\n                class=\"size-7 grayscale\"\n              />\n            </z-item-media>\n            <z-item-content class=\"gap-0\">\n              <z-item-title>{{ person.username }}</z-item-title>\n              <z-item-description class=\"leading-none\">{{ person.email }}</z-item-description>\n            </z-item-content>\n          </z-item>\n        </z-dropdown-menu-item>\n      }\n    </z-dropdown-menu-content>\n  `,\n  viewProviders: [provideIcons({ lucideChevronDown })],\n})\nexport class ZardDemoItemDropdownComponent {\n  protected readonly people: Person[] = [\n    { username: 'shadcn', avatar: 'https://github.com/shadcn.png', email: 'shadcn@vercel.com' },\n    { username: 'maxleiter', avatar: 'https://github.com/maxleiter.png', email: 'maxleiter@vercel.com' },\n    { username: 'evilrabbit', avatar: 'https://github.com/evilrabbit.png', email: 'evilrabbit@vercel.com' },\n  ];\n}\n"
    },
    {
      "name": "group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardAvatarComponent } from '@/shared/components/avatar';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\ninterface Person {\n  username: string;\n  avatar: string;\n  email: string;\n}\n\n@Component({\n  selector: 'z-demo-item-group',\n  imports: [ZardAvatarComponent, ZardButtonComponent, NgIcon, ...ZardItemImports],\n  template: `\n    <z-item-group class=\"min-w-sm\">\n      @for (person of people; track person.username) {\n        <z-item zVariant=\"outline\">\n          <z-item-media>\n            <z-avatar [zSrc]=\"person.avatar\" [zFallback]=\"person.username.charAt(0).toUpperCase()\" class=\"grayscale\" />\n          </z-item-media>\n          <z-item-content class=\"gap-1\">\n            <z-item-title>{{ person.username }}</z-item-title>\n            <z-item-description>{{ person.email }}</z-item-description>\n          </z-item-content>\n          <z-item-actions>\n            <button type=\"button\" z-button zType=\"ghost\" zSize=\"icon-sm\" zShape=\"circle\">\n              <ng-icon name=\"lucidePlus\" />\n            </button>\n          </z-item-actions>\n        </z-item>\n      }\n    </z-item-group>\n  `,\n  viewProviders: [provideIcons({ lucidePlus })],\n})\nexport class ZardDemoItemGroupComponent {\n  protected readonly people: Person[] = [\n    { username: 'shadcn', avatar: 'https://github.com/shadcn.png', email: 'shadcn@vercel.com' },\n    { username: 'maxleiter', avatar: 'https://github.com/maxleiter.png', email: 'maxleiter@vercel.com' },\n    { username: 'evilrabbit', avatar: 'https://github.com/evilrabbit.png', email: 'evilrabbit@vercel.com' },\n  ];\n}\n"
    },
    {
      "name": "header.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\ninterface Model {\n  name: string;\n  description: string;\n  image: string;\n}\n\n@Component({\n  selector: 'z-demo-item-header',\n  imports: [...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-xl flex-col gap-6\">\n      <z-item-group class=\"grid grid-cols-3 gap-4\">\n        @for (model of models; track model.name) {\n          <z-item zVariant=\"outline\">\n            <z-item-header>\n              <img [src]=\"model.image\" [alt]=\"model.name\" class=\"aspect-square w-full rounded-sm object-cover\" />\n            </z-item-header>\n            <z-item-content>\n              <z-item-title>{{ model.name }}</z-item-title>\n              <z-item-description>{{ model.description }}</z-item-description>\n            </z-item-content>\n          </z-item>\n        }\n      </z-item-group>\n    </div>\n  `,\n})\nexport class ZardDemoItemHeaderComponent {\n  protected readonly models: Model[] = [\n    {\n      name: 'v0-1.5-sm',\n      description: 'Everyday tasks and UI generation.',\n      image: 'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',\n    },\n    {\n      name: 'v0-1.5-lg',\n      description: 'Advanced thinking or reasoning.',\n      image: 'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',\n    },\n    {\n      name: 'v0-2.0-mini',\n      description: 'Open Source model for everyone.',\n      image: 'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',\n    },\n  ];\n}\n"
    },
    {
      "name": "icon.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideShieldAlert } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\n@Component({\n  selector: 'z-demo-item-icon',\n  imports: [ZardButtonComponent, NgIcon, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-lg flex-col gap-6\">\n      <z-item zVariant=\"outline\">\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideShieldAlert\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Security Alert</z-item-title>\n          <z-item-description>New login detected from unknown device.</z-item-description>\n        </z-item-content>\n        <z-item-actions>\n          <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Review</button>\n        </z-item-actions>\n      </z-item>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideShieldAlert })],\n})\nexport class ZardDemoItemIconComponent {}\n"
    },
    {
      "name": "image.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\ninterface Song {\n  title: string;\n  artist: string;\n  album: string;\n  duration: string;\n}\n\n@Component({\n  selector: 'z-demo-item-image',\n  imports: [...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-md flex-col gap-6\">\n      <z-item-group class=\"gap-4\">\n        @for (song of music; track song.title) {\n          <a z-item href=\"#\" zVariant=\"outline\" role=\"listitem\">\n            <z-item-media zVariant=\"image\">\n              <img [src]=\"'https://avatar.vercel.sh/' + song.title\" [alt]=\"song.title\" class=\"object-cover grayscale\" />\n            </z-item-media>\n            <z-item-content>\n              <z-item-title class=\"line-clamp-1\">\n                {{ song.title }} -\n                <span class=\"text-muted-foreground\">{{ song.album }}</span>\n              </z-item-title>\n              <z-item-description>{{ song.artist }}</z-item-description>\n            </z-item-content>\n            <z-item-content class=\"flex-none text-center\">\n              <z-item-description>{{ song.duration }}</z-item-description>\n            </z-item-content>\n          </a>\n        }\n      </z-item-group>\n    </div>\n  `,\n})\nexport class ZardDemoItemImageComponent {\n  protected readonly music: Song[] = [\n    { title: 'Midnight City Lights', artist: 'Neon Dreams', album: 'Electric Nights', duration: '3:45' },\n    { title: 'Coffee Shop Conversations', artist: 'The Morning Brew', album: 'Urban Stories', duration: '4:05' },\n    { title: 'Digital Rain', artist: 'Cyber Symphony', album: 'Binary Beats', duration: '3:30' },\n  ];\n}\n"
    },
    {
      "name": "link.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronRight, lucideExternalLink } from '@ng-icons/lucide';\n\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\n@Component({\n  selector: 'z-demo-item-link',\n  imports: [NgIcon, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-md flex-col gap-4\">\n      <a z-item href=\"#\">\n        <z-item-content>\n          <z-item-title>Visit our documentation</z-item-title>\n          <z-item-description>Learn how to get started with our components.</z-item-description>\n        </z-item-content>\n        <z-item-actions>\n          <ng-icon name=\"lucideChevronRight\" size=\"1rem\" />\n        </z-item-actions>\n      </a>\n\n      <a z-item href=\"#\" zVariant=\"outline\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <z-item-content>\n          <z-item-title>External resource</z-item-title>\n          <z-item-description>Opens in a new tab with security attributes.</z-item-description>\n        </z-item-content>\n        <z-item-actions>\n          <ng-icon name=\"lucideExternalLink\" size=\"1rem\" />\n        </z-item-actions>\n      </a>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideChevronRight, lucideExternalLink })],\n})\nexport class ZardDemoItemLinkComponent {}\n"
    },
    {
      "name": "size.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideInbox } from '@ng-icons/lucide';\n\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\n@Component({\n  selector: 'z-demo-item-size',\n  imports: [NgIcon, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-md flex-col gap-6\">\n      <z-item zVariant=\"outline\">\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideInbox\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Default Size</z-item-title>\n          <z-item-description>The standard size for most use cases.</z-item-description>\n        </z-item-content>\n      </z-item>\n      <z-item zVariant=\"outline\" zSize=\"sm\">\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideInbox\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Small Size</z-item-title>\n          <z-item-description>A compact size for dense layouts.</z-item-description>\n        </z-item-content>\n      </z-item>\n      <z-item zVariant=\"outline\" zSize=\"xs\">\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideInbox\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Extra Small Size</z-item-title>\n          <z-item-description>The most compact size available.</z-item-description>\n        </z-item-content>\n      </z-item>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideInbox })],\n})\nexport class ZardDemoItemSizeComponent {}\n"
    },
    {
      "name": "variant.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideInbox } from '@ng-icons/lucide';\n\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\n\n@Component({\n  selector: 'z-demo-item-variant',\n  imports: [NgIcon, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full min-w-md flex-col gap-6\">\n      <z-item>\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideInbox\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Default Variant</z-item-title>\n          <z-item-description>Transparent background with no border.</z-item-description>\n        </z-item-content>\n      </z-item>\n      <z-item zVariant=\"outline\">\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideInbox\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Outline Variant</z-item-title>\n          <z-item-description>Outlined style with a visible border.</z-item-description>\n        </z-item-content>\n      </z-item>\n      <z-item zVariant=\"muted\">\n        <z-item-media zVariant=\"icon\">\n          <ng-icon name=\"lucideInbox\" />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title>Muted Variant</z-item-title>\n          <z-item-description>Muted background for secondary content.</z-item-description>\n        </z-item-content>\n      </z-item>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideInbox })],\n})\nexport class ZardDemoItemVariantComponent {}\n"
    }
  ]
}