pdm-ui-kit 0.1.2 → 0.1.4

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>

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

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pdm-scroll-area',
+  templateUrl: './scroll-area.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmScrollAreaComponent {
+  @Input() maxHeight = '16rem';
+  @Input() className = '';
+}

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

@@ -0,0 +1,14 @@
+<select
+  [id]="id"
+  [value]="value"
+  [disabled]="disabled"
+  [attr.aria-invalid]="invalid"
+  [ngClass]="[
+    'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 text-sm leading-5 text-[hsl(var(--foreground))] 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))]',
+    className
+  ]"
+  (change)="onChange($event)"
+>
+  <option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
+</select>

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

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

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

@@ -0,0 +1,5 @@
+<div
+  [attr.role]="decorative ? 'none' : 'separator'"
+  [attr.aria-orientation]="orientation"
+  [ngClass]="['shrink-0 bg-[hsl(var(--border))]', orientationClass, className]"
+></div>

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pdm-separator',
+  templateUrl: './separator.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmSeparatorComponent {
+  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+  @Input() decorative = true;
+  @Input() className = '';
+
+  get orientationClass(): string {
+    return this.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full';
+  }
+}

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

@@ -0,0 +1,10 @@
+<div *ngIf="open" class="fixed inset-0 z-50">
+  <button type="button" class="absolute inset-0 bg-black/55" aria-label="Close sheet" (click)="close()"></button>
+
+  <section [ngClass]="['absolute bg-[hsl(var(--background))] border-[hsl(var(--border))] p-6 shadow-[0_4px_6px_rgba(0,0,0,0.09)]', panelClass, className]" role="dialog" aria-modal="true">
+    <button type="button" class="absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100" (click)="close()">
+      <pdm-icon name="x" [size]="16"></pdm-icon>
+    </button>
+    <ng-content></ng-content>
+  </section>
+</div>

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type PdmSheetSide = 'top' | 'right' | 'bottom' | 'left';
+
+@Component({
+  selector: 'pdm-sheet',
+  templateUrl: './sheet.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmSheetComponent {
+  @Input() open = false;
+  @Input() side: PdmSheetSide = 'right';
+  @Input() className = '';
+
+  @Output() openChange = new EventEmitter<boolean>();
+
+  close(): void {
+    this.openChange.emit(false);
+  }
+
+  get panelClass(): string {
+    if (this.side === 'left') return 'left-0 top-0 h-full w-full max-w-[360px] border-r';
+    if (this.side === 'top') return 'top-0 left-0 w-full border-b';
+    if (this.side === 'bottom') return 'bottom-0 left-0 w-full border-t';
+
+    return 'right-0 top-0 h-full w-full max-w-[360px] border-l';
+  }
+}

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

@@ -0,0 +1,3 @@
+<aside [ngClass]="['h-full border-r border-[hsl(var(--border))] bg-[hsl(var(--background))] transition-all', collapsed ? 'w-14' : 'w-64', className]">
+  <ng-content></ng-content>
+</aside>

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

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

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

@@ -0,0 +1 @@
+<div [ngClass]="['animate-pulse rounded-md bg-[hsl(var(--muted))]', className]"></div>

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

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

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

@@ -0,0 +1,15 @@
+<div [ngClass]="['relative h-5 w-full', className]">
+  <div class="absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--muted))]"></div>
+  <div class="absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))]" [style.width.%]="percentage"></div>
+  <div class="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[hsl(var(--foreground))] bg-[hsl(var(--background))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]" [style.left.%]="percentage"></div>
+  <input
+    type="range"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+    [value]="value"
+    [disabled]="disabled"
+    class="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+    (input)="onInput($event)"
+  />
+</div>

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-slider',
+  templateUrl: './slider.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmSliderComponent {
+  @Input() min = 0;
+  @Input() max = 100;
+  @Input() step = 1;
+  @Input() value = 0;
+  @Input() disabled = false;
+  @Input() className = '';
+
+  @Output() valueChange = new EventEmitter<number>();
+
+  get percentage(): number {
+    const safeRange = this.max - this.min;
+    if (safeRange <= 0) {
+      return 0;
+    }
+
+    const bounded = Math.min(this.max, Math.max(this.min, this.value));
+    return ((bounded - this.min) / safeRange) * 100;
+  }
+
+  onInput(event: Event): void {
+    this.valueChange.emit(Number((event.target as HTMLInputElement).value));
+  }
+}

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

@@ -0,0 +1,10 @@
+<div [ngClass]="['flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg', toneClass, className]" role="status" aria-live="polite">
+  <div class="grid gap-0.5">
+    <p *ngIf="title" class="text-sm font-semibold">{{ title }}</p>
+    <p *ngIf="description" class="text-sm opacity-90">{{ description }}</p>
+    <ng-content></ng-content>
+  </div>
+  <button type="button" class="ml-auto rounded-sm opacity-70 transition-opacity hover:opacity-100" (click)="dismissed.emit()" aria-label="Dismiss">
+    <pdm-icon name="x" [size]="14"></pdm-icon>
+  </button>
+</div>

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

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type PdmToastTone = 'default' | 'success' | 'error' | 'warning';
+
+@Component({
+  selector: 'pdm-sonner',
+  templateUrl: './sonner.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmSonnerComponent {
+  @Input() title = '';
+  @Input() description = '';
+  @Input() tone: PdmToastTone = 'default';
+  @Input() className = '';
+
+  @Output() dismissed = new EventEmitter<void>();
+
+  get toneClass(): string {
+    if (this.tone === 'success') return 'border-emerald-200 bg-emerald-50 text-emerald-900';
+    if (this.tone === 'error') return 'border-red-200 bg-red-50 text-red-900';
+    if (this.tone === 'warning') return 'border-amber-200 bg-amber-50 text-amber-900';
+
+    return 'border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))]';
+  }
+}

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

@@ -0,0 +1,6 @@
+<span
+  [style.width.px]="size"
+  [style.height.px]="size"
+  [ngClass]="['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]"
+  aria-hidden="true"
+></span>

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

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

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

@@ -0,0 +1,14 @@
+<label [attr.for]="id" [ngClass]="['inline-flex items-center gap-2', className]">
+  <input
+    [id]="id"
+    type="checkbox"
+    class="peer sr-only"
+    [checked]="checked"
+    [disabled]="disabled"
+    (change)="onToggle($event)"
+  />
+  <span class="relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-[hsl(var(--muted))] transition-colors peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))] peer-disabled:opacity-50 peer-checked:bg-[hsl(var(--foreground))]">
+    <span class="h-5 w-5 translate-x-0.5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-transform peer-checked:translate-x-5"></span>
+  </span>
+  <span *ngIf="label" class="text-sm leading-5 text-[hsl(var(--foreground))]">{{ label }}</span>
+</label>

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

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-switch',
+  templateUrl: './switch.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmSwitchComponent {
+  @Input() id = '';
+  @Input() checked = false;
+  @Input() disabled = false;
+  @Input() label = '';
+  @Input() className = '';
+
+  @Output() checkedChange = new EventEmitter<boolean>();
+
+  onToggle(event: Event): void {
+    this.checkedChange.emit((event.target as HTMLInputElement).checked);
+  }
+}

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

@@ -0,0 +1,5 @@
+<div [ngClass]="['relative w-full overflow-auto', className]">
+  <table class="w-full caption-bottom text-sm">
+    <ng-content></ng-content>
+  </table>
+</div>

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

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