@salas-ds/cli 0.1.0 → 0.2.1

package/templates/angular/avatar/avatar-badge.component.ts

@@ -0,0 +1,18 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-avatar-badge',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'position: absolute; bottom: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 0.75rem; height: 0.75rem; border-radius: 9999px; border: 2px solid var(--salas-bg-elevated, #fff); background-color: var(--salas-success-500, #22c55e); overflow: hidden;',
+  },
+  template: `<ng-content></ng-content>`,
+  styles: [`
+    :host-context([data-theme="dark"]) salas-avatar-badge {
+      border-color: var(--salas-bg-elevated);
+    }
+  `],
+})
+export class SalasAvatarBadgeComponent {}

package/templates/angular/avatar/avatar-fallback.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+
+export type AvatarSize = 'default' | 'sm' | 'lg';
+
+export interface AvatarProps {
+  size?: AvatarSize;
+}
+
+export interface AvatarImageProps {
+  src?: string;
+  alt?: string;
+}
+
+export interface AvatarFallbackProps {
+  delayMs?: number;
+}
+
+
+@Component({
+  selector: 'salas-avatar-fallback',
+  standalone: true,
+  imports: [],
+  host: {
+    '[style.display]': '"flex"',
+    '[style.alignItems]': '"center"',
+    '[style.justifyContent]': '"center"',
+    '[style.width.%]': '100',
+    '[style.height.%]': '100',
+    '[style.fontSize.rem]': '0.875',
+    '[style.fontWeight]': '"500"',
+    '[style.lineHeight]': '"1"',
+    '[style.userSelect]': '"none"',
+    '[style.zIndex]': '"0"',
+  },
+  template: `<ng-content></ng-content>`,
+})
+export class SalasAvatarFallbackComponent implements AvatarFallbackProps {
+  @Input() delayMs?: number;
+}

package/templates/angular/avatar/avatar-group-count.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-avatar-group-count',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-avatar-group-count">
+      <ng-content></ng-content>
+      @if (count !== undefined && count !== null) {
+        <span>+{{ count }}</span>
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-avatar-group-count {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 9999px;
+      background-color: var(--salas-gray-100);
+      color: var(--salas-gray-600);
+      border: 2px solid var(--salas-bg-elevated, #fff);
+      font-size: 0.875rem;
+      font-weight: 500;
+      margin-left: -0.5rem;
+    }
+
+    .salas-avatar-group-count > span {
+      display: inline-block;
+    }
+
+    :host-context([data-theme="dark"]) .salas-avatar-group-count {
+      background-color: var(--salas-gray-800);
+      color: var(--salas-gray-300);
+      border-color: var(--salas-bg-elevated);
+    }
+  `],
+})
+export class SalasAvatarGroupCountComponent {
+  @Input() count?: number;
+}

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

@@ -0,0 +1,33 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-avatar-group',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-avatar-group">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .salas-avatar-group {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+
+    .salas-avatar-group ::ng-deep salas-avatar {
+      margin-left: -0.5rem;
+      border: 2px solid var(--salas-bg-elevated, #fff);
+    }
+
+    .salas-avatar-group ::ng-deep salas-avatar:last-child {
+      margin-left: 0;
+    }
+
+    :host-context([data-theme="dark"]) .salas-avatar-group ::ng-deep salas-avatar {
+      border-color: var(--salas-bg-elevated);
+    }
+  `],
+})
+export class SalasAvatarGroupComponent {}

package/templates/angular/avatar/avatar-image.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input } from '@angular/core';
+
+export type AvatarSize = 'default' | 'sm' | 'lg';
+
+export interface AvatarProps {
+  size?: AvatarSize;
+}
+
+export interface AvatarImageProps {
+  src?: string;
+  alt?: string;
+}
+
+export interface AvatarFallbackProps {
+  delayMs?: number;
+}
+
+
+@Component({
+  selector: 'salas-avatar-image',
+  standalone: true,
+  imports: [],
+  host: {
+    '[style.display]': '"block"',
+    '[style.position]': '"absolute"',
+    '[style.top]': '"0"',
+    '[style.left]': '"0"',
+    '[style.width.%]': '100',
+    '[style.height.%]': '100',
+    '[style.zIndex]': '"1"',
+  },
+  template: `
+    @if (!imageError && src) {
+      <img
+        [src]="src"
+        [alt]="alt"
+        style="width: 100%; height: 100%; object-fit: cover; border-radius: inherit;"
+        (error)="onError()"
+        (load)="onLoad()"
+      />
+    }
+  `,
+})
+export class SalasAvatarImageComponent implements AvatarImageProps {
+  @Input() src?: string;
+  @Input() alt?: string;
+
+  imageError = false;
+
+  onError(): void {
+    this.imageError = true;
+  }
+
+  onLoad(): void {
+    this.imageError = false;
+  }
+}

package/templates/angular/avatar/avatar.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { cn } from '../utils';
+
+export type AvatarSize = 'default' | 'sm' | 'lg';
+
+export interface AvatarProps {
+  size?: AvatarSize;
+}
+
+export interface AvatarImageProps {
+  src?: string;
+  alt?: string;
+}
+
+export interface AvatarFallbackProps {
+  delayMs?: number;
+}
+
+
+@Component({
+  selector: 'salas-avatar',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div [class]="avatarClasses">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .salas-avatar {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border-radius: 9999px;
+      background-color: var(--salas-gray-100);
+      color: var(--salas-gray-600);
+      flex-shrink: 0;
+    }
+
+    .salas-avatar--default {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+
+    .salas-avatar--sm {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .salas-avatar--lg {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    :host-context([data-theme="dark"]) .salas-avatar {
+      background-color: var(--salas-gray-800);
+      color: var(--salas-gray-300);
+    }
+  `],
+})
+export class SalasAvatarComponent implements AvatarProps {
+  @Input() size: AvatarSize = 'default';
+
+  get avatarClasses(): string {
+    return cn(
+      'salas-avatar',
+      `salas-avatar--${this.size}`
+    );
+  }
+}

package/templates/angular/avatar/avatar.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SalasAvatarComponent } from './avatar.component';
+import { SalasAvatarImageComponent } from './avatar-image.component';
+import { SalasAvatarFallbackComponent } from './avatar-fallback.component';
+import { SalasAvatarBadgeComponent } from './avatar-badge.component';
+import { SalasAvatarGroupComponent } from './avatar-group.component';
+import { SalasAvatarGroupCountComponent } from './avatar-group-count.component';
+
+@NgModule({
+  imports: [
+    SalasAvatarComponent,
+    SalasAvatarImageComponent,
+    SalasAvatarFallbackComponent,
+    SalasAvatarBadgeComponent,
+    SalasAvatarGroupComponent,
+    SalasAvatarGroupCountComponent,
+  ],
+  exports: [
+    SalasAvatarComponent,
+    SalasAvatarImageComponent,
+    SalasAvatarFallbackComponent,
+    SalasAvatarBadgeComponent,
+    SalasAvatarGroupComponent,
+    SalasAvatarGroupCountComponent,
+  ],
+})
+export class SalasAvatarModule {}

package/templates/angular/badge/badge.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input } from '@angular/core';
+import { cn } from '../utils';
+
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+
+export interface BadgeProps {
+  variant?: BadgeVariant;
+}
+
+
+@Component({
+  selector: 'salas-badge',
+  standalone: true,
+  imports: [],
+  template: `<span [class]="badgeClasses"><ng-content></ng-content></span>`,
+  styles: [`
+    .salas-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 9999px;
+      padding: 0.125rem 0.625rem;
+      font-size: 0.75rem;
+      line-height: 1rem;
+      font-weight: 500;
+      border: 1px solid transparent;
+      white-space: nowrap;
+    }
+
+    .salas-badge--default {
+      background-color: #000000;
+      color: #ffffff;
+    }
+
+    .salas-badge--secondary {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-gray-900);
+    }
+
+    .salas-badge--destructive {
+      background-color: var(--salas-destructive-100);
+      color: var(--salas-destructive-600);
+    }
+
+    .salas-badge--outline {
+      background-color: transparent;
+      color: var(--salas-gray-900);
+      border-color: var(--salas-gray-200);
+    }
+
+    /* Dark mode tweaks */
+    :host-context([data-theme="dark"]) .salas-badge--default {
+      background-color: #ffffff;
+      color: #09090b;
+    }
+
+    :host-context([data-theme="dark"]) .salas-badge--secondary {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-gray-900);
+    }
+
+    :host-context([data-theme="dark"]) .salas-badge--destructive {
+      background-color: #4c1d1d;
+      color: #fecaca;
+    }
+
+    :host-context([data-theme="dark"]) .salas-badge--outline {
+      background-color: transparent;
+      color: var(--salas-text);
+      border-color: var(--salas-gray-200);
+    }
+  `],
+})
+export class SalasBadgeComponent implements BadgeProps {
+  @Input() variant: BadgeVariant = 'default';
+
+  get badgeClasses(): string {
+    return cn(
+      'salas-badge',
+      this.variant && `salas-badge--${this.variant}`,
+    );
+  }
+}
+

package/templates/angular/badge/badge.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { SalasBadgeComponent } from './badge.component';
+
+@NgModule({
+  imports: [SalasBadgeComponent],
+  exports: [SalasBadgeComponent],
+})
+export class SalasBadgeModule {}
+

package/templates/angular/button/button.component.ts

@@ -1,6 +1,23 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ButtonVariant, ButtonSize } from '@salas-ds/core';
-import { cn } from '@salas-ds/core';
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../utils';
+
+/**
+ * Button component types
+ */
+
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+}
+
 
 @Component({
   selector: 'salas-button',
@@ -49,6 +66,7 @@ import { cn } from '@salas-ds/core';
       cursor: not-allowed;
     }
 
+    /* Variants */
     .salas-button--default {
       background-color: var(--salas-primary-500);
       color: white;
@@ -106,6 +124,7 @@ import { cn } from '@salas-ds/core';
       color: var(--salas-primary-600);
     }
 
+    /* Sizes */
     .salas-button--sm {
       height: 2rem;
       padding: 0 0.75rem;
@@ -134,6 +153,7 @@ import { cn } from '@salas-ds/core';
       width: 100%;
     }
 
+    /* Loader */
     .salas-button-loader {
       width: 1rem;
       height: 1rem;
@@ -150,7 +170,7 @@ import { cn } from '@salas-ds/core';
     }
   `],
 })
-export class SalasButtonComponent {
+export class SalasButtonComponent implements ButtonProps {
   @Input() variant: ButtonVariant = 'default';
   @Input() size: ButtonSize = 'default';
   @Input() disabled = false;

package/templates/angular/card/card.component.ts

@@ -0,0 +1,100 @@
+import { Component, Input } from '@angular/core';
+import { cn } from '../utils';
+
+/**
+ * Card component types
+ */
+
+export type CardVariant = 'default' | 'elevated' | 'outlined';
+
+export interface CardProps {
+  variant?: CardVariant;
+}
+
+
+@Component({
+  selector: 'salas-card',
+  standalone: true,
+  imports: [],
+  template: `
+    <div [class]="cardClasses">
+      <div class="salas-card-header">
+        <ng-content select="[slot=header]"></ng-content>
+      </div>
+      <div class="salas-card-body">
+        <ng-content></ng-content>
+      </div>
+      <div class="salas-card-footer">
+        <ng-content select="[slot=footer]"></ng-content>
+      </div>
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .salas-card {
+      border-radius: 0.5rem;
+      overflow: hidden;
+      background-color: var(--salas-bg-elevated);
+      color: var(--salas-text);
+      border: 1px solid var(--salas-gray-200);
+      transition: box-shadow 0.2s, border-color 0.2s;
+    }
+
+    .salas-card--elevated {
+      border-color: transparent;
+      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    }
+
+    :host-context([data-theme="dark"]) .salas-card--elevated {
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
+    }
+
+    .salas-card--outlined {
+      background-color: transparent;
+      border-width: 1px;
+    }
+
+    .salas-card-header {
+      padding: 1rem 1.25rem;
+      font-weight: 600;
+      font-size: 1rem;
+      border-bottom: 1px solid var(--salas-gray-200);
+      color: var(--salas-text);
+    }
+
+    .salas-card-header:empty {
+      display: none;
+    }
+
+    .salas-card-body {
+      padding: 1.25rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      color: var(--salas-text);
+    }
+
+    .salas-card-footer {
+      padding: 1rem 1.25rem;
+      border-top: 1px solid var(--salas-gray-200);
+      color: var(--salas-text-muted);
+      font-size: 0.875rem;
+    }
+
+    .salas-card-footer:empty {
+      display: none;
+    }
+  `],
+})
+export class SalasCardComponent implements CardProps {
+  @Input() variant: CardVariant = 'default';
+
+  get cardClasses(): string {
+    return cn(
+      'salas-card',
+      this.variant !== 'default' && `salas-card--${this.variant}`
+    );
+  }
+}

package/templates/angular/card/card.module.ts

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