Input

import {Input, Label} from '@stroeer-labs/design-library/react';

export function InputDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Default</p>
                <Input type="email" placeholder="Email" className="max-w-sm" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">With label</p>
                <div className="grid w-full max-w-sm gap-2">
                    <Label htmlFor="input-demo-name">Name</Label>
                    <Input id="input-demo-name" placeholder="Jane Doe" />
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <Input placeholder="Disabled" disabled className="max-w-sm" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Floating (over a map — bg-muted stands in for it)</p>
                <div className="rounded-lg bg-muted p-4">
                    <Input variant="floating" aria-label="Search for a place" placeholder="City, street, postal code" className="max-w-sm" />
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Invalid</p>
                <Input placeholder="Invalid" aria-invalid className="max-w-sm" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">File</p>
                <Input type="file" className="max-w-sm" />
            </div>
        </div>
    );
}

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

@Component({
    selector: 'dl-input-demo',
    standalone: true,
    imports: [HlmInputImports, HlmLabelImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Default</p>
        <input hlmInput type="email" placeholder="Email" class="max-w-sm" />
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">With label</p>
        <div class="grid w-full max-w-sm gap-2">
          <label hlmLabel for="input-demo-name-ng">Name</label>
          <input hlmInput id="input-demo-name-ng" placeholder="Jane Doe" />
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <input hlmInput placeholder="Disabled" disabled class="max-w-sm" />
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Floating (over a map — bg-muted stands in for it)</p>
        <div class="rounded-lg bg-muted p-4">
          <input hlmInput variant="floating" aria-label="Search for a place" placeholder="City, street, postal code" class="max-w-sm" />
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Invalid</p>
        <input hlmInput placeholder="Invalid" aria-invalid="true" class="max-w-sm" />
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">File</p>
        <input hlmInput type="file" class="max-w-sm" />
      </div>
    </div>
  `,
})
export class InputDemoComponent {}