@salas-ds/cli 0.1.0 → 0.2.0

package/templates/angular/sheet/sheet.component.ts

@@ -0,0 +1,251 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewEncapsulation,
+  HostListener,
+} from '@angular/core';
+import { cn } from '../utils';
+
+export type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+
+export interface SheetProps {
+  side?: SheetSide;
+  showCloseButton?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-sheet',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-sheet-trigger-wrapper" (click)="openSheet()">
+      <ng-content select="salas-sheet-trigger"></ng-content>
+    </div>
+
+    @if (isOpen) {
+      <div class="salas-sheet-overlay" (click)="onOverlayClick()"></div>
+      <div [class]="panelClasses" role="dialog" aria-modal="true">
+        @if (showCloseButton) {
+          <button
+            type="button"
+            class="salas-sheet-close"
+            aria-label="Close"
+            (click)="closeSheet()"
+          >
+            <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-sheet-content"></ng-content>
+      </div>
+    }
+  `,
+  styles: [`
+    .salas-sheet-trigger-wrapper {
+      display: inline-block;
+    }
+
+    .salas-sheet-overlay {
+      position: fixed;
+      inset: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 50;
+      animation: salas-sheet-fade-in 0.2s ease;
+    }
+
+    @keyframes salas-sheet-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    /* Panel base */
+    .salas-sheet-panel {
+      position: fixed;
+      z-index: 51;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--salas-bg-elevated, #fff);
+      color: var(--salas-text, #111827);
+      border: 1px solid var(--salas-gray-200, #e5e7eb);
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+      overflow: auto;
+    }
+
+    /* Side: right (default) */
+    .salas-sheet-panel--right {
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      max-width: 24rem;
+      border-left: 1px solid var(--salas-gray-200, #e5e7eb);
+      border-top: none;
+      border-bottom: none;
+      border-right: none;
+      animation: salas-sheet-slide-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes salas-sheet-slide-right {
+      from { transform: translateX(100%); }
+      to { transform: translateX(0); }
+    }
+
+    /* Side: left */
+    .salas-sheet-panel--left {
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      max-width: 24rem;
+      border-right: 1px solid var(--salas-gray-200, #e5e7eb);
+      border-top: none;
+      border-bottom: none;
+      border-left: none;
+      animation: salas-sheet-slide-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes salas-sheet-slide-left {
+      from { transform: translateX(-100%); }
+      to { transform: translateX(0); }
+    }
+
+    /* Side: top */
+    .salas-sheet-panel--top {
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      max-height: 24rem;
+      border-bottom: 1px solid var(--salas-gray-200, #e5e7eb);
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      animation: salas-sheet-slide-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes salas-sheet-slide-top {
+      from { transform: translateY(-100%); }
+      to { transform: translateY(0); }
+    }
+
+    /* Side: bottom */
+    .salas-sheet-panel--bottom {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      max-height: 24rem;
+      border-top: 1px solid var(--salas-gray-200, #e5e7eb);
+      border-bottom: none;
+      border-left: none;
+      border-right: none;
+      animation: salas-sheet-slide-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes salas-sheet-slide-bottom {
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    }
+
+    /* Close button */
+    .salas-sheet-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;
+      z-index: 1;
+      transition: color 0.15s, background-color 0.15s;
+    }
+
+    .salas-sheet-close:hover {
+      background-color: var(--salas-gray-100, #f3f4f6);
+      color: var(--salas-text, #111827);
+    }
+
+    /* Dark theme */
+    [data-theme='dark'] .salas-sheet-panel {
+      background-color: var(--salas-bg-elevated, #18181b);
+      border-color: var(--salas-gray-800, #27272a);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    }
+
+    [data-theme='dark'] .salas-sheet-panel--right {
+      border-left-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-sheet-panel--left {
+      border-right-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-sheet-panel--top {
+      border-bottom-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-sheet-panel--bottom {
+      border-top-color: var(--salas-gray-800, #27272a);
+    }
+
+    [data-theme='dark'] .salas-sheet-close:hover {
+      background-color: var(--salas-gray-800, #27272a);
+      color: var(--salas-gray-100, #f4f4f5);
+    }
+  `],
+})
+export class SalasSheetComponent {
+  @Input() side: SheetSide = 'right';
+  @Input() open?: boolean;
+  @Input() showCloseButton = true;
+  @Input() closeOnOverlayClick = true;
+
+  @Output() openChange = new EventEmitter<boolean>();
+
+  internalOpen = false;
+
+  get isOpen(): boolean {
+    return this.open ?? this.internalOpen;
+  }
+
+  get panelClasses(): string {
+    return cn('salas-sheet-panel', `salas-sheet-panel--${this.side}`);
+  }
+
+  openSheet(): void {
+    if (this.open === undefined) {
+      this.internalOpen = true;
+    }
+    this.openChange.emit(true);
+  }
+
+  closeSheet(): void {
+    if (this.open === undefined) {
+      this.internalOpen = false;
+    }
+    this.openChange.emit(false);
+  }
+
+  onOverlayClick(): void {
+    if (this.closeOnOverlayClick) {
+      this.closeSheet();
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    if (this.isOpen) {
+      this.closeSheet();
+    }
+  }
+}

package/templates/angular/sheet/sheet.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { SalasSheetComponent } from './sheet.component';
+import { SalasSheetTriggerComponent } from './sheet-trigger.component';
+import { SalasSheetContentComponent } from './sheet-content.component';
+import { SalasSheetHeaderComponent } from './sheet-header.component';
+import { SalasSheetTitleComponent } from './sheet-title.component';
+import { SalasSheetDescriptionComponent } from './sheet-description.component';
+import { SalasSheetFooterComponent } from './sheet-footer.component';
+
+@NgModule({
+  imports: [
+    SalasSheetComponent,
+    SalasSheetTriggerComponent,
+    SalasSheetContentComponent,
+    SalasSheetHeaderComponent,
+    SalasSheetTitleComponent,
+    SalasSheetDescriptionComponent,
+    SalasSheetFooterComponent,
+  ],
+  exports: [
+    SalasSheetComponent,
+    SalasSheetTriggerComponent,
+    SalasSheetContentComponent,
+    SalasSheetHeaderComponent,
+    SalasSheetTitleComponent,
+    SalasSheetDescriptionComponent,
+    SalasSheetFooterComponent,
+  ],
+})
+export class SalasSheetModule {}

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-content',
+  standalone: true,
+  imports: [],
+  template: `<div class="salas-sidebar-content"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-sidebar-content {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0.5rem;
+      color: var(--salas-text);
+    }
+  `],
+})
+export class SalasSidebarContentComponent {}

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-footer',
+  standalone: true,
+  imports: [],
+  template: `<footer class="salas-sidebar-footer"><ng-content></ng-content></footer>`,
+  styles: [`
+    .salas-sidebar-footer {
+      flex-shrink: 0;
+      padding: 1rem 1.25rem;
+      border-top: 1px solid var(--salas-gray-200);
+      color: var(--salas-text);
+      overflow: hidden;
+      white-space: nowrap;
+      transition: padding 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+    }
+  `],
+})
+export class SalasSidebarFooterComponent {}

package/templates/angular/sidebar/sidebar-group-content.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-group-content',
+  standalone: true,
+  imports: [],
+  template: `<div class="salas-sidebar-group-content"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-sidebar-group-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+  `],
+})
+export class SalasSidebarGroupContentComponent {}

package/templates/angular/sidebar/sidebar-group-label.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-group-label',
+  standalone: true,
+  imports: [],
+  template: `<div class="salas-sidebar-group-label"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-sidebar-group-label {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--salas-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      transition: padding 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+    }
+  `],
+})
+export class SalasSidebarGroupLabelComponent {}

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-group',
+  standalone: true,
+  imports: [],
+  template: `<div class="salas-sidebar-group"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-sidebar-group {
+      margin-bottom: 0.5rem;
+    }
+  `],
+})
+export class SalasSidebarGroupComponent {}

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-header',
+  standalone: true,
+  imports: [],
+  template: `<header class="salas-sidebar-header"><ng-content></ng-content></header>`,
+  styles: [`
+    .salas-sidebar-header {
+      flex-shrink: 0;
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--salas-gray-200);
+      color: var(--salas-text);
+      overflow: hidden;
+      white-space: nowrap;
+      transition: padding 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+    }
+  `],
+})
+export class SalasSidebarHeaderComponent {}

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

@@ -0,0 +1,85 @@
+import { Component, Input, Optional } from '@angular/core';
+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;
+}
+
+
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+
+@Component({
+  selector: 'salas-sidebar-inset',
+  standalone: true,
+  imports: [],
+  template: `<main class="salas-sidebar-inset" [class.salas-sidebar-inset--side-right]="effectiveSide === 'right'" [style.margin-left]="marginLeft" [style.margin-right]="marginRight"><ng-content></ng-content></main>`,
+  styles: [`
+    .salas-sidebar-inset {
+      flex: 1;
+      min-width: 0;
+      min-height: 100%;
+      padding: 1rem;
+      background-color: var(--salas-bg);
+      color: var(--salas-text);
+      transition: margin 0.2s ease, align-items 0.2s ease, text-align 0.2s ease;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .salas-sidebar-inset--side-right {
+      align-items: flex-end;
+      text-align: right;
+    }
+  `],
+})
+export class SalasSidebarInsetComponent {
+  @Input() side?: SidebarSide;
+
+  constructor(@Optional() public sidebar: SidebarService | null) {}
+
+  get effectiveSide(): SidebarSide {
+    return this.side ?? this.sidebar?.side ?? 'left';
+  }
+
+  get marginLeft(): string | null {
+    if (this.effectiveSide !== 'left') return null;
+    if (this.sidebar?.isMobile && this.sidebar.collapsible === 'offcanvas') {
+      return '0';
+    }
+    if (this.sidebar?.collapsible === 'offcanvas' && !this.sidebar.open) return '0';
+    if (this.sidebar?.collapsible === 'icon' && this.sidebar.state === 'collapsed') {
+      return SIDEBAR_WIDTH_ICON;
+    }
+    return SIDEBAR_WIDTH;
+  }
+
+  get marginRight(): string | null {
+    if (this.effectiveSide !== 'right') return null;
+    if (this.sidebar?.isMobile && this.sidebar.collapsible === 'offcanvas') {
+      return '0';
+    }
+    if (this.sidebar?.collapsible === 'offcanvas' && !this.sidebar.open) return '0';
+    if (this.sidebar?.collapsible === 'icon' && this.sidebar.state === 'collapsed') {
+      return SIDEBAR_WIDTH_ICON;
+    }
+    return SIDEBAR_WIDTH;
+  }
+}

package/templates/angular/sidebar/sidebar-menu-button.component.ts

@@ -0,0 +1,75 @@
+import { Component, Input } from '@angular/core';
+import { cn } from '../utils';
+
+@Component({
+  selector: 'salas-sidebar-menu-button',
+  standalone: true,
+  imports: [],
+  template: `
+    @if (href) {
+      <a
+        [class]="buttonClasses"
+        [href]="href"
+        [attr.aria-current]="isActive ? 'page' : null"
+        [attr.title]="tooltipLabel"
+      >
+        <ng-content></ng-content>
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="buttonClasses"
+        [attr.aria-current]="isActive ? 'page' : null"
+        [attr.title]="tooltipLabel"
+      >
+        <ng-content></ng-content>
+      </button>
+    }
+  `,
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .salas-sidebar-menu-button {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      color: var(--salas-text);
+      text-decoration: none;
+      transition: background-color 0.2s, color 0.2s, padding 0.2s, gap 0.2s;
+      cursor: pointer;
+      border: none;
+      background: none;
+      font-family: inherit;
+      overflow: hidden;
+    }
+
+    .salas-sidebar-menu-button:hover {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-text);
+    }
+
+    .salas-sidebar-menu-button--active {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-text);
+      font-weight: 500;
+    }
+  `],
+})
+export class SalasSidebarMenuButtonComponent {
+  @Input() isActive = false;
+  @Input() href?: string;
+  @Input() tooltipLabel?: string;
+
+  get buttonClasses(): string {
+    return cn(
+      'salas-sidebar-menu-button',
+      this.isActive && 'salas-sidebar-menu-button--active'
+    );
+  }
+}

package/templates/angular/sidebar/sidebar-menu-item.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-menu-item',
+  standalone: true,
+  imports: [],
+  template: `<li class="salas-sidebar-menu-item" role="none"><ng-content></ng-content></li>`,
+  styles: [`
+    .salas-sidebar-menu-item {
+      display: block;
+    }
+  `],
+})
+export class SalasSidebarMenuItemComponent {}

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-sidebar-menu',
+  standalone: true,
+  imports: [],
+  template: `<ul class="salas-sidebar-menu" role="menu"><ng-content></ng-content></ul>`,
+  styles: [`
+    .salas-sidebar-menu {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+  `],
+})
+export class SalasSidebarMenuComponent {}

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

@@ -0,0 +1,68 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  Inject,
+  PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { SidebarService } from './sidebar.service';
+
+const MOBILE_BREAKPOINT = 768;
+
+@Component({
+  selector: 'salas-sidebar-provider',
+  standalone: true,
+  imports: [],
+  providers: [SidebarService],
+  template: `<div class="salas-sidebar-provider"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-sidebar-provider {
+      display: flex;
+      min-height: 100vh;
+      height: 100%;
+      width: 100%;
+    }
+  `],
+})
+export class SalasSidebarProviderComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() defaultOpen = true;
+  @Input() open?: boolean;
+  @Output() openChange = new EventEmitter<boolean>();
+
+  private mediaQuery?: MediaQueryList;
+  private listener = () => this.updateMobile();
+
+  constructor(
+    public sidebar: SidebarService,
+    @Inject(PLATFORM_ID) private platformId: object
+  ) {}
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['open'] && !changes['open'].firstChange && this.open !== undefined) {
+      this.sidebar.setOpen(this.open);
+    }
+  }
+
+  ngOnInit(): void {
+    this.sidebar.init(this.defaultOpen, this.open, (open) => this.openChange.emit(open));
+    if (isPlatformBrowser(this.platformId) && typeof window !== 'undefined' && window.matchMedia) {
+      this.mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+      this.sidebar.isMobile = this.mediaQuery.matches;
+      this.mediaQuery.addEventListener('change', this.listener);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.mediaQuery?.removeEventListener('change', this.listener);
+  }
+
+  private updateMobile(): void {
+    this.sidebar.isMobile = this.mediaQuery?.matches ?? false;
+  }
+}