pdm-ui-kit 0.1.2 → 0.1.4

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

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

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

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

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

@@ -0,0 +1,78 @@
+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;
+  }
+}
+

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

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

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

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

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