pdm-ui-kit 0.1.0 → 0.1.2

package/FIGMA_COMPONENT_AUDIT.md

@@ -1,154 +0,0 @@
-# Figma Audit - shadcn/ui Design System (fileKey: YQaGNKBcNRSOIMSPIIAuiz)
-
-Node analyzed: `2:287` (Cover) + component masters used in cover.
-
-## Core tokens
-
-### Colors
-- `slate/900`: `#0F172A`
-- `slate/700`: `#334155`
-- `slate/600`: `#475569`
-- `slate/500`: `#64748B`
-- `slate/400`: `#94A3B8`
-- `slate/200`: `#E2E8F0`
-- `slate/100`: `#F1F5F9`
-- `white`: `#FFFFFF`
-- `red/500`: `#EF4444`
-- `red/600`: `#DC2626`
-
-### Typography
-- `body-medium`: Inter 14/24, 500
-- `small`: Inter 14/14, 500
-- `subtle`: Inter 14/20, 400
-- `subtle-medium`: Inter 14/20, 500
-- `suble - semibold`: Inter 14/20, 600
-- `detail`: Inter 12/20, 500
-- `p`: Inter 16/28, 400
-- `large`: Inter 18/28, 600
-
-### Effects and shape
-- Border radius common: `6px`
-- Dropdown/tab inner radius: `3px`
-- Shadow (menu/popover): `0 4px 6px 0 rgba(0, 0, 0, 0.09)`
-
-## Components and variant/state matrix
-
-### Button (`1:85`)
-State set:
-- `Default`
-- `hover`
-
-Type set:
-- `default`
-- `primary button`
-- `destructive`
-- `outline`
-- `subtle`
-- `ghost`
-- `link`
-- `with icon`
-- `just icon`
-- `just icon circle`
-- `loading`
-
-Notes:
-- `primary button` appears as hover style in source file.
-- Not all type/state combinations exist in Figma.
-
-### Switch (`9:338`)
-- State in cover: `on`
-- Track: `44x24`
-- Thumb: `20x20`
-- Label uses token `small`
-
-### Tabs (`6:212`)
-- States displayed: `Selected`, `Unselected`
-- Container: bg `slate/100`, `p=5`, `r=6`
-- Active tab bg `white`, inactive text `slate/700`
-
-### Radio group (`13:2543`)
-- Options displayed: `Default`, `Comfortable`, `Compact`
-- Dot size: `16x16`
-- Label token: `small`
-
-### Popover (`13:2311`)
-- Surface: bg white, border `slate/200`, `r=6`
-- Shadow: `shadow`
-- Internal form rows with label + input field style
-
-### Hover card (`13:2340`)
-- Surface: bg white, subtle border/shadow
-- Title `@nextjs`: semibold 14/20
-- Description: regular 14/20
-- Meta line: 12/16 in `slate/500`
-
-### Dropdown menu (`13:2363`)
-- Container: border `slate/100`, `r=6`, shadow
-- Item rows with icon + label + optional shortcut
-- Includes section labels and separators
-- Disabled pattern shown (`API`) with reduced emphasis
-
-## Implementation status in this repo
-
-Updated components in `projects/pdm-ui-kit/src/lib/components`:
-- `button`
-- `switch`
-- `radio-group`
-- `tabs`
-- `dropdown-menu`
-- `popover`
-- `hover-card`
-
-These were adjusted to match Figma details from the analyzed nodes.
-
-## Figma Desktop nodes used (line omitted)
-
-- `Field`: `1188:4205`
-- `Input Group`: `1188:5363`
-- `Input OTP`: `101:698`
-- `Input`: `73:1977`
-- `Item`: `1196:923`
-- `Kbd`: `1196:1097`
-- `Label`: `73:1978`
-- `Menubar`: `73:1979`
-- `Native Select`: `1254:65`
-- `Navigation Menu`: `73:1980`
-- `Pagination`: `73:1981`
-- `Popover`: `73:1982`
-- `Progress`: `73:1983`
-- `Radio Group`: `73:1984`
-- `Scroll Area`: `73:1985`
-- `Select`: `73:1986`
-- `Separator`: `73:1987`
-- `Sheet`: `73:1988`
-- `Sidebar`: `269:32`
-- `Skeleton`: `73:1989`
-- `Slider`: `73:2895`
-- `Sonner`: `73:2896`
-- `Spinner`: `1196:1174`
-- `Switch`: `73:2897`
-- `Table`: `73:2898`
-- `Tabs`: `73:2899`
-- `Textarea`: `73:2900`
-- `Toggle`: `73:2902`
-- `Toggle Group`: `73:2903`
-- `Tooltip`: `73:2904`
-- `Chart Area`: `201:20`
-- `Chart Bar`: `201:21`
-- `Chart Line`: `201:22`
-- `Chart Pie`: `201:23`
-- `Chart Radar`: `201:24`
-- `Chart Radial`: `257:13124`
-- `Chart Tooltips`: `201:26`
-- `Lucide Icons`: `135:2`
-- `Tabler Icons`: `642:97`
-- `HugeIcons`: `1361:5869`
-- `Phosphor Icons`: `1528:9`
-- `Remix Icons`: `1603:3`
-
-### Implementation updates in this pass
-
-- `chart`: added `type` variants `area`, `bar`, `line`, `pie`, `radar`, `radial`, `tooltips`.
-- `chart`: aligned typography/colors to token-based theming and added variant-specific datasets.
-- `icon`: added `library` support for `lucide`, `tabler`, `hugeicons`, `phosphor`, `remix`.
-- `icon`: added `assetUrl` input to render direct Figma localhost SVG assets without adding icon packages.

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/pdm-ui-kit",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

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

@@ -1,34 +0,0 @@
-<div [ngClass]="['w-full', className]">
-  <div *ngFor="let item of items; let i = index" class="border-b border-[#e5e5e5]">
-    <h3>
-      <button
-        type="button"
-        class="flex h-[52px] w-full items-center justify-between py-4 text-left text-[14px] font-medium leading-5 text-[#0a0a0a] transition-colors"
-        [disabled]="item.disabled"
-        [attr.aria-expanded]="isExpanded(i)"
-        [attr.aria-controls]="item.id + '-panel'"
-        (click)="toggle(i)"
-      >
-        <span class="pr-[10px]">{{ item.title }}</span>
-        <span class="inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a]" aria-hidden="true">
-          <svg
-            class="h-4 w-4 transition-transform"
-            [ngClass]="isExpanded(i) ? 'rotate-180' : ''"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M3.5 6.5L8 11L12.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        </span>
-      </button>
-    </h3>
-    <div
-      *ngIf="isExpanded(i)"
-      [id]="item.id + '-panel'"
-      class="flex flex-col gap-4 pb-4 text-[14px] font-normal leading-5 text-[#0a0a0a]"
-    >
-      <p *ngFor="let line of contentLines(item.content)" class="m-0">{{ line }}</p>
-    </div>
-  </div>
-</div>

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

@@ -1,38 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmAccordionItem {
-  id: string;
-  title: string;
-  content: string | string[];
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-accordion',
-  templateUrl: './accordion.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmAccordionComponent {
-  @Input() items: PdmAccordionItem[] = [];
-  @Input() expandedIndex = -1;
-  @Input() className = '';
-
-  @Output() expandedIndexChange = new EventEmitter<number>();
-
-  isExpanded(index: number): boolean {
-    return this.expandedIndex === index;
-  }
-
-  contentLines(content: string | string[]): string[] {
-    if (Array.isArray(content)) return content;
-    return content
-      .split('\n')
-      .map((line) => line.trim())
-      .filter((line) => line.length > 0);
-  }
-
-  toggle(index: number): void {
-    if (this.items[index]?.disabled) return;
-    this.expandedIndexChange.emit(this.expandedIndex === index ? -1 : index);
-  }
-}

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

@@ -1,52 +0,0 @@
-<section
-  role="alert"
-  [ngClass]="[
-    'w-full rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-3',
-    className
-  ]"
->
-  <div [ngClass]="['flex gap-3', isDestructive ? 'items-start' : 'items-center']">
-    <span class="inline-flex h-6 w-6 shrink-0 items-center justify-center">
-      <svg *ngIf="!isDestructive && !isTitleOnly" viewBox="0 0 24 24" class="h-5 w-5 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <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>
-      <svg *ngIf="isTitleOnly" viewBox="0 0 24 24" class="h-5 w-5 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M5 8H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-        <path d="M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-        <path d="M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-      </svg>
-      <svg *ngIf="isDestructive" viewBox="0 0 24 24" class="h-5 w-5 text-[#dc2626]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"></circle>
-        <path d="M12 8V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-        <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
-      </svg>
-    </span>
-
-    <div class="min-w-0 flex-1">
-      <h4
-        [ngClass]="[
-          'm-0 text-[14px] font-medium leading-5',
-          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a]'
-        ]"
-      >
-        {{ title }}
-      </h4>
-
-      <p
-        *ngIf="!isTitleOnly && description"
-        [ngClass]="[
-          'm-0 mt-0.5 text-[14px] leading-5',
-          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a] font-light'
-        ]"
-      >
-        {{ description }}
-      </p>
-
-      <ul *ngIf="isDestructive && details.length" class="m-0 mt-1 pl-5 text-[14px] leading-5 text-[#dc2626]">
-        <li *ngFor="let item of details">{{ item }}</li>
-      </ul>
-    </div>
-  </div>
-</section>
-

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>