@salas-ds/cli 0.1.0 → 0.2.0

package/templates/angular/table/table-head.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+@Component({
+  selector: 'salas-table-head',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <th [class]="headClasses" data-slot="table-head">
+      <ng-content></ng-content>
+    </th>
+  `,
+  styles: [`
+    salas-table-head {
+      display: contents;
+    }
+
+    .salas-table-head {
+      height: 2.5rem;
+      padding: 0 1rem;
+      text-align: left;
+      font-weight: 500;
+      vertical-align: middle;
+      color: var(--salas-gray-500, #71717a);
+      white-space: nowrap;
+    }
+
+    .salas-table-head--right {
+      text-align: right;
+    }
+
+    [data-theme='dark'] .salas-table-head {
+      color: var(--salas-gray-400, #a1a1aa);
+    }
+  `],
+})
+export class SalasTableHeadComponent {
+  @Input() align: 'left' | 'right' | 'center' = 'left';
+
+  get headClasses(): string {
+    return cn(
+      'salas-table-head',
+      this.align === 'right' && 'salas-table-head--right',
+      this.align === 'center' && 'salas-table-head--center',
+    );
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-table-header',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'salas-table-header-host' },
+  template: `
+    <thead class="salas-table-header">
+      <ng-content></ng-content>
+    </thead>
+  `,
+  styles: [`
+    salas-table-header {
+      display: contents;
+    }
+
+    .salas-table-header [data-slot="table-row"] {
+      border-bottom: 1px solid var(--salas-gray-200, #e4e4e7);
+    }
+
+    [data-theme='dark'] .salas-table-header [data-slot="table-row"] {
+      border-bottom-color: var(--salas-gray-800, #27272a);
+    }
+  `],
+})
+export class SalasTableHeaderComponent {}

package/templates/angular/table/table-row.component.ts

@@ -0,0 +1,36 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-table-row',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <tr class="salas-table-row" data-slot="table-row">
+      <ng-content></ng-content>
+    </tr>
+  `,
+  styles: [`
+    salas-table-row {
+      display: contents;
+    }
+
+    .salas-table-row {
+      border-bottom: 1px solid var(--salas-gray-200, #e4e4e7);
+      transition: background-color 0.15s;
+    }
+
+    .salas-table-row:hover {
+      background-color: var(--salas-gray-100, #f4f4f5);
+    }
+
+    [data-theme='dark'] .salas-table-row {
+      border-bottom-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-table-row:hover {
+      background-color: var(--salas-gray-800, #27272a);
+    }
+  `],
+})
+export class SalasTableRowComponent {}

package/templates/angular/table/table.component.ts

@@ -0,0 +1,35 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-table',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-table-wrapper">
+      <table class="salas-table">
+        <ng-content></ng-content>
+      </table>
+    </div>
+  `,
+  styles: [`
+    .salas-table-wrapper {
+      position: relative;
+      width: 100%;
+      overflow: auto;
+    }
+
+    .salas-table {
+      width: 100%;
+      caption-side: bottom;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+      color: var(--salas-text, #09090b);
+    }
+
+    [data-theme='dark'] .salas-table {
+      color: var(--salas-text, #fafafa);
+    }
+  `],
+})
+export class SalasTableComponent {}

package/templates/angular/table/table.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { SalasTableComponent } from './table.component';
+import { SalasTableHeaderComponent } from './table-header.component';
+import { SalasTableBodyComponent } from './table-body.component';
+import { SalasTableFooterComponent } from './table-footer.component';
+import { SalasTableRowComponent } from './table-row.component';
+import { SalasTableHeadComponent } from './table-head.component';
+import { SalasTableCellComponent } from './table-cell.component';
+import { SalasTableCaptionComponent } from './table-caption.component';
+
+@NgModule({
+  imports: [
+    SalasTableComponent,
+    SalasTableHeaderComponent,
+    SalasTableBodyComponent,
+    SalasTableFooterComponent,
+    SalasTableRowComponent,
+    SalasTableHeadComponent,
+    SalasTableCellComponent,
+    SalasTableCaptionComponent,
+  ],
+  exports: [
+    SalasTableComponent,
+    SalasTableHeaderComponent,
+    SalasTableBodyComponent,
+    SalasTableFooterComponent,
+    SalasTableRowComponent,
+    SalasTableHeadComponent,
+    SalasTableCellComponent,
+    SalasTableCaptionComponent,
+  ],
+})
+export class SalasTableModule {}

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

@@ -0,0 +1,71 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsVariant = 'default' | 'line';
+
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  orientation?: TabsOrientation;
+  variant?: TabsVariant;
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsContentProps {
+  value: string;
+}
+
+
+@Component({
+  selector: 'salas-tabs-content',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    @if (isActive) {
+      <div
+        [class]="contentClasses"
+        role="tabpanel"
+        [attr.data-state]="isActive ? 'active' : 'inactive'"
+        [attr.aria-hidden]="!isActive"
+      >
+        <ng-content></ng-content>
+      </div>
+    }
+  `,
+  styles: [`
+    .salas-tabs-content {
+      margin-top: 0.5rem;
+      padding: 1rem;
+      border-radius: 0.375rem;
+      outline: none;
+    }
+
+    .salas-tabs-content:focus-visible {
+      outline: 2px solid var(--salas-primary-500);
+      outline-offset: 2px;
+    }
+
+    [data-theme='dark'] .salas-tabs-content {
+      color: var(--salas-gray-100);
+    }
+  `],
+})
+export class SalasTabsContentComponent implements TabsContentProps {
+  @Input() value!: string;
+
+  isActive = false;
+
+  get contentClasses(): string {
+    return cn('salas-tabs-content');
+  }
+
+  setActive(active: boolean): void {
+    this.isActive = active;
+  }
+}

package/templates/angular/tabs/tabs-list.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsVariant = 'default' | 'line';
+
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  orientation?: TabsOrientation;
+  variant?: TabsVariant;
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsContentProps {
+  value: string;
+}
+
+
+@Component({
+  selector: 'salas-tabs-list',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div [class]="listClasses" role="tablist">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .salas-tabs-list {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0.375rem;
+      background-color: var(--salas-gray-100);
+      padding: 0.25rem;
+      color: var(--salas-gray-600);
+    }
+
+    .salas-tabs-list--vertical {
+      flex-direction: column;
+      align-items: stretch;
+      width: auto;
+    }
+
+    [data-theme='dark'] .salas-tabs-list {
+      background-color: var(--salas-gray-800);
+      color: var(--salas-gray-300);
+    }
+  `],
+})
+export class SalasTabsListComponent {
+  orientation: TabsOrientation = 'horizontal';
+
+  get listClasses(): string {
+    return cn(
+      'salas-tabs-list',
+      this.orientation === 'vertical' && 'salas-tabs-list--vertical',
+    );
+  }
+
+  setOrientation(orientation: TabsOrientation): void {
+    this.orientation = orientation;
+  }
+}

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

@@ -0,0 +1,149 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsVariant = 'default' | 'line';
+
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  orientation?: TabsOrientation;
+  variant?: TabsVariant;
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsContentProps {
+  value: string;
+}
+
+
+@Component({
+  selector: 'salas-tabs-trigger',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <button
+      type="button"
+      [class]="triggerClasses"
+      [disabled]="disabled"
+      (click)="onClick()"
+      [attr.aria-selected]="isActive"
+      role="tab"
+      [attr.data-state]="isActive ? 'active' : 'inactive'"
+    >
+      <ng-content></ng-content>
+    </button>
+  `,
+  styles: [`
+    .salas-tabs-trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      border-radius: 0.25rem;
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: all 0.2s;
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      outline: none;
+      color: var(--salas-gray-600);
+    }
+
+    .salas-tabs-trigger:hover:not(:disabled) {
+      color: var(--salas-gray-900);
+      background-color: var(--salas-gray-50);
+    }
+
+    .salas-tabs-trigger:focus-visible {
+      outline: 2px solid var(--salas-primary-500);
+      outline-offset: 2px;
+    }
+
+    .salas-tabs-trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .salas-tabs-trigger--active {
+      background-color: white;
+      color: var(--salas-gray-900);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    }
+
+    .salas-tabs-trigger--line {
+      border-radius: 0;
+      background: transparent;
+      border-bottom: 2px solid transparent;
+      box-shadow: none;
+    }
+
+    .salas-tabs-trigger--line.salas-tabs-trigger--active {
+      border-bottom-color: var(--salas-primary-500);
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .salas-tabs-trigger--vertical {
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    [data-theme='dark'] .salas-tabs-trigger {
+      color: var(--salas-gray-300);
+    }
+
+    [data-theme='dark'] .salas-tabs-trigger:hover:not(:disabled) {
+      color: var(--salas-gray-100);
+      background-color: var(--salas-gray-800);
+    }
+
+    [data-theme='dark'] .salas-tabs-trigger--active {
+      background-color: var(--salas-gray-900);
+      color: var(--salas-gray-100);
+    }
+  `],
+})
+export class SalasTabsTriggerComponent implements TabsTriggerProps {
+  @Input() value!: string;
+  @Input() disabled = false;
+
+  @Output() activated = new EventEmitter<string>();
+
+  isActive = false;
+  orientation: TabsOrientation = 'horizontal';
+  variant: TabsVariant = 'default';
+
+  get triggerClasses(): string {
+    return cn(
+      'salas-tabs-trigger',
+      this.isActive && 'salas-tabs-trigger--active',
+      this.variant === 'line' && 'salas-tabs-trigger--line',
+      this.orientation === 'vertical' && 'salas-tabs-trigger--vertical',
+    );
+  }
+
+  setActive(active: boolean): void {
+    this.isActive = active;
+  }
+
+  setOrientation(orientation: TabsOrientation): void {
+    this.orientation = orientation;
+  }
+
+  setVariant(variant: TabsVariant): void {
+    this.variant = variant;
+  }
+
+  onClick(): void {
+    if (this.disabled) return;
+    this.activated.emit(this.value);
+  }
+}

package/templates/angular/tabs/tabs.component.ts

@@ -0,0 +1,155 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '../utils';
+import { SalasTabsTriggerComponent } from './tabs-trigger.component';
+import { SalasTabsContentComponent } from './tabs-content.component';
+import { SalasTabsListComponent } from './tabs-list.component';
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsVariant = 'default' | 'line';
+
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  orientation?: TabsOrientation;
+  variant?: TabsVariant;
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsContentProps {
+  value: string;
+}
+
+
+@Component({
+  selector: 'salas-tabs',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div [class]="tabsClasses">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .salas-tabs {
+      width: 100%;
+    }
+
+    .salas-tabs--vertical {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+    }
+  `],
+})
+export class SalasTabsComponent implements TabsProps, AfterContentInit, OnChanges, OnDestroy {
+  @Input() defaultValue?: string;
+  @Input() value?: string;
+  @Input() orientation: TabsOrientation = 'horizontal';
+  @Input() variant: TabsVariant = 'default';
+
+  @Output() valueChange = new EventEmitter<string>();
+
+  @ContentChildren(SalasTabsListComponent) lists!: QueryList<SalasTabsListComponent>;
+  @ContentChildren(SalasTabsTriggerComponent, { descendants: true }) triggers!: QueryList<SalasTabsTriggerComponent>;
+  @ContentChildren(SalasTabsContentComponent, { descendants: true }) contents!: QueryList<SalasTabsContentComponent>;
+
+  private _activeValue: string = '';
+  private unsubscribes: Array<() => void> = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['value'] && this.value !== undefined) {
+      this._activeValue = this.value;
+      this.updateTabs();
+    }
+  }
+
+  ngAfterContentInit(): void {
+    if (!this._activeValue) {
+      this._activeValue = this.value || this.defaultValue || '';
+    }
+    this.updateTabs();
+
+    this.triggers.changes.subscribe(() => {
+      this.clearSubscriptions();
+      this.setupTriggers();
+      this.updateTabs();
+    });
+
+    this.contents.changes.subscribe(() => {
+      this.updateTabs();
+    });
+
+    this.setupTriggers();
+  }
+
+  ngOnDestroy(): void {
+    this.clearSubscriptions();
+  }
+
+  private setupTriggers(): void {
+    this.triggers.forEach((trigger) => {
+      const sub = trigger.activated.subscribe((value) => {
+        this.setActiveValue(value);
+      });
+      this.unsubscribes.push(() => sub.unsubscribe());
+    });
+  }
+
+  private clearSubscriptions(): void {
+    this.unsubscribes.forEach((unsub) => unsub());
+    this.unsubscribes = [];
+  }
+
+  get tabsClasses(): string {
+    return cn('salas-tabs', this.orientation === 'vertical' && 'salas-tabs--vertical');
+  }
+
+  get activeValue(): string {
+    return this._activeValue;
+  }
+
+  setActiveValue(value: string): void {
+    if (this._activeValue === value) return;
+    this._activeValue = value;
+    if (!this.value) {
+      // Only emit if not controlled
+      this.valueChange.emit(value);
+    }
+    this.updateTabs();
+  }
+
+  private updateTabs(): void {
+    const activeValue = this._activeValue || this.defaultValue || '';
+
+    this.triggers.forEach((trigger) => {
+      trigger.setActive(trigger.value === activeValue);
+      trigger.setOrientation(this.orientation);
+      trigger.setVariant(this.variant);
+    });
+
+    this.contents.forEach((content) => {
+      content.setActive(content.value === activeValue);
+    });
+
+    this.lists.forEach((list) => {
+      list.setOrientation(this.orientation);
+    });
+  }
+}

package/templates/angular/tabs/tabs.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { SalasTabsComponent } from './tabs.component';
+import { SalasTabsListComponent } from './tabs-list.component';
+import { SalasTabsTriggerComponent } from './tabs-trigger.component';
+import { SalasTabsContentComponent } from './tabs-content.component';
+
+@NgModule({
+  imports: [
+    SalasTabsComponent,
+    SalasTabsListComponent,
+    SalasTabsTriggerComponent,
+    SalasTabsContentComponent,
+  ],
+  exports: [
+    SalasTabsComponent,
+    SalasTabsListComponent,
+    SalasTabsTriggerComponent,
+    SalasTabsContentComponent,
+  ],
+})
+export class SalasTabsModule {}