pdm-ui-kit 0.1.3 → 0.1.5

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

@@ -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>

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

@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmNativeSelectOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-native-select',
-  templateUrl: './native-select.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmNativeSelectComponent {
-  @Input() id = '';
-  @Input() value = '';
-  @Input() disabled = false;
-  @Input() invalid = false;
-  @Input() options: PdmNativeSelectOption[] = [];
-  @Input() placeholder = 'Select an option';
-  @Input() className = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  onChange(event: Event): void {
-    this.valueChange.emit((event.target as HTMLSelectElement).value);
-  }
-}

package/src/lib/components/navigation-menu/navigation-menu.component.html

@@ -1,15 +0,0 @@
-<nav [ngClass]="['relative z-10 flex max-w-max flex-1 items-center justify-center', className]">
-  <ul class="group flex flex-1 list-none items-center justify-center space-x-1">
-    <li *ngFor="let item of items">
-      <a
-        [href]="item.href || '#'"
-        [ngClass]="[
-          'group inline-flex h-9 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',
-          item.active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'text-[hsl(var(--foreground))]'
-        ]"
-      >
-        {{ item.label }}
-      </a>
-    </li>
-  </ul>
-</nav>

package/src/lib/components/navigation-menu/navigation-menu.component.ts

@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export interface PdmNavigationItem {
-  label: string;
-  href?: string;
-  active?: boolean;
-}
-
-@Component({
-  selector: 'pdm-navigation-menu',
-  templateUrl: './navigation-menu.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmNavigationMenuComponent {
-  @Input() items: PdmNavigationItem[] = [];
-  @Input() className = '';
-}

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

@@ -1,30 +0,0 @@
-<nav aria-label="Pagination" [ngClass]="['mx-auto flex w-full justify-center', className]">
-  <ul class="flex items-center gap-1">
-    <li>
-      <button type="button" class="inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50" [disabled]="page <= 1" (click)="setPage(page - 1)">
-        <pdm-icon name="chevron-left" [size]="14"></pdm-icon>
-        Previous
-      </button>
-    </li>
-    <li *ngFor="let pageNumber of visiblePages">
-      <button
-        type="button"
-        [ngClass]="[
-          'inline-flex h-6 min-w-[24px] items-center justify-center rounded-md px-2 text-sm',
-          pageNumber === page
-            ? 'border border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]'
-            : 'text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'
-        ]"
-        (click)="setPage(pageNumber)"
-      >
-        {{ pageNumber }}
-      </button>
-    </li>
-    <li>
-      <button type="button" class="inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50" [disabled]="page >= pageCount" (click)="setPage(page + 1)">
-        Next
-        <pdm-icon name="chevron-right" [size]="14"></pdm-icon>
-      </button>
-    </li>
-  </ul>
-</nav>

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

@@ -1,37 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-pagination',
-  templateUrl: './pagination.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmPaginationComponent {
-  @Input() page = 1;
-  @Input() pageCount = 1;
-  @Input() maxVisible = 5;
-  @Input() className = '';
-
-  @Output() pageChange = new EventEmitter<number>();
-
-  get visiblePages(): number[] {
-    const total = Math.max(1, this.pageCount);
-    const visible = Math.max(1, this.maxVisible);
-    const half = Math.floor(visible / 2);
-    let start = Math.max(1, this.page - half);
-    let end = Math.min(total, start + visible - 1);
-
-    if (end - start + 1 < visible) {
-      start = Math.max(1, end - visible + 1);
-    }
-
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  }
-
-  setPage(next: number): void {
-    if (next < 1 || next > this.pageCount || next === this.page) {
-      return;
-    }
-
-    this.pageChange.emit(next);
-  }
-}

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

@@ -1,6 +0,0 @@
-<div class="relative inline-block" [ngClass]="className">
-  <button *ngIf="showTrigger" type="button" class="inline-flex h-8 items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-3 text-sm font-medium leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]" [attr.aria-expanded]="open" (click)="toggle()">{{ triggerText }}</button>
-  <div *ngIf="open || !showTrigger" [ngClass]="['absolute left-0 top-full z-30 mt-2 min-w-[320px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0px_4px_6px_0px_rgba(0,0,0,0.09)]', panelClassName]">
-    <ng-content></ng-content>
-  </div>
-</div>

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

@@ -1,40 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-popover',
-  templateUrl: './popover.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmPopoverComponent {
-  @Input() open = false;
-  @Input() triggerText = 'Open';
-  @Input() className = '';
-  @Input() panelClassName = '';
-  @Input() showTrigger = true;
-  @Output() openChange = new EventEmitter<boolean>();
-
-  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
-
-  toggle(): void {
-    this.open = !this.open;
-    this.openChange.emit(this.open);
-  }
-
-  @HostListener('document:keydown.escape')
-  onEsc(): void {
-    if (this.open) {
-      this.open = false;
-      this.openChange.emit(false);
-    }
-  }
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent): void {
-    if (!this.open) return;
-    const target = event.target as Node | null;
-    if (target && !this.elementRef.nativeElement.contains(target)) {
-      this.open = false;
-      this.openChange.emit(false);
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-<div
-  role="progressbar"
-  [attr.aria-valuemin]="0"
-  [attr.aria-valuemax]="max"
-  [attr.aria-valuenow]="indeterminate ? null : value"
-  [ngClass]="['relative h-1.5 w-full overflow-hidden rounded-full bg-[hsl(var(--muted))]', className]"
->
-  <div [ngClass]="['h-full bg-[hsl(var(--foreground))] transition-all', indeterminate ? 'animate-pulse' : '']" [style.width]="width"></div>
-</div>

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

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-progress',
-  templateUrl: './progress.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmProgressComponent {
-  @Input() value = 0;
-  @Input() max = 100;
-  @Input() indeterminate = false;
-  @Input() className = '';
-
-  get width(): string {
-    if (this.indeterminate) return '100%';
-    const safeMax = this.max > 0 ? this.max : 100;
-    const pct = Math.min(100, Math.max(0, (this.value / safeMax) * 100));
-    return pct + '%';
-  }
-}

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

@@ -1,25 +0,0 @@
-<div
-  role="radiogroup"
-  [ngClass]="[
-    'gap-2',
-    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',
-    className
-  ]"
->
-  <label *ngFor="let option of options" [attr.for]="optionId(option)" class="inline-flex cursor-pointer items-center gap-2">
-    <input
-      [id]="optionId(option)"
-      type="radio"
-      [name]="name"
-      [value]="option.value"
-      [checked]="value === option.value"
-      [disabled]="option.disabled"
-      class="peer sr-only"
-      (change)="onChange($event)"
-    />
-    <span class="relative block h-4 w-4 rounded-full border border-[hsl(var(--input))] bg-[hsl(var(--background))] peer-checked:border-[hsl(var(--foreground))] peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))]">
-      <span class="absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))] peer-checked:block"></span>
-    </span>
-    <span class="text-sm leading-5 text-[hsl(var(--foreground))]">{{ option.label }}</span>
-  </label>
-</div>

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

@@ -1,30 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmRadioOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-radio-group',
-  templateUrl: './radio-group.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmRadioGroupComponent {
-  @Input() name = 'pdm-radio-group';
-  @Input() value = '';
-  @Input() options: PdmRadioOption[] = [];
-  @Input() direction: 'vertical' | 'horizontal' = 'vertical';
-  @Input() className = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  optionId(option: PdmRadioOption): string {
-    return `${this.name}-${option.value}`;
-  }
-
-  onChange(event: Event): void {
-    this.valueChange.emit((event.target as HTMLInputElement).value);
-  }
-}