@vekron/vekron-ui 0.0.0-stage → 0.1.0

package/src/registry.json

@@ -0,0 +1,184 @@
+{
+  "components": {
+    "accordion": {
+      "description": "Paneles que se abren de a uno.",
+      "dependencies": []
+    },
+    "autocomplete": {
+      "description": "Campo con sugerencias.",
+      "dependencies": []
+    },
+    "avatar": {
+      "description": "Imagen de perfil o iniciales.",
+      "dependencies": []
+    },
+    "badge": {
+      "description": "Indicador compacto.",
+      "dependencies": []
+    },
+    "breadcrumb": {
+      "description": "Ruta de navegación.",
+      "dependencies": []
+    },
+    "button": {
+      "description": "Botón con variantes y tamaños.",
+      "dependencies": []
+    },
+    "carousel": {
+      "description": "Carrusel de imágenes.",
+      "dependencies": ["button"]
+    },
+    "checkbox": {
+      "description": "Casilla de verificación.",
+      "dependencies": []
+    },
+    "chip": {
+      "description": "Etiqueta, con opción de quitarla.",
+      "dependencies": []
+    },
+    "confirm-dialog": {
+      "description": "Diálogo para confirmar una acción.",
+      "dependencies": ["dialog", "button"]
+    },
+    "confirm-popup": {
+      "description": "Confirmación anclada al contenido.",
+      "dependencies": ["button"]
+    },
+    "context-menu": {
+      "description": "Menú al hacer clic derecho.",
+      "dependencies": ["menu"]
+    },
+    "datepicker": {
+      "description": "Selector de fecha.",
+      "dependencies": []
+    },
+    "dialog": {
+      "description": "Diálogo modal.",
+      "dependencies": ["button"]
+    },
+    "divider": {
+      "description": "Separador horizontal o vertical.",
+      "dependencies": []
+    },
+    "file-upload": {
+      "description": "Carga de archivos.",
+      "dependencies": ["button"]
+    },
+    "input-number": {
+      "description": "Campo numérico.",
+      "dependencies": []
+    },
+    "input-otp": {
+      "description": "Código de un solo uso.",
+      "dependencies": []
+    },
+    "input-password": {
+      "description": "Campo de contraseña.",
+      "dependencies": []
+    },
+    "input-text": {
+      "description": "Campo de texto.",
+      "dependencies": []
+    },
+    "menu": {
+      "description": "Lista de acciones.",
+      "dependencies": []
+    },
+    "message": {
+      "description": "Mensaje de estado.",
+      "dependencies": []
+    },
+    "paginator": {
+      "description": "Paginación.",
+      "dependencies": ["button"]
+    },
+    "pdf-viewer": {
+      "description": "Visor de PDF.",
+      "dependencies": []
+    },
+    "pick-list": {
+      "description": "Mover opciones entre dos listas.",
+      "dependencies": ["button"]
+    },
+    "popover": {
+      "description": "Contenido flotante.",
+      "dependencies": []
+    },
+    "progress-bar": {
+      "description": "Barra de progreso.",
+      "dependencies": []
+    },
+    "progress-spinner": {
+      "description": "Indicador de carga.",
+      "dependencies": []
+    },
+    "radio-button": {
+      "description": "Grupo de opciones exclusivas.",
+      "dependencies": []
+    },
+    "scroll-top": {
+      "description": "Volver al inicio de la página.",
+      "dependencies": []
+    },
+    "select": {
+      "description": "Selector de una opción.",
+      "dependencies": []
+    },
+    "select-button": {
+      "description": "Grupo de botones de selección única.",
+      "dependencies": ["button"]
+    },
+    "skeleton": {
+      "description": "Marcador de carga.",
+      "dependencies": []
+    },
+    "split-button": {
+      "description": "Acción principal y menú.",
+      "dependencies": ["button", "menu"]
+    },
+    "stepper": {
+      "description": "Pasos de un proceso.",
+      "dependencies": []
+    },
+    "table": {
+      "description": "Tabla de filas y columnas.",
+      "dependencies": []
+    },
+    "tabs": {
+      "description": "Pestañas.",
+      "dependencies": []
+    },
+    "tag": {
+      "description": "Etiqueta de estado.",
+      "dependencies": []
+    },
+    "textarea": {
+      "description": "Texto de varias líneas.",
+      "dependencies": []
+    },
+    "toast": {
+      "description": "Notificaciones temporales.",
+      "dependencies": []
+    },
+    "toggle-button": {
+      "description": "Botón con estado activo.",
+      "dependencies": []
+    },
+    "toggle-switch": {
+      "description": "Interruptor.",
+      "dependencies": []
+    },
+    "toolbar": {
+      "description": "Barra de acciones.",
+      "dependencies": []
+    },
+    "tooltip": {
+      "description": "Ayuda al pasar el mouse.",
+      "dependencies": []
+    },
+    "tree": {
+      "description": "Árbol de nodos.",
+      "dependencies": []
+    }
+  }
+}

package/src/scroll-top/public-api.ts

@@ -0,0 +1 @@
+export { UiScrollTopComponent } from './scroll-top.component';

package/src/scroll-top/scroll-top.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, HostListener, afterNextRender, input, signal } from '@angular/core';
+
+@Component({
+  selector: 'ui-scroll-top',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (visible()) {
+      <button
+        type="button"
+        class="fixed right-4 bottom-4 z-40 rounded-ui bg-primary px-4 py-2 text-sm text-primary-foreground shadow-md"
+        (click)="scrollToTop()"
+      >
+        Arriba
+      </button>
+    }
+  `,
+})
+export class UiScrollTopComponent {
+  readonly threshold = input(200);
+  readonly visible = signal(false);
+
+  constructor() {
+    afterNextRender(() => {
+      this.visible.set(window.scrollY > this.threshold());
+    });
+  }
+
+  @HostListener('window:scroll')
+  onWindowScroll(): void {
+    this.visible.set(window.scrollY > this.threshold());
+  }
+
+  scrollToTop(): void {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+}

package/src/select/public-api.ts

@@ -0,0 +1 @@
+export { UiSelectComponent } from './select.component';

package/src/select/select.component.ts

@@ -0,0 +1,116 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiLabelClass, uiPanelClass } from '../utils/classes';
+import { type UiOption } from '../utils/models';
+
+@Component({
+  selector: 'ui-select',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="relative flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <button
+        type="button"
+        class="flex h-10 w-full items-center justify-between rounded-ui border border-input bg-background px-3 text-sm"
+        [disabled]="isDisabled()"
+        (click)="open.set(!open())"
+        (blur)="markTouched()"
+      >
+        <span>{{ selectedLabel() }}</span>
+        <span aria-hidden="true">▾</span>
+      </button>
+      @if (open()) {
+        <div [class]="panelClass + ' absolute top-full right-0 left-0 mt-1'">
+          @for (option of options(); track option.value) {
+            <button
+              type="button"
+              class="flex w-full rounded-ui px-3 py-2 text-left text-sm hover:bg-accent disabled:opacity-50"
+              [disabled]="option.disabled === true"
+              (mousedown)="choose($event, option)"
+            >
+              {{ option.label }}
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiSelectComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly options = input.required<readonly UiOption[]>();
+  readonly label = input('');
+  readonly placeholder = input('Seleccionar');
+  readonly disabled = input(false);
+  readonly open = signal(false);
+  private readonly formDisabled = signal(false);
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly labelClass = uiLabelClass;
+  readonly panelClass = uiPanelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly selectedLabel = computed(() => {
+    const current = this.value();
+    if (current.length === 0) {
+      return this.placeholder();
+    }
+    for (const option of this.options()) {
+      if (option.value === current) {
+        return option.label;
+      }
+    }
+    throw new Error(`ui-select no encontró la opción "${current}".`);
+  });
+
+  choose(event: MouseEvent, option: UiOption): void {
+    event.preventDefault();
+    if (option.disabled === true) {
+      return;
+    }
+    this.value.set(option.value);
+    this.onChange(option.value);
+    this.open.set(false);
+  }
+
+  markTouched(): void {
+    this.onTouched();
+    this.open.set(false);
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(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);
+  }
+}

package/src/select-button/public-api.ts

@@ -0,0 +1 @@
+export { UiSelectButtonComponent } from './select-button.component';

package/src/select-button/select-button.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type UiButtonVariant, UiButtonComponent } from '../button/button.component';
+import { type UiOption } from '../utils/models';
+
+@Component({
+  selector: 'ui-select-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <div class="inline-flex overflow-hidden rounded-ui border border-border" role="group">
+      @for (option of options(); track option.value) {
+        <ui-button
+          [variant]="variantFor(option.value)"
+          buttonClass="rounded-none"
+          [disabled]="option.disabled === true"
+          (pressed)="select(option)"
+        >
+          {{ option.label }}
+        </ui-button>
+      }
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiSelectButtonComponent),
+      multi: true,
+    },
+  ],
+  host: { class: 'inline-flex' },
+})
+export class UiSelectButtonComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly options = input.required<readonly UiOption[]>();
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+
+  variantFor(optionValue: string): UiButtonVariant {
+    if (optionValue === this.value()) {
+      return 'primary';
+    }
+    return 'ghost';
+  }
+
+  select(option: UiOption): void {
+    if (option.disabled === true) {
+      return;
+    }
+    this.value.set(option.value);
+    this.onChange(option.value);
+    this.onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+}

package/src/skeleton/public-api.ts

@@ -0,0 +1 @@
+export { UiSkeletonComponent } from './skeleton.component';

package/src/skeleton/skeleton.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ui-skeleton',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="animate-pulse rounded-ui bg-muted" [style.width]="width()" [style.height]="height()"></div>`,
+})
+export class UiSkeletonComponent {
+  readonly width = input('100%');
+  readonly height = input('1rem');
+}

package/src/split-button/public-api.ts

@@ -0,0 +1 @@
+export { UiSplitButtonComponent } from './split-button.component';

package/src/split-button/split-button.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';
+import { UiButtonComponent } from '../button/button.component';
+import { UiMenuComponent } from '../menu/menu.component';
+import { type UiMenuItem } from '../utils/models';
+
+@Component({
+  selector: 'ui-split-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent, UiMenuComponent],
+  template: `
+    <div class="relative inline-flex">
+      <div class="inline-flex overflow-hidden rounded-ui">
+        <ui-button [buttonClass]="mainClass" (pressed)="activated.emit()">{{ label() }}</ui-button>
+        <ui-button size="icon" buttonClass="rounded-l-none" aria-label="Más acciones" (pressed)="open.set(!open())">
+          ▾
+        </ui-button>
+      </div>
+      @if (open()) {
+        <div class="absolute top-full right-0 mt-1">
+          <ui-menu [items]="items()" (selected)="choose($event)" />
+        </div>
+      }
+    </div>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiSplitButtonComponent {
+  readonly label = input.required<string>();
+  readonly items = input.required<readonly UiMenuItem[]>();
+  readonly activated = output<void>();
+  readonly selected = output<UiMenuItem>();
+  readonly open = signal(false);
+  readonly mainClass = 'rounded-r-none';
+
+  choose(item: UiMenuItem): void {
+    this.selected.emit(item);
+    this.open.set(false);
+  }
+}

package/src/stepper/public-api.ts

@@ -0,0 +1,2 @@
+export { UiStepperComponent } from './stepper.component';
+export type { UiStep } from './stepper.component';

package/src/stepper/stepper.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+
+export interface UiStep {
+  label: string;
+  description: string;
+}
+
+@Component({
+  selector: 'ui-stepper',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ol class="flex flex-col gap-4">
+      @for (step of steps(); track step.label; let index = $index) {
+        <li class="flex gap-3">
+          <button
+            type="button"
+            class="flex size-8 shrink-0 items-center justify-center rounded-full text-sm"
+            [class]="markerClass(index)"
+            (click)="activeIndex.set(index)"
+          >
+            {{ index + 1 }}
+          </button>
+          <div>
+            <p class="text-sm font-medium">{{ step.label }}</p>
+            <p class="text-sm text-muted-foreground">{{ step.description }}</p>
+          </div>
+        </li>
+      }
+    </ol>
+  `,
+})
+export class UiStepperComponent {
+  readonly steps = input.required<readonly UiStep[]>();
+  readonly activeIndex = model(0);
+
+  markerClass(index: number): string {
+    if (index === this.activeIndex()) {
+      return 'bg-primary text-primary-foreground';
+    }
+    if (index < this.activeIndex()) {
+      return 'bg-secondary text-secondary-foreground';
+    }
+    return 'bg-muted text-muted-foreground';
+  }
+}

package/src/styles.css

@@ -0,0 +1,63 @@
+/* Importar después de tailwindcss. Las clases de los componentes usan estos tokens. */
+
+@theme inline {
+  --color-background: var(--ui-background);
+  --color-foreground: var(--ui-foreground);
+  --color-card: var(--ui-card);
+  --color-card-foreground: var(--ui-card-foreground);
+  --color-primary: var(--ui-primary);
+  --color-primary-foreground: var(--ui-primary-foreground);
+  --color-secondary: var(--ui-secondary);
+  --color-secondary-foreground: var(--ui-secondary-foreground);
+  --color-muted: var(--ui-muted);
+  --color-muted-foreground: var(--ui-muted-foreground);
+  --color-accent: var(--ui-accent);
+  --color-accent-foreground: var(--ui-accent-foreground);
+  --color-destructive: var(--ui-destructive);
+  --color-destructive-foreground: var(--ui-destructive-foreground);
+  --color-border: var(--ui-border);
+  --color-input: var(--ui-input);
+  --color-ring: var(--ui-ring);
+  --radius-ui: var(--ui-radius);
+}
+
+:root {
+  --ui-background: oklch(1 0 0);
+  --ui-foreground: oklch(0.145 0 0);
+  --ui-card: oklch(1 0 0);
+  --ui-card-foreground: oklch(0.145 0 0);
+  --ui-primary: oklch(0.205 0 0);
+  --ui-primary-foreground: oklch(0.985 0 0);
+  --ui-secondary: oklch(0.97 0 0);
+  --ui-secondary-foreground: oklch(0.205 0 0);
+  --ui-muted: oklch(0.97 0 0);
+  --ui-muted-foreground: oklch(0.556 0 0);
+  --ui-accent: oklch(0.97 0 0);
+  --ui-accent-foreground: oklch(0.205 0 0);
+  --ui-destructive: oklch(0.577 0.245 27.325);
+  --ui-destructive-foreground: oklch(0.985 0 0);
+  --ui-border: oklch(0.922 0 0);
+  --ui-input: oklch(0.922 0 0);
+  --ui-ring: oklch(0.708 0 0);
+  --ui-radius: 0.5rem;
+}
+
+.dark {
+  --ui-background: oklch(0.145 0 0);
+  --ui-foreground: oklch(0.985 0 0);
+  --ui-card: oklch(0.205 0 0);
+  --ui-card-foreground: oklch(0.985 0 0);
+  --ui-primary: oklch(0.922 0 0);
+  --ui-primary-foreground: oklch(0.205 0 0);
+  --ui-secondary: oklch(0.269 0 0);
+  --ui-secondary-foreground: oklch(0.985 0 0);
+  --ui-muted: oklch(0.269 0 0);
+  --ui-muted-foreground: oklch(0.708 0 0);
+  --ui-accent: oklch(0.269 0 0);
+  --ui-accent-foreground: oklch(0.985 0 0);
+  --ui-destructive: oklch(0.704 0.191 22.216);
+  --ui-destructive-foreground: oklch(0.985 0 0);
+  --ui-border: oklch(1 0 0 / 10%);
+  --ui-input: oklch(1 0 0 / 15%);
+  --ui-ring: oklch(0.556 0 0);
+}

package/src/table/public-api.ts

@@ -0,0 +1,2 @@
+export { UiTableComponent } from './table.component';
+export type { UiTableColumn } from './table.component';

package/src/table/table.component.ts

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+export interface UiTableColumn {
+  key: string;
+  header: string;
+}
+
+@Component({
+  selector: 'ui-table',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="overflow-auto rounded-ui border border-border">
+      <table class="w-full border-collapse text-sm">
+        <thead class="bg-muted text-muted-foreground">
+          <tr>
+            @for (column of columns(); track column.key) {
+              <th class="px-3 py-2 text-left font-medium">{{ column.header }}</th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows(); track $index) {
+            <tr class="border-t border-border">
+              @for (column of columns(); track column.key) {
+                <td class="px-3 py-2">{{ valueOf(row, column.key) }}</td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+      @if (rows().length === 0) {
+        <p class="p-4 text-sm text-muted-foreground">Sin resultados.</p>
+      }
+    </div>
+  `,
+})
+export class UiTableComponent {
+  readonly columns = input.required<readonly UiTableColumn[]>();
+  readonly rows = input.required<readonly Record<string, string | number>[]>();
+
+  valueOf(row: Record<string, string | number>, key: string): string | number {
+    if (!(key in row)) {
+      throw new Error(`ui-table no encontró la columna "${key}".`);
+    }
+    return row[key];
+  }
+}

package/src/tabs/public-api.ts

@@ -0,0 +1 @@
+export { UiTabComponent, UiTabsComponent } from './tabs.component';