pdm-ui-kit 0.1.4 → 0.1.6

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

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

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

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

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

@@ -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);
-  }
-}