pdm-ui-kit 0.1.1 → 0.1.3

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/pdm-ui-kit.module.ts

@@ -0,0 +1,126 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { PdmAccordionComponent } from './components/accordion/accordion.component';
+import { PdmAlertComponent } from './components/alert/alert.component';
+import { PdmAlertDialogComponent } from './components/alert-dialog/alert-dialog.component';
+import { PdmAspectRatioComponent } from './components/aspect-ratio/aspect-ratio.component';
+import { PdmAvatarComponent } from './components/avatar/avatar.component';
+import { PdmBadgeComponent } from './components/badge/badge.component';
+import { PdmBreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
+import { PdmButtonGroupComponent } from './components/button-group/button-group.component';
+import { PdmButtonComponent } from './components/button/button.component';
+import { PdmCalendarComponent } from './components/calendar/calendar.component';
+import { PdmCarouselComponent } from './components/carousel/carousel.component';
+import { PdmCardComponent } from './components/card/card.component';
+import { PdmChartComponent } from './components/chart/chart.component';
+import { PdmCheckboxComponent } from './components/checkbox/checkbox.component';
+import { PdmCollapsibleComponent } from './components/collapsible/collapsible.component';
+import { PdmComboboxComponent } from './components/combobox/combobox.component';
+import { PdmCommandComponent } from './components/command/command.component';
+import { PdmContextMenuComponent } from './components/context-menu/context-menu.component';
+import { PdmDataTableComponent } from './components/data-table/data-table.component';
+import { PdmDatePickerComponent } from './components/date-picker/date-picker.component';
+import { PdmDialogComponent } from './components/dialog/dialog.component';
+import { PdmDropdownMenuComponent } from './components/dropdown-menu/dropdown-menu.component';
+import { PdmDrawerComponent } from './components/drawer/drawer.component';
+import { PdmEmptyComponent } from './components/empty/empty.component';
+import { PdmFieldComponent } from './components/field/field.component';
+import { PdmHoverCardComponent } from './components/hover-card/hover-card.component';
+import { PdmIconComponent } from './components/icon/icon.component';
+import { PdmItemComponent } from './components/item/item.component';
+import { PdmInputComponent } from './components/input/input.component';
+import { PdmInputPasswordComponent } from './components/input-password/input-password.component';
+import { PdmInputGroupComponent } from './components/input-group/input-group.component';
+import { PdmInputOtpComponent } from './components/input-otp/input-otp.component';
+import { PdmKbdComponent } from './components/kbd/kbd.component';
+import { PdmLabelComponent } from './components/label/label.component';
+import { PdmMenubarComponent } from './components/menubar/menubar.component';
+import { PdmNativeSelectComponent } from './components/native-select/native-select.component';
+import { PdmNavigationMenuComponent } from './components/navigation-menu/navigation-menu.component';
+import { PdmPaginationComponent } from './components/pagination/pagination.component';
+import { PdmPopoverComponent } from './components/popover/popover.component';
+import { PdmProgressComponent } from './components/progress/progress.component';
+import { PdmRadioGroupComponent } from './components/radio-group/radio-group.component';
+import { PdmScrollAreaComponent } from './components/scroll-area/scroll-area.component';
+import { PdmSelectComponent } from './components/select/select.component';
+import { PdmSeparatorComponent } from './components/separator/separator.component';
+import { PdmSheetComponent } from './components/sheet/sheet.component';
+import { PdmSidebarComponent } from './components/sidebar/sidebar.component';
+import { PdmSkeletonComponent } from './components/skeleton/skeleton.component';
+import { PdmSliderComponent } from './components/slider/slider.component';
+import { PdmSonnerComponent } from './components/sonner/sonner.component';
+import { PdmSpinnerComponent } from './components/spinner/spinner.component';
+import { PdmSwitchComponent } from './components/switch/switch.component';
+import { PdmTableComponent } from './components/table/table.component';
+import { PdmTabsComponent } from './components/tabs/tabs.component';
+import { PdmTextareaComponent } from './components/textarea/textarea.component';
+import { PdmToggleComponent } from './components/toggle/toggle.component';
+import { PdmToggleGroupComponent } from './components/toggle-group/toggle-group.component';
+import { PdmTooltipComponent } from './components/tooltip/tooltip.component';
+
+const COMPONENTS = [
+  PdmAccordionComponent,
+  PdmAlertComponent,
+  PdmAlertDialogComponent,
+  PdmAspectRatioComponent,
+  PdmAvatarComponent,
+  PdmBadgeComponent,
+  PdmBreadcrumbComponent,
+  PdmButtonGroupComponent,
+  PdmButtonComponent,
+  PdmCalendarComponent,
+  PdmCarouselComponent,
+  PdmCardComponent,
+  PdmChartComponent,
+  PdmCheckboxComponent,
+  PdmCollapsibleComponent,
+  PdmComboboxComponent,
+  PdmCommandComponent,
+  PdmContextMenuComponent,
+  PdmDataTableComponent,
+  PdmDatePickerComponent,
+  PdmDialogComponent,
+  PdmDropdownMenuComponent,
+  PdmDrawerComponent,
+  PdmEmptyComponent,
+  PdmFieldComponent,
+  PdmHoverCardComponent,
+  PdmIconComponent,
+  PdmItemComponent,
+  PdmInputComponent,
+  PdmInputPasswordComponent,
+  PdmInputGroupComponent,
+  PdmInputOtpComponent,
+  PdmKbdComponent,
+  PdmLabelComponent,
+  PdmMenubarComponent,
+  PdmNativeSelectComponent,
+  PdmNavigationMenuComponent,
+  PdmPaginationComponent,
+  PdmPopoverComponent,
+  PdmProgressComponent,
+  PdmRadioGroupComponent,
+  PdmScrollAreaComponent,
+  PdmSelectComponent,
+  PdmSeparatorComponent,
+  PdmSheetComponent,
+  PdmSidebarComponent,
+  PdmSkeletonComponent,
+  PdmSliderComponent,
+  PdmSonnerComponent,
+  PdmSpinnerComponent,
+  PdmSwitchComponent,
+  PdmTableComponent,
+  PdmTabsComponent,
+  PdmTextareaComponent,
+  PdmToggleComponent,
+  PdmToggleGroupComponent,
+  PdmTooltipComponent
+];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: COMPONENTS,
+  exports: COMPONENTS
+})
+export class PdmUiKitModule {}

package/src/public-api.ts

@@ -0,0 +1,58 @@
+export * from './lib/pdm-ui-kit.module';
+export * from './lib/components/accordion/accordion.component';
+export * from './lib/components/alert/alert.component';
+export * from './lib/components/alert-dialog/alert-dialog.component';
+export * from './lib/components/aspect-ratio/aspect-ratio.component';
+export * from './lib/components/avatar/avatar.component';
+export * from './lib/components/badge/badge.component';
+export * from './lib/components/breadcrumb/breadcrumb.component';
+export * from './lib/components/button-group/button-group.component';
+export * from './lib/components/button/button.component';
+export * from './lib/components/calendar/calendar.component';
+export * from './lib/components/carousel/carousel.component';
+export * from './lib/components/card/card.component';
+export * from './lib/components/chart/chart.component';
+export * from './lib/components/checkbox/checkbox.component';
+export * from './lib/components/collapsible/collapsible.component';
+export * from './lib/components/combobox/combobox.component';
+export * from './lib/components/command/command.component';
+export * from './lib/components/context-menu/context-menu.component';
+export * from './lib/components/data-table/data-table.component';
+export * from './lib/components/date-picker/date-picker.component';
+export * from './lib/components/dialog/dialog.component';
+export * from './lib/components/dropdown-menu/dropdown-menu.component';
+export * from './lib/components/drawer/drawer.component';
+export * from './lib/components/empty/empty.component';
+export * from './lib/components/field/field.component';
+export * from './lib/components/hover-card/hover-card.component';
+export * from './lib/components/icon/icon.component';
+export * from './lib/components/item/item.component';
+export * from './lib/components/input/input.component';
+export * from './lib/components/input-password/input-password.component';
+export * from './lib/components/input-group/input-group.component';
+export * from './lib/components/input-otp/input-otp.component';
+export * from './lib/components/kbd/kbd.component';
+export * from './lib/components/label/label.component';
+export * from './lib/components/menubar/menubar.component';
+export * from './lib/components/native-select/native-select.component';
+export * from './lib/components/navigation-menu/navigation-menu.component';
+export * from './lib/components/pagination/pagination.component';
+export * from './lib/components/popover/popover.component';
+export * from './lib/components/progress/progress.component';
+export * from './lib/components/radio-group/radio-group.component';
+export * from './lib/components/scroll-area/scroll-area.component';
+export * from './lib/components/select/select.component';
+export * from './lib/components/separator/separator.component';
+export * from './lib/components/sheet/sheet.component';
+export * from './lib/components/sidebar/sidebar.component';
+export * from './lib/components/skeleton/skeleton.component';
+export * from './lib/components/slider/slider.component';
+export * from './lib/components/sonner/sonner.component';
+export * from './lib/components/spinner/spinner.component';
+export * from './lib/components/switch/switch.component';
+export * from './lib/components/table/table.component';
+export * from './lib/components/tabs/tabs.component';
+export * from './lib/components/textarea/textarea.component';
+export * from './lib/components/toggle/toggle.component';
+export * from './lib/components/toggle-group/toggle-group.component';
+export * from './lib/components/tooltip/tooltip.component';

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "declaration": false,
+    "sourceMap": true,
+    "inlineSources": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "ES2020",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "strict": false,
+    "noImplicitOverride": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": false,
+    "strictInputAccessModifiers": false,
+    "strictTemplates": false
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/lib",
+    "declaration": true,
+    "declarationMap": false,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ],
+  "angularCompilerOptions": {
+    "enableIvy": true,
+    "compilationMode": "partial"
+  }
+}