pdm-ui-kit 0.1.0

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

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type PdmCarouselVariant = 'default' | 'sizes' | 'orientation' | 'api';
+
+@Component({
+  selector: 'pdm-carousel',
+  templateUrl: './carousel.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmCarouselComponent {
+  @Input() variant: PdmCarouselVariant = 'default';
+  @Input() className = '';
+  @Input() slides: number[] = [1, 2, 3, 4, 5];
+  @Input() startIndex = 0;
+  @Input() loop = false;
+
+  @Output() indexChange = new EventEmitter<number>();
+
+  private _index = 0;
+
+  ngOnInit(): void {
+    this._index = this.normalizeIndex(this.startIndex);
+  }
+
+  get index(): number {
+    return this._index;
+  }
+
+  get canPrev(): boolean {
+    return this.loop || this._index > 0;
+  }
+
+  get canNext(): boolean {
+    return this.loop || this._index < this.maxIndex;
+  }
+
+  get maxIndex(): number {
+    if (this.slides.length === 0) {
+      return 0;
+    }
+    if (this.variant === 'sizes') {
+      return Math.max(0, this.slides.length - 3);
+    }
+    if (this.variant === 'orientation') {
+      return Math.max(0, this.slides.length - 2);
+    }
+    return Math.max(0, this.slides.length - 1);
+  }
+
+  get visibleSlides(): number[] {
+    if (this.slides.length === 0) {
+      return [];
+    }
+
+    if (this.variant === 'sizes') {
+      return this.sliceWindow(3);
+    }
+
+    if (this.variant === 'orientation') {
+      return this.sliceWindow(2);
+    }
+
+    return [this.slides[this._index]];
+  }
+
+  onPrev(): void {
+    if (!this.canPrev) {
+      return;
+    }
+
+    const next = this._index - 1;
+    this.setIndex(this.loop && next < 0 ? this.maxIndex : next);
+  }
+
+  onNext(): void {
+    if (!this.canNext) {
+      return;
+    }
+
+    const next = this._index + 1;
+    this.setIndex(this.loop && next > this.maxIndex ? 0 : next);
+  }
+
+  private setIndex(value: number): void {
+    const normalized = this.normalizeIndex(value);
+    this._index = normalized;
+    this.indexChange.emit(this._index);
+  }
+
+  private normalizeIndex(value: number): number {
+    if (this.slides.length === 0) {
+      return 0;
+    }
+    return Math.min(this.maxIndex, Math.max(0, value));
+  }
+
+  private sliceWindow(size: number): number[] {
+    return this.slides.slice(this._index, this._index + size);
+  }
+}

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

@@ -0,0 +1,143 @@
+<section [ngClass]="['w-full rounded-[14px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]', className]">
+  <div class="flex w-full items-stretch border-b border-[hsl(var(--border))]">
+    <div class="flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4">
+      <h3 class="m-0 text-sm font-semibold leading-5">{{ title }}</h3>
+      <p class="m-0 text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
+    </div>
+
+    <div class="flex h-[92px]">
+      <div class="flex h-full w-[171px] flex-col justify-center border-l border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-6 py-4">
+        <span class="text-xs leading-4 text-[hsl(var(--muted-foreground))]">{{ desktopLabel }}</span>
+        <span class="mt-1 text-[28px] font-semibold leading-8">{{ desktopValue }}</span>
+      </div>
+      <div class="flex h-full w-[171px] flex-col justify-center px-6 py-4">
+        <span class="text-xs leading-4 text-[hsl(var(--muted-foreground))]">{{ mobileLabel }}</span>
+        <span class="mt-1 text-[28px] font-semibold leading-8">{{ mobileValue }}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full p-6">
+    <ng-container [ngSwitch]="type">
+      <div *ngSwitchCase="'bar'" class="flex h-[236px] w-full flex-col justify-end gap-2">
+        <div class="relative h-[183px] w-full overflow-hidden">
+          <div class="absolute bottom-0 left-0 right-0 border-t border-[hsl(var(--border))] opacity-50"></div>
+          <div class="absolute left-0 right-0 top-[54px] border-t border-[hsl(var(--border))] opacity-50"></div>
+          <div class="absolute left-0 right-0 top-[108px] border-t border-[hsl(var(--border))] opacity-50"></div>
+          <div class="absolute left-0 right-0 top-[162px] border-t border-[hsl(var(--border))] opacity-50"></div>
+          <div class="absolute inset-x-0 bottom-0 flex h-[183px] items-end gap-[2px] px-0.5">
+            <div *ngFor="let bar of normalizedBars" class="w-[5px] rounded-[2px] bg-[hsl(var(--primary))]" [style.height.px]="bar"></div>
+          </div>
+        </div>
+        <div class="flex h-4 w-full items-center justify-between gap-2">
+          <span *ngFor="let label of labels" class="truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]">{{ label }}</span>
+        </div>
+      </div>
+
+      <div *ngSwitchCase="'line'" class="flex h-[236px] w-full flex-col gap-2">
+        <svg viewBox="0 0 320 180" class="h-[183px] w-full">
+          <line x1="0" y1="180" x2="320" y2="180" stroke="hsl(var(--border))" stroke-width="1"></line>
+          <line x1="0" y1="135" x2="320" y2="135" stroke="hsl(var(--border))" stroke-width="1" opacity="0.5"></line>
+          <line x1="0" y1="90" x2="320" y2="90" stroke="hsl(var(--border))" stroke-width="1" opacity="0.5"></line>
+          <line x1="0" y1="45" x2="320" y2="45" stroke="hsl(var(--border))" stroke-width="1" opacity="0.5"></line>
+          <path [attr.d]="linePath" fill="none" stroke="hsl(var(--primary))" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+        <div class="flex h-4 w-full items-center justify-between gap-2">
+          <span *ngFor="let label of labels" class="truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]">{{ label }}</span>
+        </div>
+      </div>
+
+      <div *ngSwitchCase="'area'" class="flex h-[236px] w-full flex-col gap-2">
+        <svg viewBox="0 0 320 180" class="h-[183px] w-full">
+          <defs>
+            <linearGradient id="pdm-chart-area-gradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="hsl(var(--primary))" stop-opacity="0.35"></stop>
+              <stop offset="100%" stop-color="hsl(var(--primary))" stop-opacity="0.02"></stop>
+            </linearGradient>
+          </defs>
+          <line x1="0" y1="180" x2="320" y2="180" stroke="hsl(var(--border))" stroke-width="1"></line>
+          <line x1="0" y1="135" x2="320" y2="135" stroke="hsl(var(--border))" stroke-width="1" opacity="0.5"></line>
+          <line x1="0" y1="90" x2="320" y2="90" stroke="hsl(var(--border))" stroke-width="1" opacity="0.5"></line>
+          <line x1="0" y1="45" x2="320" y2="45" stroke="hsl(var(--border))" stroke-width="1" opacity="0.5"></line>
+          <path [attr.d]="areaPath" fill="url(#pdm-chart-area-gradient)"></path>
+          <path [attr.d]="linePath" fill="none" stroke="hsl(var(--primary))" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+        <div class="flex h-4 w-full items-center justify-between gap-2">
+          <span *ngFor="let label of labels" class="truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]">{{ label }}</span>
+        </div>
+      </div>
+
+      <div *ngSwitchCase="'pie'" class="flex items-center gap-6">
+        <div class="relative h-40 w-40 rounded-full" [style.background]="pieGradient">
+          <div class="absolute inset-7 rounded-full bg-[hsl(var(--card))]"></div>
+        </div>
+        <div class="grid flex-1 gap-2">
+          <div *ngFor="let segment of pieSegments" class="flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2">
+            <div class="flex items-center gap-2">
+              <span class="size-2.5 rounded-full" [style.background]="segment.color"></span>
+              <span class="text-sm leading-5">{{ segment.label }}</span>
+            </div>
+            <span class="text-sm font-medium leading-5">{{ segment.size | number: '1.0-0' }}%</span>
+          </div>
+        </div>
+      </div>
+
+      <div *ngSwitchCase="'radar'" class="flex items-center gap-6">
+        <svg viewBox="0 0 160 160" class="h-44 w-44">
+          <polygon points="80,8 144,44 144,116 80,152 16,116 16,44" fill="none" stroke="hsl(var(--border))"></polygon>
+          <polygon points="80,28 126,54 126,106 80,132 34,106 34,54" fill="none" stroke="hsl(var(--border))" opacity="0.75"></polygon>
+          <polygon points="80,48 109,64 109,96 80,112 51,96 51,64" fill="none" stroke="hsl(var(--border))" opacity="0.55"></polygon>
+          <polygon [attr.points]="radarPoints" fill="hsl(var(--primary))" fill-opacity="0.22" stroke="hsl(var(--primary))" stroke-width="2"></polygon>
+        </svg>
+        <div class="grid flex-1 gap-2">
+          <div *ngFor="let item of radar; index as i" class="flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2 text-sm">
+            <span class="text-[hsl(var(--muted-foreground))]">Metric {{ i + 1 }}</span>
+            <span class="font-medium">{{ item }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div *ngSwitchCase="'radial'" class="flex items-center justify-between gap-6">
+        <div class="relative flex size-44 items-center justify-center">
+          <svg viewBox="0 0 96 96" class="size-40 -rotate-90">
+            <circle cx="48" cy="48" r="42" fill="none" stroke="hsl(var(--muted))" stroke-width="10"></circle>
+            <circle
+              cx="48"
+              cy="48"
+              r="42"
+              fill="none"
+              stroke="hsl(var(--primary))"
+              stroke-width="10"
+              stroke-linecap="round"
+              stroke-dasharray="263.89"
+              [attr.stroke-dashoffset]="radialStrokeOffset"
+            ></circle>
+          </svg>
+          <div class="absolute text-center">
+            <div class="text-[30px] font-semibold leading-9">{{ radialValue }}%</div>
+            <div class="text-xs text-[hsl(var(--muted-foreground))]">{{ radialLabel }}</div>
+          </div>
+        </div>
+        <div class="flex-1">
+          <p class="m-0 text-sm font-medium leading-5">{{ radialLabel }}</p>
+          <p class="m-0 mt-1 text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ radialDescription }}</p>
+        </div>
+      </div>
+
+      <div *ngSwitchCase="'tooltips'" class="grid gap-3">
+        <div class="inline-flex w-fit min-w-[220px] flex-col gap-2 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3 shadow-sm">
+          <p class="m-0 text-xs font-medium leading-4 text-[hsl(var(--muted-foreground))]">{{ tooltipTitle }}</p>
+          <div class="flex items-center justify-between text-sm">
+            <span>{{ tooltipPrimaryLabel }}</span>
+            <span class="font-semibold">{{ tooltipPrimaryValue }}</span>
+          </div>
+          <div class="flex items-center justify-between text-sm">
+            <span>{{ tooltipSecondaryLabel }}</span>
+            <span class="font-semibold">{{ tooltipSecondaryValue }}</span>
+          </div>
+        </div>
+        <p class="m-0 text-xs text-[hsl(var(--muted-foreground))]">Tooltip style preparado para charts de línea, área y barras.</p>
+      </div>
+    </ng-container>
+  </div>
+</section>

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

@@ -0,0 +1,147 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmChartType = 'area' | 'bar' | 'line' | 'pie' | 'radar' | 'radial' | 'tooltips';
+
+@Component({
+  selector: 'pdm-chart',
+  templateUrl: './chart.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmChartComponent {
+  @Input() type: PdmChartType = 'bar';
+  @Input() className = '';
+  @Input() title = 'Bar Chart - Interactive';
+  @Input() description = 'Showing total visitors for the last 3 months';
+
+  @Input() desktopLabel = 'Desktop';
+  @Input() desktopValue = '24,828';
+  @Input() mobileLabel = 'Mobile';
+  @Input() mobileValue = '25,010';
+
+  @Input() labels: string[] = ['Apr 9', 'Apr 19', 'Apr 29', 'May 9', 'May 19', 'May 29', 'Jun 9', 'Jun 19', 'Jun 30'];
+
+  @Input() bars: number[] = [
+    48, 21, 53, 69, 56, 77, 12, 54, 61, 59, 66, 27, 24, 27, 84, 62, 44, 18, 45, 57,
+    45, 72, 56, 15, 73, 25, 59, 86, 49, 59, 69, 93, 96, 72, 30, 58, 75, 67, 43, 43,
+    84, 89, 62, 96, 59, 72, 82, 34, 34, 70, 62, 42, 40, 80, 60, 33, 67, 34, 34, 88,
+    22, 84, 19, 62, 56, 43, 95, 70, 67, 89, 84, 31, 18, 92, 16, 87, 54, 44, 91, 23,
+    67, 77, 49, 59, 93, 26, 29, 81, 84, 30, 22, 84
+  ];
+  @Input() line: number[] = [40, 28, 56, 49, 73, 67, 81, 58, 92];
+  @Input() pie: number[] = [35, 28, 20, 17];
+  @Input() radar: number[] = [72, 58, 88, 64, 79, 70];
+  @Input() radialValue = 76;
+  @Input() radialLabel = 'Completion';
+  @Input() radialDescription = 'Updated monthly';
+  @Input() tooltipTitle = 'June 2024';
+  @Input() tooltipPrimaryLabel = 'Desktop';
+  @Input() tooltipPrimaryValue = '12,450';
+  @Input() tooltipSecondaryLabel = 'Mobile';
+  @Input() tooltipSecondaryValue = '8,110';
+  @Input() pieLabels: string[] = ['Desktop', 'Mobile', 'Tablet', 'Other'];
+
+  get normalizedBars(): number[] {
+    if (!this.bars.length) {
+      return [];
+    }
+
+    const max = Math.max(...this.bars);
+    if (max === 0) {
+      return this.bars.map(() => 0);
+    }
+
+    return this.bars.map((value) => Math.max(8, Math.round((value / max) * 183)));
+  }
+
+  get normalizedLine(): number[] {
+    if (!this.line.length) {
+      return [];
+    }
+
+    const max = Math.max(...this.line);
+    if (max === 0) {
+      return this.line.map(() => 170);
+    }
+
+    return this.line.map((value) => 180 - Math.round((value / max) * 150));
+  }
+
+  get linePath(): string {
+    const points = this.normalizedLine;
+    if (!points.length) {
+      return '';
+    }
+
+    const step = points.length > 1 ? 320 / (points.length - 1) : 0;
+    return points
+      .map((y, index) => `${index === 0 ? 'M' : 'L'} ${Math.round(index * step)} ${y}`)
+      .join(' ');
+  }
+
+  get areaPath(): string {
+    const linePath = this.linePath;
+    if (!linePath) {
+      return '';
+    }
+
+    return `${linePath} L 320 180 L 0 180 Z`;
+  }
+
+  get pieSegments(): { color: string; size: number; offset: number; label: string }[] {
+    const total = this.pie.reduce((acc, value) => acc + Math.max(value, 0), 0);
+    if (total === 0) {
+      return [];
+    }
+
+    let offset = 0;
+    const colors = ['#0090ff', '#34d399', '#f59e0b', '#f43f5e'];
+    return this.pie.map((value, index) => {
+      const size = (Math.max(value, 0) / total) * 100;
+      const segment = {
+        color: colors[index % colors.length],
+        size,
+        offset,
+        label: this.pieLabels[index] ?? `Series ${index + 1}`
+      };
+      offset += size;
+      return segment;
+    });
+  }
+
+  get pieGradient(): string {
+    const segments = this.pieSegments;
+    if (!segments.length) {
+      return 'conic-gradient(#e5e5e5 0 100%)';
+    }
+
+    return `conic-gradient(${segments
+      .map((segment) => `${segment.color} ${segment.offset}% ${segment.offset + segment.size}%`)
+      .join(', ')})`;
+  }
+
+  get radarPoints(): string {
+    const values = this.radar.slice(0, 6);
+    if (!values.length) {
+      return '';
+    }
+
+    const max = Math.max(...values, 1);
+    const radius = 72;
+    const center = 80;
+    return values
+      .map((value, index) => {
+        const angle = ((Math.PI * 2) / values.length) * index - Math.PI / 2;
+        const valueRadius = (Math.max(value, 0) / max) * radius;
+        const x = center + Math.cos(angle) * valueRadius;
+        const y = center + Math.sin(angle) * valueRadius;
+        return `${x},${y}`;
+      })
+      .join(' ');
+  }
+
+  get radialStrokeOffset(): number {
+    const bounded = Math.max(0, Math.min(this.radialValue, 100));
+    const circumference = 2 * Math.PI * 42;
+    return circumference - (bounded / 100) * circumference;
+  }
+}

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

@@ -0,0 +1,38 @@
+<button
+  type="button"
+  role="checkbox"
+  [attr.id]="id || null"
+  [attr.aria-checked]="checked"
+  [attr.aria-disabled]="disabled"
+  [disabled]="disabled"
+  [ngClass]="[
+    'w-full border-0 bg-transparent p-0 text-left outline-none focus:outline-none focus-visible:outline-none',
+    variant === 'card'
+      ? checked
+        ? 'flex items-start gap-3 rounded-[10px] border border-foreground bg-muted p-3'
+        : 'flex items-start gap-3 rounded-[10px] border border-border bg-background p-3'
+      : hasDescription
+        ? 'flex items-start gap-3'
+        : 'flex items-center gap-3',
+    disabled ? 'opacity-50' : '',
+    className
+  ]"
+  (click)="onToggle()"
+>
+  <span
+    [ngClass]="[
+      'mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[6px] border shadow-[0_1px_2px_rgba(0,0,0,0.1)]',
+      checked ? 'border-foreground bg-foreground text-background' : 'border-input bg-background text-transparent'
+    ]"
+    aria-hidden="true"
+  >
+    <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M3 8.5L6.4 12L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  </span>
+
+  <span [ngClass]="['min-w-0 flex-1', hasDescription ? 'flex flex-col gap-2' : 'flex items-center']">
+    <span class="text-[14px] font-medium leading-5 text-foreground">{{ label }}</span>
+    <span *ngIf="hasDescription" class="text-[14px] leading-5 text-muted-foreground">{{ description }}</span>
+  </span>
+</button>

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

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type PdmCheckboxVariant = 'default' | 'subtext' | 'card';
+
+@Component({
+  selector: 'pdm-checkbox',
+  templateUrl: './checkbox.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmCheckboxComponent {
+  @Input() id = '';
+  @Input() checked = false;
+  @Input() disabled = false;
+  @Input() variant: PdmCheckboxVariant = 'default';
+  @Input() label = 'Accept terms and conditions';
+  @Input() description = '';
+  @Input() className = '';
+
+  @Output() checkedChange = new EventEmitter<boolean>();
+
+  get hasDescription(): boolean {
+    return this.variant === 'subtext' || this.variant === 'card' ? !!this.description : false;
+  }
+
+  onToggle(): void {
+    if (this.disabled) {
+      return;
+    }
+
+    this.checkedChange.emit(!this.checked);
+  }
+}

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

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

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

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

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

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