pdm-ui-kit 0.1.0

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+<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)]">{{ month }} <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

@@ -0,0 +1,34 @@
+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 = 'Jun';
+  @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);
+  }
+}

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

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

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

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

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