@vekron/vekron-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vekron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bin/vekron-ui.js

@@ -0,0 +1,362 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import {
+  access,
+  copyFile,
+  mkdir,
+  readFile,
+  readdir,
+  writeFile,
+} from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "..",
+);
+const sourceRoot = path.join(packageRoot, "src");
+
+const command = process.argv[2];
+const commandArgs = process.argv.slice(3);
+
+if (command === "list") {
+  await list();
+} else if (command === "init") {
+  await init(commandArgs);
+} else if (command === "add") {
+  await add(commandArgs);
+} else {
+  printHelp();
+  if (command !== undefined && command !== "help" && command !== "--help") {
+    process.exitCode = 1;
+  }
+}
+
+function printHelp() {
+  console.log(`vekron-ui
+
+  vekron-ui init [--path src/app/shared/ui]
+  vekron-ui add <componente...> [--all] [--overwrite] [--path src/app/shared/ui]
+  vekron-ui list
+
+init prepara Tailwind, el alias @ui y las dependencias.
+add copia el código del componente al proyecto, con sus dependencias.
+--all copia el catálogo completo.
+`);
+}
+
+async function list() {
+  const registry = await readRegistry();
+  const names = Object.keys(registry.components).sort();
+  for (const name of names) {
+    const component = registry.components[name];
+    console.log(`${name.padEnd(18)} ${component.description}`);
+  }
+}
+
+async function init(args) {
+  const projectRoot = await findProjectRoot(process.cwd());
+  const parsed = parseArgs(args);
+  const config = await resolveConfig(projectRoot, parsed.path);
+  await ensureDependencies(projectRoot);
+  await ensurePaths(projectRoot, config.path);
+  await copySupport(projectRoot, config.path, false);
+  await ensureStyleImport(projectRoot, config);
+  await writeConfig(projectRoot, config);
+  console.log(`Listo. Alias @ui -> ${config.path}`);
+}
+
+async function add(args) {
+  const projectRoot = await findProjectRoot(process.cwd());
+  const parsed = parseArgs(args);
+  const config = await resolveConfig(projectRoot, parsed.path);
+  const registry = await readRegistry();
+  const requested = parsed.all
+    ? Object.keys(registry.components)
+    : parsed.names;
+  if (requested.length === 0) {
+    throw new Error("Indica al menos un componente o usa --all.");
+  }
+  const ordered = [];
+  const seen = new Set();
+  for (const name of requested) {
+    resolveComponent(name, registry, ordered, seen);
+  }
+  await ensureDependencies(projectRoot);
+  await ensurePaths(projectRoot, config.path);
+  await copySupport(projectRoot, config.path, parsed.overwrite);
+  const destinationRoot = path.join(projectRoot, config.path);
+  for (const name of ordered) {
+    await copyComponent(name, destinationRoot, parsed.overwrite);
+  }
+  await updateBarrel(destinationRoot, ordered);
+  await ensureStyleImport(projectRoot, config);
+  await writeConfig(projectRoot, config);
+  console.log(`Instalados: ${ordered.join(", ")}`);
+}
+
+function parseArgs(args) {
+  const parsed = { all: false, overwrite: false, path: "", names: [] };
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (arg === "--all") {
+      parsed.all = true;
+      continue;
+    }
+    if (arg === "--overwrite") {
+      parsed.overwrite = true;
+      continue;
+    }
+    if (arg === "--path") {
+      const value = args[index + 1];
+      if (value === undefined || value.startsWith("--")) {
+        throw new Error("Falta el valor de --path.");
+      }
+      parsed.path = value;
+      index += 1;
+      continue;
+    }
+    if (arg.startsWith("--")) {
+      throw new Error(`Opción desconocida: ${arg}`);
+    }
+    parsed.names.push(arg);
+  }
+  return parsed;
+}
+
+async function readRegistry() {
+  const text = await readFile(path.join(sourceRoot, "registry.json"), "utf8");
+  return JSON.parse(text);
+}
+
+function resolveComponent(name, registry, ordered, seen) {
+  if (seen.has(name)) {
+    return;
+  }
+  const component = registry.components[name];
+  if (component === undefined) {
+    throw new Error(
+      `No existe el componente "${name}". Ejecuta vekron-ui list.`,
+    );
+  }
+  seen.add(name);
+  for (const dependency of component.dependencies) {
+    resolveComponent(dependency, registry, ordered, seen);
+  }
+  ordered.push(name);
+}
+
+async function findProjectRoot(start) {
+  let current = path.resolve(start);
+  for (;;) {
+    if (await exists(path.join(current, "angular.json"))) {
+      return current;
+    }
+    const parent = path.dirname(current);
+    if (parent === current) {
+      throw new Error(
+        "No encontré angular.json. Ejecuta el comando dentro de un proyecto Angular.",
+      );
+    }
+    current = parent;
+  }
+}
+
+async function resolveConfig(projectRoot, pathOverride) {
+  const configPath = path.join(projectRoot, "vekron-ui.json");
+  let stored = { path: "src/app/shared/ui", style: "src/styles.css" };
+  if (await exists(configPath)) {
+    stored = JSON.parse(await readFile(configPath, "utf8"));
+  }
+  if (pathOverride.length > 0) {
+    stored.path = pathOverride;
+  }
+  if (typeof stored.path !== "string" || stored.path.length === 0) {
+    throw new Error("vekron-ui.json no tiene path.");
+  }
+  if (typeof stored.style !== "string" || stored.style.length === 0) {
+    throw new Error("vekron-ui.json no tiene style.");
+  }
+  return stored;
+}
+
+async function writeConfig(projectRoot, config) {
+  await writeFile(
+    path.join(projectRoot, "vekron-ui.json"),
+    `${JSON.stringify(config, null, 2)}\n`,
+  );
+}
+
+async function ensureDependencies(projectRoot) {
+  const packageJson = JSON.parse(
+    await readFile(path.join(projectRoot, "package.json"), "utf8"),
+  );
+  const declared = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+  };
+  const required = ["class-variance-authority", "clsx", "tailwind-merge"];
+  const missing = required.filter((name) => declared[name] === undefined);
+  if (missing.length === 0) {
+    return;
+  }
+  const manager = await detectPackageManager(projectRoot);
+  const installArgs =
+    manager === "npm" ? ["install", ...missing] : ["add", ...missing];
+  const result = spawnSync(manager, installArgs, {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: process.platform === "win32",
+  });
+  if (result.status !== 0) {
+    throw new Error(`No se pudieron instalar: ${missing.join(", ")}.`);
+  }
+}
+
+async function detectPackageManager(projectRoot) {
+  if (await exists(path.join(projectRoot, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (await exists(path.join(projectRoot, "yarn.lock"))) {
+    return "yarn";
+  }
+  if (await exists(path.join(projectRoot, "package-lock.json"))) {
+    return "npm";
+  }
+  return "npm";
+}
+
+async function ensurePaths(projectRoot, uiPath) {
+  const tsconfigPath = path.join(projectRoot, "tsconfig.json");
+  const text = await readFile(tsconfigPath, "utf8");
+  if (text.includes('"@ui"')) {
+    return;
+  }
+  const uiImport = `${uiPath}/index.ts`.replaceAll("\\", "/");
+  const uiStar = `${uiPath}/*`.replaceAll("\\", "/");
+  const pathsBlock = `"paths": {\n      "@ui": ["${uiImport}"],\n      "@ui/*": ["${uiStar}"],`;
+  if (text.includes('"paths"')) {
+    const next = text.replace('"paths": {', pathsBlock);
+    await writeFile(tsconfigPath, next);
+    return;
+  }
+  if (!text.includes('"compilerOptions"')) {
+    throw new Error("tsconfig.json no tiene compilerOptions.");
+  }
+  const next = text.replace(
+    '"compilerOptions": {',
+    `"compilerOptions": {\n    "baseUrl": ".",\n    ${pathsBlock}`,
+  );
+  await writeFile(tsconfigPath, next);
+}
+
+async function ensureStyleImport(projectRoot, config) {
+  const stylePath = path.join(projectRoot, config.style);
+  const uiStylePath = path.join(projectRoot, config.path, "styles.css");
+  const relative = path
+    .relative(path.dirname(stylePath), uiStylePath)
+    .replaceAll("\\", "/");
+  const importPath = relative.startsWith(".") ? relative : `./${relative}`;
+  const importLine = `@import '${importPath}';`;
+  const text = await readFile(stylePath, "utf8");
+  if (text.includes(importLine)) {
+    return;
+  }
+  const tailwindSingle = "@import 'tailwindcss';";
+  const tailwindDouble = '@import "tailwindcss";';
+  let anchor = "";
+  if (text.includes(tailwindSingle)) {
+    anchor = tailwindSingle;
+  } else if (text.includes(tailwindDouble)) {
+    anchor = tailwindDouble;
+  } else {
+    throw new Error(
+      `${config.style} tiene que importar tailwindcss antes de los tokens de vekron-ui.`,
+    );
+  }
+  await writeFile(stylePath, text.replace(anchor, `${anchor}\n${importLine}`));
+}
+
+async function copySupport(projectRoot, uiPath, overwrite) {
+  const destinationRoot = path.join(projectRoot, uiPath);
+  await mkdir(destinationRoot, { recursive: true });
+  await copyTree(
+    path.join(sourceRoot, "utils"),
+    path.join(destinationRoot, "utils"),
+    overwrite,
+  );
+  await copyFileIfNeeded(
+    path.join(sourceRoot, "styles.css"),
+    path.join(destinationRoot, "styles.css"),
+    overwrite,
+  );
+  const barrel = path.join(destinationRoot, "index.ts");
+  if (!(await exists(barrel))) {
+    await writeFile(barrel, "");
+  }
+}
+
+async function copyComponent(name, destinationRoot, overwrite) {
+  await copyTree(
+    path.join(sourceRoot, name),
+    path.join(destinationRoot, name),
+    overwrite,
+  );
+}
+
+async function copyTree(from, to, overwrite) {
+  await mkdir(to, { recursive: true });
+  const entries = await readdir(from, { withFileTypes: true });
+  for (const entry of entries) {
+    const source = path.join(from, entry.name);
+    const target = path.join(to, entry.name);
+    if (entry.isDirectory()) {
+      await copyTree(source, target, overwrite);
+      continue;
+    }
+    if (!entry.name.endsWith(".ts") && !entry.name.endsWith(".css")) {
+      continue;
+    }
+    await copyFileIfNeeded(source, target, overwrite);
+  }
+}
+
+async function copyFileIfNeeded(source, target, overwrite) {
+  if ((await exists(target)) && !overwrite) {
+    console.log(`se mantiene ${target}`);
+    return;
+  }
+  await copyFile(source, target);
+}
+
+async function updateBarrel(destinationRoot, names) {
+  const barrelPath = path.join(destinationRoot, "index.ts");
+  let current = "";
+  if (await exists(barrelPath)) {
+    current = await readFile(barrelPath, "utf8");
+  }
+  let next = current;
+  if (next.length > 0 && !next.endsWith("\n")) {
+    next += "\n";
+  }
+  for (const name of names) {
+    if (next.includes(`./${name}/`)) {
+      continue;
+    }
+    next += `export * from './${name}/public-api';\n`;
+  }
+  await writeFile(barrelPath, next);
+}
+
+async function exists(filePath) {
+  try {
+    await access(filePath);
+    return true;
+  } catch (error) {
+    if (error instanceof Error && "code" in error && error.code === "ENOENT") {
+      return false;
+    }
+    throw error;
+  }
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@vekron/vekron-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Librería de componentes Angular. Se instala completa o componente por componente.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "vekron-ui": "./bin/vekron-ui.js"
+  },
+  "style": "./src/styles.css",
+  "exports": {
+    "./styles.css": "./src/styles.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/vekron-vekron-ui.d.ts",
+      "default": "./fesm2022/vekron-vekron-ui.mjs"
+    }
+  },
+  "files": [
+    "bin",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/common": "^22.2.0",
+    "@angular/core": "^22.2.0",
+    "@angular/forms": "^22.2.0",
+    "@angular/platform-browser": "^22.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": ">=4.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/vekron-vekron-ui.mjs",
+  "typings": "types/vekron-vekron-ui.d.ts"
 }

package/src/accordion/accordion.component.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+} from '@angular/core';
+
+@Component({
+  selector: 'ui-accordion',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="w-full border-t border-border">
+      <ng-content />
+    </div>
+  `,
+})
+export class UiAccordionComponent {
+  readonly openId = model('');
+
+  toggle(itemId: string): void {
+    if (this.openId() === itemId) {
+      this.openId.set('');
+      return;
+    }
+    this.openId.set(itemId);
+  }
+}
+
+@Component({
+  selector: 'ui-accordion-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="border-b border-border">
+      <button type="button" class="flex w-full items-center justify-between py-3 text-left text-sm font-medium" (click)="toggle()">
+        {{ title() }}
+        <span aria-hidden="true">{{ marker() }}</span>
+      </button>
+      @if (expanded()) {
+        <div class="pb-3 text-sm text-muted-foreground">
+          <ng-content />
+        </div>
+      }
+    </div>
+  `,
+})
+export class UiAccordionItemComponent {
+  readonly itemId = input.required<string>();
+  readonly title = input.required<string>();
+  private readonly accordion = inject(UiAccordionComponent);
+  readonly expanded = computed(() => this.accordion.openId() === this.itemId());
+
+  toggle(): void {
+    this.accordion.toggle(this.itemId());
+  }
+
+  marker(): string {
+    if (this.expanded()) {
+      return '−';
+    }
+    return '+';
+  }
+}

package/src/accordion/public-api.ts

@@ -0,0 +1 @@
+export { UiAccordionComponent, UiAccordionItemComponent } from './accordion.component';

package/src/autocomplete/autocomplete.component.ts

@@ -0,0 +1,144 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiFieldClass, uiLabelClass, uiPanelClass } from '../utils/classes';
+import { type UiOption } from '../utils/models';
+
+@Component({
+  selector: 'ui-autocomplete',
+  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"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [value]="query()"
+        role="combobox"
+        [attr.aria-expanded]="open()"
+        (input)="onQuery($event)"
+        (focus)="open.set(true)"
+        (blur)="markTouched()"
+      />
+      @if (open()) {
+        <div [class]="panelClass + ' absolute top-full right-0 left-0 mt-1'">
+          @for (option of filtered(); 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>
+          } @empty {
+            <p class="px-3 py-2 text-sm text-muted-foreground">Sin coincidencias.</p>
+          }
+        </div>
+      }
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiAutocompleteComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiAutocompleteComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly options = input.required<readonly UiOption[]>();
+  readonly label = input('');
+  readonly placeholder = input('Buscar');
+  readonly inputId = input('');
+  readonly disabled = input(false);
+  readonly query = signal('');
+  readonly open = signal(false);
+  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 panelClass = uiPanelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly resolvedId = computed(() => {
+    const provided = this.inputId();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedId;
+  });
+  readonly filtered = computed(() => {
+    const query = this.query().trim().toLowerCase();
+    if (query.length === 0) {
+      return this.options();
+    }
+    return this.options().filter((option) => option.label.toLowerCase().includes(query));
+  });
+
+  onQuery(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-autocomplete esperaba un HTMLInputElement.');
+    }
+    this.query.set(target.value);
+    this.open.set(true);
+  }
+
+  choose(event: MouseEvent, option: UiOption): void {
+    event.preventDefault();
+    if (option.disabled === true) {
+      return;
+    }
+    this.value.set(option.value);
+    this.query.set(option.label);
+    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('');
+      this.query.set('');
+      return;
+    }
+    this.value.set(value);
+    for (const option of this.options()) {
+      if (option.value === value) {
+        this.query.set(option.label);
+        return;
+      }
+    }
+    this.query.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/autocomplete/public-api.ts

@@ -0,0 +1 @@
+export { UiAutocompleteComponent } from './autocomplete.component';

package/src/avatar/avatar.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, computed, Component, input, signal } from '@angular/core';
+
+@Component({
+  selector: 'ui-avatar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span class="inline-flex size-10 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-foreground">
+      @if (showImage()) {
+        <img class="size-full object-cover" [src]="src()" [alt]="alt()" (error)="failed.set(true)" />
+      } @else {
+        {{ initials() }}
+      }
+    </span>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiAvatarComponent {
+  readonly src = input('');
+  readonly alt = input('');
+  readonly initials = input('');
+  readonly failed = signal(false);
+  readonly showImage = computed(() => this.src().length > 0 && !this.failed());
+}

package/src/avatar/public-api.ts

@@ -0,0 +1 @@
+export { UiAvatarComponent } from './avatar.component';