Item

import {
    Item,
    ItemActions,
    ItemContent,
    ItemDescription,
    ItemGroup,
    ItemMedia,
    ItemSeparator,
    ItemTitle,
    Button,
    Badge,
} from '@stroeer-labs/design-library/react';
import {BadgeCheckIcon, ChevronRightIcon} from 'lucide-react';

export function ItemDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Variants</p>
                <div className="flex flex-col gap-3">
                    <Item variant="default">
                        <ItemContent>
                            <ItemTitle>Default</ItemTitle>
                            <ItemDescription>Transparent — a flat row inside a list or panel.</ItemDescription>
                        </ItemContent>
                    </Item>
                    <Item variant="outline">
                        <ItemContent>
                            <ItemTitle>Outline</ItemTitle>
                            <ItemDescription>Bordered — the item reads as its own card.</ItemDescription>
                        </ItemContent>
                    </Item>
                    <Item variant="muted">
                        <ItemContent>
                            <ItemTitle>Muted</ItemTitle>
                            <ItemDescription>Filled — a subtly recessed surface.</ItemDescription>
                        </ItemContent>
                    </Item>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">As link (render prop)</p>
                {/* biome-ignore lint/a11y/useAnchorContent: children are merged into the anchor by the render prop (Base UI useRender) */}
                <Item variant="outline" render={<a href="/components/item" />}>
                    <ItemContent>
                        <ItemTitle>Item documentation</ItemTitle>
                        <ItemDescription>The whole row is one anchor — hover and focus land on it.</ItemDescription>
                    </ItemContent>
                    <ItemActions>
                        <ChevronRightIcon className="size-4 text-muted-foreground" />
                    </ItemActions>
                </Item>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Media, content & actions</p>
                <Item variant="outline">
                    <ItemMedia variant="icon">
                        <BadgeCheckIcon />
                    </ItemMedia>
                    <ItemContent>
                        <ItemTitle>Your profile is verified</ItemTitle>
                        <ItemDescription>Everyone can see your verified badge.</ItemDescription>
                    </ItemContent>
                    <ItemActions>
                        <Button variant="outline" size="sm">
                            Manage
                        </Button>
                    </ItemActions>
                </Item>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Group with separators</p>
                <ItemGroup className="rounded-md border border-border">
                    <Item size="sm">
                        <ItemContent>
                            <ItemTitle>Documents</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Badge variant="secondary">12</Badge>
                            <ChevronRightIcon className="size-4 text-muted-foreground" />
                        </ItemActions>
                    </Item>
                    <ItemSeparator />
                    <Item size="sm">
                        <ItemContent>
                            <ItemTitle>Shared with me</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Badge variant="secondary">3</Badge>
                            <ChevronRightIcon className="size-4 text-muted-foreground" />
                        </ItemActions>
                    </Item>
                </ItemGroup>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {NgIcon, provideIcons} from '@ng-icons/core';
import {lucideBadgeCheck, lucideChevronRight} from '@ng-icons/lucide';
import {HlmItemImports, HlmButtonImports, HlmBadgeImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-item-demo',
    standalone: true,
    imports: [HlmItemImports, HlmButtonImports, HlmBadgeImports, NgIcon],
    viewProviders: [provideIcons({lucideBadgeCheck, lucideChevronRight})],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Variants</p>
        <div class="flex flex-col gap-3">
          <div hlmItem variant="default">
            <div hlmItemContent>
              <div hlmItemTitle>Default</div>
              <p hlmItemDescription>Transparent — a flat row inside a list or panel.</p>
            </div>
          </div>
          <div hlmItem variant="outline">
            <div hlmItemContent>
              <div hlmItemTitle>Outline</div>
              <p hlmItemDescription>Bordered — the item reads as its own card.</p>
            </div>
          </div>
          <div hlmItem variant="muted">
            <div hlmItemContent>
              <div hlmItemTitle>Muted</div>
              <p hlmItemDescription>Filled — a subtly recessed surface.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">As link (anchor host)</p>
        <a hlmItem variant="outline" href="/components/item">
          <div hlmItemContent>
            <div hlmItemTitle>Item documentation</div>
            <p hlmItemDescription>The whole row is one anchor — hover and focus land on it.</p>
          </div>
          <div hlmItemActions>
            <ng-icon name="lucideChevronRight" class="text-muted-foreground" />
          </div>
        </a>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Media, content & actions</p>
        <div hlmItem variant="outline">
          <div hlmItemMedia variant="icon">
            <ng-icon name="lucideBadgeCheck" />
          </div>
          <div hlmItemContent>
            <div hlmItemTitle>Your profile is verified</div>
            <p hlmItemDescription>Everyone can see your verified badge.</p>
          </div>
          <div hlmItemActions>
            <button hlmBtn variant="outline" size="sm">Manage</button>
          </div>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Group with separators</p>
        <div hlmItemGroup class="rounded-md border border-border">
          <div hlmItem size="sm">
            <div hlmItemContent>
              <div hlmItemTitle>Documents</div>
            </div>
            <div hlmItemActions>
              <span hlmBadge variant="secondary">12</span>
              <ng-icon name="lucideChevronRight" class="size-4 text-muted-foreground" />
            </div>
          </div>
          <hlm-item-separator />
          <div hlmItem size="sm">
            <div hlmItemContent>
              <div hlmItemTitle>Shared with me</div>
            </div>
            <div hlmItemActions>
              <span hlmBadge variant="secondary">3</span>
              <ng-icon name="lucideChevronRight" class="size-4 text-muted-foreground" />
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class ItemDemoComponent {}