pdm-ui-kit 0.1.0

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

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

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

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

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

@@ -0,0 +1,22 @@
+<div [ngClass]="[rootClass, className]">
+  <div class="grid gap-2">
+    <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="description && !invalid" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
+    <p *ngIf="invalid && error" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ error }}</p>
+
+    <ng-content select="[pdmFieldDescription]"></ng-content>
+  </div>
+
+  <div [ngClass]="controlClassName">
+    <ng-content></ng-content>
+    <ng-content select="[pdmFieldControl]"></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmFieldOrientation = 'vertical' | 'horizontal';
+
+@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() 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';
+  }
+}

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

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

@@ -0,0 +1,36 @@
+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]}`;
+  }
+}