pdm-ui-kit 0.1.3 → 0.1.5

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

@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmAlertVariant = 'default' | 'title-only' | 'destructive';
-
-@Component({
-  selector: 'pdm-alert',
-  templateUrl: './alert.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmAlertComponent {
-  @Input() variant: PdmAlertVariant = 'default';
-  @Input() title = 'Success! Your changes have been saved';
-  @Input() description = 'This is an alert with icon, title and description.';
-  @Input() details: string[] = [];
-  @Input() className = '';
-
-  get isDestructive(): boolean {
-    return this.variant === 'destructive';
-  }
-
-  get isTitleOnly(): boolean {
-    return this.variant === 'title-only';
-  }
-}
-

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

@@ -1,41 +0,0 @@
-<button
-  *ngIf="showTrigger && !open"
-  type="button"
-  class="inline-flex h-9 items-center justify-center rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]"
-  (click)="onTriggerClick()"
->
-  {{ triggerText }}
-</button>
-
-<div *ngIf="open" class="fixed inset-0 z-50 flex items-center justify-center p-5">
-  <div class="absolute inset-0 bg-[rgba(0,0,0,0.3)]" (click)="onCancel()"></div>
-  <section
-    role="alertdialog"
-    aria-modal="true"
-    [ngClass]="[
-      'relative z-10 w-full max-w-[552px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 text-[#0a0a0a] shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1),0px_4px_6px_0px_rgba(0,0,0,0.1)]',
-      className
-    ]"
-  >
-    <div class="flex flex-col gap-2">
-      <h2 class="text-[18px] font-semibold leading-7 tracking-normal">{{ title }}</h2>
-      <p *ngIf="description" class="text-[14px] font-normal leading-5 text-[#737373]">{{ description }}</p>
-    </div>
-    <div class="mt-4 flex items-center justify-end gap-2">
-      <button
-        type="button"
-        class="inline-flex h-9 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]"
-        (click)="onCancel()"
-      >
-        {{ cancelText }}
-      </button>
-      <button
-        type="button"
-        class="inline-flex h-9 items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]"
-        (click)="onConfirm()"
-      >
-        {{ confirmText }}
-      </button>
-    </div>
-  </section>
-</div>

package/src/lib/components/alert-dialog/alert-dialog.component.ts

@@ -1,45 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-alert-dialog',
-  templateUrl: './alert-dialog.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmAlertDialogComponent {
-  @Input() open = false;
-  @Input() showTrigger = false;
-  @Input() triggerText = 'Show dialog';
-  @Input() title = 'Are you absolutely sure?';
-  @Input() description = '';
-  @Input() confirmText = 'Continue';
-  @Input() cancelText = 'Cancel';
-  @Input() className = '';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() confirm = new EventEmitter<void>();
-  @Output() cancel = new EventEmitter<void>();
-
-  onTriggerClick(): void {
-    this.open = true;
-    this.openChange.emit(true);
-  }
-
-  onCancel(): void {
-    this.cancel.emit();
-    this.open = false;
-    this.openChange.emit(false);
-  }
-
-  onConfirm(): void {
-    this.confirm.emit();
-    this.open = false;
-    this.openChange.emit(false);
-  }
-
-  @HostListener('document:keydown.escape')
-  onEsc(): void {
-    if (this.open) {
-      this.onCancel();
-    }
-  }
-}

package/src/lib/components/aspect-ratio/aspect-ratio.component.html

@@ -1,11 +0,0 @@
-<div class="relative w-full" [ngClass]="className" [style.paddingTop]="paddingTop">
-  <div class="absolute inset-0 overflow-hidden rounded-[10px]">
-    <img
-      *ngIf="imageSrc"
-      [src]="imageSrc"
-      [alt]="imageAlt"
-      class="pointer-events-none h-full w-full rounded-[10px] object-cover"
-    />
-    <ng-content></ng-content>
-  </div>
-</div>

package/src/lib/components/aspect-ratio/aspect-ratio.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-aspect-ratio',
-  templateUrl: './aspect-ratio.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmAspectRatioComponent {
-  @Input() ratio = 16 / 9;
-  @Input() imageSrc = '';
-  @Input() imageAlt = '';
-  @Input() className = '';
-
-  get paddingTop(): string {
-    if (!this.ratio || this.ratio <= 0) return '56.25%';
-    return (100 / this.ratio).toFixed(4) + '%';
-  }
-}

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

@@ -1,21 +0,0 @@
-<div *ngIf="!isGroup" [ngClass]="['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]">
-  <img *ngIf="src" [src]="src" [alt]="alt" [ngClass]="['aspect-square h-full w-full object-cover', radiusClass]" />
-  <div
-    *ngIf="!src"
-    [ngClass]="['flex h-full w-full items-center justify-center bg-[hsl(var(--muted))] text-xs text-[hsl(var(--muted-foreground))]', radiusClass]"
-  >
-    {{ fallback }}
-  </div>
-</div>
-
-<div *ngIf="isGroup" [ngClass]="['inline-flex items-center pr-2', className]">
-  <div
-    *ngFor="let groupSrc of groupSources; let i = index"
-    [ngClass]="[
-      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',
-      i > 0 ? '-mr-2 border border-[#e5e5e5]' : '-mr-2'
-    ]"
-  >
-    <img [src]="groupSrc" [alt]="alt + ' ' + (i + 1)" class="h-full w-full rounded-full object-cover" />
-  </div>
-</div>

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

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmAvatarShape = 'circle' | 'square';
-
-@Component({
-  selector: 'pdm-avatar',
-  templateUrl: './avatar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmAvatarComponent {
-  @Input() src = '';
-  @Input() alt = 'Avatar';
-  @Input() fallback = 'U';
-  @Input() shape: PdmAvatarShape = 'circle';
-  @Input() size: 'sm' | 'md' | 'lg' = 'md';
-  @Input() groupSources: string[] = [];
-  @Input() className = '';
-
-  readonly sizeClasses = {
-    sm: 'h-8 w-8',
-    md: 'h-10 w-10',
-    lg: 'h-12 w-12'
-  };
-
-  get isGroup(): boolean {
-    return this.groupSources.length > 0;
-  }
-
-  get radiusClass(): string {
-    return this.shape === 'square' ? 'rounded-[8px]' : 'rounded-full';
-  }
-}

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

@@ -1,28 +0,0 @@
-<span
-  [ngClass]="[
-    'inline-flex items-center justify-center text-center align-middle',
-    variant === 'default' ? 'h-[22px] rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',
-    variant === 'secondary' ? 'h-[22px] rounded-[10px] bg-[#f5f5f5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',
-    variant === 'destructive' ? 'h-[22px] rounded-[10px] bg-[#dc2626] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',
-    variant === 'outline' ? 'h-[22px] rounded-[10px] border border-[#e5e5e5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',
-    variant === 'icon' ? 'h-[22px] gap-1 rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',
-    variant === 'number' ? 'h-5 min-w-[20px] rounded-full bg-[#171717] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',
-    variant === 'destructive-number' ? 'h-5 min-w-[20px] rounded-full bg-[#dc2626] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',
-    variant === 'secondary-number' ? 'h-5 min-w-[20px] rounded-full border border-[#e5e5e5] px-1 py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',
-    className
-  ]"
->
-  <svg
-    *ngIf="variant === 'icon'"
-    viewBox="0 0 24 24"
-    class="h-4 w-4"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"></circle>
-    <path d="M8.5 12.5L10.8 14.8L15.8 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-  </svg>
-  <span [ngClass]="[variant === 'secondary-number' ? 'font-mono' : '']">{{ text }}</span>
-</span>
-

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

@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmBadgeVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'outline'
-  | 'icon'
-  | 'number'
-  | 'destructive-number'
-  | 'secondary-number';
-
-@Component({
-  selector: 'pdm-badge',
-  templateUrl: './badge.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmBadgeComponent {
-  @Input() variant: PdmBadgeVariant = 'default';
-  @Input() text = 'Badge';
-  @Input() className = '';
-}
-

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

@@ -1,39 +0,0 @@
-<nav
-  aria-label="breadcrumb"
-  [ngClass]="['inline-flex items-center gap-[6px] text-[14px] leading-5', className]"
->
-  <ng-container *ngFor="let item of renderedItems; let i = index; let last = last">
-    <span [ngClass]="[last ? 'text-[#0a0a0a]' : 'text-[#737373]']">{{ item }}</span>
-
-    <ng-container *ngIf="!last">
-      <span class="inline-flex h-6 w-6 items-center justify-center text-[#737373]" aria-hidden="true">
-        <svg
-          *ngIf="mode === 'custom-separator' && item !== '...'"
-          viewBox="0 0 24 24"
-          class="h-4 w-4"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M8 20L16 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-        </svg>
-        <svg
-          *ngIf="(mode !== 'custom-separator' && item !== '...') || item === '...'"
-          viewBox="0 0 24 24"
-          class="h-4 w-4"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-      </span>
-    </ng-container>
-
-    <ng-container *ngIf="mode === 'dropdown' && i === 1 && item !== '...' && !last">
-      <span class="-ml-2 inline-flex h-6 w-6 items-center justify-center text-[#737373]" aria-hidden="true">
-        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-      </span>
-    </ng-container>
-  </ng-container>
-</nav>

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

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmBreadcrumbMode =
-  | 'custom-separator'
-  | 'dropdown'
-  | 'collapsed'
-  | 'link-component'
-  | 'responsive';
-
-@Component({
-  selector: 'pdm-breadcrumb',
-  templateUrl: './breadcrumb.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmBreadcrumbComponent {
-  @Input() mode: PdmBreadcrumbMode = 'link-component';
-  @Input() items: string[] = ['Home', 'Components', 'Breadcrumb'];
-  @Input() className = '';
-
-  get renderedItems(): string[] {
-    if ((this.mode === 'collapsed' || this.mode === 'responsive') && this.items.length > 3) {
-      return [this.items[0], '...', this.items[this.items.length - 2], this.items[this.items.length - 1]];
-    }
-    return this.items;
-  }
-}

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

@@ -1,15 +0,0 @@
-<button
-  [type]="type"
-  [disabled]="isDisabled"
-  [attr.aria-busy]="loading"
-  [ngClass]="rootClasses"
-  (click)="onClick($event)"
->
-  <span
-    *ngIf="loading"
-    class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
-    aria-hidden="true"
-  ></span>
-  <ng-content select="[pdmButtonIcon]" *ngIf="variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'"></ng-content>
-  <ng-content></ng-content>
-</button>

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

@@ -1,84 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmButtonVariant =
-  | 'default'
-  | 'primary'
-  | 'destructive'
-  | 'outline'
-  | 'subtle'
-  | 'secondary'
-  | 'ghost'
-  | 'link'
-  | 'with-icon'
-  | 'icon'
-  | 'icon-circle'
-  | 'rounded'
-  | 'loading';
-export type PdmButtonState = 'default' | 'hover';
-export type PdmButtonSize = 'small' | 'default' | 'large';
-
-@Component({
-  selector: 'pdm-button',
-  templateUrl: './button.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmButtonComponent {
-  @Input() type: 'button' | 'submit' | 'reset' = 'button';
-  @Input() variant: PdmButtonVariant = 'default';
-  @Input() state: PdmButtonState = 'default';
-  @Input() size: PdmButtonSize = 'default';
-  @Input() disabled = false;
-  @Input() loading = false;
-  @Input() className = '';
-
-  @Output() pressed = new EventEmitter<MouseEvent>();
-
-  readonly toneClassMap: Record<PdmButtonVariant, { default: string; hover: string }> = {
-    default: { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-    primary: { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-    destructive: { default: 'bg-destructive text-background', hover: 'bg-destructive text-background opacity-90' },
-    outline: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-    subtle: { default: 'bg-secondary text-secondary-foreground', hover: 'bg-accent text-accent-foreground' },
-    secondary: { default: 'bg-secondary text-secondary-foreground', hover: 'bg-accent text-accent-foreground' },
-    ghost: { default: 'bg-transparent text-foreground', hover: 'bg-accent text-accent-foreground' },
-    link: { default: 'bg-transparent text-primary', hover: 'bg-transparent text-primary' },
-    'with-icon': { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-    icon: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-    'icon-circle': { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-    rounded: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-    loading: { default: 'bg-primary text-primary-foreground opacity-70', hover: 'bg-primary text-primary-foreground opacity-70' }
-  };
-
-  get isDisabled(): boolean {
-    return this.disabled || this.loading || this.variant === 'loading';
-  }
-
-  get rootClasses(): string[] {
-    const currentState = this.state === 'hover' ? 'hover' : 'default';
-    const toneClass = this.toneClassMap[this.variant][currentState];
-
-    return [
-      'inline-flex items-center justify-center gap-2 rounded-[6px] border border-transparent text-[14px] font-medium leading-6 transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
-      this.variant === 'link' ? 'px-4 py-2 h-9' : '',
-      this.variant === 'icon' ? 'h-8 w-8 p-2' : '',
-      this.variant === 'icon-circle' ? 'h-10 w-10 rounded-[96px] p-3' : '',
-      this.variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
-      this.variant !== 'icon' && this.variant !== 'icon-circle' && this.variant !== 'rounded'
-        ? this.size === 'small'
-          ? 'h-8 px-3'
-          : this.size === 'large'
-            ? 'h-10 px-5'
-            : 'h-9 px-4'
-        : '',
-      this.variant === 'link' && this.state === 'hover' ? 'underline [text-decoration-skip-ink:none]' : '',
-      toneClass,
-      this.className
-    ];
-  }
-
-  onClick(event: MouseEvent): void {
-    if (!this.isDisabled) {
-      this.pressed.emit(event);
-    }
-  }
-}

package/src/lib/components/button-group/button-group.component.html

@@ -1,39 +0,0 @@
-<div [ngClass]="['inline-flex items-center gap-2', className]">
-  <ng-container [ngSwitch]="variant">
-    <ng-container *ngSwitchCase="'orientation'">
-      <div class="inline-flex flex-col overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-        <button type="button" class="inline-flex h-9 w-9 items-center justify-center border-b border-[#e5e5e5] text-[#0a0a0a]">+</button>
-        <button type="button" class="inline-flex h-9 w-9 items-center justify-center text-[#0a0a0a]">-</button>
-      </div>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'separator'">
-      <div class="inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-        <button type="button" class="inline-flex h-8 items-center justify-center border-r border-[#e5e5e5] px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]">Copy</button>
-        <button type="button" class="inline-flex h-8 items-center justify-center px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]">Paste</button>
-      </div>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'nested'">
-      <div class="inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-        <button *ngFor="let item of ['1', '2', '3', '4', '5']; let last = last" type="button" [ngClass]="['inline-flex h-8 items-center justify-center px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]', !last ? 'border-r border-[#e5e5e5]' : '']">{{ item }}</button>
-      </div>
-      <div class="inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-        <button type="button" class="inline-flex h-8 w-8 items-center justify-center border-r border-[#e5e5e5] text-[#0a0a0a]">←</button>
-        <button type="button" class="inline-flex h-8 w-8 items-center justify-center text-[#0a0a0a]">→</button>
-      </div>
-    </ng-container>
-
-    <ng-container *ngSwitchDefault>
-      <div class="inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] text-[#0a0a0a]">←</div>
-      <div class="inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-        <button *ngFor="let item of items; let last = last" type="button" [ngClass]="['inline-flex h-9 items-center justify-center px-4 text-[14px] font-medium leading-5 text-[#0a0a0a]', !last ? 'border-r border-[#e5e5e5]' : '']">{{ item }}</button>
-      </div>
-      <div class="inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-        <button type="button" class="inline-flex h-9 items-center justify-center border-r border-[#e5e5e5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a]">Snooze</button>
-        <button type="button" class="inline-flex h-9 w-9 items-center justify-center text-[#0a0a0a]">…</button>
-      </div>
-    </ng-container>
-  </ng-container>
-</div>
-

package/src/lib/components/button-group/button-group.component.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmButtonGroupVariant = 'default' | 'orientation' | 'separator' | 'nested';
-
-@Component({
-  selector: 'pdm-button-group',
-  templateUrl: './button-group.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmButtonGroupComponent {
-  @Input() variant: PdmButtonGroupVariant = 'default';
-  @Input() items: string[] = ['Archive', 'Report'];
-  @Input() className = '';
-}
-

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

@@ -1,73 +0,0 @@
-<section
-  [ngClass]="[
-    'rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]',
-    mode === 'range' ? 'w-[488px]' : 'w-[250px]',
-    className
-  ]"
->
-  <div [ngClass]="['grid gap-4', mode === 'range' ? 'grid-cols-2' : 'grid-cols-1']">
-    <div class="space-y-4">
-      <header class="flex items-center justify-between">
-        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]">‹</button>
-        <div [ngClass]="['flex items-center justify-center gap-1', mode === 'range' ? 'w-full' : 'w-[160px]']">
-          <ng-container *ngIf="mode === 'single'; else monthText">
-            <span class="inline-flex h-8 items-center rounded-[8px] border border-[#e5e5e5] px-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">Jun</span>
-            <span class="inline-flex h-8 items-center rounded-[8px] border border-[#e5e5e5] px-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]">2025</span>
-          </ng-container>
-          <ng-template #monthText>
-            <span class="text-[28px] text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ leftMonthName }} {{ year }}</span>
-          </ng-template>
-        </div>
-        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]">{{ mode === 'range' ? '' : '›' }}</button>
-      </header>
-
-      <div>
-        <div class="grid grid-cols-7">
-          <span *ngFor="let day of weekdays" class="inline-flex h-[21px] items-center justify-center text-[12px] font-normal leading-4 text-[#737373]">{{ day }}</span>
-        </div>
-        <div class="mt-2 grid grid-cols-7 gap-y-2">
-          <button
-            *ngFor="let cell of leftCells"
-            type="button"
-            [ngClass]="[
-              'inline-flex h-8 w-8 items-center justify-center rounded-[8px] text-[14px] font-normal leading-5',
-              cell.outside ? 'text-[#0a0a0a] opacity-50' : 'text-[#0a0a0a]',
-              cell.inRange ? 'bg-[#f5f5f5]' : '',
-              cell.selected ? 'bg-[#171717] text-[#fafafa]' : ''
-            ]"
-          >
-            {{ cell.day }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div *ngIf="mode === 'range'" class="space-y-4">
-      <header class="flex items-center justify-between">
-        <span class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ rightMonthName }} {{ month === 12 ? year + 1 : year }}</span>
-        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]">›</button>
-      </header>
-
-      <div>
-        <div class="grid grid-cols-7">
-          <span *ngFor="let day of weekdays" class="inline-flex h-[21px] items-center justify-center text-[12px] font-normal leading-4 text-[#737373]">{{ day }}</span>
-        </div>
-        <div class="mt-2 grid grid-cols-7 gap-y-2">
-          <button
-            *ngFor="let cell of rightCells"
-            type="button"
-            [ngClass]="[
-              'inline-flex h-8 w-8 items-center justify-center rounded-[8px] text-[14px] font-normal leading-5',
-              cell.outside ? 'text-[#0a0a0a] opacity-50' : 'text-[#0a0a0a]',
-              cell.inRange ? 'bg-[#f5f5f5]' : '',
-              cell.selected ? 'bg-[#171717] text-[#fafafa]' : ''
-            ]"
-          >
-            {{ cell.day }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-

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

@@ -1,78 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmCalendarMode = 'single' | 'range';
-
-interface CalendarCell {
-  date: Date;
-  day: number;
-  outside: boolean;
-  selected: boolean;
-  inRange: boolean;
-}
-
-@Component({
-  selector: 'pdm-calendar',
-  templateUrl: './calendar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmCalendarComponent {
-  @Input() mode: PdmCalendarMode = 'single';
-  @Input() month = 6;
-  @Input() year = 2025;
-  @Input() selectedDay = 25;
-  @Input() rangeStartDay = 25;
-  @Input() rangeEndDay = 9;
-  @Input() className = '';
-
-  readonly weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-
-  get leftMonthName(): string {
-    return this.monthName(this.month - 1);
-  }
-
-  get rightMonthName(): string {
-    const rightMonth = this.month % 12;
-    return this.monthName(rightMonth);
-  }
-
-  get leftCells(): CalendarCell[] {
-    return this.buildMonthCells(this.year, this.month - 1, this.selectedDay, this.mode === 'range' ? this.rangeStartDay : undefined, this.mode === 'range' ? 31 : undefined);
-  }
-
-  get rightCells(): CalendarCell[] {
-    const rightMonth = this.month % 12;
-    const rightYear = this.month === 12 ? this.year + 1 : this.year;
-    return this.buildMonthCells(rightYear, rightMonth, this.mode === 'range' ? this.rangeEndDay : undefined, 1, this.mode === 'range' ? this.rangeEndDay : undefined);
-  }
-
-  private monthName(monthIndex: number): string {
-    const safe = ((monthIndex % 12) + 12) % 12;
-    return new Date(this.year, safe, 1).toLocaleString('en-US', { month: 'long' });
-  }
-
-  private buildMonthCells(
-    year: number,
-    monthIndex: number,
-    selectedDay?: number,
-    rangeStartDay?: number,
-    rangeEndDay?: number
-  ): CalendarCell[] {
-    const firstDay = new Date(year, monthIndex, 1);
-    const startWeekday = firstDay.getDay();
-    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
-    const cells: CalendarCell[] = [];
-
-    for (let i = 0; i < 42; i += 1) {
-      const dayNumber = i - startWeekday + 1;
-      const date = new Date(year, monthIndex, dayNumber);
-      const outside = dayNumber < 1 || dayNumber > daysInMonth;
-      const day = date.getDate();
-      const selected = !outside && !!selectedDay && day === selectedDay;
-      const inRange = !outside && !!rangeStartDay && !!rangeEndDay && day >= rangeStartDay && day <= rangeEndDay;
-      cells.push({ date, day, outside, selected, inRange });
-    }
-
-    return cells;
-  }
-}
-