@gob-ds/gob-ds 1.0.0

package/src/app/lib/alert-dialog/alert-dialog.component.ts

@@ -0,0 +1,144 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type AlertDialogVariant = 'default' | 'destructive';
+
+@Component({
+  standalone: true,
+  selector: 'ds-alert-dialog',
+  imports: [CommonModule],
+  templateUrl: './alert-dialog.component.html',
+  styleUrl: './alert-dialog.component.scss',
+})
+export class AlertDialogComponent implements OnChanges, OnDestroy {
+  @Input() open = false;
+  @Output() openChange = new EventEmitter<boolean>();
+
+  @Input() title = 'Confirmar acción';
+  @Input() description = '';
+  @Input() variant: AlertDialogVariant = 'default';
+
+  @Input() confirmText = 'Confirmar';
+  @Input() cancelText = 'Cancelar';
+
+  @Input() closeOnOverlayClick = true;
+  @Input() disableClose = false;
+
+  @Output() confirm = new EventEmitter<void>();
+  @Output() cancel = new EventEmitter<void>();
+
+  @ViewChild('dialogPanel', { static: false }) dialogPanel?: ElementRef<HTMLElement>;
+  @ViewChild('confirmBtn', { static: false }) confirmBtn?: ElementRef<HTMLButtonElement>;
+
+  private lastActiveElement: HTMLElement | null = null;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['open']) {
+      if (this.open) this.onOpen();
+      else this.onClose();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.unlockScroll();
+  }
+
+  private onOpen(): void {
+    this.lastActiveElement = document.activeElement as HTMLElement | null;
+    this.lockScroll();
+
+    queueMicrotask(() => {
+      this.confirmBtn?.nativeElement?.focus();
+    });
+  }
+
+  private onClose(): void {
+    this.unlockScroll();
+    queueMicrotask(() => {
+      this.lastActiveElement?.focus?.();
+    });
+  }
+
+  private lockScroll(): void {
+    document.documentElement.style.overflow = 'hidden';
+  }
+
+  private unlockScroll(): void {
+    document.documentElement.style.overflow = '';
+  }
+
+  requestClose(): void {
+    if (this.disableClose) return;
+    this.openChange.emit(false);
+  }
+
+  onOverlayClick(): void {
+    if (!this.closeOnOverlayClick) return;
+    this.requestClose();
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+    this.requestClose();
+  }
+
+  onConfirm(): void {
+    this.confirm.emit();
+    this.requestClose();
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  onKeydown(event: KeyboardEvent): void {
+    if (!this.open) return;
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.requestClose();
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      this.trapFocus(event);
+    }
+  }
+
+  private trapFocus(event: KeyboardEvent): void {
+    const panel = this.dialogPanel?.nativeElement;
+    if (!panel) return;
+
+    const focusables = Array.from(
+      panel.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-disabled'));
+
+    if (focusables.length === 0) return;
+
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement as HTMLElement | null;
+
+    if (event.shiftKey) {
+      if (!active || active === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (!active || active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+}

package/src/app/lib/badge/badge.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type BadgeVariant = 'success' | 'warning' | 'neutral' | 'default' | 'error';
+export type BadgeSize = 'sm' | 'md';
+
+@Component({
+    standalone: true,
+    selector: 'cg-badge',
+    imports: [CommonModule],
+    styleUrl: './badge.scss',
+    template: `
+    <span [class]="badgeClasses">
+      <ng-content />
+    </span>
+  `,
+})
+export class BadgeComponent {
+    @Input() variant: BadgeVariant = 'default';
+    @Input() size: BadgeSize = 'md';
+
+    get badgeClasses(): string {
+        return `badge badge--${this.variant} badge--${this.size}`;
+    }
+}

package/src/app/lib/badge/badge.scss

@@ -0,0 +1,50 @@
+.badge {
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--radius-md);
+    white-space: nowrap;
+    width: fit-content;
+    padding: var(--space-0-5) var(--space-1-5);
+}
+
+/* Sizes */
+
+.badge--sm {
+    font-size: var(--font-size-sm);
+}
+
+.badge--md {
+    font-size: var(--font-size-md);
+}
+
+/* Variants */
+
+.badge--success {
+    background: var(--color-status-success-bg);
+    color: var(--color-status-success-text);
+    border: 1px solid var(--color-status-success-border);
+}
+
+.badge--warning {
+    background: var(--color-status-warning-bg);
+    color: var(--color-status-warning-text);
+    border: 1px solid var(--color-status-warning-border);
+}
+
+.badge--neutral {  
+    background: var(--color-status-neutral-bg);
+    color: var(--color-status-neutral-text);
+    border: 1px solid var(--color-status-neutral-border);
+}
+
+.badge--default {
+    background: var(--color-status-default-bg);
+    color: var(--color-status-default-text);
+    border: 1px solid var(--color-status-default-border);
+}
+
+.badge--error {
+    background: var(--color-status-error-bg);
+    color: var(--color-status-error-text);
+    border: 1px solid var(--color-status-error-border);
+}
+

package/src/app/lib/button/button.component.html

@@ -0,0 +1,35 @@
+<ng-template #content>
+    @if (loading) {
+    <lucide-icon [img]="Loader2" [size]="iconSize" class="btn__spinner" />
+    }
+
+    @if (showIconLeft) {
+    <lucide-icon [img]="icon" [size]="iconSize" class="btn__icon" />
+    }
+
+    @if (iconPosition !== 'only') {
+    <span class="btn__label">
+        <ng-content />
+    </span>
+    }
+
+    @if (showIconOnly) {
+    <lucide-icon [img]="icon" [size]="iconSize" class="btn__icon" />
+    }
+
+    @if (showIconRight) {
+    <lucide-icon [img]="icon" [size]="iconSize" class="btn__icon" />
+    }
+</ng-template>
+
+@if (asTag === 'a') {
+  <a [class]="hostClasses + ' ' + stateClasses" [attr.aria-disabled]="isDisabled">
+    <ng-container *ngTemplateOutlet="content" />
+  </a>
+} @else {
+  <button [class]="hostClasses + ' ' + stateClasses"
+          [disabled]="isDisabled"
+          [attr.aria-busy]="loading">
+    <ng-container *ngTemplateOutlet="content" />
+  </button>
+}

package/src/app/lib/button/button.component.scss

@@ -0,0 +1,226 @@
+// ── Button Tokens ───────────────────────────────────────────
+:host {
+    display: inline-flex;
+}
+
+// ── Base ──────────────────────────────────────────────────────
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-regular);
+    border: var(--border-width-thin) solid transparent;
+    border-radius: var(--btn-radius);
+    cursor: pointer;
+    white-space: nowrap;
+    text-decoration: none;
+    transition: background 150ms ease, color 150ms ease,
+        border-color 150ms ease, box-shadow 150ms ease,
+        opacity 150ms ease;
+    outline: none;
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--color-brand-200);
+    }
+}
+
+// ── Sizes ───────────────────────────────────────────────────
+.btn--sm {
+    --btn-radius: var(--radius-lg);
+    height: auto;
+    padding: 6px 10px;
+    font-size: var(--font-size-sm);
+
+    &.btn--icon-only {
+        width: 28px;
+        padding: 0;
+        height: 28px;
+    }
+}
+
+.btn--md {
+    --btn-radius: var(--radius-lg);
+    height: auto;
+    padding: 6px 12px;
+    font-size: var(--font-size-md);
+
+    &.btn--icon-only {
+        width: 36px;
+        padding: 0;
+        height: 36px;
+    }
+}
+
+.btn--lg {
+    --btn-radius: var(--radius-lg);
+    height: auto;
+    padding: 8px 16px;
+    font-size: var(--font-size-lg);
+
+    &.btn--icon-only {
+        width: 44px;
+        padding: 0;
+        height: 44px;
+    }
+}
+
+// ── Full width ────────────────────────────────────────────────
+.btn--full {
+    width: 100%;
+}
+
+// ── Variants ─────────────────────────────────────────────────
+
+// Primary
+.btn--primary {
+    background: var(--color-brand-700);
+    color: #fff;
+
+    &:is(:hover, .is-hover):not(.btn--disabled) {
+        background: var(--color-brand-800);
+    }
+
+    &:is(:active, .is-active):not(.btn--disabled) {
+        background: var(--color-brand-900);
+    }
+}
+
+// Secondary
+.btn--secondary {
+    background: var(--color-neutral-300);
+    color: var(--color-text-primary);
+
+    &:is(:hover, .is-hover):not(.btn--disabled) {
+        background: var(--color-neutral-300);
+    }
+
+    &:is(:active, .is-active):not(.btn--disabled) {
+        background: var(--color-neutral-500);
+    }
+
+    // o define neutral-400
+}
+
+// Outline
+.btn--outline {
+    background: transparent;
+    color: var(--color-text-primary);
+    border-color: var(--color-border);
+    border-width: var(--border-width-thin);
+    box-shadow: var(--shadow-xs);
+
+    &:is(:hover, .is-hover):not(.btn--disabled) {
+        background: var(--color-bg-subtle);
+        border-color: var(--color-border-strong);
+    }
+
+    &:is(:active, .is-active):not(.btn--disabled) {
+        background: var(--color-bg-muted);
+    }
+}
+
+// Ghost
+.btn--ghost {
+    background: transparent;
+    color: var(--color-text-primary);
+    border-color: transparent;
+
+    &:hover:not(.btn--disabled) {
+        background: var(--color-bg-muted);
+    }
+
+    &:active:not(.btn--disabled) {
+        background: var(--color-gray-200);
+    }
+}
+
+// Destructive
+.btn--destructive {
+    background: #EF4444;
+    color: #fff;
+
+    &:is(:hover, .is-hover):not(.btn--disabled) {
+        background: #DC2626;
+    }
+
+    &:is(:active, .is-active):not(.btn--disabled) {
+        background: #B91C1C;
+    }
+
+    &:is(:focus-visible, .is-focus) {
+        box-shadow: 0 0 0 3px #FECACA;
+    }
+}
+
+// Link
+.btn--link {
+    background: transparent;
+    color: var(--color-brand-700);
+    padding-inline: 2px;
+    height: auto;
+
+    &:is(:hover, .is-hover):not(.btn--disabled) {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+}
+
+// ── Disabled / loading state ─────────────────────────────────
+.btn--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.btn {
+    &:is(:focus-visible, .is-focus) {
+        box-shadow: 0 0 0 3px var(--color-brand-200);
+    }
+}
+
+// ── Spinner ───────────────────────────────────────────────────
+.btn__spinner {
+    animation: spin 1.2s linear infinite;
+    flex-shrink: 0;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// ── Icon ───────────────────────────────────────────────────────
+.btn__icon,
+.btn__spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    line-height: 0;
+}
+
+.btn__icon svg,
+.btn__spinner svg {
+    display: block;
+    width: 1em;
+    height: 1em;
+}
+
+.btn--sm {
+    --btn-icon-size: 14px;
+}
+
+.btn--md {
+    --btn-icon-size: 16px;
+}
+
+.btn--lg {
+    --btn-icon-size: 18px;
+}

package/src/app/lib/button/button.component.ts

@@ -0,0 +1,70 @@
+import { Component, ElementRef, Input, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LucideAngularModule, Loader2 } from 'lucide-angular';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonIconPosition = 'left' | 'right' | 'only';
+export type ButtonAs = 'button' | 'a';
+
+@Component({
+    standalone: true,
+    selector: 'ds-button',
+    imports: [CommonModule, LucideAngularModule],
+    templateUrl: './button.component.html',
+    styleUrl: './button.component.scss',
+})
+export class ButtonComponent {
+    private readonly hostEl = inject(ElementRef<HTMLElement>);
+
+    @Input() variant: ButtonVariant = 'primary';
+    @Input() size: ButtonSize = 'md';
+    @Input() disabled = false;
+    @Input() loading = false;
+    @Input() fullWidth = false;
+    @Input() iconPosition: ButtonIconPosition | null = null;
+    @Input() asTag: ButtonAs = 'button';
+    @Input() icon: any = null;
+
+    readonly Loader2 = Loader2;
+
+    get hostClasses(): string {
+        const classes = [
+            'btn',
+            `btn--${this.variant}`,
+            `btn--${this.size}`,
+            this.fullWidth ? 'btn--full' : '',
+            this.iconPosition === 'only' ? 'btn--icon-only' : '',
+            this.loading ? 'btn--loading' : '',
+            this.disabled || this.loading ? 'btn--disabled' : '',
+        ];
+        return classes.filter(Boolean).join(' ');
+    }
+
+    // ✅ Toma clases del host (Storybook) y pásalas al <button>/<a>
+    get stateClasses(): string {
+        const host = this.hostEl.nativeElement;
+        const allowed = ['is-hover', 'is-active', 'is-focus'];
+        return allowed.filter((c) => host.classList.contains(c)).join(' ');
+    }
+
+    get isDisabled(): boolean {
+        return this.disabled || this.loading;
+    }
+
+    get showIconLeft(): boolean {
+        return !!this.icon && this.iconPosition === 'left' && !this.loading;
+    }
+
+    get showIconRight(): boolean {
+        return !!this.icon && this.iconPosition === 'right' && !this.loading;
+    }
+
+    get showIconOnly(): boolean {
+        return !!this.icon && this.iconPosition === 'only' && !this.loading;
+    }
+
+    get iconSize(): number {
+        return { sm: 14, md: 16, lg: 18 }[this.size];
+    }
+}

package/src/app/lib/checkbox/checkbox.component.html

@@ -0,0 +1,34 @@
+<label
+  [class]="rootClasses"
+  [attr.aria-disabled]="disabled"
+>
+  <!-- Box accesible -->
+  <span
+    [class]="boxClasses"
+    role="checkbox"
+    tabindex="0"
+    [attr.aria-checked]="indeterminate ? 'mixed' : checked"
+    [attr.aria-disabled]="disabled"
+    (click)="toggle()"
+    (keydown.space)="$event.preventDefault(); toggle()"
+    (keydown.enter)="$event.preventDefault(); toggle()"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+  >
+    @if (indeterminate) {
+      <lucide-icon [img]="Minus" class="cb-icon" />
+    } @else if (checked) {
+      <lucide-icon [img]="Check" class="cb-icon" />
+    }
+  </span>
+
+  <!-- Label + hint (click también toggleará) -->
+  @if (label) {
+    <span class="cb-content" (click)="toggle()">
+      <span class="cb-label">{{ label }}</span>
+      @if (hint) {
+        <span class="cb-hint">{{ hint }}</span>
+      }
+    </span>
+  }
+</label>

package/src/app/lib/checkbox/checkbox.component.scss

@@ -0,0 +1,80 @@
+// ── Root ──────────────────────────────────────────────────────
+.cb-root {
+  display:     inline-flex;
+  align-items: flex-start;
+  gap:         10px;
+  cursor:      pointer;
+  user-select: none;
+
+  &--disabled {
+    opacity: 0.5;
+    cursor:  not-allowed;
+  }
+}
+
+// ── Box visual ────────────────────────────────────────────────
+.cb-box {
+  flex-shrink:     0;
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  border-radius:   var(--radius-md);
+  border:          1.5px solid var(--color-border);
+  background:      var(--color-bg-default);
+  transition:      background 150ms ease,
+                   border-color 150ms ease,
+                   box-shadow 150ms ease;
+  width:           20px;
+  height:          20px;
+
+  // Checked / indeterminate
+  &--checked {
+    background:   var(--color-brand-700);
+    border-color: var(--color-brand-700);
+  }
+
+  // Focus ring
+  &--focused {
+    box-shadow: 0 0 0 3px var(--color-brand-100);
+  }
+
+  &--disabled { cursor: not-allowed; }
+}
+
+// ── Ícono interno ─────────────────────────────────────────────
+.cb-icon {
+  color: var(--color-white);
+  flex-shrink: 0;
+  stroke-width: 3px;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.cb-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+// ── Label + hint ──────────────────────────────────────────────
+.cb-content {
+  display:        flex;
+  flex-direction: column;
+  gap:            2px;
+}
+
+.cb-label {
+  font-size:   var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color:       var(--color-text-primary);
+}
+
+.cb-hint {
+  font-size:  var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  color:      var(--color-text-tertiary);
+}