pdm-ui-kit 0.1.0 → 0.1.2

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

@@ -1,133 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<div [ngClass]="['grid w-full gap-2', className]">
-  <label *ngIf="label" [attr.for]="id" class="text-sm font-medium leading-5 text-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-background px-3 py-2 text-sm leading-5 text-foreground shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50',
-      invalid ? 'border-destructive' : 'border-input',
-      inputClassName
-    ]"
-    (input)="onInput($event)"
-    (blur)="onBlur($event)"
-  />
-  <p *ngIf="!invalid && helperText" class="text-sm leading-5 text-muted-foreground">{{ helperText }}</p>
-  <p *ngIf="invalid && errorText" class="text-sm leading-5 text-destructive">{{ errorText }}</p>
-</div>

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

@@ -1,33 +0,0 @@
-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

@@ -1,31 +0,0 @@
-<div
-  [ngClass]="[
-    'flex h-9 w-full items-center rounded-[8px] border bg-[hsl(var(--background))] text-sm shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-within:ring-1 focus-within:ring-[hsl(var(--foreground))]',
-    invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',
-    disabled ? 'opacity-50' : '',
-    className
-  ]"
->
-  <div *ngIf="prefixText || prefixIcon" class="inline-flex h-full items-center gap-2 border-r border-[hsl(var(--input))] pl-3 pr-2 text-[hsl(var(--muted-foreground))]">
-    <pdm-icon *ngIf="prefixIcon" [name]="prefixIcon" [size]="16"></pdm-icon>
-    <span *ngIf="prefixText" class="text-sm leading-5">{{ prefixText }}</span>
-    <ng-content select="[pdmInputGroupPrefix]"></ng-content>
-  </div>
-
-  <input
-    [id]="id"
-    [type]="type"
-    [value]="value"
-    [placeholder]="placeholder"
-    [disabled]="disabled"
-    [attr.aria-invalid]="invalid"
-    class="h-full min-w-0 flex-1 border-0 bg-transparent px-2 py-2 text-sm leading-5 outline-none placeholder:text-[hsl(var(--muted-foreground))]"
-    (input)="onInput($event)"
-  />
-
-  <div *ngIf="suffixText || suffixIcon" class="inline-flex h-full items-center gap-2 border-l border-[hsl(var(--input))] pl-2 pr-3 text-[hsl(var(--muted-foreground))]">
-    <pdm-icon *ngIf="suffixIcon" [name]="suffixIcon" [size]="16"></pdm-icon>
-    <span *ngIf="suffixText" class="text-sm font-medium leading-5">{{ suffixText }}</span>
-    <ng-content select="[pdmInputGroupSuffix]"></ng-content>
-  </div>
-</div>

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

@@ -1,26 +0,0 @@
-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() className = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  onInput(event: Event): void {
-    this.valueChange.emit((event.target as HTMLInputElement).value);
-  }
-}

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

@@ -1,25 +0,0 @@
-<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

@@ -1,146 +0,0 @@
-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

@@ -1,64 +0,0 @@
-<div [ngClass]="['grid w-full gap-2', className]">
-  <label *ngIf="label" [attr.for]="id" class="text-sm font-medium leading-5 text-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-background px-3 py-2 pr-10 text-sm leading-5 text-foreground shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none ring-offset-background placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50',
-        invalid ? 'border-destructive' : 'border-input',
-        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-muted-foreground outline-none transition-colors hover:text-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-muted-foreground">{{ helperText }}</p>
-  <p *ngIf="invalid && errorText" class="text-sm leading-5 text-destructive">{{ errorText }}</p>
-</div>

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

@@ -1,46 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-<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>

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

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { PdmMenuItem } from '../dropdown-menu/dropdown-menu.component';
-
-export interface PdmMenubarItem {
-  label: string;
-  items: PdmMenuItem[];
-}
-
-@Component({
-  selector: 'pdm-menubar',
-  templateUrl: './menubar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmMenubarComponent {
-  @Input() menus: PdmMenubarItem[] = [];
-  @Input() className = '';
-  @Output() itemSelect = new EventEmitter<string>();
-
-  openIndex = -1;
-
-  toggle(index: number): void {
-    this.openIndex = this.openIndex === index ? -1 : index;
-  }
-
-  select(value: string): void {
-    this.itemSelect.emit(value);
-    this.openIndex = -1;
-  }
-}

package/src/lib/components/native-select/native-select.component.html

@@ -1,17 +0,0 @@
-<div class="relative" [ngClass]="className">
-  <select
-    [id]="id"
-    [value]="value"
-    [disabled]="disabled"
-    [attr.aria-invalid]="invalid"
-    (change)="onChange($event)"
-    [ngClass]="[
-      'flex h-9 w-full appearance-none rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 pr-9 text-sm leading-5 shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',
-      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]'
-    ]"
-  >
-    <option value="" disabled>{{ placeholder }}</option>
-    <option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
-  </select>
-  <pdm-icon className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))]" name="chevron-down" [size]="16"></pdm-icon>
-</div>