Toggle Group

import {ToggleGroup, ToggleGroupItem} from '@stroeer-labs/design-library/react';
import {MailboxIcon, MapIcon, MapPinIcon, SatelliteIcon} from 'lucide-react';

export function ToggleGroupDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Single selection</p>
                <ToggleGroup defaultValue={['center']} variant="outline" spacing={1}>
                    <ToggleGroupItem value="left">Left</ToggleGroupItem>
                    <ToggleGroupItem value="center">Center</ToggleGroupItem>
                    <ToggleGroupItem value="right">Right</ToggleGroupItem>
                </ToggleGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Multiple selection</p>
                <ToggleGroup multiple defaultValue={['bold']} spacing={1}>
                    <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
                    <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
                    <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
                </ToggleGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Segmented (spacing 0, outline)</p>
                <ToggleGroup defaultValue={['week']} variant="outline">
                    <ToggleGroupItem value="day">Day</ToggleGroupItem>
                    <ToggleGroupItem value="week">Week</ToggleGroupItem>
                    <ToggleGroupItem value="month">Month</ToggleGroupItem>
                </ToggleGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Vertical (arrow keys follow the axis)</p>
                <ToggleGroup orientation="vertical" defaultValue={['week']} variant="outline">
                    <ToggleGroupItem value="day">Day</ToggleGroupItem>
                    <ToggleGroupItem value="week">Week</ToggleGroupItem>
                    <ToggleGroupItem value="month">Month</ToggleGroupItem>
                </ToggleGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Floating (map controls — bg-muted stands in for the map)</p>
                <div className="flex flex-wrap items-start gap-4 rounded-lg bg-muted p-4">
                    <ToggleGroup defaultValue={['sites']} variant="floating" aria-label="Pick by">
                        <ToggleGroupItem value="sites">
                            <MapPinIcon />
                            Sites
                        </ToggleGroupItem>
                        <ToggleGroupItem value="postal-codes">
                            <MailboxIcon />
                            Postal codes
                        </ToggleGroupItem>
                        <ToggleGroupItem value="districts">
                            <MapIcon />
                            Districts
                        </ToggleGroupItem>
                    </ToggleGroup>
                    <ToggleGroup orientation="vertical" defaultValue={['map']} variant="floating" aria-label="Layer">
                        <ToggleGroupItem value="map" aria-label="Map">
                            <MapIcon />
                        </ToggleGroupItem>
                        <ToggleGroupItem value="satellite" aria-label="Satellite">
                            <SatelliteIcon />
                        </ToggleGroupItem>
                    </ToggleGroup>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <ToggleGroup defaultValue={['week']} variant="outline" disabled>
                    <ToggleGroupItem value="day">Day</ToggleGroupItem>
                    <ToggleGroupItem value="week">Week</ToggleGroupItem>
                    <ToggleGroupItem value="month">Month</ToggleGroupItem>
                </ToggleGroup>
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component} from '@angular/core';
import {NgIcon, provideIcons} from '@ng-icons/core';
import {lucideMailbox, lucideMap, lucideMapPin, lucideSatellite} from '@ng-icons/lucide';
import {HlmToggleGroupImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-toggle-group-demo',
    standalone: true,
    imports: [HlmToggleGroupImports, NgIcon],
    providers: [provideIcons({lucideMailbox, lucideMap, lucideMapPin, lucideSatellite})],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Single selection</p>
        <div hlmToggleGroup value="center" variant="outline" [spacing]="1">
          <button hlmToggleGroupItem value="left">Left</button>
          <button hlmToggleGroupItem value="center">Center</button>
          <button hlmToggleGroupItem value="right">Right</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Multiple selection</p>
        <div hlmToggleGroup type="multiple" [value]="['bold']" [spacing]="1">
          <button hlmToggleGroupItem value="bold">Bold</button>
          <button hlmToggleGroupItem value="italic">Italic</button>
          <button hlmToggleGroupItem value="underline">Underline</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Segmented (spacing 0, outline)</p>
        <div hlmToggleGroup value="week" variant="outline">
          <button hlmToggleGroupItem value="day">Day</button>
          <button hlmToggleGroupItem value="week">Week</button>
          <button hlmToggleGroupItem value="month">Month</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Vertical</p>
        <div hlmToggleGroup orientation="vertical" value="week" variant="outline">
          <button hlmToggleGroupItem value="day">Day</button>
          <button hlmToggleGroupItem value="week">Week</button>
          <button hlmToggleGroupItem value="month">Month</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Floating (map controls — bg-muted stands in for the map)</p>
        <div class="flex flex-wrap items-start gap-4 rounded-lg bg-muted p-4">
          <div hlmToggleGroup value="sites" variant="floating" aria-label="Pick by">
            <button hlmToggleGroupItem value="sites"><ng-icon name="lucideMapPin" />Sites</button>
            <button hlmToggleGroupItem value="postal-codes"><ng-icon name="lucideMailbox" />Postal codes</button>
            <button hlmToggleGroupItem value="districts"><ng-icon name="lucideMap" />Districts</button>
          </div>
          <div hlmToggleGroup orientation="vertical" value="map" variant="floating" aria-label="Layer">
            <button hlmToggleGroupItem value="map" aria-label="Map"><ng-icon name="lucideMap" /></button>
            <button hlmToggleGroupItem value="satellite" aria-label="Satellite"><ng-icon name="lucideSatellite" /></button>
          </div>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <!-- group-level disabled cascades to items (verified in brain 1.0.1) — no per-item flags needed -->
        <div hlmToggleGroup value="week" variant="outline" [disabled]="true">
          <button hlmToggleGroupItem value="day">Day</button>
          <button hlmToggleGroupItem value="week">Week</button>
          <button hlmToggleGroupItem value="month">Month</button>
        </div>
      </div>
    </div>
  `,
})
export class ToggleGroupDemoComponent {}