pdm-ui-kit 0.1.0

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

@@ -0,0 +1,286 @@
+<ng-container *ngIf="assetUrl; else inlineIcon">
+  <img
+    [src]="assetUrl"
+    [style.width.px]="size"
+    [style.height.px]="size"
+    [ngClass]="className"
+    [attr.role]="decorative ? null : 'img'"
+    [attr.aria-hidden]="decorative ? 'true' : null"
+    [attr.aria-label]="!decorative ? ariaLabel || name : null"
+    alt=""
+  />
+</ng-container>
+
+<ng-template #inlineIcon>
+  <svg
+    [attr.width]="size"
+    [attr.height]="size"
+    [ngClass]="className"
+    [attr.role]="decorative ? null : 'img'"
+    [attr.aria-hidden]="decorative ? 'true' : null"
+    [attr.aria-label]="!decorative ? ariaLabel || name : null"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <ng-container [ngSwitch]="iconKey">
+    <g *ngSwitchCase="'command'">
+      <path d="M9 9V15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M15 9V15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 9H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 15H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 9H7.5C6.12 9 5 7.88 5 6.5C5 5.12 6.12 4 7.5 4C8.88 4 10 5.12 10 6.5V8" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M15 9H16.5C17.88 9 19 7.88 19 6.5C19 5.12 17.88 4 16.5 4C15.12 4 14 5.12 14 6.5V8" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 15H7.5C6.12 15 5 16.12 5 17.5C5 18.88 6.12 20 7.5 20C8.88 20 10 18.88 10 17.5V16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M15 15H16.5C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20C15.12 20 14 18.88 14 17.5V16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'check'">
+      <path d="M5 12.5L9.2 16.7L19 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'check-circle'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M8.5 12.2L11 14.7L15.8 9.9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'circle'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+    </g>
+
+    <g *ngSwitchCase="'dot'">
+      <circle cx="12" cy="12" r="2.5" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'x'">
+      <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'alert-circle'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M12 8V12" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'info'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M12 11V16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <circle cx="12" cy="8" r="1" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'loader-2'">
+      <path d="M12 3A9 9 0 1 0 21 12" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'menu'">
+      <path d="M4 7H20M4 12H20M4 17H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'search'">
+      <circle cx="11" cy="11" r="7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M20 20L16.6 16.6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'calendar'">
+      <path d="M8 3V6M16 3V6M4 10H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <rect x="4" y="6" width="16" height="14" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+    </g>
+
+    <g *ngSwitchCase="'panel-left'">
+      <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M9 4V20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></path>
+    </g>
+
+    <g *ngSwitchCase="'monitor'">
+      <rect x="3" y="4" width="18" height="13" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M8 20H16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M12 17V20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'laptop'">
+      <rect x="5" y="5" width="14" height="10" rx="1.5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M3 18H21" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'sun'">
+      <circle cx="12" cy="12" r="4" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'moon'">
+      <path d="M20 14.5C19.1 17.9 16 20.5 12.3 20.5C7.9 20.5 4.3 16.9 4.3 12.5C4.3 8.8 6.8 5.8 10.2 4.8C9.6 5.8 9.3 7 9.3 8.2C9.3 11.8 12.2 14.7 15.8 14.7C17 14.7 18.1 14.4 19.1 13.8C19.4 13.6 20.1 14 20 14.5Z" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-down'">
+      <path d="M7 10L12 15L17 10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-up'">
+      <path d="M17 14L12 9L7 14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-left'">
+      <path d="M15 18L9 12L15 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-right'">
+      <path d="M9 18L15 12L9 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevrons-left'">
+      <path d="M14 18L8 12L14 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M20 18L14 12L20 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevrons-right'">
+      <path d="M10 18L16 12L10 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M4 18L10 12L4 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevrons-up-down'">
+      <path d="M7 15L12 20L17 15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M17 9L12 4L7 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'arrow-up-down'">
+      <path d="M12 4V20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M8 8L12 4L16 8" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M8 16L12 20L16 16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'ellipsis'">
+      <circle cx="6" cy="12" r="1.5" fill="currentColor"></circle>
+      <circle cx="12" cy="12" r="1.5" fill="currentColor"></circle>
+      <circle cx="18" cy="12" r="1.5" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'filter'">
+      <path d="M4 6H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M7 12H17" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M10 18H14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'sort-asc'">
+      <path d="M7 18V6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M4 9L7 6L10 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M14 8H20M14 12H18M14 16H16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'sort-desc'">
+      <path d="M7 6V18" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M4 15L7 18L10 15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M14 8H16M14 12H18M14 16H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'plus'">
+      <path d="M12 5V19M5 12H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'minus'">
+      <path d="M5 12H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'copy'">
+      <rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <rect x="4" y="4" width="11" height="11" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+    </g>
+
+    <g *ngSwitchCase="'pencil'">
+      <path d="M12 20H21" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M16.5 4.5C17.1 3.9 18 3.9 18.6 4.5L19.5 5.4C20.1 6 20.1 6.9 19.5 7.5L9 18L4 19L5 14L16.5 4.5Z" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'trash-2'">
+      <path d="M4 7H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 7V5C9 4.4 9.4 4 10 4H14C14.6 4 15 4.4 15 5V7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M7 7L8 19C8 19.6 8.4 20 9 20H15C15.6 20 16 19.6 16 19L17 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M10 11V17M14 11V17" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'download'">
+      <path d="M12 4V14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M8 10L12 14L16 10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M5 19H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'upload'">
+      <path d="M12 20V10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M8 14L12 10L16 14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M5 5H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'home'">
+      <path d="M4 10.5L12 4L20 10.5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M6 9.5V20H18V9.5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'mail'">
+      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M4 7L12 13L20 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'phone'">
+      <path d="M8.8 4.6C9.2 3.8 10.2 3.5 11 4L13.3 5.2C14.1 5.6 14.4 6.6 14 7.4L13 9.2C12.8 9.6 12.9 10.1 13.2 10.4L14.9 12.1C15.2 12.4 15.7 12.5 16.1 12.3L17.9 11.3C18.7 10.9 19.7 11.2 20.1 12L21.3 14.3C21.8 15.1 21.5 16.1 20.7 16.5L18.8 17.5C16.9 18.5 14.5 18.1 12.9 16.5L7.5 11.1C5.9 9.5 5.5 7.1 6.5 5.2L8.8 4.6Z" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'log-in'">
+      <path d="M15 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M10 17L14 13L10 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M14 13H4" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'log-out'">
+      <path d="M9 3H6C4.9 3 4 3.9 4 5V19C4 20.1 4.9 21 6 21H9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M14 17L10 13L14 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M10 13H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'user'">
+      <circle cx="12" cy="8" r="3" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M6 19C6.8 16.7 8.9 15.5 12 15.5C15.1 15.5 17.2 16.7 18 19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'settings'">
+      <circle cx="12" cy="12" r="3" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M19 12A7 7 0 1 0 12 19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'credit-card'">
+      <rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M3 10H21" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></path>
+    </g>
+
+    <g *ngSwitchCase="'smile'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M9 15C9.7 16 10.7 16.5 12 16.5C13.3 16.5 14.3 16 15 15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <circle cx="9" cy="10" r="1" fill="currentColor"></circle>
+      <circle cx="15" cy="10" r="1" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'calculator'">
+      <rect x="6" y="3" width="12" height="18" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M9 7H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 12H10M14 12H15M9 16H10M14 16H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'external-link'">
+      <path d="M14 5H19V10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M10 14L19 5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M19 14V19H5V5H10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'folder'">
+      <path d="M3 7C3 5.9 3.9 5 5 5H9L11 7H19C20.1 7 21 7.9 21 9V17C21 18.1 20.1 19 19 19H5C3.9 19 3 18.1 3 17V7Z" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'arrow-up-right'">
+      <path d="M7 17L17 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 7H17V15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchDefault>
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+    </g>
+    </ng-container>
+  </svg>
+</ng-template>

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

@@ -0,0 +1,133 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmIconLibrary = 'lucide' | 'tabler' | 'hugeicons' | 'phosphor' | 'remix';
+
+export type PdmIconName =
+  | 'command'
+  | 'check'
+  | 'check-circle'
+  | 'circle'
+  | 'dot'
+  | 'x'
+  | 'alert-circle'
+  | 'info'
+  | 'loader-2'
+  | 'menu'
+  | 'search'
+  | 'calendar'
+  | 'panel-left'
+  | 'monitor'
+  | 'laptop'
+  | 'sun'
+  | 'moon'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'chevrons-left'
+  | 'chevrons-right'
+  | 'chevrons-up-down'
+  | 'arrow-up-down'
+  | 'ellipsis'
+  | 'filter'
+  | 'sort-asc'
+  | 'sort-desc'
+  | 'plus'
+  | 'minus'
+  | 'copy'
+  | 'pencil'
+  | 'trash-2'
+  | 'download'
+  | 'upload'
+  | 'home'
+  | 'mail'
+  | 'phone'
+  | 'log-in'
+  | 'log-out'
+  | 'user'
+  | 'settings'
+  | 'credit-card'
+  | 'smile'
+  | 'calculator'
+  | 'external-link'
+  | 'folder'
+  | 'arrow-up-right';
+
+@Component({
+  selector: 'pdm-icon',
+  templateUrl: './icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmIconComponent {
+  @Input() name: PdmIconName | string = 'check';
+  @Input() library: PdmIconLibrary = 'lucide';
+  @Input() assetUrl: string | null = null;
+  @Input() size = 16;
+  @Input() strokeWidth = 1.5;
+  @Input() className = '';
+  @Input() ariaLabel: string | null = null;
+  @Input() decorative = false;
+
+  get resolvedStrokeWidth(): number {
+    if (this.strokeWidth) {
+      return this.strokeWidth;
+    }
+
+    if (this.library === 'phosphor') {
+      return 1.6;
+    }
+
+    if (this.library === 'tabler') {
+      return 1.8;
+    }
+
+    return 1.5;
+  }
+
+  get iconKey(): string {
+    const raw = `${this.name || ''}`.trim();
+    if (!raw) {
+      return 'circle';
+    }
+
+    const trimmed = raw.replace(/^(lucide|tabler|hugeicons|phosphor|remix)\//, '');
+    const aliases = this.aliasMapByLibrary[this.library] ?? {};
+    return aliases[trimmed] ?? trimmed;
+  }
+
+  private readonly aliasMapByLibrary: Record<PdmIconLibrary, Record<string, string>> = {
+    lucide: {},
+    tabler: {
+      'alert-triangle': 'alert-circle',
+      'chevron-down': 'chevron-down',
+      'chevron-right': 'chevron-right',
+      'user-circle': 'user',
+      'settings-2': 'settings',
+      'external-link': 'external-link'
+    },
+    hugeicons: {
+      'alert-02': 'alert-circle',
+      'user-circle': 'user',
+      'search-01': 'search',
+      'settings-01': 'settings',
+      'arrow-right-01': 'chevron-right',
+      'arrow-down-01': 'chevron-down'
+    },
+    phosphor: {
+      'warning-circle': 'alert-circle',
+      'caret-down': 'chevron-down',
+      'caret-right': 'chevron-right',
+      'user-circle': 'user',
+      gear: 'settings',
+      'arrow-square-out': 'external-link'
+    },
+    remix: {
+      'alert-line': 'alert-circle',
+      'arrow-right-line': 'chevron-right',
+      'arrow-down-s-line': 'chevron-down',
+      'external-link-line': 'external-link',
+      'user-line': 'user',
+      'settings-3-line': 'settings'
+    }
+  };
+}

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

@@ -0,0 +1,22 @@
+<div [ngClass]="['grid w-full gap-2', className]">
+  <label *ngIf="label" [attr.for]="id" class="text-sm font-medium leading-5 text-foreground">{{ label }}</label>
+  <input
+    [id]="id"
+    [type]="type"
+    [value]="value"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    [readonly]="readonly"
+    [required]="required"
+    [attr.aria-invalid]="invalid"
+    [ngClass]="[
+      'flex h-9 w-full rounded-[8px] border bg-background px-3 py-2 text-sm leading-5 text-foreground shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50',
+      invalid ? 'border-destructive' : 'border-input',
+      inputClassName
+    ]"
+    (input)="onInput($event)"
+    (blur)="onBlur($event)"
+  />
+  <p *ngIf="!invalid && helperText" class="text-sm leading-5 text-muted-foreground">{{ helperText }}</p>
+  <p *ngIf="invalid && errorText" class="text-sm leading-5 text-destructive">{{ errorText }}</p>
+</div>

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

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-input',
+  templateUrl: './input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmInputComponent {
+  @Input() id = '';
+  @Input() type = 'text';
+  @Input() value = '';
+  @Input() placeholder = '';
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() invalid = false;
+  @Input() className = '';
+  @Input() inputClassName = '';
+  @Input() label = '';
+  @Input() helperText = '';
+  @Input() errorText = '';
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() blurred = new EventEmitter<FocusEvent>();
+
+  onInput(event: Event): void {
+    this.valueChange.emit((event.target as HTMLInputElement).value);
+  }
+
+  onBlur(event: FocusEvent): void {
+    this.blurred.emit(event);
+  }
+}

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

@@ -0,0 +1,31 @@
+<div
+  [ngClass]="[
+    'flex h-9 w-full items-center rounded-[8px] border bg-[hsl(var(--background))] text-sm shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-within:ring-1 focus-within:ring-[hsl(var(--foreground))]',
+    invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',
+    disabled ? 'opacity-50' : '',
+    className
+  ]"
+>
+  <div *ngIf="prefixText || prefixIcon" class="inline-flex h-full items-center gap-2 border-r border-[hsl(var(--input))] pl-3 pr-2 text-[hsl(var(--muted-foreground))]">
+    <pdm-icon *ngIf="prefixIcon" [name]="prefixIcon" [size]="16"></pdm-icon>
+    <span *ngIf="prefixText" class="text-sm leading-5">{{ prefixText }}</span>
+    <ng-content select="[pdmInputGroupPrefix]"></ng-content>
+  </div>
+
+  <input
+    [id]="id"
+    [type]="type"
+    [value]="value"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    [attr.aria-invalid]="invalid"
+    class="h-full min-w-0 flex-1 border-0 bg-transparent px-2 py-2 text-sm leading-5 outline-none placeholder:text-[hsl(var(--muted-foreground))]"
+    (input)="onInput($event)"
+  />
+
+  <div *ngIf="suffixText || suffixIcon" class="inline-flex h-full items-center gap-2 border-l border-[hsl(var(--input))] pl-2 pr-3 text-[hsl(var(--muted-foreground))]">
+    <pdm-icon *ngIf="suffixIcon" [name]="suffixIcon" [size]="16"></pdm-icon>
+    <span *ngIf="suffixText" class="text-sm font-medium leading-5">{{ suffixText }}</span>
+    <ng-content select="[pdmInputGroupSuffix]"></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-input-group',
+  templateUrl: './input-group.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmInputGroupComponent {
+  @Input() id = '';
+  @Input() type = 'text';
+  @Input() value = '';
+  @Input() placeholder = '';
+  @Input() disabled = false;
+  @Input() invalid = false;
+  @Input() prefixText = '';
+  @Input() suffixText = '';
+  @Input() prefixIcon = '';
+  @Input() suffixIcon = '';
+  @Input() className = '';
+
+  @Output() valueChange = new EventEmitter<string>();
+
+  onInput(event: Event): void {
+    this.valueChange.emit((event.target as HTMLInputElement).value);
+  }
+}

package/src/lib/components/input-otp/input-otp.component.html

@@ -0,0 +1,25 @@
+<div [ngClass]="['inline-flex items-center justify-center', className]" (paste)="onPaste($event)">
+  <ng-container *ngFor="let value of values; let index = index; trackBy: trackByIndex">
+    <input
+      #otpInput
+      [class]="getInputClasses(index)"
+      [value]="value"
+      [disabled]="disabled"
+      inputmode="numeric"
+      maxlength="1"
+      [attr.name]="'otp-digit-' + index"
+      autocomplete="off"
+      autocapitalize="off"
+      spellcheck="false"
+      [attr.aria-invalid]="invalid"
+      [attr.aria-label]="'OTP digit ' + (index + 1)"
+      (input)="onInput(index, $event)"
+      (keydown)="onKeyDown(index, $event)"
+    />
+    <span
+      *ngIf="shouldShowSeparator(index)"
+      class="mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80"
+      aria-hidden="true"
+    ></span>
+  </ng-container>
+</div>