Progress

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

export function ProgressDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-4">
                <p className="text-xs font-medium text-muted-foreground">Variants</p>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Default</span>
                        <span className="text-muted-foreground">Ongoing process</span>
                    </div>
                    <Progress value={40} aria-label="Default — ongoing process" />
                </div>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Success</span>
                        <span className="text-muted-foreground">Complete · goal reached</span>
                    </div>
                    <Progress variant="success" value={100} aria-label="Success — complete" />
                </div>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Warning</span>
                        <span className="text-muted-foreground">Approaching a limit</span>
                    </div>
                    <Progress variant="warning" value={70} aria-label="Warning — approaching a limit" />
                </div>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Destructive</span>
                        <span className="text-muted-foreground">Over limit · error</span>
                    </div>
                    <Progress variant="destructive" value={90} aria-label="Destructive — over limit" />
                </div>
            </div>
            <div className="space-y-3">
                <p className="text-xs font-medium text-muted-foreground">Values</p>
                <Progress value={25} aria-label="25 percent" />
                <Progress value={50} aria-label="50 percent" />
                <Progress value={75} aria-label="75 percent" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">App-injected gradient (indicatorClassName)</p>
                {/* App-owned gradient: its meaning is the app's, so it rides the passthrough rather
                    than being a library variant — composed here from semantic tokens. */}
                <Progress value={80} indicatorClassName="bg-linear-to-r from-attention to-brand-interactive" aria-label="Reach" />
            </div>
        </div>
    );
}

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

@Component({
    selector: 'dl-progress-demo',
    standalone: true,
    imports: [HlmProgressImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-4">
        <p class="text-xs font-medium text-muted-foreground">Variants</p>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Default</span>
            <span class="text-muted-foreground">Ongoing process</span>
          </div>
          <hlm-progress [value]="40" aria-label="Default — ongoing process"><hlm-progress-indicator /></hlm-progress>
        </div>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Success</span>
            <span class="text-muted-foreground">Complete · goal reached</span>
          </div>
          <hlm-progress [value]="100" aria-label="Success — complete"><hlm-progress-indicator variant="success" /></hlm-progress>
        </div>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Warning</span>
            <span class="text-muted-foreground">Approaching a limit</span>
          </div>
          <hlm-progress [value]="70" aria-label="Warning — approaching a limit"><hlm-progress-indicator variant="warning" /></hlm-progress>
        </div>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Destructive</span>
            <span class="text-muted-foreground">Over limit · error</span>
          </div>
          <hlm-progress [value]="90" aria-label="Destructive — over limit"><hlm-progress-indicator variant="destructive" /></hlm-progress>
        </div>
      </div>
      <div class="space-y-3">
        <p class="text-xs font-medium text-muted-foreground">Values</p>
        <hlm-progress [value]="25" aria-label="25 percent"><hlm-progress-indicator /></hlm-progress>
        <hlm-progress [value]="50" aria-label="50 percent"><hlm-progress-indicator /></hlm-progress>
        <hlm-progress [value]="75" aria-label="75 percent"><hlm-progress-indicator /></hlm-progress>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">App-injected gradient (indicatorClass)</p>
        <!-- App-owned gradient: its meaning is the app's, so it rides the passthrough rather than being
             a library variant — composed from semantic tokens. Mirrors the React progress demo exactly. -->
        <hlm-progress [value]="80" aria-label="Reach">
          <hlm-progress-indicator indicatorClass="bg-linear-to-r from-attention to-brand-interactive" />
        </hlm-progress>
      </div>
    </div>
  `,
})
export class ProgressDemoComponent {}