Toggle

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

export function ToggleDemo() {
    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-3">
                    <Toggle>Bold</Toggle>
                    <Toggle variant="outline">Italic</Toggle>
                    <Toggle variant="secondary">Underline</Toggle>
                </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-3">
                    <Toggle variant="outline" size="sm">
                        Small
                    </Toggle>
                    <Toggle variant="outline">Default</Toggle>
                    <Toggle variant="outline" size="lg">
                        Large
                    </Toggle>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Pressed by default</p>
                <div className="flex flex-wrap items-center gap-3">
                    <Toggle defaultPressed>Bold</Toggle>
                    <Toggle variant="outline" defaultPressed>
                        Italic
                    </Toggle>
                </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-3">
                    <Toggle disabled>Bold</Toggle>
                    <Toggle variant="outline" disabled defaultPressed>
                        Italic
                    </Toggle>
                </div>
            </div>
        </div>
    );
}

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

@Component({
    selector: 'dl-toggle-demo',
    standalone: true,
    imports: [HlmToggleImports],
    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-3">
          <button hlmToggle>Bold</button>
          <button hlmToggle variant="outline">Italic</button>
          <button hlmToggle variant="secondary">Underline</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-3">
          <button hlmToggle variant="outline" size="sm">Small</button>
          <button hlmToggle variant="outline">Default</button>
          <button hlmToggle variant="outline" size="lg">Large</button>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Pressed by default</p>
        <div class="flex flex-wrap items-center gap-3">
          <button hlmToggle [state]="'on'">Bold</button>
          <button hlmToggle variant="outline" [state]="'on'">Italic</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-3">
          <button hlmToggle [disabled]="true">Bold</button>
          <button hlmToggle variant="outline" [disabled]="true" [state]="'on'">Italic</button>
        </div>
      </div>
    </div>
  `,
})
export class ToggleDemoComponent {}