pdm-ui-kit 0.1.4 → 0.1.5

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

@@ -1,26 +0,0 @@
-<div [ngClass]="['flex w-[350px] flex-col gap-2', className]">
-  <button
-    type="button"
-    [disabled]="disabled"
-    class="flex w-full items-center justify-between px-4 text-left"
-    [attr.aria-expanded]="open"
-    (click)="toggle()"
-  >
-    <span class="text-[14px] font-semibold leading-5 text-[#0a0a0a]">{{ title }}</span>
-    <span class="inline-flex h-8 w-8 items-center justify-center text-[#0a0a0a]">
-      <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 15L12 20L17 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M17 9L12 4L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </span>
-  </button>
-
-  <div class="flex w-full flex-col gap-2">
-    <div
-      *ngFor="let item of visibleItems"
-      class="w-full rounded-[8px] border border-[#e5e5e5] bg-white px-4 py-2"
-    >
-      <span class="font-mono text-[14px] leading-5 text-[#0a0a0a]">{{ item }}</span>
-    </div>
-  </div>
-</div>

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

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-collapsible',
-  templateUrl: './collapsible.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmCollapsibleComponent {
-  @Input() title = '@peduarte starred 3 repositories';
-  @Input() open = false;
-  @Input() disabled = false;
-  @Input() items: string[] = ['@radix-ui/primitives', '@radix-ui/colors', '@stitches/react'];
-  @Input() className = '';
-
-  @Output() openChange = new EventEmitter<boolean>();
-
-  get visibleItems(): string[] {
-    if (!this.items.length) {
-      return [];
-    }
-    return this.open ? this.items : this.items.slice(0, 1);
-  }
-
-  toggle(): void {
-    if (!this.disabled) {
-      this.openChange.emit(!this.open);
-    }
-  }
-}

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

@@ -1,42 +0,0 @@
-<div [ngClass]="['flex flex-col gap-1', className]" [style.width.px]="width">
-  <button
-    type="button"
-    class="flex h-9 w-full items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-    [attr.aria-expanded]="open"
-    (click)="toggle()"
-  >
-    <span class="min-w-0 flex-1 truncate text-left text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ selectedLabel }}</span>
-    <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7 15L12 20L17 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      <path d="M17 9L12 4L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-    </svg>
-  </button>
-
-  <div
-    *ngIf="open"
-    class="w-full rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]"
-  >
-    <div class="flex items-center gap-2 border-b border-[#e5e5e5] px-3">
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#737373]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.5"></circle>
-        <path d="M20 20L16.6 16.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-      </svg>
-      <div class="h-9 flex-1 py-2 text-[14px] leading-5 text-[#737373]">{{ searchPlaceholder }}</div>
-    </div>
-
-    <div class="p-1">
-      <button
-        *ngFor="let option of options"
-        type="button"
-        class="flex w-full items-center gap-2 rounded-[4px] px-2 py-[6px] text-left"
-        [ngClass]="option === value ? 'bg-[#f5f5f5]' : ''"
-        (click)="select(option)"
-      >
-        <span [ngClass]="['min-w-0 flex-1 truncate text-[14px] leading-5', option === value ? 'text-[#171717]' : 'text-[#0a0a0a]']">{{ option }}</span>
-        <svg *ngIf="option === value" viewBox="0 0 24 24" class="h-4 w-4 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>
-      </button>
-    </div>
-  </div>
-</div>

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

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-combobox',
-  templateUrl: './combobox.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmComboboxComponent {
-  @Input() open = false;
-  @Input() placeholder = 'Select framework...';
-  @Input() searchPlaceholder = 'Search framework';
-  @Input() className = '';
-  @Input() options: string[] = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];
-  @Input() value = '';
-  @Input() width = 200;
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() valueChange = new EventEmitter<string>();
-
-  get selectedLabel(): string {
-    return this.value || this.placeholder;
-  }
-
-  toggle(): void {
-    this.openChange.emit(!this.open);
-  }
-
-  select(option: string): void {
-    this.valueChange.emit(option);
-    this.openChange.emit(false);
-  }
-}

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

@@ -1,55 +0,0 @@
-<div [ngClass]="['w-full', className]">
-  <div *ngIf="!open" class="flex items-center gap-1">
-    <span class="text-[14px] font-medium leading-5 text-[#737373]">{{ hintLabel }}</span>
-    <button
-      type="button"
-      class="inline-flex h-5 items-center gap-0.5 rounded-[6px] border border-[#e5e5e5] bg-[#f5f5f5] px-1.5"
-      (click)="toggleOpen()"
-    >
-      <pdm-icon name="command" [size]="12" className="text-[#737373]" [decorative]="true"></pdm-icon>
-      <span class="text-[12px] leading-4 text-[#737373]">{{ hintKey }}</span>
-    </button>
-  </div>
-
-  <section
-    *ngIf="open"
-    class="flex w-full flex-col overflow-hidden rounded-[10px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]"
-  >
-    <div class="flex items-center gap-2 border-b border-[#e5e5e5] px-3">
-      <pdm-icon name="search" [size]="16" className="text-[#737373]" [decorative]="true"></pdm-icon>
-      <input
-        type="text"
-        [placeholder]="placeholder"
-        [value]="query"
-        (input)="onQueryChange($event)"
-        class="h-10 w-full bg-transparent py-3 text-[14px] leading-5 text-[#0a0a0a] outline-none placeholder:text-[#737373]"
-      />
-    </div>
-
-    <div class="max-h-[300px] overflow-y-auto p-1">
-      <ng-container *ngFor="let group of groupedItems; let groupIndex = index">
-        <div *ngIf="group.name" class="px-2 py-[6px] text-[12px] leading-4 text-[#737373]">{{ group.name }}</div>
-        <button
-          *ngFor="let item of group.items"
-          type="button"
-          [disabled]="item.disabled"
-          class="flex w-full items-center gap-2 rounded-[6px] px-2 py-[6px] text-left"
-          [ngClass]="[
-            item.disabled ? 'opacity-50' : '',
-            item.label === 'Calendar' ? 'bg-[#f5f5f5]' : ''
-          ]"
-          (click)="select(item.value)"
-        >
-          <span class="inline-flex h-4 w-4 items-center justify-center text-[#0a0a0a]">
-            <pdm-icon *ngIf="item.icon" [name]="item.icon" [size]="16" [decorative]="true"></pdm-icon>
-          </span>
-          <span class="min-w-0 flex-1 text-[14px] leading-5 text-[#0a0a0a]">{{ item.label }}</span>
-          <span *ngIf="item.shortcut" class="text-[12px] leading-4 text-[#737373]">{{ item.shortcut }}</span>
-        </button>
-        <div *ngIf="groupIndex === 0 && groupedItems.length > 1" class="my-1 border-t border-[#e5e5e5]"></div>
-      </ng-container>
-
-      <p *ngIf="filteredItems.length === 0" class="py-6 text-center text-[14px] text-[#737373]">{{ emptyMessage }}</p>
-    </div>
-  </section>
-</div>

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

@@ -1,67 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import type { PdmIconName } from '../icon/icon.component';
-
-export interface PdmCommandItem {
-  label: string;
-  value: string;
-  group?: string;
-  icon?: PdmIconName;
-  shortcut?: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-command',
-  templateUrl: './command.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmCommandComponent {
-  @Input() open = true;
-  @Input() hintLabel = 'Press';
-  @Input() hintKey = 'J';
-  @Input() placeholder = 'Type a command or search...';
-  @Input() emptyMessage = 'No results found.';
-  @Input() items: PdmCommandItem[] = [
-    { label: 'Calendar', value: 'calendar', group: 'Suggestions', icon: 'calendar' },
-    { label: 'Search emoji', value: 'emoji', group: 'Suggestions', icon: 'smile' },
-    { label: 'Calculator', value: 'calculator', group: 'Suggestions', icon: 'calculator', disabled: true },
-    { label: 'Profile', value: 'profile', group: 'Settings', icon: 'user', shortcut: '⌘P' },
-    { label: 'Billing', value: 'billing', group: 'Settings', icon: 'credit-card', shortcut: '⌘B' },
-    { label: 'Settings', value: 'settings', group: 'Settings', icon: 'settings', shortcut: '⌘S' }
-  ];
-  @Input() className = '';
-
-  @Output() itemSelect = new EventEmitter<string>();
-  @Output() openChange = new EventEmitter<boolean>();
-
-  query = '';
-
-  get filteredItems(): PdmCommandItem[] {
-    const q = this.query.toLowerCase().trim();
-    if (!q) return this.items;
-    return this.items.filter((item) => item.label.toLowerCase().includes(q));
-  }
-
-  get groupedItems(): { name: string; items: PdmCommandItem[] }[] {
-    const map = new Map<string, PdmCommandItem[]>();
-    for (const item of this.filteredItems) {
-      const key = item.group || '';
-      const arr = map.get(key) ?? [];
-      arr.push(item);
-      map.set(key, arr);
-    }
-    return Array.from(map.entries()).map(([name, items]) => ({ name, items }));
-  }
-
-  onQueryChange(event: Event): void {
-    this.query = (event.target as HTMLInputElement).value;
-  }
-
-  toggleOpen(): void {
-    this.openChange.emit(!this.open);
-  }
-
-  select(value: string): void {
-    this.itemSelect.emit(value);
-  }
-}

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

@@ -1,47 +0,0 @@
-<div class="relative" [ngClass]="className" (contextmenu)="onContextMenu($event)">
-  <div
-    class="flex items-center justify-center rounded-[8px] border border-dashed border-[#e5e5e5]"
-    [style.width.px]="width"
-    [style.height.px]="height"
-  >
-    <span class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ triggerLabel }}</span>
-  </div>
-
-  <div
-    *ngIf="open"
-    class="fixed z-50 w-[208px] rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]"
-    [style.left.px]="x + 4"
-    [style.top.px]="y + 2"
-  >
-    <div class="px-1 pt-1">
-      <ng-container *ngFor="let item of items">
-        <div *ngIf="item.type === 'separator'" class="my-1 border-t border-[#e5e5e5]"></div>
-
-        <div *ngIf="item.type === 'label'" class="h-8 px-8 py-[6px] text-[14px] font-semibold leading-5 text-[#0a0a0a]">
-          {{ item.label }}
-        </div>
-
-        <button
-          *ngIf="!item.type || item.type === 'item'"
-          type="button"
-          [disabled]="item.disabled"
-          class="flex h-8 w-full items-center rounded-[6px] py-[6px] pr-2 text-left disabled:opacity-50"
-          [ngClass]="item.inset ? 'pl-8' : 'px-2'"
-          (click)="select(item)"
-        >
-          <span class="mr-2 inline-flex w-4 shrink-0 items-center justify-center text-[#0a0a0a]">
-            <svg *ngIf="item.checked" viewBox="0 0 24 24" class="h-3.5 w-3.5" 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.selectedDot" class="h-2 w-2 rounded-full bg-[#0a0a0a]"></span>
-          </span>
-          <span class="min-w-0 flex-1 truncate text-[14px] leading-5 text-[#0a0a0a]">{{ item.label }}</span>
-          <span *ngIf="item.shortcut" class="text-[12px] leading-4 text-[#737373]">{{ item.shortcut }}</span>
-          <svg *ngIf="item.showChevron" 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="M9 6L15 12L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-          </svg>
-        </button>
-      </ng-container>
-    </div>
-  </div>
-</div>

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

@@ -1,67 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import { PdmMenuItem } from '../dropdown-menu/dropdown-menu.component';
-
-export interface PdmContextMenuItem extends PdmMenuItem {
-  checked?: boolean;
-  selectedDot?: boolean;
-}
-
-@Component({
-  selector: 'pdm-context-menu',
-  templateUrl: './context-menu.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmContextMenuComponent {
-  @Input() items: PdmContextMenuItem[] = [
-    { type: 'item', label: 'Back', value: 'back', inset: true, shortcut: '⌘[' },
-    { type: 'item', label: 'Forward', value: 'forward', inset: true, shortcut: '⌘]', disabled: true },
-    { type: 'item', label: 'Reload', value: 'reload', inset: true, shortcut: '⌘R' },
-    { type: 'item', label: 'More Tools', value: 'more-tools', inset: true, showChevron: true },
-    { type: 'separator' },
-    { type: 'item', label: 'Show Bookmarks Bar', value: 'show-bookmarks', checked: true },
-    { type: 'item', label: 'Show Full URLs', value: 'show-urls', inset: true },
-    { type: 'separator' },
-    { type: 'label', label: 'People' },
-    { type: 'separator' },
-    { type: 'item', label: 'Pedro Duarte', value: 'pedro', selectedDot: true },
-    { type: 'item', label: 'Colm Tuite', value: 'colm', inset: true }
-  ];
-  @Input() className = '';
-  @Input() triggerLabel = 'Right click here';
-  @Input() width = 300;
-  @Input() height = 150;
-  @Output() itemSelect = new EventEmitter<string>();
-
-  open = false;
-  x = 0;
-  y = 0;
-
-  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
-
-  onContextMenu(event: MouseEvent): void {
-    event.preventDefault();
-    this.x = event.clientX;
-    this.y = event.clientY;
-    this.open = true;
-  }
-
-  select(item: PdmContextMenuItem): void {
-    if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value) return;
-    this.itemSelect.emit(item.value);
-    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/data-table/data-table.component.html

@@ -1,63 +0,0 @@
-<section [ngClass]="['flex w-[590px] flex-col items-end', className]">
-  <div class="flex w-full items-center justify-between py-4">
-    <input
-      type="text"
-      [placeholder]="filterPlaceholder"
-      [value]="query"
-      (input)="onQueryInput($event)"
-      class="h-9 w-[384px] rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[#737373] outline-none"
-    />
-
-    <button type="button" class="inline-flex h-9 items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
-      <span class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ columnsLabel }}</span>
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </button>
-  </div>
-
-  <div class="w-full overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white">
-    <table class="w-full border-collapse text-[14px] leading-5 text-[#0a0a0a]">
-      <thead>
-        <tr class="border-b border-[#e5e5e5]">
-          <th class="w-[32px] px-2 text-left font-medium"><input type="checkbox" class="h-4 w-4 rounded-[4px] border border-[#e5e5e5]" /></th>
-          <th class="w-[120px] px-2 py-2 text-left font-medium">Status</th>
-          <th class="w-[270px] px-2 py-2 text-left font-medium">
-            <button type="button" class="inline-flex items-center gap-1 rounded-[6px] px-3 py-2">
-              <span>Email</span>
-              <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8 6L4 10L8 14M16 18L20 14L16 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-              </svg>
-            </button>
-          </th>
-          <th class="w-[100px] px-2 py-2 text-right font-medium">Amount</th>
-          <th class="px-2 py-2"></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr *ngFor="let row of pagedRows" class="border-b border-[#e5e5e5] last:border-b-0">
-          <td class="px-2 py-2"><input type="checkbox" [checked]="row.selected" (change)="onToggleRow(row, $event)" class="h-4 w-4 rounded-[4px] border border-[#e5e5e5]" /></td>
-          <td class="px-2 py-2">{{ row.status }}</td>
-          <td class="px-2 py-2">{{ row.email }}</td>
-          <td class="px-2 py-2 text-right">{{ row.amount }}</td>
-          <td class="px-2 py-2">
-            <button type="button" class="inline-flex h-8 w-8 items-center justify-center" (click)="onAction(row)">
-              <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="6" cy="12" r="1.5" fill="currentColor"></circle>
-                <circle cx="12" cy="12" r="1.5" fill="currentColor"></circle>
-                <circle cx="18" cy="12" r="1.5" fill="currentColor"></circle>
-              </svg>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div class="flex w-full items-center gap-2 py-4">
-    <p class="flex-1 pr-2 text-[14px] leading-5 text-[#737373]">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>
-    <button type="button" class="h-9 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)] disabled:opacity-50" [disabled]="page <= 1" (click)="previous()">Previous</button>
-    <button type="button" class="h-9 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)] disabled:opacity-50" [disabled]="page >= totalPages" (click)="next()">Next</button>
-  </div>
-</section>

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

@@ -1,78 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmDataTableRow {
-  id: string;
-  status: string;
-  email: string;
-  amount: string;
-  selected?: boolean;
-}
-
-@Component({
-  selector: 'pdm-data-table',
-  templateUrl: './data-table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDataTableComponent {
-  @Input() className = '';
-  @Input() filterPlaceholder = 'Filter emails...';
-  @Input() columnsLabel = 'Columns';
-  @Input() rows: PdmDataTableRow[] = [
-    { id: '1', status: 'Success', email: 'ken99@yahoo.com', amount: '$316.00' },
-    { id: '2', status: 'Success', email: 'abe45@gmail.com', amount: '$242.00' },
-    { id: '3', status: 'Processing', email: 'monserrat44@gmail.com', amount: '$837.00' },
-    { id: '4', status: 'Success', email: 'silas22@gmail.com', amount: '$874.00' },
-    { id: '5', status: 'Failed', email: 'carmella@hotmail.com', amount: '$721.00' }
-  ];
-
-  @Input() page = 1;
-  @Input() pageSize = 5;
-  @Input() query = '';
-
-  @Output() queryChange = new EventEmitter<string>();
-  @Output() rowAction = new EventEmitter<string>();
-  @Output() pageChange = new EventEmitter<number>();
-  @Output() selectionChange = new EventEmitter<{ id: string; selected: boolean }>();
-
-  get filteredRows(): PdmDataTableRow[] {
-    const q = this.query.trim().toLowerCase();
-    if (!q) return this.rows;
-    return this.rows.filter((r) => r.email.toLowerCase().includes(q));
-  }
-
-  get pagedRows(): PdmDataTableRow[] {
-    const start = (this.page - 1) * this.pageSize;
-    return this.filteredRows.slice(start, start + this.pageSize);
-  }
-
-  get totalPages(): number {
-    return Math.max(1, Math.ceil(this.filteredRows.length / this.pageSize));
-  }
-
-  get selectedCount(): number {
-    return this.rows.filter((row) => row.selected).length;
-  }
-
-  onQueryInput(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.queryChange.emit(value);
-  }
-
-  onToggleRow(row: PdmDataTableRow, event: Event): void {
-    this.selectionChange.emit({ id: row.id, selected: (event.target as HTMLInputElement).checked });
-  }
-
-  previous(): void {
-    if (this.page <= 1) return;
-    this.pageChange.emit(this.page - 1);
-  }
-
-  next(): void {
-    if (this.page >= this.totalPages) return;
-    this.pageChange.emit(this.page + 1);
-  }
-
-  onAction(row: PdmDataTableRow): void {
-    this.rowAction.emit(row.id);
-  }
-}

package/src/lib/components/date-picker/date-picker.component.html

@@ -1,38 +0,0 @@
-<section [ngClass]="['flex flex-col gap-3', className]" class="w-[250px]">
-  <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ label }}</label>
-
-  <div class="flex items-center gap-2" *ngIf="variant === 'date-time'">
-    <button type="button" class="flex h-9 w-[150px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]" (click)="toggle()">
-      <span class="truncate text-[12px] leading-4 text-[#0a0a0a]">{{ value }}</span>
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-    </button>
-    <div class="flex h-9 w-[92px] items-center rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[12px] leading-4 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ time }}</div>
-  </div>
-
-  <div *ngIf="variant !== 'date-time'" class="flex flex-col gap-2">
-    <button type="button" class="flex h-9 w-[192px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]" (click)="toggle()">
-      <span class="truncate text-[16px] leading-6 text-[#0a0a0a]">{{ variant === 'natural-language' ? naturalLanguageValue : value }}</span>
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-    </button>
-
-    <p *ngIf="variant === 'natural-language'" class="max-w-[192px] text-[12px] leading-4 text-[#737373]">{{ naturalLanguageHint }}</p>
-  </div>
-
-  <div *ngIf="open" class="w-[250px] rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
-    <div class="mb-4 flex items-center justify-between">
-      <button type="button" class="h-8 w-8 rounded-[6px] text-[#0a0a0a]">‹</button>
-      <div class="flex items-center gap-1.5">
-        <button type="button" class="inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ monthLabel }} <span>˅</span></button>
-        <button type="button" class="inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ year }} <span>˅</span></button>
-      </div>
-      <button type="button" class="h-8 w-8 rounded-[6px] text-[#0a0a0a]">›</button>
-    </div>
-
-    <pdm-calendar [month]="month" [year]="year" [selectedDay]="selectedDay" mode="single"></pdm-calendar>
-
-    <div *ngIf="variant === 'with-input' || variant === 'natural-language'" class="mt-3 flex gap-2">
-      <button type="button" class="h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]" (click)="selectPreset('Today')">Today</button>
-      <button type="button" class="h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]" (click)="selectPreset('Tomorrow')">Tomorrow</button>
-    </div>
-  </div>
-</section>

package/src/lib/components/date-picker/date-picker.component.ts

@@ -1,38 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmDatePickerVariant = 'default' | 'with-input' | 'date-time' | 'natural-language';
-
-@Component({
-  selector: 'pdm-date-picker',
-  templateUrl: './date-picker.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDatePickerComponent {
-  @Input() variant: PdmDatePickerVariant = 'default';
-  @Input() className = '';
-  @Input() open = false;
-
-  @Input() label = 'Date of Birth';
-  @Input() value = 'Select a date';
-  @Input() month = 6;
-  @Input() year = 2025;
-  @Input() selectedDay = 25;
-  @Input() time = '10:30:00';
-  @Input() naturalLanguageValue = 'In 2 days';
-  @Input() naturalLanguageHint = 'Your post will be published on June 21, 2025.';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() valueChange = new EventEmitter<string>();
-
-  toggle(): void {
-    this.openChange.emit(!this.open);
-  }
-
-  selectPreset(value: string): void {
-    this.valueChange.emit(value);
-  }
-
-  get monthLabel(): string {
-    return new Date(this.year, this.month - 1, 1).toLocaleString('en-US', { month: 'short' });
-  }
-}