@vekron/vekron-ui 0.0.0-stage → 0.1.0

package/src/tabs/tabs.component.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, model, contentChildren, signal } from '@angular/core';
+
+@Component({
+  selector: 'ui-tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (active()) {
+      <div class="pt-4">
+        <ng-content />
+      </div>
+    }
+  `,
+})
+export class UiTabComponent {
+  readonly title = input.required<string>();
+  private readonly activeState = signal(false);
+
+  active(): boolean {
+    return this.activeState();
+  }
+
+  setActive(active: boolean): void {
+    this.activeState.set(active);
+  }
+}
+
+@Component({
+  selector: 'ui-tabs',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="w-full">
+      <div class="flex gap-1 border-b border-border" role="tablist">
+        @for (tab of tabList(); track tab.title(); let index = $index) {
+          <button
+            type="button"
+            role="tab"
+            class="border-b-2 px-3 py-2 text-sm"
+            [class]="tabClass(index)"
+            [attr.aria-selected]="index === selected()"
+            (click)="selected.set(index)"
+          >
+            {{ tab.title() }}
+          </button>
+        }
+      </div>
+      <ng-content />
+    </div>
+  `,
+})
+export class UiTabsComponent {
+  readonly selected = model(0);
+  readonly tabList = contentChildren(UiTabComponent);
+
+  constructor() {
+    effect(() => {
+      const tabs = this.tabList();
+      const selected = this.selected();
+      if (tabs.length === 0) {
+        return;
+      }
+      if (selected < 0 || selected >= tabs.length) {
+        throw new Error('ui-tabs selected está fuera de rango.');
+      }
+      tabs.forEach((tab, index) => {
+        tab.setActive(index === selected);
+      });
+    });
+  }
+
+  tabClass(index: number): string {
+    if (index === this.selected()) {
+      return 'border-primary text-foreground';
+    }
+    return 'border-transparent text-muted-foreground';
+  }
+}

package/src/tag/public-api.ts

@@ -0,0 +1 @@
+export { UiTagComponent } from './tag.component';

package/src/tag/tag.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { uiSeverityClass } from '../utils/classes';
+import { type UiSeverity } from '../utils/models';
+
+@Component({
+  selector: 'ui-tag',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span class="inline-flex rounded-ui border px-2 py-0.5 text-xs font-medium" [class]="severityClass()">
+      {{ label() }}
+    </span>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiTagComponent {
+  readonly label = input.required<string>();
+  readonly severity = input<UiSeverity>('info');
+
+  severityClass(): string {
+    return uiSeverityClass[this.severity()];
+  }
+}

package/src/textarea/public-api.ts

@@ -0,0 +1 @@
+export { UiTextareaComponent } from './textarea.component';

package/src/textarea/textarea.component.ts

@@ -0,0 +1,106 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiLabelClass, uiTextareaClass } from '../utils/classes';
+
+@Component({
+  selector: 'ui-textarea',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <label [class]="labelClass" [attr.for]="resolvedId()">{{ label() }}</label>
+      }
+      <textarea
+        [id]="resolvedId()"
+        [attr.name]="resolvedName()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readOnly]="readOnly()"
+        [rows]="rows()"
+        [value]="value()"
+        [class]="fieldClass"
+        (input)="onInput($event)"
+        (blur)="markTouched()"
+      ></textarea>
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiTextareaComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiTextareaComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly label = input('');
+  readonly placeholder = input('');
+  readonly name = input('');
+  readonly inputId = input('');
+  readonly rows = input(4);
+  readonly readOnly = input(false);
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private readonly generatedId = crypto.randomUUID();
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly fieldClass = uiTextareaClass;
+  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 resolvedName = computed(() => {
+    const name = this.name();
+    if (name.length === 0) {
+      return null;
+    }
+    return name;
+  });
+
+  onInput(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLTextAreaElement)) {
+      throw new Error('ui-textarea esperaba un HTMLTextAreaElement.');
+    }
+    this.value.set(target.value);
+    this.onChange(target.value);
+  }
+
+  markTouched(): void {
+    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;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/toast/public-api.ts

@@ -0,0 +1,2 @@
+export { UiToastComponent, UiToastService } from './toast.component';
+export type { UiToastRequest } from './toast.component';

package/src/toast/toast.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, Injectable, inject, signal } from '@angular/core';
+import { uiSeverityClass } from '../utils/classes';
+import { type UiSeverity } from '../utils/models';
+
+export interface UiToastRequest {
+  title: string;
+  description: string;
+  severity: UiSeverity;
+}
+
+interface UiToastItem extends UiToastRequest {
+  id: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class UiToastService {
+  private readonly items = signal<readonly UiToastItem[]>([]);
+  readonly toasts = this.items.asReadonly();
+
+  show(request: UiToastRequest): void {
+    const item: UiToastItem = {
+      id: crypto.randomUUID(),
+      title: request.title,
+      description: request.description,
+      severity: request.severity,
+    };
+    this.items.update((current) => [...current, item]);
+  }
+
+  dismiss(id: string): void {
+    this.items.update((current) => current.filter((item) => item.id !== id));
+  }
+}
+
+@Component({
+  selector: 'ui-toast',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="fixed right-4 bottom-4 z-50 flex w-80 flex-col gap-2">
+      @for (toast of toastService.toasts(); track toast.id) {
+        <article class="rounded-ui border p-4 shadow-md" [class]="severityClass(toast.severity)">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <h3 class="text-sm font-semibold">{{ toast.title }}</h3>
+              <p class="text-sm">{{ toast.description }}</p>
+            </div>
+            <button type="button" class="text-sm" (click)="toastService.dismiss(toast.id)">Cerrar</button>
+          </div>
+        </article>
+      }
+    </div>
+  `,
+})
+export class UiToastComponent {
+  readonly toastService = inject(UiToastService);
+
+  severityClass(severity: UiSeverity): string {
+    return uiSeverityClass[severity];
+  }
+}

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

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

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

@@ -0,0 +1,80 @@
+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';
+
+@Component({
+  selector: 'ui-toggle-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      type="button"
+      [attr.aria-pressed]="value()"
+      [disabled]="isDisabled()"
+      [class]="classes()"
+      (click)="toggle()"
+      (blur)="markTouched()"
+    >
+      <ng-content />
+    </button>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiToggleButtonComponent),
+      multi: true,
+    },
+  ],
+  host: { class: 'inline-flex' },
+})
+export class UiToggleButtonComponent implements ControlValueAccessor {
+  readonly value = model(false);
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private onChange: (value: boolean) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly classes = computed(() =>
+    cn('inline-flex h-10 items-center rounded-ui border px-4 text-sm font-medium', {
+      'border-primary bg-primary text-primary-foreground': this.value(),
+      'border-border bg-background text-foreground': !this.value(),
+    }),
+  );
+
+  toggle(): void {
+    const next = !this.value();
+    this.value.set(next);
+    this.onChange(next);
+  }
+
+  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/toggle-switch/public-api.ts

@@ -0,0 +1 @@
+export { UiToggleSwitchComponent } from './toggle-switch.component';

package/src/toggle-switch/toggle-switch.component.ts

@@ -0,0 +1,96 @@
+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';
+
+@Component({
+  selector: 'ui-toggle-switch',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      type="button"
+      role="switch"
+      class="inline-flex items-center gap-3 text-sm text-foreground"
+      [attr.aria-checked]="value()"
+      [disabled]="isDisabled()"
+      (click)="toggle()"
+      (blur)="markTouched()"
+    >
+      <span
+        [class]="
+          trackClass()
+        "
+      >
+        <span [class]="thumbClass()"></span>
+      </span>
+      @if (label().length > 0) {
+        <span>{{ label() }}</span>
+      }
+    </button>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiToggleSwitchComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiToggleSwitchComponent implements ControlValueAccessor {
+  readonly value = model(false);
+  readonly label = input('');
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private onChange: (value: boolean) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly trackClass = computed(() =>
+    cn('relative inline-flex h-6 w-11 items-center rounded-full transition-colors', {
+      'bg-primary': this.value(),
+      'bg-input': !this.value(),
+    }),
+  );
+  readonly thumbClass = computed(() =>
+    cn('inline-block size-5 rounded-full bg-background transition-transform', {
+      'translate-x-5': this.value(),
+      'translate-x-0.5': !this.value(),
+    }),
+  );
+
+  toggle(): void {
+    const next = !this.value();
+    this.value.set(next);
+    this.onChange(next);
+  }
+
+  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/toolbar/public-api.ts

@@ -0,0 +1 @@
+export { UiToolbarComponent } from './toolbar.component';

package/src/toolbar/toolbar.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'ui-toolbar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex items-center gap-2 border-b border-border bg-background px-4 py-2">
+      <div class="flex flex-1 items-center gap-2">
+        <ng-content select="[uiToolbarStart]" />
+      </div>
+      <div class="flex items-center gap-2">
+        <ng-content select="[uiToolbarEnd]" />
+      </div>
+    </div>
+  `,
+})
+export class UiToolbarComponent {}

package/src/tooltip/public-api.ts

@@ -0,0 +1 @@
+export { UiTooltipComponent } from './tooltip.component';

package/src/tooltip/tooltip.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+
+@Component({
+  selector: 'ui-tooltip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span
+      class="relative inline-flex"
+      (mouseenter)="open.set(true)"
+      (mouseleave)="open.set(false)"
+      (focusin)="open.set(true)"
+      (focusout)="open.set(false)"
+    >
+      <ng-content />
+      @if (open()) {
+        <span
+          role="tooltip"
+          class="absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 rounded-ui bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background"
+        >
+          {{ text() }}
+        </span>
+      }
+    </span>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiTooltipComponent {
+  readonly text = input.required<string>();
+  readonly open = signal(false);
+}

package/src/tree/public-api.ts

@@ -0,0 +1,2 @@
+export { UiTreeComponent, UiTreeNodeComponent } from './tree.component';
+export type { UiTreeNode } from './tree.component';

package/src/tree/tree.component.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+
+export interface UiTreeNode {
+  id: string;
+  label: string;
+  children: readonly UiTreeNode[];
+}
+
+@Component({
+  selector: 'ui-tree-node',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiTreeNodeComponent],
+  template: `
+    <li>
+      <button type="button" class="rounded-ui px-2 py-1 text-left text-sm hover:bg-accent" (click)="toggle()">
+        {{ marker() }} {{ node().label }}
+      </button>
+      @if (expanded() && node().children.length > 0) {
+        <ul class="ml-4 flex flex-col gap-1">
+          @for (child of node().children; track child.id) {
+            <ui-tree-node [node]="child" />
+          }
+        </ul>
+      }
+    </li>
+  `,
+})
+export class UiTreeNodeComponent {
+  readonly node = input.required<UiTreeNode>();
+  readonly expanded = signal(false);
+
+  toggle(): void {
+    if (this.node().children.length === 0) {
+      return;
+    }
+    this.expanded.set(!this.expanded());
+  }
+
+  marker(): string {
+    if (this.node().children.length === 0) {
+      return '•';
+    }
+    if (this.expanded()) {
+      return '▾';
+    }
+    return '▸';
+  }
+}
+
+@Component({
+  selector: 'ui-tree',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiTreeNodeComponent],
+  template: `
+    <ul class="flex flex-col gap-1">
+      @for (node of nodes(); track node.id) {
+        <ui-tree-node [node]="node" />
+      }
+    </ul>
+  `,
+})
+export class UiTreeComponent {
+  readonly nodes = input.required<readonly UiTreeNode[]>();
+}

package/src/utils/classes.ts

@@ -0,0 +1,19 @@
+import { type UiSeverity } from './models';
+
+export const uiFieldClass =
+  'flex h-10 w-full rounded-ui border border-input bg-background px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+
+export const uiTextareaClass =
+  'flex min-h-24 w-full rounded-ui border border-input bg-background px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+
+export const uiLabelClass = 'text-sm font-medium text-foreground';
+
+export const uiPanelClass =
+  'z-50 min-w-48 rounded-ui border border-border bg-card p-1 text-card-foreground shadow-md';
+
+export const uiSeverityClass: Record<UiSeverity, string> = {
+  info: 'border-sky-200 bg-sky-50 text-sky-950',
+  success: 'border-emerald-200 bg-emerald-50 text-emerald-950',
+  warning: 'border-amber-200 bg-amber-50 text-amber-950',
+  danger: 'border-red-200 bg-red-50 text-red-950',
+};

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/utils/models.ts

@@ -0,0 +1,13 @@
+export interface UiOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface UiMenuItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export type UiSeverity = 'info' | 'success' | 'warning' | 'danger';

package/src/utils/public-api.ts

@@ -0,0 +1,3 @@
+export { cn } from './cn';
+export { uiFieldClass, uiLabelClass, uiPanelClass, uiSeverityClass, uiTextareaClass } from './classes';
+export { type UiMenuItem, type UiOption, type UiSeverity } from './models';

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.