Chip

import {Chip} from '@stroeer-labs/design-library/react';
import {useState} from 'react';

const FILTERS = ['Video', 'Display', 'Audio', 'DOOH'];

export function ChipDemo() {
    const [active, setActive] = useState<ReadonlyArray<string>>(['Video']);

    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-wrap items-center gap-1.5">
                    <Chip>Outline</Chip>
                    <Chip variant="secondary">Secondary</Chip>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Sizes</p>
                <div className="flex flex-wrap items-center gap-1.5">
                    <Chip size="sm">Small</Chip>
                    <Chip>Default</Chip>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Toggle chips (aria-pressed drives the selected accent)</p>
                <div className="flex flex-wrap items-center gap-1.5">
                    {FILTERS.map((filter) => (
                        <Chip
                            key={filter}
                            aria-pressed={active.includes(filter)}
                            onClick={() => setActive(active.includes(filter) ? active.filter((item) => item !== filter) : [...active, filter])}
                        >
                            {filter}
                        </Chip>
                    ))}
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <div className="flex flex-wrap items-center gap-1.5">
                    <Chip disabled>Outline</Chip>
                    <Chip disabled aria-pressed>
                        Selected
                    </Chip>
                </div>
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component, signal} from '@angular/core';
import {ChipImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-chip-demo',
    standalone: true,
    imports: [ChipImports],
    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-wrap items-center gap-1.5">
          <button dlChip>Outline</button>
          <button dlChip variant="secondary">Secondary</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Sizes</p>
        <div class="flex flex-wrap items-center gap-1.5">
          <button dlChip size="sm">Small</button>
          <button dlChip>Default</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Toggle chips (aria-pressed drives the selected accent)</p>
        <div class="flex flex-wrap items-center gap-1.5">
          @for (filter of filters; track filter) {
            <button dlChip [attr.aria-pressed]="active().includes(filter)" (click)="toggle(filter)">{{ filter }}</button>
          }
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <div class="flex flex-wrap items-center gap-1.5">
          <button dlChip [disabled]="true">Outline</button>
          <button dlChip [disabled]="true" aria-pressed="true">Selected</button>
        </div>
      </div>
    </div>
  `,
})
export class ChipDemoComponent {
    protected readonly filters = ['Video', 'Display', 'Audio', 'DOOH'];
    protected readonly active = signal<ReadonlyArray<string>>(['Video']);

    protected toggle(filter: string): void {
        this.active.update((current) => (current.includes(filter) ? current.filter((item) => item !== filter) : [...current, filter]));
    }
}