pdm-ui-kit 0.1.4 → 0.1.5

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

@@ -1,78 +0,0 @@
-<div *ngIf="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-  <div class="absolute inset-0 bg-[rgba(0,0,0,0.3)]" (click)="onBackdropClick()"></div>
-  <section
-    role="dialog"
-    aria-modal="true"
-    [ngClass]="[
-      'relative z-10 w-full max-w-[423px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]',
-      className
-    ]"
-  >
-    <div class="flex items-start justify-between gap-3">
-      <div class="min-w-0">
-        <h2 class="m-0 text-[18px] font-semibold leading-7 text-[#0a0a0a]">{{ title }}</h2>
-        <p *ngIf="description" class="m-0 mt-2 text-[14px] leading-5 text-[#737373]">{{ description }}</p>
-      </div>
-      <button
-        *ngIf="showCloseButton"
-        type="button"
-        class="inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a] opacity-70"
-        (click)="close()"
-        aria-label="Close dialog"
-      >
-        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-        </svg>
-      </button>
-    </div>
-
-    <ng-container *ngIf="variant === 'default'; else customCloseDialog">
-      <div class="mt-4 flex flex-col gap-4">
-        <div class="flex flex-col gap-3">
-          <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ nameLabel }}</label>
-          <div class="h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ nameValue }}</div>
-        </div>
-        <div class="flex flex-col gap-3">
-          <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ usernameLabel }}</label>
-          <div class="h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ usernameValue }}</div>
-        </div>
-      </div>
-
-      <div class="mt-4 flex justify-end gap-2">
-        <button
-          type="button"
-          class="h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-          (click)="onSecondaryAction()"
-        >
-          {{ secondaryActionText }}
-        </button>
-        <button
-          type="button"
-          class="h-9 rounded-[10px] bg-[#171717] px-4 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-          (click)="onPrimaryAction()"
-        >
-          {{ primaryActionText }}
-        </button>
-      </div>
-    </ng-container>
-
-    <ng-template #customCloseDialog>
-      <div class="mt-4 h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
-        {{ linkValue }}
-      </div>
-      <div class="mt-4 flex">
-        <button
-          type="button"
-          class="h-9 rounded-[10px] bg-[#f5f5f5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-          (click)="onSecondaryAction()"
-        >
-          Close
-        </button>
-      </div>
-    </ng-template>
-
-    <div class="mt-4">
-      <ng-content></ng-content>
-    </div>
-  </section>
-</div>

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

@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-export type PdmDialogVariant = 'default' | 'custom-close';
-
-@Component({
-  selector: 'pdm-dialog',
-  templateUrl: './dialog.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDialogComponent {
-  @Input() open = false;
-  @Input() variant: PdmDialogVariant = 'default';
-  @Input() title = 'Edit profile';
-  @Input() description = 'Make changes to your profile here. Click save when you\'re done.';
-  @Input() closeOnBackdrop = true;
-  @Input() closeOnEsc = true;
-  @Input() showCloseButton = true;
-  @Input() primaryActionText = 'Save changes';
-  @Input() secondaryActionText = 'Cancel';
-  @Input() nameLabel = 'Name';
-  @Input() nameValue = 'Pedro Duarte';
-  @Input() usernameLabel = 'Username';
-  @Input() usernameValue = '@peduarte';
-  @Input() linkValue = 'https://ui.shadcn.com/docs/installation';
-  @Input() className = '';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() primaryAction = new EventEmitter<void>();
-  @Output() secondaryAction = new EventEmitter<void>();
-
-  @HostListener('document:keydown.escape')
-  onEsc(): void {
-    if (this.open && this.closeOnEsc) {
-      this.close();
-    }
-  }
-
-  close(): void {
-    this.openChange.emit(false);
-  }
-
-  onPrimaryAction(): void {
-    this.primaryAction.emit();
-  }
-
-  onSecondaryAction(): void {
-    this.secondaryAction.emit();
-  }
-
-  onBackdropClick(): void {
-    if (this.closeOnBackdrop) {
-      this.close();
-    }
-  }
-}

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

@@ -1,56 +0,0 @@
-<div *ngIf="open" class="fixed inset-0 z-50" [ngClass]="className">
-  <div class="absolute inset-0 bg-[rgba(0,0,0,0.3)]" (click)="close()"></div>
-
-  <section
-    *ngIf="variant === 'drawer'; else responsiveDialog"
-    class="absolute inset-x-0 bottom-0 mx-auto w-full max-w-[1229px] rounded-t-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]"
-  >
-    <div class="mx-auto mb-4 h-1 w-10 rounded-full bg-[#e5e5e5]"></div>
-
-    <div class="mx-auto flex max-w-[320px] flex-col items-center">
-      <h3 class="m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]">{{ title }}</h3>
-      <p class="m-0 mt-1 text-[12px] leading-4 text-[#737373]">{{ description }}</p>
-
-      <div class="mt-3 flex w-full items-center justify-center gap-4">
-        <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]">-</button>
-        <div class="text-center">
-          <div class="text-[48px] font-semibold leading-none text-[#0a0a0a]">{{ value }}</div>
-          <div class="mt-1 text-[10px] tracking-wide text-[#737373]">{{ unit }}</div>
-        </div>
-        <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]">+</button>
-      </div>
-
-      <div class="mt-3 flex h-[58px] w-full items-end gap-[3px]">
-        <div *ngFor="let bar of bars" class="flex-1 bg-[#171717]" [style.height.px]="bar"></div>
-      </div>
-
-      <button type="button" class="mt-3 h-9 w-full rounded-[10px] bg-[#171717] text-[14px] font-medium text-[#fafafa]" (click)="onPrimaryAction()">Submit</button>
-      <button type="button" class="mt-2 h-9 w-full rounded-[10px] border border-[#e5e5e5] bg-white text-[14px] font-medium text-[#0a0a0a]" (click)="onSecondaryAction()">Cancel</button>
-    </div>
-  </section>
-
-  <ng-template #responsiveDialog>
-    <section class="absolute left-1/2 top-1/2 w-full max-w-[423px] -translate-x-1/2 -translate-y-1/2 rounded-[10px] border border-[#e5e5e5] bg-white p-4 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]">
-      <div class="flex items-start justify-between">
-        <div>
-          <h3 class="m-0 text-[18px] font-semibold leading-7 text-[#0a0a0a]">{{ profileTitle }}</h3>
-          <p class="m-0 mt-1 text-[12px] leading-4 text-[#737373]">{{ profileDescription }}</p>
-        </div>
-        <button type="button" class="h-5 w-5 text-[#737373]" (click)="close()">×</button>
-      </div>
-
-      <div class="mt-3 flex flex-col gap-3">
-        <div>
-          <label class="mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]">{{ nameLabel }}</label>
-          <div class="h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]">{{ nameValue }}</div>
-        </div>
-        <div>
-          <label class="mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]">{{ usernameLabel }}</label>
-          <div class="h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]">{{ usernameValue }}</div>
-        </div>
-      </div>
-
-      <button type="button" class="mt-3 h-8 w-full rounded-[8px] bg-[#171717] text-[12px] font-medium text-[#fafafa]" (click)="onPrimaryAction()">Save changes</button>
-    </section>
-  </ng-template>
-</div>

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

@@ -1,43 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmDrawerVariant = 'drawer' | 'responsive-dialog';
-
-@Component({
-  selector: 'pdm-drawer',
-  templateUrl: './drawer.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDrawerComponent {
-  @Input() open = false;
-  @Input() variant: PdmDrawerVariant = 'drawer';
-  @Input() className = '';
-  @Input() title = 'Move Goal';
-  @Input() description = 'Set your daily activity goal.';
-  @Input() value = 350;
-  @Input() unit = 'CALORIES/DAY';
-
-  @Input() profileTitle = 'Edit profile';
-  @Input() profileDescription = 'Make changes to your profile here. Click save when you\'re done.';
-  @Input() nameLabel = 'Name';
-  @Input() nameValue = 'Pedro Duarte';
-  @Input() usernameLabel = 'Username';
-  @Input() usernameValue = '@peduarte';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() primaryAction = new EventEmitter<void>();
-  @Output() secondaryAction = new EventEmitter<void>();
-
-  readonly bars = [72, 54, 58, 49, 60, 65, 44, 53, 61, 52, 63, 48, 66];
-
-  close(): void {
-    this.openChange.emit(false);
-  }
-
-  onPrimaryAction(): void {
-    this.primaryAction.emit();
-  }
-
-  onSecondaryAction(): void {
-    this.secondaryAction.emit();
-  }
-}

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

@@ -1,56 +0,0 @@
-<div class="relative inline-block" [ngClass]="className">
-  <button
-    type="button"
-    class="inline-flex h-9 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-    [attr.aria-expanded]="open"
-    (click)="toggle()"
-  >
-    {{ triggerText }}
-  </button>
-
-  <div
-    *ngIf="open"
-    [ngClass]="[
-      'absolute left-0 top-full z-50 mt-2 min-w-[224px] overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white p-1 text-[#0a0a0a] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]',
-      panelClassName
-    ]"
-  >
-    <ng-container *ngFor="let item of resolvedItems">
-      <div *ngIf="item.type === 'separator'" class="my-[5px] h-px bg-[#f1f5f9]"></div>
-
-      <div
-        *ngIf="item.type === 'label'"
-        [ngClass]="['px-2 py-1.5 text-[14px] font-semibold leading-5 text-[#0a0a0a]', item.inset ? 'pl-8' : '']"
-      >
-        {{ item.label }}
-      </div>
-
-      <button
-        *ngIf="!item.type || item.type === 'item'"
-        type="button"
-        [disabled]="item.disabled"
-        [ngClass]="[
-          'relative flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[14px] leading-5 text-[#0a0a0a] transition-colors hover:bg-[#f5f5f5] disabled:pointer-events-none disabled:opacity-50',
-          item.inset ? 'pl-8' : ''
-        ]"
-        (click)="select(item)"
-      >
-        <span class="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-          <svg
-            *ngIf="item.checked"
-            viewBox="0 0 24 24"
-            class="h-3.5 w-3.5 text-[#0a0a0a]"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M5 12.5L9.2 16.7L19 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
-          </svg>
-          <span *ngIf="item.radioSelected" class="h-2 w-2 rounded-full bg-[#0a0a0a]"></span>
-        </span>
-        <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
-        <span *ngIf="item.shortcut" class="text-[12px] leading-5 text-[#64748b]">{{ item.shortcut }}</span>
-        <span *ngIf="item.showChevron" class="text-[16px] leading-none text-[#475569]">›</span>
-      </button>
-    </ng-container>
-  </div>
-</div>

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

@@ -1,126 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-export type PdmDropdownMenuVariant = 'default' | 'checkboxes' | 'radio-group';
-
-export interface PdmMenuItem {
-  type?: 'item' | 'label' | 'separator';
-  label?: string;
-  value?: string;
-  shortcut?: string;
-  disabled?: boolean;
-  inset?: boolean;
-  showChevron?: boolean;
-  checked?: boolean;
-  radioSelected?: boolean;
-}
-
-@Component({
-  selector: 'pdm-dropdown-menu',
-  templateUrl: './dropdown-menu.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDropdownMenuComponent {
-  @Input() triggerText = 'Open';
-  @Input() variant: PdmDropdownMenuVariant = 'default';
-  @Input() items: PdmMenuItem[] = [];
-  @Input() closeOnSelect = true;
-  @Input() panelClassName = '';
-  @Input() className = '';
-
-  @Output() itemSelect = new EventEmitter<string>();
-  @Output() itemsChange = new EventEmitter<PdmMenuItem[]>();
-
-  open = false;
-
-  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
-
-  toggle(): void {
-    this.open = !this.open;
-  }
-
-  get resolvedItems(): PdmMenuItem[] {
-    if (this.items.length) {
-      return this.items;
-    }
-
-    if (this.variant === 'checkboxes') {
-      return [
-        { type: 'label', label: 'Appearance' },
-        { type: 'separator' },
-        { type: 'item', label: 'Status Bar', value: 'status-bar', checked: true },
-        { type: 'item', label: 'Activity Bar', value: 'activity-bar', checked: false },
-        { type: 'item', label: 'Panel', value: 'panel', checked: false }
-      ];
-    }
-
-    if (this.variant === 'radio-group') {
-      return [
-        { type: 'label', label: 'Panel Position' },
-        { type: 'separator' },
-        { type: 'item', label: 'Top', value: 'top', radioSelected: true },
-        { type: 'item', label: 'Bottom', value: 'bottom', radioSelected: false },
-        { type: 'item', label: 'Right', value: 'right', radioSelected: false }
-      ];
-    }
-
-    return [
-      { type: 'label', label: 'My Account', inset: true },
-      { type: 'separator' },
-      { type: 'item', label: 'Profile', value: 'profile', shortcut: '⇧⌘P' },
-      { type: 'item', label: 'Billing', value: 'billing', shortcut: '⌘B' },
-      { type: 'item', label: 'Settings', value: 'settings', shortcut: '⌘S' },
-      { type: 'item', label: 'Keyboard shortcuts', value: 'shortcuts', shortcut: '⌘K' },
-      { type: 'separator' },
-      { type: 'item', label: 'Team', value: 'team' },
-      { type: 'item', label: 'Invite users', value: 'invite', showChevron: true },
-      { type: 'item', label: 'New Team', value: 'new-team', shortcut: '⌘+T' },
-      { type: 'separator' },
-      { type: 'item', label: 'GitHub', value: 'github' },
-      { type: 'item', label: 'Support', value: 'support' },
-      { type: 'item', label: 'API', value: 'api', disabled: true },
-      { type: 'separator' },
-      { type: 'item', label: 'Log out', value: 'logout', shortcut: '⇧⌘Q' }
-    ];
-  }
-
-  select(item: PdmMenuItem): void {
-    if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value) return;
-
-    if (this.variant === 'checkboxes') {
-      const updated = this.resolvedItems.map((entry) =>
-        entry.value === item.value ? { ...entry, checked: !entry.checked } : entry
-      );
-      this.itemsChange.emit(updated);
-    }
-
-    if (this.variant === 'radio-group') {
-      const updated = this.resolvedItems.map((entry) =>
-        entry.type === 'item'
-          ? { ...entry, radioSelected: entry.value === item.value }
-          : entry
-      );
-      this.itemsChange.emit(updated);
-    }
-
-    this.itemSelect.emit(item.value);
-
-    const shouldClose = this.variant === 'default' ? this.closeOnSelect : false;
-    if (shouldClose) {
-      this.open = false;
-    }
-  }
-
-  @HostListener('document:keydown.escape')
-  onEsc(): void {
-    this.open = 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;
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-<section [ngClass]="['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-[hsl(var(--foreground))]', containerClass, className]">
-  <div class="flex h-10 w-10 items-center justify-center rounded-[10px] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]">
-    <pdm-icon [name]="iconName" [size]="20"></pdm-icon>
-  </div>
-
-  <div class="space-y-2">
-    <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
-    <p class="mx-auto max-w-[420px] text-sm leading-relaxed text-[hsl(var(--muted-foreground))]">
-      {{ description }}
-    </p>
-  </div>
-
-  <div *ngIf="primaryActionLabel || secondaryActionLabel" class="mt-1 flex flex-wrap items-center justify-center gap-3">
-    <pdm-button *ngIf="primaryActionLabel" variant="default" (pressed)="primaryAction.emit()">{{ primaryActionLabel }}</pdm-button>
-    <pdm-button *ngIf="secondaryActionLabel" variant="outline" (pressed)="secondaryAction.emit()">{{ secondaryActionLabel }}</pdm-button>
-  </div>
-
-  <button
-    *ngIf="linkLabel"
-    type="button"
-    class="mt-1 inline-flex items-center gap-2 text-[15px] font-medium text-[hsl(var(--muted-foreground))] underline-offset-4 hover:underline"
-    (click)="linkAction.emit()"
-  >
-    <span>{{ linkLabel }}</span>
-    <pdm-icon name="arrow-up-right" [size]="16"></pdm-icon>
-  </button>
-
-  <ng-content></ng-content>
-</section>

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

@@ -1,35 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmEmptyVariant = 'default' | 'outline' | 'background';
-
-@Component({
-  selector: 'pdm-empty',
-  templateUrl: './empty.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmEmptyComponent {
-  @Input() variant: PdmEmptyVariant = 'default';
-  @Input() title = 'No Projects Yet';
-  @Input() description = "You haven't created any projects yet. Get started by creating your first project.";
-  @Input() iconName = 'folder';
-  @Input() primaryActionLabel = '';
-  @Input() secondaryActionLabel = '';
-  @Input() linkLabel = '';
-  @Input() className = '';
-
-  @Output() primaryAction = new EventEmitter<void>();
-  @Output() secondaryAction = new EventEmitter<void>();
-  @Output() linkAction = new EventEmitter<void>();
-
-  get containerClass(): string {
-    if (this.variant === 'outline') {
-      return 'border border-dashed border-[hsl(var(--border))] rounded-[12px]';
-    }
-
-    if (this.variant === 'background') {
-      return 'rounded-[12px] bg-[hsl(var(--muted))]';
-    }
-
-    return '';
-  }
-}

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

@@ -1,26 +0,0 @@
-<div [ngClass]="[rootClass, className]">
-  <div [ngClass]="[isHorizontal ? 'grid gap-1.5' : 'grid gap-0']">
-    <label
-      *ngIf="label"
-      [attr.for]="id"
-      [ngClass]="['text-sm font-medium leading-5 text-[hsl(var(--foreground))]', disabled ? 'opacity-70' : '', labelClassName]"
-    >
-      {{ label }}
-      <span *ngIf="required" class="text-[hsl(var(--destructive))]">*</span>
-    </label>
-
-    <p *ngIf="isHorizontal && description && !invalid" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
-    <p *ngIf="isHorizontal && invalid && error" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ error }}</p>
-  </div>
-
-  <div [ngClass]="['grid gap-3', controlClassName]">
-    <p *ngIf="showDescriptionBeforeControl" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
-
-    <ng-content></ng-content>
-    <ng-content select="[pdmFieldControl]"></ng-content>
-
-    <p *ngIf="showDescriptionAfterControl" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
-    <p *ngIf="!isHorizontal && invalid && error" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ error }}</p>
-    <ng-content select="[pdmFieldDescription]"></ng-content>
-  </div>
-</div>

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

@@ -1,42 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmFieldOrientation = 'vertical' | 'horizontal';
-export type PdmFieldDescriptionPosition = 'before' | 'after';
-
-@Component({
-  selector: 'pdm-field',
-  templateUrl: './field.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmFieldComponent {
-  @Input() id = '';
-  @Input() label = '';
-  @Input() description = '';
-  @Input() error = '';
-  @Input() required = false;
-  @Input() disabled = false;
-  @Input() invalid = false;
-  @Input() orientation: PdmFieldOrientation = 'vertical';
-  @Input() descriptionPosition: PdmFieldDescriptionPosition = 'after';
-  @Input() className = '';
-  @Input() labelClassName = '';
-  @Input() controlClassName = '';
-
-  get rootClass(): string {
-    return this.orientation === 'horizontal'
-      ? 'grid items-start gap-3 sm:grid-cols-[200px_minmax(0,1fr)] sm:gap-4'
-      : 'grid w-full gap-3';
-  }
-
-  get isHorizontal(): boolean {
-    return this.orientation === 'horizontal';
-  }
-
-  get showDescriptionBeforeControl(): boolean {
-    return !this.isHorizontal && this.descriptionPosition === 'before' && !!this.description && !this.invalid;
-  }
-
-  get showDescriptionAfterControl(): boolean {
-    return !this.isHorizontal && !this.showDescriptionBeforeControl && !!this.description && !this.invalid;
-  }
-}

package/src/lib/components/hover-card/hover-card.component.html

@@ -1,24 +0,0 @@
-<div
-  class="relative inline-flex"
-  [ngClass]="className"
-  (mouseenter)="open = true"
-  (mouseleave)="open = false"
-  (focusin)="open = true"
-  (focusout)="open = false"
->
-  <div>
-    <ng-content select="[pdmHoverTrigger]"></ng-content>
-  </div>
-
-  <section
-    *ngIf="open"
-    [style.width.px]="panelWidth"
-    [ngClass]="[
-      'absolute z-30 rounded-[10px] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0_10px_30px_rgba(15,23,42,0.15)]',
-      positionClass,
-      panelClassName
-    ]"
-  >
-    <ng-content select="[pdmHoverContent]"></ng-content>
-  </section>
-</div>

package/src/lib/components/hover-card/hover-card.component.ts

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmHoverCardSide = 'top' | 'right' | 'bottom' | 'left';
-export type PdmHoverCardAlign = 'start' | 'center' | 'end';
-
-@Component({
-  selector: 'pdm-hover-card',
-  templateUrl: './hover-card.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmHoverCardComponent {
-  @Input() className = '';
-  @Input() panelClassName = '';
-  @Input() side: PdmHoverCardSide = 'bottom';
-  @Input() align: PdmHoverCardAlign = 'start';
-  @Input() panelWidth = 304;
-
-  open = false;
-
-  get positionClass(): string {
-    const sideClassMap: Record<PdmHoverCardSide, string> = {
-      top: 'bottom-full mb-2',
-      right: 'left-full ml-2',
-      bottom: 'top-full mt-2',
-      left: 'right-full mr-2'
-    };
-
-    const alignClassMap: Record<PdmHoverCardAlign, string> = {
-      start: this.side === 'top' || this.side === 'bottom' ? 'left-0' : 'top-0',
-      center: this.side === 'top' || this.side === 'bottom' ? 'left-1/2 -translate-x-1/2' : 'top-1/2 -translate-y-1/2',
-      end: this.side === 'top' || this.side === 'bottom' ? 'right-0' : 'bottom-0'
-    };
-
-    return `${sideClassMap[this.side]} ${alignClassMap[this.align]}`;
-  }
-}