Input Group

import {InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea} from '@stroeer-labs/design-library/react';
import {SearchIcon} from 'lucide-react';

export function InputGroupDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Icon prefix</p>
                <InputGroup className="max-w-sm">
                    <InputGroupAddon>
                        <SearchIcon aria-hidden="true" />
                    </InputGroupAddon>
                    <InputGroupInput aria-label="Search" placeholder="Search…" />
                </InputGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Text prefix</p>
                <InputGroup className="max-w-sm">
                    <InputGroupAddon>
                        <InputGroupText>https://</InputGroupText>
                    </InputGroupAddon>
                    <InputGroupInput aria-label="Website URL" placeholder="example.com" />
                </InputGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Button suffix</p>
                <InputGroup className="max-w-sm">
                    <InputGroupInput aria-label="Search" placeholder="Search…" />
                    <InputGroupAddon align="inline-end">
                        <InputGroupButton>Go</InputGroupButton>
                    </InputGroupAddon>
                </InputGroup>
            </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">
                    <InputGroup variant="floating" className="max-w-sm">
                        <InputGroupAddon>
                            <SearchIcon aria-hidden="true" />
                        </InputGroupAddon>
                        <InputGroupInput aria-label="Search for a place" placeholder="City, street, postal code" />
                    </InputGroup>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Invalid</p>
                <InputGroup className="max-w-sm">
                    <InputGroupAddon>
                        <SearchIcon aria-hidden="true" />
                    </InputGroupAddon>
                    <InputGroupInput aria-label="Search" aria-invalid placeholder="Invalid" />
                </InputGroup>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Textarea + block addon</p>
                <InputGroup className="max-w-sm">
                    <InputGroupTextarea aria-label="Message" placeholder="Your message…" />
                    <InputGroupAddon align="block-end">
                        <InputGroupText>0/200</InputGroupText>
                    </InputGroupAddon>
                </InputGroup>
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component} from '@angular/core';
import {NgIcon, provideIcons} from '@ng-icons/core';
import {HlmInputGroupImports} from '@stroeer-labs/design-library/angular';
import {lucideSearch} from '@ng-icons/lucide';

@Component({
    selector: 'dl-input-group-demo',
    standalone: true,
    imports: [HlmInputGroupImports, NgIcon],
    providers: [provideIcons({lucideSearch})],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Icon prefix</p>
        <hlm-input-group class="max-w-sm">
          <hlm-input-group-addon>
            <ng-icon name="lucideSearch" aria-hidden="true" />
          </hlm-input-group-addon>
          <input hlmInputGroupInput aria-label="Search" placeholder="Search…" />
        </hlm-input-group>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Text prefix</p>
        <hlm-input-group class="max-w-sm">
          <hlm-input-group-addon>
            <span hlmInputGroupText>https://</span>
          </hlm-input-group-addon>
          <input hlmInputGroupInput aria-label="Website URL" placeholder="example.com" />
        </hlm-input-group>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Button suffix</p>
        <hlm-input-group class="max-w-sm">
          <input hlmInputGroupInput aria-label="Search" placeholder="Search…" />
          <hlm-input-group-addon align="inline-end">
            <button hlmInputGroupButton>Go</button>
          </hlm-input-group-addon>
        </hlm-input-group>
      </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">
          <hlm-input-group variant="floating" class="max-w-sm">
            <hlm-input-group-addon>
              <ng-icon name="lucideSearch" aria-hidden="true" />
            </hlm-input-group-addon>
            <input hlmInputGroupInput aria-label="Search for a place" placeholder="City, street, postal code" />
          </hlm-input-group>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Invalid</p>
        <hlm-input-group class="max-w-sm">
          <hlm-input-group-addon>
            <ng-icon name="lucideSearch" aria-hidden="true" />
          </hlm-input-group-addon>
          <input hlmInputGroupInput aria-label="Search" aria-invalid="true" placeholder="Invalid" />
        </hlm-input-group>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Textarea + block addon</p>
        <hlm-input-group class="max-w-sm">
          <textarea hlmInputGroupTextarea aria-label="Message" placeholder="Your message…"></textarea>
          <hlm-input-group-addon align="block-end">
            <span hlmInputGroupText>0/200</span>
          </hlm-input-group-addon>
        </hlm-input-group>
      </div>
    </div>
  `,
})
export class InputGroupDemoComponent {}