pdm-ui-kit 0.1.0

package/FIGMA_COMPONENT_AUDIT.md

@@ -0,0 +1,154 @@
+# 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/README.md

@@ -0,0 +1,72 @@
+# PDM UI Kit
+
+Base de componentes reutilizables compatible con Angular 13, 14 y 15.
+
+## Objetivo
+- Centralizar componentes UI nuevos.
+- Mantener API estable para migrar a paquete remoto.
+- Usar Tailwind CSS v3 y tokens CSS del proyecto consumidor.
+
+## Compatibilidad
+- Angular: 13, 14, 15 (NgModules, sin standalone).
+- Tailwind: v3.
+
+## Theming
+Los componentes usan tokens por CSS variables tipo shadcn:
+- `--background`, `--foreground`, `--primary`, `--border`, `--ring`, `--radius`, etc.
+
+El look final lo define el proyecto que consume el kit (light/dark u otros temas).
+
+## Tailwind en proyecto consumidor
+Asegura que Tailwind escanee las plantillas del kit.
+
+Ejemplo en `tailwind.config.js` del proyecto consumidor:
+
+```js
+module.exports = {
+  content: [
+    './src/**/*.{html,ts}',
+    './projects/pdm-ui-kit/src/**/*.{html,ts}',
+    './node_modules/@corelusa/pdm-ui-kit/**/*.{mjs,js}'
+  ]
+};
+```
+
+## Estructura
+- `src/public-api.ts`: exports públicos.
+- `src/lib/pdm-ui-kit.module.ts`: módulo raíz.
+- `src/lib/components/*`: componentes.
+
+## Nuevas variantes Figma
+- `pdm-chart` ahora soporta `type="area|bar|line|pie|radar|radial|tooltips"`.
+- `pdm-icon` ahora soporta `library="lucide|tabler|hugeicons|phosphor|remix"`.
+- `pdm-icon` soporta `assetUrl` para usar SVG/PNG expuestos por Figma MCP (`http://localhost:...`) sin dependencias extra.
+
+## Publicación en npm
+La librería ya está configurada con `ng-packagr` y se compila en modo `partial` (Ivy), compatible para consumo en Angular 13, 14 y 15.
+
+### Scripts disponibles
+- `npm run build:ui-kit`
+- `npm run build:ui-kit:dev`
+- `npm run pack:ui-kit`
+
+### Flujo recomendado
+1. Ajustar nombre/versión en `projects/pdm-ui-kit/package.json`.
+2. Compilar:
+   - `npm run build:ui-kit`
+3. Probar el paquete localmente:
+   - `cd dist/pdm-ui-kit && npm pack`
+4. Login npm:
+   - `npm login`
+5. Publicar desde `dist/pdm-ui-kit`:
+   - `cd dist/pdm-ui-kit && npm publish --access public`
+
+### Nota sobre Tailwind en proyecto consumidor
+Para que se apliquen las clases utility del kit en otro proyecto, incluye el paquete en `content` de `tailwind.config.js`, por ejemplo:
+
+```js
+content: [
+  './src/**/*.{html,ts}',
+  './node_modules/pdm-ui-kit/**/*.{mjs,js}'
+]
+```

package/ng-package.json

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

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pdm-ui-kit",
+  "version": "0.1.0",
+  "description": "Reusable UI component library for PDM Director",
+  "author": "PDM Director Team",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "tailwind",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/common": ">=13.0.0 <16.0.0",
+    "@angular/core": ">=13.0.0 <16.0.0",
+    "rxjs": ">=6.5.0 <8.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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 = '';
+}
+