pdm-ui-kit 0.1.4 → 0.1.5

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

@@ -1,77 +0,0 @@
-<section
-  [ngClass]="[
-    'w-full rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]',
-    className
-  ]"
->
-  <ng-container *ngIf="variant === 'login'; else defaultCard">
-    <div class="flex w-full items-start gap-1.5 px-6">
-      <div class="min-w-0 flex-1">
-        <h3 class="m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]">{{ title }}</h3>
-        <p class="m-0 mt-1.5 text-[14px] leading-5 text-[#737373]">{{ description }}</p>
-      </div>
-      <button
-        type="button"
-        class="inline-flex h-9 items-center justify-center rounded-[10px] px-4 py-2 text-[14px] font-medium leading-5 text-[#171717]"
-        (click)="onActionPressed()"
-      >
-        {{ actionText }}
-      </button>
-    </div>
-
-    <div class="mt-6 flex flex-col gap-4 px-6">
-      <div class="w-full">
-        <label class="mb-3 block text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ emailLabel }}</label>
-        <input
-          type="email"
-          [placeholder]="emailPlaceholder"
-          class="h-9 w-full 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] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#171717]"
-        />
-      </div>
-
-      <div class="w-full">
-        <div class="mb-3 flex w-full items-center justify-between gap-4">
-          <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ passwordLabel }}</label>
-          <button type="button" class="text-[14px] leading-5 text-[#0a0a0a]">
-            {{ passwordHint }}
-          </button>
-        </div>
-        <input
-          type="password"
-          class="h-9 w-full 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)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#171717]"
-        />
-      </div>
-    </div>
-
-    <div class="mt-6 flex w-full flex-col gap-2 px-6">
-      <button
-        type="button"
-        class="flex h-9 w-full items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-        (click)="onPrimaryAction()"
-      >
-        {{ primaryActionText }}
-      </button>
-      <button
-        type="button"
-        class="flex h-9 w-full items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-        (click)="onSecondaryAction()"
-      >
-        {{ secondaryActionText }}
-      </button>
-    </div>
-  </ng-container>
-
-  <ng-template #defaultCard>
-    <div class="flex w-full flex-col gap-6">
-      <div class="px-6">
-        <ng-content select="[pdmCardHeader]"></ng-content>
-      </div>
-      <div class="px-6">
-        <ng-content select="[pdmCardContent]"></ng-content>
-      </div>
-      <div class="px-6">
-        <ng-content select="[pdmCardFooter]"></ng-content>
-      </div>
-    </div>
-  </ng-template>
-</section>

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

@@ -1,39 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmCardVariant = 'default' | 'login';
-
-@Component({
-  selector: 'pdm-card',
-  templateUrl: './card.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmCardComponent {
-  @Input() variant: PdmCardVariant = 'default';
-  @Input() className = '';
-
-  @Input() title = 'Login to your account';
-  @Input() description = 'Enter your email below to login to your account';
-  @Input() actionText = 'Sign up';
-  @Input() emailLabel = 'Email';
-  @Input() emailPlaceholder = 'm@example.com';
-  @Input() passwordLabel = 'Password';
-  @Input() passwordHint = 'Forgot password?';
-  @Input() primaryActionText = 'Login';
-  @Input() secondaryActionText = 'Login with Google';
-
-  @Output() primaryAction = new EventEmitter<void>();
-  @Output() secondaryAction = new EventEmitter<void>();
-  @Output() actionPressed = new EventEmitter<void>();
-
-  onPrimaryAction(): void {
-    this.primaryAction.emit();
-  }
-
-  onSecondaryAction(): void {
-    this.secondaryAction.emit();
-  }
-
-  onActionPressed(): void {
-    this.actionPressed.emit();
-  }
-}

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

@@ -1,86 +0,0 @@
-<section [ngClass]="[className]">
-  <div *ngIf="variant !== 'orientation'" class="flex items-center gap-4">
-    <button
-      type="button"
-      class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]"
-      [ngClass]="!canPrev ? 'opacity-50' : ''"
-      [disabled]="!canPrev"
-      (click)="onPrev()"
-      aria-label="Previous slide"
-    >
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </button>
-
-    <ng-container [ngSwitch]="variant">
-      <div *ngSwitchCase="'sizes'" class="flex items-center">
-        <div *ngFor="let slide of visibleSlides; let i = index" class="flex items-center" [ngClass]="i > 0 ? 'pl-4' : ''">
-          <div class="flex h-[165px] w-[125px] items-center p-1">
-            <div class="flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
-              <div class="text-center text-[30px] font-semibold leading-9 text-[#0a0a0a]">{{ slide }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div *ngSwitchDefault class="flex flex-col items-center justify-center">
-        <div class="flex h-[360px] w-[318px] items-center p-1">
-          <div class="flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
-            <div class="text-center text-[36px] font-semibold leading-10 text-[#0a0a0a]">{{ visibleSlides[0] }}</div>
-          </div>
-        </div>
-        <p *ngIf="variant === 'api'" class="m-0 pt-2 text-[14px] font-medium leading-5 text-[#737373]">Slide {{ index + 1 }} of {{ slides.length }}</p>
-      </div>
-    </ng-container>
-
-    <button
-      type="button"
-      class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]"
-      [ngClass]="!canNext ? 'opacity-50' : ''"
-      [disabled]="!canNext"
-      (click)="onNext()"
-      aria-label="Next slide"
-    >
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </button>
-  </div>
-
-  <div *ngIf="variant === 'orientation'" class="flex flex-col items-center gap-4">
-    <button
-      type="button"
-      class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]"
-      [ngClass]="!canPrev ? 'opacity-50' : ''"
-      [disabled]="!canPrev"
-      (click)="onPrev()"
-      aria-label="Previous slide"
-    >
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </button>
-
-    <div class="flex w-[320px] flex-col">
-      <div *ngFor="let slide of visibleSlides; let i = index" class="flex h-[142px] w-full items-center p-1" [ngClass]="i > 0 ? 'pt-1' : ''">
-        <div class="flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
-          <div class="text-center text-[30px] font-semibold leading-9 text-[#0a0a0a]">{{ slide }}</div>
-        </div>
-      </div>
-    </div>
-
-    <button
-      type="button"
-      class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]"
-      [ngClass]="!canNext ? 'opacity-50' : ''"
-      [disabled]="!canNext"
-      (click)="onNext()"
-      aria-label="Next slide"
-    >
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </button>
-  </div>
-</section>

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

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

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