pdm-ui-kit 0.1.3 → 0.1.5

package/src/lib/components/scroll-area/scroll-area.component.html

@@ -1,5 +0,0 @@
-<div [style.maxHeight]="maxHeight" [ngClass]="['relative overflow-auto rounded-[var(--radius)] border border-[hsl(var(--border))]', className]">
-  <div class="p-3">
-    <ng-content></ng-content>
-  </div>
-</div>

package/src/lib/components/scroll-area/scroll-area.component.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-scroll-area',
-  templateUrl: './scroll-area.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmScrollAreaComponent {
-  @Input() maxHeight = '16rem';
-  @Input() className = '';
-}

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

@@ -1,14 +0,0 @@
-<select
-  [id]="id"
-  [value]="value"
-  [disabled]="disabled"
-  [attr.aria-invalid]="invalid"
-  [ngClass]="[
-    'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 text-sm leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',
-    invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',
-    className
-  ]"
-  (change)="onChange($event)"
->
-  <option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
-</select>

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

@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmSelectOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-select',
-  templateUrl: './select.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSelectComponent {
-  @Input() id = '';
-  @Input() value = '';
-  @Input() options: PdmSelectOption[] = [];
-  @Input() disabled = false;
-  @Input() invalid = false;
-  @Input() className = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  onChange(event: Event): void {
-    this.valueChange.emit((event.target as HTMLSelectElement).value);
-  }
-}

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

@@ -1,5 +0,0 @@
-<div
-  [attr.role]="decorative ? 'none' : 'separator'"
-  [attr.aria-orientation]="orientation"
-  [ngClass]="['shrink-0 bg-[hsl(var(--border))]', orientationClass, className]"
-></div>

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

@@ -1,16 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-separator',
-  templateUrl: './separator.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSeparatorComponent {
-  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
-  @Input() decorative = true;
-  @Input() className = '';
-
-  get orientationClass(): string {
-    return this.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full';
-  }
-}

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

@@ -1,10 +0,0 @@
-<div *ngIf="open" class="fixed inset-0 z-50">
-  <button type="button" class="absolute inset-0 bg-black/55" aria-label="Close sheet" (click)="close()"></button>
-
-  <section [ngClass]="['absolute bg-[hsl(var(--background))] border-[hsl(var(--border))] p-6 shadow-[0_4px_6px_rgba(0,0,0,0.09)]', panelClass, className]" role="dialog" aria-modal="true">
-    <button type="button" class="absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100" (click)="close()">
-      <pdm-icon name="x" [size]="16"></pdm-icon>
-    </button>
-    <ng-content></ng-content>
-  </section>
-</div>

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

@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmSheetSide = 'top' | 'right' | 'bottom' | 'left';
-
-@Component({
-  selector: 'pdm-sheet',
-  templateUrl: './sheet.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSheetComponent {
-  @Input() open = false;
-  @Input() side: PdmSheetSide = 'right';
-  @Input() className = '';
-
-  @Output() openChange = new EventEmitter<boolean>();
-
-  close(): void {
-    this.openChange.emit(false);
-  }
-
-  get panelClass(): string {
-    if (this.side === 'left') return 'left-0 top-0 h-full w-full max-w-[360px] border-r';
-    if (this.side === 'top') return 'top-0 left-0 w-full border-b';
-    if (this.side === 'bottom') return 'bottom-0 left-0 w-full border-t';
-
-    return 'right-0 top-0 h-full w-full max-w-[360px] border-l';
-  }
-}

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

@@ -1,3 +0,0 @@
-<aside [ngClass]="['h-full border-r border-[hsl(var(--border))] bg-[hsl(var(--background))] transition-all', collapsed ? 'w-14' : 'w-64', className]">
-  <ng-content></ng-content>
-</aside>

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

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-sidebar',
-  templateUrl: './sidebar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSidebarComponent {
-  @Input() collapsed = false;
-  @Input() className = '';
-}

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

@@ -1 +0,0 @@
-<div [ngClass]="['animate-pulse rounded-md bg-[hsl(var(--muted))]', className]"></div>

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

@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-skeleton',
-  templateUrl: './skeleton.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSkeletonComponent {
-  @Input() className = '';
-}

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

@@ -1,15 +0,0 @@
-<div [ngClass]="['relative h-5 w-full', className]">
-  <div class="absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--muted))]"></div>
-  <div class="absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))]" [style.width.%]="percentage"></div>
-  <div class="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[hsl(var(--foreground))] bg-[hsl(var(--background))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]" [style.left.%]="percentage"></div>
-  <input
-    type="range"
-    [min]="min"
-    [max]="max"
-    [step]="step"
-    [value]="value"
-    [disabled]="disabled"
-    class="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
-    (input)="onInput($event)"
-  />
-</div>

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

@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-slider',
-  templateUrl: './slider.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSliderComponent {
-  @Input() min = 0;
-  @Input() max = 100;
-  @Input() step = 1;
-  @Input() value = 0;
-  @Input() disabled = false;
-  @Input() className = '';
-
-  @Output() valueChange = new EventEmitter<number>();
-
-  get percentage(): number {
-    const safeRange = this.max - this.min;
-    if (safeRange <= 0) {
-      return 0;
-    }
-
-    const bounded = Math.min(this.max, Math.max(this.min, this.value));
-    return ((bounded - this.min) / safeRange) * 100;
-  }
-
-  onInput(event: Event): void {
-    this.valueChange.emit(Number((event.target as HTMLInputElement).value));
-  }
-}

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

@@ -1,10 +0,0 @@
-<div [ngClass]="['flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg', toneClass, className]" role="status" aria-live="polite">
-  <div class="grid gap-0.5">
-    <p *ngIf="title" class="text-sm font-semibold">{{ title }}</p>
-    <p *ngIf="description" class="text-sm opacity-90">{{ description }}</p>
-    <ng-content></ng-content>
-  </div>
-  <button type="button" class="ml-auto rounded-sm opacity-70 transition-opacity hover:opacity-100" (click)="dismissed.emit()" aria-label="Dismiss">
-    <pdm-icon name="x" [size]="14"></pdm-icon>
-  </button>
-</div>

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

@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmToastTone = 'default' | 'success' | 'error' | 'warning';
-
-@Component({
-  selector: 'pdm-sonner',
-  templateUrl: './sonner.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSonnerComponent {
-  @Input() title = '';
-  @Input() description = '';
-  @Input() tone: PdmToastTone = 'default';
-  @Input() className = '';
-
-  @Output() dismissed = new EventEmitter<void>();
-
-  get toneClass(): string {
-    if (this.tone === 'success') return 'border-emerald-200 bg-emerald-50 text-emerald-900';
-    if (this.tone === 'error') return 'border-red-200 bg-red-50 text-red-900';
-    if (this.tone === 'warning') return 'border-amber-200 bg-amber-50 text-amber-900';
-
-    return 'border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))]';
-  }
-}

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

@@ -1,6 +0,0 @@
-<span
-  [style.width.px]="size"
-  [style.height.px]="size"
-  [ngClass]="['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]"
-  aria-hidden="true"
-></span>

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

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-spinner',
-  templateUrl: './spinner.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSpinnerComponent {
-  @Input() size = 16;
-  @Input() className = '';
-}

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

@@ -1,14 +0,0 @@
-<label [attr.for]="id" [ngClass]="['inline-flex items-center gap-2', className]">
-  <input
-    [id]="id"
-    type="checkbox"
-    class="peer sr-only"
-    [checked]="checked"
-    [disabled]="disabled"
-    (change)="onToggle($event)"
-  />
-  <span class="relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-[hsl(var(--muted))] transition-colors peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))] peer-disabled:opacity-50 peer-checked:bg-[hsl(var(--foreground))]">
-    <span class="h-5 w-5 translate-x-0.5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-transform peer-checked:translate-x-5"></span>
-  </span>
-  <span *ngIf="label" class="text-sm leading-5 text-[hsl(var(--foreground))]">{{ label }}</span>
-</label>

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

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-switch',
-  templateUrl: './switch.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmSwitchComponent {
-  @Input() id = '';
-  @Input() checked = false;
-  @Input() disabled = false;
-  @Input() label = '';
-  @Input() className = '';
-
-  @Output() checkedChange = new EventEmitter<boolean>();
-
-  onToggle(event: Event): void {
-    this.checkedChange.emit((event.target as HTMLInputElement).checked);
-  }
-}

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

@@ -1,5 +0,0 @@
-<div [ngClass]="['relative w-full overflow-auto', className]">
-  <table class="w-full caption-bottom text-sm">
-    <ng-content></ng-content>
-  </table>
-</div>

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

@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-table',
-  templateUrl: './table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmTableComponent {
-  @Input() className = '';
-}

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

@@ -1,21 +0,0 @@
-<div [ngClass]="['w-full', className]">
-  <div role="tablist" class="inline-flex items-start rounded-[6px] bg-[hsl(var(--muted))] p-[5px]">
-    <button
-      *ngFor="let item of items"
-      role="tab"
-      [attr.aria-selected]="value === item.value"
-      [disabled]="item.disabled"
-      [ngClass]="[
-        'inline-flex items-center justify-center whitespace-nowrap rounded-[3px] px-3 py-1.5 text-sm font-medium leading-5 ring-offset-[hsl(var(--background))] transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:pointer-events-none disabled:opacity-50',
-        value === item.value ? 'bg-[hsl(var(--background))] text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]' : 'text-[hsl(var(--muted-foreground))]'
-      ]"
-      (click)="select(item)"
-      type="button"
-    >
-      {{ item.label }}
-    </button>
-  </div>
-  <div class="mt-4">
-    <ng-content></ng-content>
-  </div>
-</div>

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

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmTabItem {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-tabs',
-  templateUrl: './tabs.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmTabsComponent {
-  @Input() items: PdmTabItem[] = [];
-  @Input() value = '';
-  @Input() className = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  select(item: PdmTabItem): void {
-    if (!item.disabled) {
-      this.valueChange.emit(item.value);
-    }
-  }
-}

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

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

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

@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'pdm-textarea',
-  templateUrl: './textarea.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmTextareaComponent {
-  @Input() id = '';
-  @Input() value = '';
-  @Input() placeholder = '';
-  @Input() rows = 4;
-  @Input() disabled = false;
-  @Input() readonly = false;
-  @Input() required = false;
-  @Input() invalid = false;
-  @Input() className = '';
-  @Input() textareaClassName = '';
-  @Input() label = '';
-  @Input() helperText = '';
-  @Input() errorText = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  onInput(event: Event): void {
-    this.valueChange.emit((event.target as HTMLTextAreaElement).value);
-  }
-}

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

@@ -1,16 +0,0 @@
-<button
-  type="button"
-  [disabled]="disabled"
-  [attr.aria-pressed]="pressed"
-  [ngClass]="[
-    'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',
-    sizeClass,
-    pressed
-      ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]'
-      : 'bg-transparent text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',
-    className
-  ]"
-  (click)="toggle()"
->
-  <ng-content></ng-content>
-</button>

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

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmToggleSize = 'sm' | 'default' | 'lg';
-
-@Component({
-  selector: 'pdm-toggle',
-  templateUrl: './toggle.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmToggleComponent {
-  @Input() pressed = false;
-  @Input() disabled = false;
-  @Input() size: PdmToggleSize = 'default';
-  @Input() className = '';
-
-  @Output() pressedChange = new EventEmitter<boolean>();
-
-  toggle(): void {
-    if (!this.disabled) {
-      this.pressedChange.emit(!this.pressed);
-    }
-  }
-
-  get sizeClass(): string {
-    if (this.size === 'sm') return 'h-8 px-2.5 min-w-[32px]';
-    if (this.size === 'lg') return 'h-10 px-4 min-w-[40px]';
-    return 'h-9 px-3 min-w-[36px]';
-  }
-}

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

@@ -1,17 +0,0 @@
-<div [ngClass]="['inline-flex items-center rounded-md border border-[hsl(var(--border))] p-1', className]" role="group">
-  <button
-    *ngFor="let item of items"
-    type="button"
-    [disabled]="item.disabled"
-    [attr.aria-pressed]="item.value === value"
-    [ngClass]="[
-      'inline-flex h-8 items-center justify-center rounded-sm px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',
-      item.value === value
-        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]'
-        : 'text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'
-    ]"
-    (click)="onSelect(item.value, item.disabled)"
-  >
-    {{ item.label }}
-  </button>
-</div>

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

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmToggleGroupItem {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'pdm-toggle-group',
-  templateUrl: './toggle-group.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmToggleGroupComponent {
-  @Input() items: PdmToggleGroupItem[] = [];
-  @Input() value = '';
-  @Input() className = '';
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  onSelect(next: string, disabled?: boolean): void {
-    if (!disabled && next !== this.value) {
-      this.valueChange.emit(next);
-    }
-  }
-}

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

@@ -1,6 +0,0 @@
-<span class="relative inline-flex" [ngClass]="className" (mouseenter)="open = true" (mouseleave)="open = false" (focusin)="open = true" (focusout)="open = false">
-  <ng-content></ng-content>
-  <span *ngIf="open" [ngClass]="['pointer-events-none absolute z-50 overflow-hidden rounded-md bg-[hsl(var(--foreground))] px-3 py-1.5 text-xs text-[hsl(var(--background))] animate-in fade-in-0 zoom-in-95', positionClass]">
-    {{ text }}
-  </span>
-</span>

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

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'pdm-tooltip',
-  templateUrl: './tooltip.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmTooltipComponent {
-  @Input() text = '';
-  @Input() side: 'top' | 'right' | 'bottom' | 'left' = 'top';
-  @Input() className = '';
-  open = false;
-
-  get positionClass(): string {
-    if (this.side === 'bottom') return 'top-full left-1/2 -translate-x-1/2 mt-2';
-    if (this.side === 'left') return 'right-full top-1/2 -translate-y-1/2 mr-2';
-    if (this.side === 'right') return 'left-full top-1/2 -translate-y-1/2 ml-2';
-    return 'bottom-full left-1/2 -translate-x-1/2 mb-2';
-  }
-}