@vekron/vekron-ui 0.0.0-stage → 0.1.0

package/src/badge/badge.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium', {
+  variants: {
+    variant: {
+      primary: 'border-transparent bg-primary text-primary-foreground',
+      secondary: 'border-transparent bg-secondary text-secondary-foreground',
+      outline: 'border-border text-foreground',
+      destructive: 'border-transparent bg-destructive text-destructive-foreground',
+    },
+  },
+});
+
+export type UiBadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
+
+@Component({
+  selector: 'ui-badge',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<span [class]="classes()"><ng-content /></span>`,
+  host: { class: 'inline-flex' },
+})
+export class UiBadgeComponent {
+  readonly variant = input<UiBadgeVariant>('primary');
+  readonly classes = computed(() => cn(badgeVariants({ variant: this.variant() })));
+}

package/src/badge/public-api.ts

@@ -0,0 +1,2 @@
+export { UiBadgeComponent } from './badge.component';
+export type { UiBadgeVariant } from './badge.component';

package/src/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+export interface UiBreadcrumbItem {
+  label: string;
+  href: string;
+}
+
+@Component({
+  selector: 'ui-breadcrumb',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <nav aria-label="Miga de pan">
+      <ol class="flex flex-wrap items-center gap-2 text-sm">
+        @for (item of items(); track item.label; let last = $last) {
+          <li class="flex items-center gap-2">
+            @if (item.href.length === 0) {
+              <span class="text-foreground">{{ item.label }}</span>
+            } @else {
+              <a class="text-muted-foreground hover:text-foreground" [href]="item.href">{{ item.label }}</a>
+            }
+            @if (!last) {
+              <span class="text-muted-foreground">/</span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+})
+export class UiBreadcrumbComponent {
+  readonly items = input.required<readonly UiBreadcrumbItem[]>();
+}

package/src/breadcrumb/public-api.ts

@@ -0,0 +1,2 @@
+export { UiBreadcrumbComponent } from './breadcrumb.component';
+export type { UiBreadcrumbItem } from './breadcrumb.component';

package/src/button/button.component.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-ui text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        sm: 'h-8 px-3',
+        md: 'h-10 px-4',
+        lg: 'h-11 px-6',
+        icon: 'size-10',
+      },
+    },
+  },
+);
+
+export type UiButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
+export type UiButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
+
+@Component({
+  selector: 'ui-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button [type]="type()" [disabled]="disabled()" [class]="classes()" (click)="pressed.emit($event)">
+      <ng-content />
+    </button>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiButtonComponent {
+  readonly variant = input<UiButtonVariant>('primary');
+  readonly size = input<UiButtonSize>('md');
+  readonly type = input<'button' | 'submit' | 'reset'>('button');
+  readonly disabled = input(false);
+  readonly buttonClass = input('');
+  readonly pressed = output<MouseEvent>();
+  readonly classes = computed(() =>
+    cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.buttonClass()),
+  );
+}

package/src/button/public-api.ts

@@ -0,0 +1,2 @@
+export { UiButtonComponent, buttonVariants } from './button.component';
+export type { UiButtonSize, UiButtonVariant } from './button.component';

package/src/carousel/carousel.component.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';
+import { UiButtonComponent } from '../button/button.component';
+
+export interface UiCarouselItem {
+  src: string;
+  alt: string;
+  title: string;
+}
+
+@Component({
+  selector: 'ui-carousel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <div class="overflow-hidden rounded-ui border border-border bg-card">
+      @if (current(); as item) {
+        <img class="h-64 w-full object-cover" [src]="item.src" [alt]="item.alt" />
+        <p class="px-4 py-3 text-sm font-medium">{{ item.title }}</p>
+      }
+      <div class="flex items-center justify-between border-t border-border p-2">
+        <ui-button variant="outline" size="sm" (pressed)="previous()">Anterior</ui-button>
+        <span class="text-xs text-muted-foreground">{{ positionLabel() }}</span>
+        <ui-button variant="outline" size="sm" (pressed)="next()">Siguiente</ui-button>
+      </div>
+    </div>
+  `,
+})
+export class UiCarouselComponent {
+  readonly items = input.required<readonly UiCarouselItem[]>();
+  readonly index = model(0);
+  readonly current = computed(() => {
+    const items = this.items();
+    if (items.length === 0) {
+      return undefined;
+    }
+    const item = items[this.index()];
+    if (item === undefined) {
+      throw new Error('ui-carousel index está fuera de rango.');
+    }
+    return item;
+  });
+
+  positionLabel(): string {
+    const total = this.items().length;
+    if (total === 0) {
+      return '0 / 0';
+    }
+    return `${this.index() + 1} / ${total}`;
+  }
+
+  previous(): void {
+    const total = this.items().length;
+    if (total === 0) {
+      return;
+    }
+    const nextIndex = this.index() - 1;
+    if (nextIndex < 0) {
+      this.index.set(total - 1);
+      return;
+    }
+    this.index.set(nextIndex);
+  }
+
+  next(): void {
+    const total = this.items().length;
+    if (total === 0) {
+      return;
+    }
+    const nextIndex = this.index() + 1;
+    if (nextIndex >= total) {
+      this.index.set(0);
+      return;
+    }
+    this.index.set(nextIndex);
+  }
+}

package/src/carousel/public-api.ts

@@ -0,0 +1,2 @@
+export { UiCarouselComponent } from './carousel.component';
+export type { UiCarouselItem } from './carousel.component';

package/src/checkbox/checkbox.component.ts

@@ -0,0 +1,92 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiLabelClass } from '../utils/classes';
+
+@Component({
+  selector: 'ui-checkbox',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label class="inline-flex items-center gap-2 text-sm text-foreground">
+      <input
+        class="size-4 rounded border-input accent-primary"
+        type="checkbox"
+        [id]="resolvedId()"
+        [checked]="value()"
+        [disabled]="isDisabled()"
+        (change)="onToggle($event)"
+        (blur)="markTouched()"
+      />
+      @if (label().length > 0) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <ng-content />
+    </label>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiCheckboxComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiCheckboxComponent implements ControlValueAccessor {
+  readonly value = model(false);
+  readonly label = input('');
+  readonly inputId = input('');
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private readonly generatedId = crypto.randomUUID();
+  private onChange: (value: boolean) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly labelClass = uiLabelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly resolvedId = computed(() => {
+    const provided = this.inputId();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedId;
+  });
+
+  onToggle(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-checkbox esperaba un HTMLInputElement.');
+    }
+    this.value.set(target.checked);
+    this.onChange(target.checked);
+  }
+
+  markTouched(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: boolean | null): void {
+    if (value === null) {
+      this.value.set(false);
+      return;
+    }
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/checkbox/public-api.ts

@@ -0,0 +1 @@
+export { UiCheckboxComponent } from './checkbox.component';

package/src/chip/chip.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'ui-chip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span class="inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1 text-sm text-secondary-foreground">
+      {{ label() }}
+      @if (removable()) {
+        <button type="button" class="text-base leading-none" aria-label="Quitar" (click)="removed.emit()">×</button>
+      }
+    </span>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiChipComponent {
+  readonly label = input.required<string>();
+  readonly removable = input(false);
+  readonly removed = output<void>();
+}

package/src/chip/public-api.ts

@@ -0,0 +1 @@
+export { UiChipComponent } from './chip.component';

package/src/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+import { UiButtonComponent } from '../button/button.component';
+import { UiDialogComponent } from '../dialog/dialog.component';
+
+@Component({
+  selector: 'ui-confirm-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiDialogComponent, UiButtonComponent],
+  template: `
+    <ui-dialog [open]="open()" (openChange)="open.set($event)" [closable]="false">
+      <h2 class="text-lg font-semibold">{{ title() }}</h2>
+      <p class="text-sm text-muted-foreground">{{ message() }}</p>
+      <div class="flex justify-end gap-2">
+        <ui-button variant="outline" (pressed)="cancel()">{{ cancelLabel() }}</ui-button>
+        <ui-button variant="destructive" (pressed)="confirm()">{{ confirmLabel() }}</ui-button>
+      </div>
+    </ui-dialog>
+  `,
+})
+export class UiConfirmDialogComponent {
+  readonly open = model(false);
+  readonly title = input.required<string>();
+  readonly message = input.required<string>();
+  readonly confirmLabel = input('Confirmar');
+  readonly cancelLabel = input('Cancelar');
+  readonly confirmed = output<void>();
+  readonly cancelled = output<void>();
+
+  confirm(): void {
+    this.open.set(false);
+    this.confirmed.emit();
+  }
+
+  cancel(): void {
+    this.open.set(false);
+    this.cancelled.emit();
+  }
+}

package/src/confirm-dialog/public-api.ts

@@ -0,0 +1 @@
+export { UiConfirmDialogComponent } from './confirm-dialog.component';

package/src/confirm-popup/confirm-popup.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+import { UiButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'ui-confirm-popup',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <div class="relative inline-flex">
+      <div (click)="open.set(!open())">
+        <ng-content />
+      </div>
+      @if (open()) {
+        <div class="absolute top-full left-0 z-50 mt-2 w-64 rounded-ui border border-border bg-card p-3 text-card-foreground shadow-md">
+          <p class="text-sm">{{ message() }}</p>
+          <div class="mt-3 flex justify-end gap-2">
+            <ui-button variant="outline" size="sm" (pressed)="cancel()">{{ cancelLabel() }}</ui-button>
+            <ui-button size="sm" (pressed)="confirm()">{{ confirmLabel() }}</ui-button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class UiConfirmPopupComponent {
+  readonly open = model(false);
+  readonly message = input.required<string>();
+  readonly confirmLabel = input('Confirmar');
+  readonly cancelLabel = input('Cancelar');
+  readonly confirmed = output<void>();
+  readonly cancelled = output<void>();
+
+  confirm(): void {
+    this.open.set(false);
+    this.confirmed.emit();
+  }
+
+  cancel(): void {
+    this.open.set(false);
+    this.cancelled.emit();
+  }
+}

package/src/confirm-popup/public-api.ts

@@ -0,0 +1 @@
+export { UiConfirmPopupComponent } from './confirm-popup.component';

package/src/context-menu/context-menu.component.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, HostListener, input, output, signal } from '@angular/core';
+import { UiMenuComponent } from '../menu/menu.component';
+import { type UiMenuItem } from '../utils/models';
+
+@Component({
+  selector: 'ui-context-menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiMenuComponent],
+  template: `
+    <div (contextmenu)="onContextMenu($event)">
+      <ng-content />
+      @if (open()) {
+        <div class="fixed z-50" [style.left.px]="x()" [style.top.px]="y()">
+          <ui-menu [items]="items()" (selected)="choose($event)" />
+        </div>
+      }
+    </div>
+  `,
+})
+export class UiContextMenuComponent {
+  readonly items = input.required<readonly UiMenuItem[]>();
+  readonly selected = output<UiMenuItem>();
+  readonly open = signal(false);
+  readonly x = signal(0);
+  readonly y = signal(0);
+
+  onContextMenu(event: MouseEvent): void {
+    event.preventDefault();
+    this.x.set(event.clientX);
+    this.y.set(event.clientY);
+    this.open.set(true);
+  }
+
+  choose(item: UiMenuItem): void {
+    this.selected.emit(item);
+    this.open.set(false);
+  }
+
+  @HostListener('document:click')
+  onDocumentClick(): void {
+    this.open.set(false);
+  }
+}

package/src/context-menu/public-api.ts

@@ -0,0 +1 @@
+export { UiContextMenuComponent } from './context-menu.component';

package/src/datepicker/datepicker.component.ts

@@ -0,0 +1,205 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../utils/cn';
+import { uiFieldClass, uiLabelClass } from '../utils/classes';
+
+interface UiCalendarDay {
+  iso: string;
+  day: number;
+  inMonth: boolean;
+}
+
+@Component({
+  selector: 'ui-datepicker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="relative flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <label [class]="labelClass" [attr.for]="resolvedId()">{{ label() }}</label>
+      }
+      <input
+        [id]="resolvedId()"
+        [class]="fieldClass"
+        [value]="value()"
+        placeholder="AAAA-MM-DD"
+        [disabled]="isDisabled()"
+        (focus)="open.set(true)"
+        (input)="onInput($event)"
+        (blur)="markTouched()"
+      />
+      @if (open()) {
+        <div class="absolute top-full z-50 mt-1 w-72 rounded-ui border border-border bg-card p-3 text-card-foreground shadow-md">
+          <div class="mb-3 flex items-center justify-between">
+            <button type="button" class="rounded-ui px-2 py-1 text-sm hover:bg-accent" (mousedown)="shiftMonth($event, -1)">‹</button>
+            <span class="text-sm font-medium capitalize">{{ monthTitle() }}</span>
+            <button type="button" class="rounded-ui px-2 py-1 text-sm hover:bg-accent" (mousedown)="shiftMonth($event, 1)">›</button>
+          </div>
+          <div class="grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground">
+            @for (weekday of weekdays; track weekday) {
+              <span>{{ weekday }}</span>
+            }
+          </div>
+          <div class="mt-1 grid grid-cols-7 gap-1">
+            @for (day of days(); track day.iso) {
+              <button
+                type="button"
+                [class]="dayClass(day)"
+                (mousedown)="selectDay($event, day.iso)"
+              >
+                {{ day.day }}
+              </button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiDatepickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiDatepickerComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly label = input('');
+  readonly inputId = input('');
+  readonly disabled = input(false);
+  readonly open = signal(false);
+  readonly visibleMonth = signal(this.startOfMonth(new Date()));
+  readonly weekdays = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'] as const;
+  private readonly formDisabled = signal(false);
+  private readonly generatedId = crypto.randomUUID();
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly fieldClass = uiFieldClass;
+  readonly labelClass = uiLabelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly resolvedId = computed(() => {
+    const provided = this.inputId();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedId;
+  });
+  readonly monthTitle = computed(() =>
+    new Intl.DateTimeFormat('es', { month: 'long', year: 'numeric' }).format(this.visibleMonth()),
+  );
+  readonly days = computed(() => {
+    const month = this.visibleMonth();
+    const mondayOffset = (month.getDay() + 6) % 7;
+    const cursor = new Date(month);
+    cursor.setDate(month.getDate() - mondayOffset);
+    const days: UiCalendarDay[] = [];
+    for (let index = 0; index < 42; index += 1) {
+      const date = new Date(cursor);
+      date.setDate(cursor.getDate() + index);
+      days.push({
+        iso: this.toIso(date),
+        day: date.getDate(),
+        inMonth: date.getMonth() === month.getMonth(),
+      });
+    }
+    return days;
+  });
+
+  dayClass(day: UiCalendarDay): string {
+    return cn('h-8 rounded-ui text-sm hover:bg-accent', {
+      'text-foreground': day.inMonth,
+      'text-muted-foreground': !day.inMonth,
+      'bg-primary text-primary-foreground': day.iso === this.value(),
+    });
+  }
+
+  onInput(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-datepicker esperaba un HTMLInputElement.');
+    }
+    this.commit(target.value);
+  }
+
+  selectDay(event: MouseEvent, iso: string): void {
+    event.preventDefault();
+    this.commit(iso);
+    this.open.set(false);
+  }
+
+  shiftMonth(event: MouseEvent, amount: number): void {
+    event.preventDefault();
+    const current = this.visibleMonth();
+    this.visibleMonth.set(new Date(current.getFullYear(), current.getMonth() + amount, 1));
+  }
+
+  markTouched(): void {
+    this.onTouched();
+    this.open.set(false);
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null || value.length === 0) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(value);
+    this.visibleMonth.set(this.startOfMonth(this.parseIso(value)));
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+
+  private commit(value: string): void {
+    if (value.length === 0) {
+      this.value.set('');
+      this.onChange('');
+      return;
+    }
+    this.parseIso(value);
+    this.value.set(value);
+    this.onChange(value);
+  }
+
+  private startOfMonth(date: Date): Date {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  }
+
+  private toIso(date: Date): string {
+    const year = String(date.getFullYear());
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
+  private parseIso(value: string): Date {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+    if (match === null) {
+      throw new Error('ui-datepicker esperaba una fecha YYYY-MM-DD.');
+    }
+    const yearText = match[1];
+    const monthText = match[2];
+    const dayText = match[3];
+    if (yearText === undefined || monthText === undefined || dayText === undefined) {
+      throw new Error('ui-datepicker esperaba una fecha YYYY-MM-DD.');
+    }
+    return new Date(Number(yearText), Number(monthText) - 1, Number(dayText));
+  }
+}

package/src/datepicker/public-api.ts

@@ -0,0 +1 @@
+export { UiDatepickerComponent } from './datepicker.component';