Spinner

import {Button, Spinner} from '@stroeer-labs/design-library/react';

export function SpinnerDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Default</p>
                <Spinner />
            </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-4">
                    <Spinner className="size-4" />
                    <Spinner className="size-6" />
                    <Spinner className="size-8" />
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Color</p>
                <div className="flex flex-wrap items-center gap-4">
                    <Spinner className="size-6 text-muted-foreground" />
                    <Spinner className="size-6 text-primary" />
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Busy button</p>
                <div className="flex flex-wrap items-center gap-3">
                    {/* Visible progressive label carries the meaning: hide the spinner from AT
                        (its built-in "Loading" would pollute the button name) and mark the
                        button busy — see the spinner doc's Busy buttons section. */}
                    <Button disabled aria-busy="true">
                        <Spinner aria-hidden="true" />
                        Sending…
                    </Button>
                    <Button variant="outline" disabled aria-busy="true">
                        <Spinner aria-hidden="true" />
                        Processing…
                    </Button>
                </div>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmButtonImports, SpinnerImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-spinner-demo',
    standalone: true,
    imports: [HlmButtonImports, SpinnerImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Default</p>
        <dl-spinner />
      </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-4">
          <dl-spinner class="size-4" />
          <dl-spinner class="size-6" />
          <dl-spinner class="size-8" />
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Color</p>
        <div class="flex flex-wrap items-center gap-4">
          <dl-spinner class="size-6 text-muted-foreground" />
          <dl-spinner class="size-6 text-primary" />
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Busy button</p>
        <div class="flex flex-wrap items-center gap-3">
          <!-- Visible progressive label carries the meaning: hide the spinner from AT
               (its built-in "Loading" would pollute the button name) and mark the
               button busy — see the spinner doc's Busy buttons section. -->
          <button hlmBtn disabled aria-busy="true">
            <dl-spinner aria-hidden="true" />
            Sending…
          </button>
          <button hlmBtn variant="outline" disabled aria-busy="true">
            <dl-spinner aria-hidden="true" />
            Processing…
          </button>
        </div>
      </div>
    </div>
  `,
})
export class SpinnerDemoComponent {}