pdm-ui-kit 0.1.0

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,64 @@
+<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+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);
+  }
+}

package/src/lib/components/scroll-area/scroll-area.component.html

@@ -0,0 +1,5 @@
+<div [style.maxHeight]="maxHeight" [ngClass]="['relative overflow-auto rounded-[var(--radius)] border border-[hsl(var(--border))]', className]">
+  <div class="p-3">
+    <ng-content></ng-content>
+  </div>
+</div>