@salas-ds/cli 0.1.0 → 0.2.1

package/templates/angular/toast/toaster.component.ts

@@ -0,0 +1,329 @@
+import { Component, Input, OnInit, OnDestroy, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { cn } from '../utils';
+import { SalasToastService } from './toast.service';
+
+export type ToastType = 'default' | 'success' | 'info' | 'warning' | 'error';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export interface ToastData {
+  id: string;
+  type: ToastType;
+  title: string;
+  description?: string;
+  duration?: number;
+  dismissible?: boolean;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface ToasterProps {
+  position?: ToastPosition;
+  duration?: number;
+  richColors?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-toaster',
+  standalone: true,
+  imports: [CommonModule],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div [class]="containerClasses">
+      @for (toast of toastService.toasts; track toast.id) {
+        <div [class]="getToastClasses(toast)" role="alert">
+          <div class="salas-toast-icon-wrapper">
+            @switch (toast.type) {
+              @case ('success') {
+                <svg class="salas-toast-icon salas-toast-icon--success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+              }
+              @case ('error') {
+                <svg class="salas-toast-icon salas-toast-icon--error" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+              }
+              @case ('warning') {
+                <svg class="salas-toast-icon salas-toast-icon--warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+              }
+              @case ('info') {
+                <svg class="salas-toast-icon salas-toast-icon--info" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+              }
+            }
+          </div>
+          <div class="salas-toast-content">
+            <div class="salas-toast-title">{{ toast.title }}</div>
+            @if (toast.description) {
+              <div class="salas-toast-description">{{ toast.description }}</div>
+            }
+          </div>
+          <div class="salas-toast-actions">
+            @if (toast.action) {
+              <button class="salas-toast-action-btn" (click)="toast.action!.onClick(); dismiss(toast.id)">
+                {{ toast.action!.label }}
+              </button>
+            }
+            @if (toast.dismissible) {
+              <button class="salas-toast-close" (click)="dismiss(toast.id)" aria-label="Close">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-toaster {
+      position: fixed;
+      z-index: 99999;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      pointer-events: none;
+      padding: 1rem;
+      max-width: 420px;
+      width: 100%;
+    }
+
+    .salas-toaster--top-left { top: 0; left: 0; }
+    .salas-toaster--top-center { top: 0; left: 50%; transform: translateX(-50%); }
+    .salas-toaster--top-right { top: 0; right: 0; }
+    .salas-toaster--bottom-left { bottom: 0; left: 0; flex-direction: column-reverse; }
+    .salas-toaster--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
+    .salas-toaster--bottom-right { bottom: 0; right: 0; flex-direction: column-reverse; }
+
+    .salas-toast {
+      pointer-events: all;
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      width: 100%;
+      padding: 1rem;
+      border-radius: 0.5rem;
+      border: 1px solid var(--salas-gray-200, #e4e4e7);
+      background-color: white;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+      animation: salas-toast-slide-in 0.3s cubic-bezier(0.21, 1.02, 0.73, 1);
+      font-size: 0.875rem;
+      line-height: 1.4;
+    }
+
+    @keyframes salas-toast-slide-in {
+      from {
+        opacity: 0;
+        transform: translateY(0.75rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .salas-toaster--top-left .salas-toast,
+    .salas-toaster--top-center .salas-toast,
+    .salas-toaster--top-right .salas-toast {
+      animation-name: salas-toast-slide-in-top;
+    }
+
+    @keyframes salas-toast-slide-in-top {
+      from {
+        opacity: 0;
+        transform: translateY(-0.75rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Rich color variants */
+    .salas-toast--success {
+      border-color: var(--salas-success-200, #bbf7d0);
+      background-color: var(--salas-success-50, #f0fdf4);
+    }
+
+    .salas-toast--error {
+      border-color: var(--salas-destructive-200, #fecaca);
+      background-color: var(--salas-destructive-50, #fef2f2);
+    }
+
+    .salas-toast--warning {
+      border-color: #fde68a;
+      background-color: #fffbeb;
+    }
+
+    .salas-toast--info {
+      border-color: #bfdbfe;
+      background-color: #eff6ff;
+    }
+
+    .salas-toast-icon-wrapper {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      padding-top: 0.0625rem;
+    }
+
+    .salas-toast-icon--success { color: var(--salas-success-500, #22c55e); }
+    .salas-toast-icon--error { color: var(--salas-destructive-500, #ef4444); }
+    .salas-toast-icon--warning { color: #f59e0b; }
+    .salas-toast-icon--info { color: #3b82f6; }
+
+    .salas-toast-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .salas-toast-title {
+      font-weight: 500;
+      color: var(--salas-gray-900, #18181b);
+    }
+
+    .salas-toast-description {
+      margin-top: 0.25rem;
+      font-size: 0.8125rem;
+      color: var(--salas-gray-500, #71717a);
+    }
+
+    .salas-toast-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex-shrink: 0;
+    }
+
+    .salas-toast-action-btn {
+      padding: 0.25rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      border-radius: 0.25rem;
+      border: 1px solid var(--salas-gray-200, #e4e4e7);
+      background-color: white;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background-color 0.15s;
+    }
+
+    .salas-toast-action-btn:hover {
+      background-color: var(--salas-gray-100, #f4f4f5);
+    }
+
+    .salas-toast-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.25rem;
+      height: 1.25rem;
+      border: none;
+      background: none;
+      cursor: pointer;
+      color: var(--salas-gray-400, #a1a1aa);
+      border-radius: 0.25rem;
+      padding: 0;
+      transition: color 0.15s, background-color 0.15s;
+    }
+
+    .salas-toast-close:hover {
+      color: var(--salas-gray-600, #52525b);
+      background-color: var(--salas-gray-100, #f4f4f5);
+    }
+
+    /* Dark theme */
+    [data-theme='dark'] .salas-toast {
+      background-color: var(--salas-gray-900, #18181b);
+      border-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-toast-title {
+      color: var(--salas-gray-100, #f4f4f5);
+    }
+
+    [data-theme='dark'] .salas-toast-description {
+      color: var(--salas-gray-400, #a1a1aa);
+    }
+
+    [data-theme='dark'] .salas-toast-action-btn {
+      background-color: var(--salas-gray-800, #27272a);
+      border-color: var(--salas-gray-700, #3f3f46);
+      color: var(--salas-gray-100, #f4f4f5);
+    }
+
+    [data-theme='dark'] .salas-toast-action-btn:hover {
+      background-color: var(--salas-gray-700, #3f3f46);
+    }
+
+    [data-theme='dark'] .salas-toast-close {
+      color: var(--salas-gray-500, #71717a);
+    }
+
+    [data-theme='dark'] .salas-toast-close:hover {
+      color: var(--salas-gray-300, #d4d4d8);
+      background-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-toast--success {
+      background-color: rgba(34, 197, 94, 0.1);
+      border-color: rgba(34, 197, 94, 0.2);
+    }
+
+    [data-theme='dark'] .salas-toast--error {
+      background-color: rgba(239, 68, 68, 0.1);
+      border-color: rgba(239, 68, 68, 0.2);
+    }
+
+    [data-theme='dark'] .salas-toast--warning {
+      background-color: rgba(245, 158, 11, 0.1);
+      border-color: rgba(245, 158, 11, 0.2);
+    }
+
+    [data-theme='dark'] .salas-toast--info {
+      background-color: rgba(59, 130, 246, 0.1);
+      border-color: rgba(59, 130, 246, 0.2);
+    }
+  `],
+})
+export class SalasToasterComponent implements OnInit, OnDestroy {
+  @Input() position: ToastPosition = 'bottom-right';
+  @Input() richColors = true;
+
+  private unsubscribe?: () => void;
+
+  constructor(
+    public toastService: SalasToastService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.toastService.position = this.position;
+    this.unsubscribe = this.toastService.onChange(() => {
+      this.cdr.detectChanges();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe?.();
+  }
+
+  get containerClasses(): string {
+    return cn('salas-toaster', `salas-toaster--${this.position}`);
+  }
+
+  getToastClasses(toast: ToastData): string {
+    return cn(
+      'salas-toast',
+      this.richColors && toast.type !== 'default' && `salas-toast--${toast.type}`,
+    );
+  }
+
+  dismiss(id: string): void {
+    this.toastService.dismiss(id);
+  }
+}

package/templates/angular/tooltip/tooltip-content.component.ts

@@ -0,0 +1,43 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipAlign = 'start' | 'center' | 'end';
+
+export interface TooltipProps {
+  content?: string;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  delayDuration?: number;
+  disabled?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-tooltip-content',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    @if (isVisible) {
+      <div [class]="popupClasses">
+        <ng-content></ng-content>
+        <span class="salas-tooltip-arrow"></span>
+      </div>
+    }
+  `,
+})
+export class SalasTooltipContentComponent {
+  isVisible = false;
+  side: TooltipSide = 'top';
+  align: TooltipAlign = 'center';
+
+  get popupClasses(): string {
+    return cn(
+      'salas-tooltip-popup',
+      this.isVisible && 'salas-tooltip-popup--visible',
+      `salas-tooltip-popup--${this.side}`,
+      `salas-tooltip-popup--align-${this.align}`,
+    );
+  }
+}

package/templates/angular/tooltip/tooltip-trigger.component.ts

@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-tooltip-trigger',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: inline-block;',
+  },
+  template: `<ng-content></ng-content>`,
+})
+export class SalasTooltipTriggerComponent {}

package/templates/angular/tooltip/tooltip.component.ts

@@ -0,0 +1,243 @@
+import {
+  Component,
+  Input,
+  ViewEncapsulation,
+  ElementRef,
+  OnDestroy,
+  AfterContentInit,
+  ContentChild,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { cn } from '../utils';
+import { SalasTooltipTriggerComponent } from './tooltip-trigger.component';
+import { SalasTooltipContentComponent } from './tooltip-content.component';
+
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipAlign = 'start' | 'center' | 'end';
+
+export interface TooltipProps {
+  content?: string;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  delayDuration?: number;
+  disabled?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-tooltip',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: inline-block; position: relative;',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+    '(focusin)': 'onFocusIn()',
+    '(focusout)': 'onFocusOut()',
+  },
+  template: `
+    <ng-content></ng-content>
+  `,
+  styles: [`
+    .salas-tooltip-popup {
+      position: absolute;
+      z-index: 9999;
+      padding: 0.375rem 0.75rem;
+      font-size: 0.75rem;
+      line-height: 1rem;
+      font-weight: 500;
+      color: var(--salas-gray-50, #fafafa);
+      background-color: var(--salas-gray-900, #18181b);
+      border-radius: 0.375rem;
+      pointer-events: none;
+      white-space: nowrap;
+      opacity: 0;
+      transform: scale(0.95);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    }
+
+    .salas-tooltip-popup--visible {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .salas-tooltip-popup--top {
+      bottom: 100%;
+      margin-bottom: 0.5rem;
+    }
+
+    .salas-tooltip-popup--bottom {
+      top: 100%;
+      margin-top: 0.5rem;
+    }
+
+    .salas-tooltip-popup--left {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%) scale(0.95);
+      margin-right: 0.5rem;
+    }
+
+    .salas-tooltip-popup--left.salas-tooltip-popup--visible {
+      transform: translateY(-50%) scale(1);
+    }
+
+    .salas-tooltip-popup--right {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%) scale(0.95);
+      margin-left: 0.5rem;
+    }
+
+    .salas-tooltip-popup--right.salas-tooltip-popup--visible {
+      transform: translateY(-50%) scale(1);
+    }
+
+    .salas-tooltip-popup--align-start {
+      left: 0;
+    }
+
+    .salas-tooltip-popup--align-center:not(.salas-tooltip-popup--left):not(.salas-tooltip-popup--right) {
+      left: 50%;
+      transform: translateX(-50%) scale(0.95);
+    }
+
+    .salas-tooltip-popup--align-center.salas-tooltip-popup--visible:not(.salas-tooltip-popup--left):not(.salas-tooltip-popup--right) {
+      transform: translateX(-50%) scale(1);
+    }
+
+    .salas-tooltip-popup--align-end {
+      right: 0;
+    }
+
+    /* Arrow */
+    .salas-tooltip-arrow {
+      position: absolute;
+      width: 0.5rem;
+      height: 0.25rem;
+      overflow: hidden;
+    }
+
+    .salas-tooltip-arrow::after {
+      content: '';
+      position: absolute;
+      width: 0.375rem;
+      height: 0.375rem;
+      background-color: var(--salas-gray-900, #18181b);
+      transform: rotate(45deg);
+    }
+
+    .salas-tooltip-popup--top .salas-tooltip-arrow {
+      bottom: -0.25rem;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .salas-tooltip-popup--top .salas-tooltip-arrow::after {
+      top: -0.125rem;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+
+    .salas-tooltip-popup--bottom .salas-tooltip-arrow {
+      top: -0.25rem;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .salas-tooltip-popup--bottom .salas-tooltip-arrow::after {
+      bottom: -0.125rem;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+
+    /* Dark theme */
+    [data-theme='dark'] .salas-tooltip-popup {
+      background-color: var(--salas-gray-100, #f4f4f5);
+      color: var(--salas-gray-900, #18181b);
+    }
+
+    [data-theme='dark'] .salas-tooltip-arrow::after {
+      background-color: var(--salas-gray-100, #f4f4f5);
+    }
+  `],
+})
+export class SalasTooltipComponent implements AfterContentInit, OnDestroy {
+  @Input() side: TooltipSide = 'top';
+  @Input() align: TooltipAlign = 'center';
+  @Input() delayDuration = 200;
+  @Input() disabled = false;
+
+  @ContentChild(SalasTooltipContentComponent) contentChild?: SalasTooltipContentComponent;
+
+  isVisible = false;
+  private showTimeout: ReturnType<typeof setTimeout> | null = null;
+  private hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterContentInit(): void {
+    this.updateContent();
+  }
+
+  ngOnDestroy(): void {
+    this.clearTimeouts();
+  }
+
+  onMouseEnter(): void {
+    if (this.disabled) return;
+    this.clearTimeouts();
+    this.showTimeout = setTimeout(() => {
+      this.show();
+    }, this.delayDuration);
+  }
+
+  onMouseLeave(): void {
+    this.clearTimeouts();
+    this.hideTimeout = setTimeout(() => {
+      this.hide();
+    }, 100);
+  }
+
+  onFocusIn(): void {
+    if (this.disabled) return;
+    this.show();
+  }
+
+  onFocusOut(): void {
+    this.hide();
+  }
+
+  private show(): void {
+    this.isVisible = true;
+    this.updateContent();
+    this.cdr.detectChanges();
+  }
+
+  private hide(): void {
+    this.isVisible = false;
+    this.updateContent();
+    this.cdr.detectChanges();
+  }
+
+  private updateContent(): void {
+    if (this.contentChild) {
+      this.contentChild.isVisible = this.isVisible;
+      this.contentChild.side = this.side;
+      this.contentChild.align = this.align;
+    }
+  }
+
+  private clearTimeouts(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+}

package/templates/angular/tooltip/tooltip.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SalasTooltipComponent } from './tooltip.component';
+import { SalasTooltipTriggerComponent } from './tooltip-trigger.component';
+import { SalasTooltipContentComponent } from './tooltip-content.component';
+
+@NgModule({
+  imports: [SalasTooltipComponent, SalasTooltipTriggerComponent, SalasTooltipContentComponent],
+  exports: [SalasTooltipComponent, SalasTooltipTriggerComponent, SalasTooltipContentComponent],
+})
+export class SalasTooltipModule {}