@salas-ds/cli 0.1.0 → 0.2.1

package/templates/angular/dialog/dialog-header.component.ts

@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog-header',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  template: `<div class="salas-dialog-header"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-dialog-header {
+      padding-right: 1.5rem;
+    }
+  `],
+})
+export class SalasDialogHeaderComponent {}

package/templates/angular/dialog/dialog-title.component.ts

@@ -0,0 +1,18 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog-title',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  template: `<h2 class="salas-dialog-title"><ng-content></ng-content></h2>`,
+  styles: [`
+    .salas-dialog-title {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--salas-text);
+    }
+  `],
+})
+export class SalasDialogTitleComponent {}

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog-trigger',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  styles: [`:host { display: inline-block; cursor: pointer; }`],
+})
+export class SalasDialogTriggerComponent {}

package/templates/angular/dialog/dialog.component.ts

@@ -0,0 +1,212 @@
+import {
+
+export type DialogSize = 'default' | 'sm';
+
+export interface DialogProps {
+  /**
+   * Controlled open state. If provided, the dialog becomes controlled and
+   * will not manage its own internal state.
+   */
+  open?: boolean;
+  /**
+   * Width of the dialog panel. Accepts any valid CSS width value (e.g. '480px', '32rem', '50%').
+   */
+  width?: string;
+  /**
+   * Height of the dialog panel. Accepts any valid CSS height value.
+   */
+  height?: string;
+  /**
+   * Named size preset. When provided, defines sensible defaults for width and padding.
+   */
+  size?: DialogSize;
+  /**
+   * If true, closes the dialog when the user clicks on the overlay.
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * If true, hides the X close button in the top-right corner.
+   */
+  hideCloseButton?: boolean;
+}
+
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewEncapsulation,
+  HostListener,
+} from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-dialog-trigger-wrapper" (click)="openDialog()">
+      <ng-content select="salas-dialog-trigger"></ng-content>
+    </div>
+
+    @if (isOpen) {
+      <div class="salas-dialog-overlay" (click)="onOverlayClick()"></div>
+      <div class="salas-dialog-container" (click)="onContainerClick($event)">
+        <div
+          class="salas-dialog-panel"
+          [class.salas-dialog-panel--sm]="effectiveSize === 'sm'"
+          [style.width]="width ?? null"
+          [style.max-width]="width ? 'none' : null"
+          [style.height]="height ?? null"
+          role="alertdialog"
+          aria-modal="true"
+        >
+          @if (!hideCloseButton) {
+            <button
+              type="button"
+              class="salas-dialog-close"
+              aria-label="Close"
+              (click)="closeDialog()"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          }
+          <ng-content select="salas-dialog-content"></ng-content>
+        </div>
+      </div>
+    }
+  `,
+  styles: [`
+    .salas-dialog-trigger-wrapper {
+      display: inline-block;
+    }
+
+    .salas-dialog-overlay {
+      position: fixed;
+      inset: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 50;
+      animation: salas-dialog-fade-in 0.15s ease;
+    }
+
+    .salas-dialog-container {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      z-index: 51;
+    }
+
+    .salas-dialog-panel {
+      position: relative;
+      background-color: var(--salas-bg-elevated, #fff);
+      color: var(--salas-text, #111827);
+      border-radius: 0.75rem;
+      border: 1px solid var(--salas-gray-200, #e5e7eb);
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+      padding: 1.5rem;
+      width: 100%;
+      max-width: 32rem;
+      max-height: 85vh;
+      overflow: auto;
+      animation: salas-dialog-scale-in 0.15s ease;
+    }
+
+    .salas-dialog-panel--sm {
+      max-width: 22rem;
+      padding: 1.25rem;
+    }
+
+    .salas-dialog-close {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: none;
+      background: transparent;
+      color: var(--salas-text-muted, #6b7280);
+      cursor: pointer;
+      border-radius: 0.25rem;
+      padding: 0;
+      transition: color 0.15s, background-color 0.15s;
+    }
+
+    .salas-dialog-close:hover {
+      background-color: var(--salas-gray-100, #f3f4f6);
+      color: var(--salas-text, #111827);
+    }
+
+    :host-context([data-theme="dark"]) .salas-dialog-panel {
+      border-color: var(--salas-gray-200);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    }
+
+    @keyframes salas-dialog-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes salas-dialog-scale-in {
+      from { opacity: 0; transform: scale(0.96); }
+      to { opacity: 1; transform: scale(1); }
+    }
+  `],
+})
+export class SalasDialogComponent {
+  @Input() open?: boolean;
+  @Input() width?: string;
+  @Input() height?: string;
+  @Input() size?: DialogSize;
+  @Input() closeOnOverlayClick = true;
+  @Input() hideCloseButton = false;
+
+  @Output() openChange = new EventEmitter<boolean>();
+
+  internalOpen = false;
+
+  get isOpen(): boolean {
+    return this.open ?? this.internalOpen;
+  }
+
+  get effectiveSize(): DialogSize {
+    return this.size ?? 'default';
+  }
+
+  openDialog(): void {
+    if (this.open === undefined) {
+      this.internalOpen = true;
+    }
+    this.openChange.emit(true);
+  }
+
+  closeDialog(): void {
+    if (this.open === undefined) {
+      this.internalOpen = false;
+    }
+    this.openChange.emit(false);
+  }
+
+  onOverlayClick(): void {
+    if (this.closeOnOverlayClick) {
+      this.closeDialog();
+    }
+  }
+
+  onContainerClick(event: MouseEvent): void {
+    if ((event.target as HTMLElement).classList.contains('salas-dialog-container') && this.closeOnOverlayClick) {
+      this.closeDialog();
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    if (this.isOpen) {
+      this.closeDialog();
+    }
+  }
+}

package/templates/angular/dialog/dialog.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { SalasDialogComponent } from './dialog.component';
+import { SalasDialogTriggerComponent } from './dialog-trigger.component';
+import { SalasDialogContentComponent } from './dialog-content.component';
+import { SalasDialogHeaderComponent } from './dialog-header.component';
+import { SalasDialogTitleComponent } from './dialog-title.component';
+import { SalasDialogDescriptionComponent } from './dialog-description.component';
+import { SalasDialogFooterComponent } from './dialog-footer.component';
+
+@NgModule({
+  imports: [
+    SalasDialogComponent,
+    SalasDialogTriggerComponent,
+    SalasDialogContentComponent,
+    SalasDialogHeaderComponent,
+    SalasDialogTitleComponent,
+    SalasDialogDescriptionComponent,
+    SalasDialogFooterComponent,
+  ],
+  exports: [
+    SalasDialogComponent,
+    SalasDialogTriggerComponent,
+    SalasDialogContentComponent,
+    SalasDialogHeaderComponent,
+    SalasDialogTitleComponent,
+    SalasDialogDescriptionComponent,
+    SalasDialogFooterComponent,
+  ],
+})
+export class SalasDialogModule {}
+

package/templates/angular/input/input.component.ts

@@ -0,0 +1,229 @@
+import { Component, Input, forwardRef, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../utils';
+import { LucideAngularModule } from 'lucide-angular';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Input component types
+ */
+
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputVariant = 'default' | 'error' | 'success';
+
+export interface InputProps {
+  size?: InputSize;
+  variant?: InputVariant;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+  value?: string;
+  name?: string;
+  id?: string;
+  autocomplete?: string;
+  maxlength?: number;
+  minlength?: number;
+}
+
+
+@Component({
+  selector: 'salas-input',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule],
+  template: `
+    <div [class]="wrapperClasses">
+      <input
+        [id]="id"
+        [name]="name"
+        [type]="type"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [required]="required"
+        [attr.maxlength]="maxlength ?? null"
+        [attr.minlength]="minlength ?? null"
+        [autocomplete]="autocomplete"
+        [class]="inputClasses"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (focus)="onFocus()"
+        [attr.aria-invalid]="variant === 'error'"
+        [attr.aria-describedby]="id ? id + '-hint' : null"
+        #inputRef
+      />
+      @if (variant === 'error') {
+        <lucide-icon name="x" [size]="iconSize" class="salas-input-icon salas-input-icon--error" />
+      }
+      @if (variant === 'success') {
+        <lucide-icon name="check" [size]="iconSize" class="salas-input-icon salas-input-icon--success" />
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-input-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .salas-input {
+      width: 100%;
+      border-radius: 0.375rem;
+      border: 1px solid var(--salas-gray-300);
+      background-color: white;
+      padding: 0 0.75rem;
+      font-size: 0.875rem;
+      transition: all 0.2s;
+      outline: none;
+    }
+
+    .salas-input::placeholder {
+      color: var(--salas-gray-400);
+    }
+
+    .salas-input:focus {
+      border-color: var(--salas-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .salas-input:disabled {
+      background-color: var(--salas-gray-50);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .salas-input:read-only {
+      background-color: var(--salas-gray-50);
+      cursor: default;
+    }
+
+    /* Variants */
+    .salas-input--error {
+      border-color: var(--salas-destructive-500);
+    }
+
+    .salas-input--error:focus {
+      border-color: var(--salas-destructive-500);
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .salas-input--success {
+      border-color: var(--salas-success-500);
+    }
+
+    .salas-input--success:focus {
+      border-color: var(--salas-success-500);
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
+    }
+
+    /* Sizes */
+    .salas-input--sm {
+      height: 2rem;
+      padding: 0 0.625rem;
+      font-size: 0.8125rem;
+    }
+
+    .salas-input--md {
+      height: 2.5rem;
+    }
+
+    .salas-input--lg {
+      height: 3rem;
+      padding: 0 1rem;
+      font-size: 1rem;
+    }
+
+    .salas-input-icon {
+      position: absolute;
+      right: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .salas-input-icon--error {
+      color: var(--salas-destructive-500);
+    }
+
+    .salas-input-icon--success {
+      color: var(--salas-success-500);
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SalasInputComponent),
+      multi: true,
+    },
+  ],
+})
+export class SalasInputComponent implements ControlValueAccessor, InputProps, AfterViewInit {
+  @ViewChild('inputRef', { static: false }) inputRef?: ElementRef<HTMLInputElement>;
+
+  @Input() size: InputSize = 'md';
+  @Input() variant: InputVariant = 'default';
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() placeholder = '';
+  @Input() type: InputProps['type'] = 'text';
+  @Input() name = '';
+  @Input() id = '';
+  @Input() autocomplete = '';
+  @Input() maxlength?: number;
+  @Input() minlength?: number;
+
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get wrapperClasses(): string {
+    return cn('salas-input-wrapper');
+  }
+
+  get inputClasses(): string {
+    return cn(
+      'salas-input',
+      `salas-input--${this.size}`,
+      this.variant !== 'default' && `salas-input--${this.variant}`
+    );
+  }
+
+  get iconSize(): number {
+    return this.size === 'sm' ? 16 : this.size === 'lg' ? 20 : 18;
+  }
+
+  ngAfterViewInit(): void {}
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.onChange(target.value);
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  onFocus(): void {}
+
+  // ControlValueAccessor
+  writeValue(value: string | null | undefined): void {
+    const newValue = value ?? '';
+    if (this.inputRef?.nativeElement) {
+      this.inputRef.nativeElement.value = newValue;
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/templates/angular/input/input.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { SalasInputComponent } from './input.component';
+
+@NgModule({
+  imports: [SalasInputComponent],
+  exports: [SalasInputComponent],
+})
+export class SalasInputModule {}

package/templates/angular/scroll-area/scroll-area.component.ts

@@ -0,0 +1,72 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+@Component({
+  selector: 'salas-scroll-area',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[style.display]': '"block"',
+    '[style.overflow]': '"hidden"',
+    '[style.position]': '"relative"',
+  },
+  template: `
+    <div class="salas-scroll-area-viewport" [class.salas-scroll-area-viewport--horizontal]="orientation === 'horizontal' || orientation === 'both'">
+      <ng-content></ng-content>
+    </div>
+    <ng-content select="salas-scroll-bar"></ng-content>
+  `,
+  styles: [`
+    .salas-scroll-area-viewport {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: var(--salas-gray-300) transparent;
+    }
+
+    .salas-scroll-area-viewport--horizontal {
+      overflow-x: auto;
+    }
+
+    .salas-scroll-area-viewport::-webkit-scrollbar {
+      width: 0.5rem;
+      height: 0.5rem;
+    }
+
+    .salas-scroll-area-viewport::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .salas-scroll-area-viewport::-webkit-scrollbar-thumb {
+      background-color: var(--salas-gray-300);
+      border-radius: 9999px;
+    }
+
+    .salas-scroll-area-viewport::-webkit-scrollbar-thumb:hover {
+      background-color: var(--salas-gray-400);
+    }
+
+    .salas-scroll-area-viewport::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    /* Dark theme */
+    [data-theme='dark'] .salas-scroll-area-viewport {
+      scrollbar-color: var(--salas-gray-700) transparent;
+    }
+
+    [data-theme='dark'] .salas-scroll-area-viewport::-webkit-scrollbar-thumb {
+      background-color: var(--salas-gray-700);
+    }
+
+    [data-theme='dark'] .salas-scroll-area-viewport::-webkit-scrollbar-thumb:hover {
+      background-color: var(--salas-gray-600);
+    }
+  `],
+})
+export class SalasScrollAreaComponent {
+  @Input() orientation: 'vertical' | 'horizontal' | 'both' = 'vertical';
+}

package/templates/angular/scroll-area/scroll-area.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { SalasScrollAreaComponent } from './scroll-area.component';
+import { SalasScrollBarComponent } from './scroll-bar.component';
+
+@NgModule({
+  imports: [SalasScrollAreaComponent, SalasScrollBarComponent],
+  exports: [SalasScrollAreaComponent, SalasScrollBarComponent],
+})
+export class SalasScrollAreaModule {}

package/templates/angular/scroll-area/scroll-bar.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-scroll-bar',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: none;',
+  },
+  template: ``,
+})
+export class SalasScrollBarComponent {
+  @Input() orientation: 'horizontal' | 'vertical' = 'vertical';
+}