pdm-ui-kit 0.1.2 → 0.1.4

package/src/lib/components/icon/icon.component.ts

@@ -0,0 +1,133 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmIconLibrary = 'lucide' | 'tabler' | 'hugeicons' | 'phosphor' | 'remix';
+
+export type PdmIconName =
+  | 'command'
+  | 'check'
+  | 'check-circle'
+  | 'circle'
+  | 'dot'
+  | 'x'
+  | 'alert-circle'
+  | 'info'
+  | 'loader-2'
+  | 'menu'
+  | 'search'
+  | 'calendar'
+  | 'panel-left'
+  | 'monitor'
+  | 'laptop'
+  | 'sun'
+  | 'moon'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'chevrons-left'
+  | 'chevrons-right'
+  | 'chevrons-up-down'
+  | 'arrow-up-down'
+  | 'ellipsis'
+  | 'filter'
+  | 'sort-asc'
+  | 'sort-desc'
+  | 'plus'
+  | 'minus'
+  | 'copy'
+  | 'pencil'
+  | 'trash-2'
+  | 'download'
+  | 'upload'
+  | 'home'
+  | 'mail'
+  | 'phone'
+  | 'log-in'
+  | 'log-out'
+  | 'user'
+  | 'settings'
+  | 'credit-card'
+  | 'smile'
+  | 'calculator'
+  | 'external-link'
+  | 'folder'
+  | 'arrow-up-right';
+
+@Component({
+  selector: 'pdm-icon',
+  templateUrl: './icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmIconComponent {
+  @Input() name: PdmIconName | string = 'check';
+  @Input() library: PdmIconLibrary = 'lucide';
+  @Input() assetUrl: string | null = null;
+  @Input() size = 16;
+  @Input() strokeWidth = 1.5;
+  @Input() className = '';
+  @Input() ariaLabel: string | null = null;
+  @Input() decorative = false;
+
+  get resolvedStrokeWidth(): number {
+    if (this.strokeWidth) {
+      return this.strokeWidth;
+    }
+
+    if (this.library === 'phosphor') {
+      return 1.6;
+    }
+
+    if (this.library === 'tabler') {
+      return 1.8;
+    }
+
+    return 1.5;
+  }
+
+  get iconKey(): string {
+    const raw = `${this.name || ''}`.trim();
+    if (!raw) {
+      return 'circle';
+    }
+
+    const trimmed = raw.replace(/^(lucide|tabler|hugeicons|phosphor|remix)\//, '');
+    const aliases = this.aliasMapByLibrary[this.library] ?? {};
+    return aliases[trimmed] ?? trimmed;
+  }
+
+  private readonly aliasMapByLibrary: Record<PdmIconLibrary, Record<string, string>> = {
+    lucide: {},
+    tabler: {
+      'alert-triangle': 'alert-circle',
+      'chevron-down': 'chevron-down',
+      'chevron-right': 'chevron-right',
+      'user-circle': 'user',
+      'settings-2': 'settings',
+      'external-link': 'external-link'
+    },
+    hugeicons: {
+      'alert-02': 'alert-circle',
+      'user-circle': 'user',
+      'search-01': 'search',
+      'settings-01': 'settings',
+      'arrow-right-01': 'chevron-right',
+      'arrow-down-01': 'chevron-down'
+    },
+    phosphor: {
+      'warning-circle': 'alert-circle',
+      'caret-down': 'chevron-down',
+      'caret-right': 'chevron-right',
+      'user-circle': 'user',
+      gear: 'settings',
+      'arrow-square-out': 'external-link'
+    },
+    remix: {
+      'alert-line': 'alert-circle',
+      'arrow-right-line': 'chevron-right',
+      'arrow-down-s-line': 'chevron-down',
+      'external-link-line': 'external-link',
+      'user-line': 'user',
+      'settings-3-line': 'settings'
+    }
+  };
+}

package/src/lib/components/input/input.component.html

@@ -0,0 +1,25 @@
+<div [ngClass]="['grid w-full gap-3', className]">
+  <label *ngIf="label" [attr.for]="id" class="text-sm font-medium leading-5 text-[hsl(var(--foreground))]">{{ label }}</label>
+  <input
+    [id]="id"
+    [type]="type"
+    [value]="value"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    [readonly]="readonly"
+    [required]="required"
+    [attr.aria-invalid]="invalid"
+    [ngClass]="[
+      'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 file:mr-1 file:border-0 file:bg-transparent file:px-[6px] file:py-px file:text-sm file:font-medium file:leading-5 file:text-[hsl(var(--foreground))]',
+      type === 'file' ? 'text-sm leading-5' : 'text-base leading-6',
+      invalid
+        ? 'border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]'
+        : 'border-[hsl(var(--input))] focus:border-[hsl(var(--ring))] focus:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]',
+      inputClassName
+    ]"
+    (input)="onInput($event)"
+    (blur)="onBlur($event)"
+  />
+  <p *ngIf="!invalid && helperText" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ helperText }}</p>
+  <p *ngIf="invalid && errorText" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ errorText }}</p>
+</div>

package/src/lib/components/input/input.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-input',
+  templateUrl: './input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmInputComponent {
+  @Input() id = '';
+  @Input() type = 'text';
+  @Input() value = '';
+  @Input() placeholder = '';
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() invalid = false;
+  @Input() className = '';
+  @Input() inputClassName = '';
+  @Input() label = '';
+  @Input() helperText = '';
+  @Input() errorText = '';
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() blurred = new EventEmitter<FocusEvent>();
+
+  onInput(event: Event): void {
+    this.valueChange.emit((event.target as HTMLInputElement).value);
+  }
+
+  onBlur(event: FocusEvent): void {
+    this.blurred.emit(event);
+  }
+}

package/src/lib/components/input-group/input-group.component.html

@@ -0,0 +1,59 @@
+<div
+  [ngClass]="[
+    'flex w-full items-center gap-2',
+    disabled ? 'opacity-50' : '',
+    className
+  ]"
+>
+  <div
+    [ngClass]="[
+      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 text-base leading-6 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-[border-color,box-shadow]',
+      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',
+      !invalid && !disabled ? 'focus-within:border-[hsl(var(--ring))] focus-within:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]' : '',
+      invalid && !disabled ? 'focus-within:border-[hsl(var(--destructive))] focus-within:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]' : '',
+      disabled ? 'cursor-not-allowed' : ''
+    ]"
+  >
+    <div
+      *ngIf="prefixText || prefixIcon"
+      class="inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm leading-5 text-[hsl(var(--muted-foreground))]"
+    >
+      <pdm-icon *ngIf="prefixIcon" [name]="prefixIcon" [size]="16"></pdm-icon>
+      <span *ngIf="prefixText">{{ prefixText }}</span>
+      <ng-content select="[pdmInputGroupPrefix]"></ng-content>
+    </div>
+
+    <input
+      [id]="id"
+      [type]="type"
+      [value]="value"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [attr.aria-invalid]="invalid"
+      [ngClass]="[
+        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-base leading-6 text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground))]',
+        type === 'file' ? 'text-sm leading-5 file:mr-1 file:border-0 file:bg-transparent file:px-[6px] file:py-px file:text-sm file:font-medium file:leading-5 file:text-[hsl(var(--foreground))]' : ''
+      ]"
+      (input)="onInput($event)"
+    />
+
+    <div
+      *ngIf="!buttonText && (suffixText || suffixIcon)"
+      class="inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm leading-5 text-[hsl(var(--muted-foreground))]"
+    >
+      <pdm-icon *ngIf="suffixIcon" [name]="suffixIcon" [size]="16"></pdm-icon>
+      <span *ngIf="suffixText" class="font-medium">{{ suffixText }}</span>
+      <ng-content select="[pdmInputGroupSuffix]"></ng-content>
+    </div>
+  </div>
+
+  <button
+    *ngIf="buttonText"
+    type="button"
+    [disabled]="disabled"
+    class="inline-flex h-9 shrink-0 items-center justify-center rounded-[10px] border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 py-2 text-sm font-medium leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed"
+    (click)="onButtonClick($event)"
+  >
+    {{ buttonText }}
+  </button>
+</div>

package/src/lib/components/input-group/input-group.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-input-group',
+  templateUrl: './input-group.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmInputGroupComponent {
+  @Input() id = '';
+  @Input() type = 'text';
+  @Input() value = '';
+  @Input() placeholder = '';
+  @Input() disabled = false;
+  @Input() invalid = false;
+  @Input() prefixText = '';
+  @Input() suffixText = '';
+  @Input() prefixIcon = '';
+  @Input() suffixIcon = '';
+  @Input() buttonText = '';
+  @Input() className = '';
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() buttonClick = new EventEmitter<MouseEvent>();
+
+  onInput(event: Event): void {
+    this.valueChange.emit((event.target as HTMLInputElement).value);
+  }
+
+  onButtonClick(event: MouseEvent): void {
+    this.buttonClick.emit(event);
+  }
+}

package/src/lib/components/input-otp/input-otp.component.html

@@ -0,0 +1,25 @@
+<div [ngClass]="['inline-flex items-center justify-center', className]" (paste)="onPaste($event)">
+  <ng-container *ngFor="let value of values; let index = index; trackBy: trackByIndex">
+    <input
+      #otpInput
+      [class]="getInputClasses(index)"
+      [value]="value"
+      [disabled]="disabled"
+      inputmode="numeric"
+      maxlength="1"
+      [attr.name]="'otp-digit-' + index"
+      autocomplete="off"
+      autocapitalize="off"
+      spellcheck="false"
+      [attr.aria-invalid]="invalid"
+      [attr.aria-label]="'OTP digit ' + (index + 1)"
+      (input)="onInput(index, $event)"
+      (keydown)="onKeyDown(index, $event)"
+    />
+    <span
+      *ngIf="shouldShowSeparator(index)"
+      class="mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80"
+      aria-hidden="true"
+    ></span>
+  </ng-container>
+</div>

package/src/lib/components/input-otp/input-otp.component.ts

@@ -0,0 +1,146 @@
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChildren } from '@angular/core';
+
+@Component({
+  selector: 'pdm-input-otp',
+  templateUrl: './input-otp.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmInputOtpComponent {
+  @Input() length = 6;
+  @Input() groupSize = 3;
+  @Input() disabled = false;
+  @Input() invalid = false;
+  @Input() className = '';
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() completed = new EventEmitter<string>();
+
+  @ViewChildren('otpInput') private readonly inputs?: QueryList<ElementRef<HTMLInputElement>>;
+
+  values: string[] = Array.from({ length: this.length }, () => '');
+
+  ngOnChanges(): void {
+    if (this.values.length !== this.length) {
+      this.values = Array.from({ length: this.length }, (_, index) => this.values[index] ?? '');
+    }
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+
+  onInput(index: number, event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const char = (input.value || '').replace(/\D+/g, '').slice(-1);
+
+    this.values[index] = char;
+    input.value = char;
+    this.emit();
+
+    if (char) {
+      this.focusInput(index + 1, true);
+    }
+  }
+
+  onKeyDown(index: number, event: KeyboardEvent): void {
+    if (event.key === 'Backspace' && !this.values[index]) {
+      this.focusInput(index - 1);
+      return;
+    }
+
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.focusInput(index - 1);
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.focusInput(index + 1);
+    }
+  }
+
+  onPaste(event: ClipboardEvent): void {
+    event.preventDefault();
+
+    const pastedText = (event.clipboardData?.getData('text') ?? '').replace(/\D+/g, '').slice(0, this.length);
+
+    if (!pastedText) {
+      return;
+    }
+
+    this.values = Array.from({ length: this.length }, (_, index) => pastedText[index] ?? '');
+    this.emit();
+
+    const nextIndex = Math.min(pastedText.length, this.length - 1);
+    this.focusInput(nextIndex);
+  }
+
+  getInputClasses(index: number): string {
+    const classes = [
+      'h-9 w-9 appearance-none border bg-background text-center text-sm font-normal text-foreground outline-none transition focus:outline-none focus-visible:outline-none',
+      'shadow-[0_1px_2px_0_rgba(0,0,0,0.1)]',
+      'focus:border-input focus:ring-1 focus:ring-primary/30',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ];
+
+    if (this.invalid) {
+      classes.push('border-destructive focus:border-destructive focus:ring-destructive');
+    } else {
+      classes.push('border-input');
+    }
+
+    if (this.isGroupStart(index)) {
+      classes.push('rounded-l-md border-l');
+    } else {
+      classes.push('border-l-0');
+    }
+
+    if (this.isGroupEnd(index)) {
+      classes.push('rounded-r-md');
+    }
+
+    return classes.join(' ');
+  }
+
+  shouldShowSeparator(index: number): boolean {
+    return this.groupSize > 0 && (index + 1) % this.groupSize === 0 && index < this.length - 1;
+  }
+
+  private isGroupStart(index: number): boolean {
+    return this.groupSize <= 0 || index % this.groupSize === 0;
+  }
+
+  private isGroupEnd(index: number): boolean {
+    if (this.groupSize <= 0) {
+      return index === this.length - 1;
+    }
+    return (index + 1) % this.groupSize === 0 || index === this.length - 1;
+  }
+
+  private emit(): void {
+    const value = this.values.join('');
+    this.valueChange.emit(value);
+
+    if (value.length === this.length && !this.values.includes('')) {
+      this.completed.emit(value);
+    }
+  }
+
+  private focusInput(index: number, deferred = false): void {
+    if (deferred) {
+      requestAnimationFrame(() => this.focusInput(index, false));
+      return;
+    }
+
+    if (!this.inputs || index < 0 || index >= this.length) {
+      return;
+    }
+
+    const input = this.inputs.get(index)?.nativeElement;
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }
+}

package/src/lib/components/input-password/input-password.component.html

@@ -0,0 +1,66 @@
+<div [ngClass]="['grid w-full gap-3', className]">
+  <label *ngIf="label" [attr.for]="id" class="text-sm font-medium leading-5 text-[hsl(var(--foreground))]">{{ label }}</label>
+  <div class="relative">
+    <input
+      [id]="id"
+      [type]="inputType"
+      [value]="value"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [readonly]="readonly"
+      [required]="required"
+      [attr.aria-invalid]="invalid"
+      [ngClass]="[
+        'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 pr-10 text-base leading-6 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        invalid
+          ? 'border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]'
+          : 'border-[hsl(var(--input))] focus:border-[hsl(var(--ring))] focus:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]',
+        inputClassName
+      ]"
+      (input)="onInput($event)"
+      (blur)="onBlur($event)"
+    />
+    <button
+      type="button"
+      class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border-0 bg-transparent p-0 text-[hsl(var(--muted-foreground))] outline-none transition-colors hover:text-[hsl(var(--foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+      [disabled]="disabled"
+      [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'"
+      (click)="toggleVisibility()"
+    >
+      <svg
+        *ngIf="!showPassword"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-4 w-4"
+      >
+        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path>
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+      <svg
+        *ngIf="showPassword"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-4 w-4"
+      >
+        <path d="M3 3l18 18"></path>
+        <path d="M10.58 10.58a2 2 0 1 0 2.83 2.83"></path>
+        <path d="M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2"></path>
+        <path d="M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54"></path>
+      </svg>
+    </button>
+  </div>
+  <p *ngIf="!invalid && helperText" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ helperText }}</p>
+  <p *ngIf="invalid && errorText" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ errorText }}</p>
+</div>

package/src/lib/components/input-password/input-password.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-input-password',
+  templateUrl: './input-password.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmInputPasswordComponent {
+  @Input() id = '';
+  @Input() value = '';
+  @Input() placeholder = '';
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() invalid = false;
+  @Input() className = '';
+  @Input() inputClassName = '';
+  @Input() label = '';
+  @Input() helperText = '';
+  @Input() errorText = '';
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() blurred = new EventEmitter<FocusEvent>();
+
+  showPassword = false;
+
+  get inputType(): 'text' | 'password' {
+    return this.showPassword ? 'text' : 'password';
+  }
+
+  onInput(event: Event): void {
+    this.valueChange.emit((event.target as HTMLInputElement).value);
+  }
+
+  onBlur(event: FocusEvent): void {
+    this.blurred.emit(event);
+  }
+
+  toggleVisibility(): void {
+    if (this.disabled) {
+      return;
+    }
+
+    this.showPassword = !this.showPassword;
+  }
+}

package/src/lib/components/item/item.component.html

@@ -0,0 +1,10 @@
+<div
+  [ngClass]="[
+    'relative flex w-full select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+    selected ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'text-[hsl(var(--foreground))]',
+    disabled ? 'pointer-events-none opacity-50' : 'hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',
+    className
+  ]"
+>
+  <ng-content></ng-content>
+</div>

package/src/lib/components/item/item.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pdm-item',
+  templateUrl: './item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmItemComponent {
+  @Input() className = '';
+  @Input() disabled = false;
+  @Input() selected = false;
+}

package/src/lib/components/kbd/kbd.component.html

@@ -0,0 +1,3 @@
+<kbd [ngClass]="['inline-flex h-6 min-w-[24px] items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 font-mono text-xs font-medium text-[hsl(var(--muted-foreground))]', className]">
+  <ng-content></ng-content>
+</kbd>

package/src/lib/components/kbd/kbd.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pdm-kbd',
+  templateUrl: './kbd.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmKbdComponent {
+  @Input() className = '';
+}

package/src/lib/components/label/label.component.html

@@ -0,0 +1,7 @@
+<label
+  [attr.for]="forId"
+  [ngClass]="['text-sm font-medium leading-5 text-[hsl(var(--foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]"
+>
+  <ng-content></ng-content>
+  <span *ngIf="required" class="ml-1 text-[hsl(var(--destructive))]">*</span>
+</label>

package/src/lib/components/label/label.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pdm-label',
+  templateUrl: './label.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmLabelComponent {
+  @Input() forId = '';
+  @Input() required = false;
+  @Input() className = '';
+}

package/src/lib/components/menubar/menubar.component.html

@@ -0,0 +1,16 @@
+<nav role="menubar" [ngClass]="['inline-flex h-9 items-center gap-0.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]', className]">
+  <div *ngFor="let menu of menus; let i = index" class="relative">
+    <button type="button" class="inline-flex h-7 items-center rounded-sm px-3 text-sm leading-5 text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))]" (click)="toggle(i)">{{ menu.label }}</button>
+    <div *ngIf="openIndex === i" class="absolute left-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-[0_4px_6px_rgba(0,0,0,0.09)]">
+      <button
+        *ngFor="let item of menu.items"
+        type="button"
+        [disabled]="item.disabled"
+        class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm leading-5 outline-none hover:bg-[hsl(var(--accent))] disabled:pointer-events-none disabled:opacity-50"
+        (click)="select(item.value)"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+  </div>
+</nav>