@salas-ds/cli 0.1.0 → 0.2.0

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

@@ -0,0 +1,58 @@
+import { Component, Optional } from '@angular/core';
+import { SidebarService } from './sidebar.service';
+
+@Component({
+  selector: 'salas-sidebar-trigger',
+  standalone: true,
+  imports: [],
+  template: `
+    <button type="button" class="salas-sidebar-trigger" [class.salas-sidebar-trigger--right]="isRight" (click)="onClick()" aria-label="Toggle sidebar">
+      @if (isRight) {
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect width="18" height="18" x="3" y="3" rx="2"/>
+          <path d="M15 3v18"/>
+        </svg>
+      } @else {
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect width="18" height="18" x="3" y="3" rx="2"/>
+          <path d="M9 3v18"/>
+        </svg>
+      }
+    </button>
+  `,
+  styles: [`
+    .salas-sidebar-trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.375rem;
+      border: none;
+      background-color: transparent;
+      color: var(--salas-text);
+      cursor: pointer;
+      transition: background-color 0.2s, color 0.2s;
+    }
+
+    .salas-sidebar-trigger:hover {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-text);
+    }
+
+    .salas-sidebar-trigger svg {
+      display: block;
+    }
+  `],
+})
+export class SalasSidebarTriggerComponent {
+  constructor(@Optional() private sidebar: SidebarService | null) {}
+
+  get isRight(): boolean {
+    return this.sidebar?.side === 'right';
+  }
+
+  onClick(): void {
+    this.sidebar?.toggleSidebar();
+  }
+}

package/templates/angular/sidebar/sidebar.component.ts

@@ -0,0 +1,196 @@
+import { Component, Input, Optional, OnInit, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+import { SidebarService } from './sidebar.service';
+
+/**
+ * Sidebar component types (shadcn-style)
+ */
+
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+
+export interface SidebarProps {
+  side?: SidebarSide;
+  variant?: SidebarVariant;
+  collapsible?: SidebarCollapsible;
+}
+
+export interface SidebarProviderProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-sidebar',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <aside
+      [class]="sidebarClasses"
+      [attr.data-side]="side"
+      [attr.data-state]="effectiveState"
+      [attr.data-collapsible]="collapsible"
+      [attr.data-variant]="variant"
+      [attr.data-mobile]="sidebar?.isMobile ?? false"
+    >
+      <ng-content></ng-content>
+    </aside>
+  `,
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .salas-sidebar {
+      --salas-sidebar-width: 16rem;
+      --salas-sidebar-width-icon: 3rem;
+      background-color: var(--salas-bg-elevated);
+      color: var(--salas-text);
+      border-right: 1px solid var(--salas-gray-200);
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 100vh;
+      position: fixed;
+      top: 0;
+      z-index: 10;
+      transition: width 0.2s ease, transform 0.2s ease, left 0.2s ease, right 0.2s ease;
+      width: var(--salas-sidebar-width);
+    }
+
+    .salas-sidebar[data-side="left"] {
+      left: 0;
+    }
+
+    .salas-sidebar[data-side="right"] {
+      right: 0;
+      border-right: none;
+      border-left: 1px solid var(--salas-gray-200);
+    }
+
+    .salas-sidebar[data-collapsible="offcanvas"][data-mobile="true"][data-state="collapsed"] {
+      transform: translateX(-100%);
+    }
+
+    .salas-sidebar[data-side="right"][data-collapsible="offcanvas"][data-mobile="true"][data-state="collapsed"] {
+      transform: translateX(100%);
+    }
+
+    .salas-sidebar[data-collapsible="offcanvas"][data-mobile="false"][data-state="collapsed"] {
+      transform: translateX(-100%);
+    }
+
+    .salas-sidebar[data-side="right"][data-collapsible="offcanvas"][data-mobile="false"][data-state="collapsed"] {
+      transform: translateX(100%);
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] {
+      width: var(--salas-sidebar-width-icon);
+      overflow: hidden;
+    }
+
+    .salas-sidebar[data-variant="floating"] {
+      margin: 0.5rem;
+      border-radius: 0.5rem;
+      height: calc(100vh - 1rem);
+      border: 1px solid var(--salas-gray-200);
+    }
+
+    .salas-sidebar[data-variant="inset"] {
+      position: relative;
+      height: 100%;
+      border-radius: 0.5rem;
+    }
+
+    /* Collapsed state: hide everything except icons */
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] salas-sidebar-header {
+      display: none !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] salas-sidebar-footer {
+      display: none !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] salas-sidebar-group-label {
+      display: none !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-content {
+      padding: 0.25rem 0 !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-group {
+      margin-bottom: 0 !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-group-content {
+      gap: 0.25rem !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-menu {
+      padding: 0 !important;
+      align-items: center !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] salas-sidebar-menu-button {
+      display: flex !important;
+      justify-content: center !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-menu-button {
+      justify-content: center !important;
+      padding: 0.5rem !important;
+      gap: 0 !important;
+      overflow: hidden !important;
+      width: auto !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-menu-button > *:not(.salas-sidebar-menu-icon) {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+      overflow: hidden !important;
+    }
+
+    .salas-sidebar[data-collapsible="icon"][data-state="collapsed"] .salas-sidebar-menu-icon {
+      flex-shrink: 0 !important;
+    }
+  `],
+})
+export class SalasSidebarComponent implements SidebarProps, OnInit {
+  @Input() side: SidebarSide = 'left';
+  @Input() variant: SidebarVariant = 'sidebar';
+  @Input() collapsible: SidebarCollapsible = 'icon';
+
+  constructor(@Optional() public sidebar: SidebarService | null) {}
+
+  ngOnInit(): void {
+    if (this.sidebar) {
+      this.sidebar.collapsible = this.collapsible;
+      this.sidebar.side = this.side;
+    }
+  }
+
+  get effectiveState(): string {
+    if (!this.sidebar) return 'expanded';
+    if (this.sidebar.isMobile) {
+      return this.sidebar.openMobile ? 'expanded' : 'collapsed';
+    }
+    if (this.collapsible === 'offcanvas') {
+      return this.sidebar.open ? 'expanded' : 'collapsed';
+    }
+    return this.sidebar.state;
+  }
+
+  get sidebarClasses(): string {
+    return cn(
+      'salas-sidebar',
+      `salas-sidebar--${this.side}`,
+      this.variant !== 'sidebar' && `salas-sidebar--${this.variant}`,
+      `salas-sidebar--collapsible-${this.collapsible}`
+    );
+  }
+}

package/templates/angular/sidebar/sidebar.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { SalasSidebarProviderComponent } from './sidebar-provider.component';
+import { SalasSidebarComponent } from './sidebar.component';
+import { SalasSidebarHeaderComponent } from './sidebar-header.component';
+import { SalasSidebarFooterComponent } from './sidebar-footer.component';
+import { SalasSidebarContentComponent } from './sidebar-content.component';
+import { SalasSidebarGroupComponent } from './sidebar-group.component';
+import { SalasSidebarGroupLabelComponent } from './sidebar-group-label.component';
+import { SalasSidebarGroupContentComponent } from './sidebar-group-content.component';
+import { SalasSidebarTriggerComponent } from './sidebar-trigger.component';
+import { SalasSidebarMenuComponent } from './sidebar-menu.component';
+import { SalasSidebarMenuItemComponent } from './sidebar-menu-item.component';
+import { SalasSidebarMenuButtonComponent } from './sidebar-menu-button.component';
+import { SalasSidebarInsetComponent } from './sidebar-inset.component';
+
+@NgModule({
+  imports: [
+    SalasSidebarProviderComponent,
+    SalasSidebarComponent,
+    SalasSidebarHeaderComponent,
+    SalasSidebarFooterComponent,
+    SalasSidebarContentComponent,
+    SalasSidebarGroupComponent,
+    SalasSidebarGroupLabelComponent,
+    SalasSidebarGroupContentComponent,
+    SalasSidebarTriggerComponent,
+    SalasSidebarMenuComponent,
+    SalasSidebarMenuItemComponent,
+    SalasSidebarMenuButtonComponent,
+    SalasSidebarInsetComponent,
+  ],
+  exports: [
+    SalasSidebarProviderComponent,
+    SalasSidebarComponent,
+    SalasSidebarHeaderComponent,
+    SalasSidebarFooterComponent,
+    SalasSidebarContentComponent,
+    SalasSidebarGroupComponent,
+    SalasSidebarGroupLabelComponent,
+    SalasSidebarGroupContentComponent,
+    SalasSidebarTriggerComponent,
+    SalasSidebarMenuComponent,
+    SalasSidebarMenuItemComponent,
+    SalasSidebarMenuButtonComponent,
+    SalasSidebarInsetComponent,
+  ],
+})
+export class SalasSidebarModule {}

package/templates/angular/sidebar/sidebar.service.ts

@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+
+export type SidebarState = 'expanded' | 'collapsed';
+
+@Injectable()
+export class SidebarService {
+  private _open = true;
+  private _openMobile = false;
+  private _isMobile = false;
+  private _state: SidebarState = 'expanded';
+  private _collapsible: 'offcanvas' | 'icon' | 'none' = 'icon';
+  private _side: 'left' | 'right' = 'left';
+  private onOpenChangeCallback: ((open: boolean) => void) | null = null;
+
+  get open(): boolean {
+    return this._open;
+  }
+  set open(value: boolean) {
+    this._open = value;
+    this.onOpenChangeCallback?.(value);
+  }
+
+  get openMobile(): boolean {
+    return this._openMobile;
+  }
+  set openMobile(value: boolean) {
+    this._openMobile = value;
+  }
+
+  get isMobile(): boolean {
+    return this._isMobile;
+  }
+  set isMobile(value: boolean) {
+    this._isMobile = value;
+  }
+
+  get state(): SidebarState {
+    return this._state;
+  }
+
+  get collapsible(): 'offcanvas' | 'icon' | 'none' {
+    return this._collapsible;
+  }
+  set collapsible(value: 'offcanvas' | 'icon' | 'none') {
+    this._collapsible = value;
+  }
+
+  get side(): 'left' | 'right' {
+    return this._side;
+  }
+  set side(value: 'left' | 'right') {
+    this._side = value;
+  }
+
+  setOpen(value: boolean): void {
+    this.open = value;
+  }
+
+  setOpenMobile(value: boolean): void {
+    this._openMobile = value;
+  }
+
+  setState(state: SidebarState): void {
+    this._state = state;
+  }
+
+  toggleSidebar(): void {
+    if (this._isMobile) {
+      this._openMobile = !this._openMobile;
+    } else {
+      if (this._collapsible === 'icon') {
+        this._state = this._state === 'expanded' ? 'collapsed' : 'expanded';
+      } else {
+        this.open = !this.open;
+      }
+    }
+  }
+
+  setOpenChange(callback: (open: boolean) => void): void {
+    this.onOpenChangeCallback = callback;
+  }
+
+  init(defaultOpen: boolean, open?: boolean, onOpenChange?: (open: boolean) => void): void {
+    if (open !== undefined) {
+      this._open = open;
+    } else {
+      this._open = defaultOpen;
+    }
+    if (onOpenChange) {
+      this.onOpenChangeCallback = onOpenChange;
+    }
+  }
+}

package/templates/angular/skeleton/skeleton.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+@Component({
+  selector: 'salas-skeleton',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses',
+  },
+  template: ``,
+  styles: [`
+    @keyframes salas-skeleton-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .salas-skeleton {
+      display: block;
+      border-radius: 0.375rem;
+      background-color: var(--salas-gray-200);
+      animation: salas-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .salas-skeleton--circle {
+      border-radius: 9999px;
+    }
+
+    [data-theme='dark'] .salas-skeleton {
+      background-color: var(--salas-gray-800);
+    }
+  `],
+})
+export class SalasSkeletonComponent {
+  @Input() circle = false;
+
+  get hostClasses(): string {
+    return cn(
+      'salas-skeleton',
+      this.circle && 'salas-skeleton--circle',
+    );
+  }
+}

package/templates/angular/skeleton/skeleton.module.ts

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

package/templates/angular/spinner/spinner.component.ts

@@ -0,0 +1,75 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+export type SpinnerSize = 'sm' | 'default' | 'lg';
+
+export interface SpinnerProps {
+  size?: SpinnerSize;
+}
+
+
+@Component({
+  selector: 'salas-spinner',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <svg
+      [class]="spinnerClasses"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      role="status"
+      [attr.aria-label]="ariaLabel"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  `,
+  styles: [`
+    .salas-spinner {
+      display: inline-block;
+      animation: spin 1s linear infinite;
+      color: var(--salas-primary-500);
+    }
+
+    .salas-spinner--sm {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .salas-spinner--default {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .salas-spinner--lg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    [data-theme='dark'] .salas-spinner {
+      color: var(--salas-primary-400);
+    }
+  `],
+})
+export class SalasSpinnerComponent implements SpinnerProps {
+  @Input() size: SpinnerSize = 'default';
+  @Input() ariaLabel = 'Loading';
+
+  get spinnerClasses(): string {
+    return cn('salas-spinner', `salas-spinner--${this.size}`);
+  }
+}

package/templates/angular/spinner/spinner.module.ts

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

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

@@ -0,0 +1,23 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-table-body',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <tbody class="salas-table-body">
+      <ng-content></ng-content>
+    </tbody>
+  `,
+  styles: [`
+    salas-table-body {
+      display: contents;
+    }
+
+    .salas-table-body [data-slot="table-row"]:last-child {
+      border-bottom: 0;
+    }
+  `],
+})
+export class SalasTableBodyComponent {}

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

@@ -0,0 +1,29 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-table-caption',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <caption class="salas-table-caption">
+      <ng-content></ng-content>
+    </caption>
+  `,
+  styles: [`
+    salas-table-caption {
+      display: contents;
+    }
+
+    .salas-table-caption {
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      color: var(--salas-gray-500, #71717a);
+    }
+
+    [data-theme='dark'] .salas-table-caption {
+      color: var(--salas-gray-400, #a1a1aa);
+    }
+  `],
+})
+export class SalasTableCaptionComponent {}

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

@@ -0,0 +1,49 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+@Component({
+  selector: 'salas-table-cell',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <td [class]="cellClasses" data-slot="table-cell">
+      <ng-content></ng-content>
+    </td>
+  `,
+  styles: [`
+    salas-table-cell {
+      display: contents;
+    }
+
+    .salas-table-cell {
+      padding: 0.75rem 1rem;
+      vertical-align: middle;
+    }
+
+    .salas-table-cell--right {
+      text-align: right;
+    }
+
+    .salas-table-cell--center {
+      text-align: center;
+    }
+
+    .salas-table-cell--font-medium {
+      font-weight: 500;
+    }
+  `],
+})
+export class SalasTableCellComponent {
+  @Input() align: 'left' | 'right' | 'center' = 'left';
+  @Input() fontWeight: 'normal' | 'medium' = 'normal';
+
+  get cellClasses(): string {
+    return cn(
+      'salas-table-cell',
+      this.align === 'right' && 'salas-table-cell--right',
+      this.align === 'center' && 'salas-table-cell--center',
+      this.fontWeight === 'medium' && 'salas-table-cell--font-medium',
+    );
+  }
+}

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

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