@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/audio-player/index.ts

@@ -0,0 +1,11 @@
+export { ScAudioPlayer, SC_AUDIO_PLAYER } from './audio-player';
+export type { ScAudioTrack } from './audio-player';
+export { ScAudioPlayerCover } from './audio-player-cover';
+export { ScAudioPlayerInfo } from './audio-player-info';
+export { ScAudioPlayerProgress } from './audio-player-progress';
+export { ScAudioPlayerPlayButton } from './audio-player-play-button';
+export { ScAudioPlayerPrevious } from './audio-player-previous';
+export { ScAudioPlayerNext } from './audio-player-next';
+export { ScAudioPlayerShuffle } from './audio-player-shuffle';
+export { ScAudioPlayerRepeat } from './audio-player-repeat';
+export { ScAudioPlayerVolume } from './audio-player-volume';

package/src/lib/components/avatar/README.md

@@ -0,0 +1,117 @@
+# Avatar
+
+An image element with a fallback for representing the user.
+
+## Components
+
+- `ScAvatar` - Container with rounded styling
+- `ScAvatarImage` - The image element with load/error handling
+- `ScAvatarFallback` - Fallback content when image is unavailable
+
+## Usage
+
+```html
+<span sc-avatar>
+  <img sc-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+  <span sc-avatar-fallback>JD</span>
+</span>
+```
+
+## Fallback Only
+
+When no image is available:
+
+```html
+<span sc-avatar>
+  <span sc-avatar-fallback>JD</span>
+</span>
+```
+
+## With Icon Fallback
+
+```html
+<span sc-avatar>
+  <img sc-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+  <span sc-avatar-fallback>
+    <svg class="size-5"><!-- user icon --></svg>
+  </span>
+</span>
+```
+
+## Different Sizes
+
+```html
+<!-- Small -->
+<span sc-avatar class="size-6">
+  <img sc-avatar-image src="..." alt="User" />
+  <span sc-avatar-fallback class="text-xs">JD</span>
+</span>
+
+<!-- Medium (default) -->
+<span sc-avatar>
+  <img sc-avatar-image src="..." alt="User" />
+  <span sc-avatar-fallback>JD</span>
+</span>
+
+<!-- Large -->
+<span sc-avatar class="size-14">
+  <img sc-avatar-image src="..." alt="User" />
+  <span sc-avatar-fallback class="text-lg">JD</span>
+</span>
+```
+
+## Avatar Group
+
+```html
+<div class="flex -space-x-4">
+  <span sc-avatar class="border-2 border-background">
+    <img sc-avatar-image src="..." alt="User 1" />
+    <span sc-avatar-fallback>U1</span>
+  </span>
+  <span sc-avatar class="border-2 border-background">
+    <span sc-avatar-fallback>U2</span>
+  </span>
+  <span sc-avatar class="border-2 border-background">
+    <span sc-avatar-fallback class="text-xs">+3</span>
+  </span>
+</div>
+```
+
+## With Status Indicator
+
+```html
+<div class="relative">
+  <span sc-avatar>
+    <img sc-avatar-image src="..." alt="User" />
+    <span sc-avatar-fallback>JD</span>
+  </span>
+  <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background bg-green-500"></span>
+</div>
+```
+
+## Inputs
+
+### ScAvatar
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScAvatarImage
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScAvatarFallback
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+## How It Works
+
+1. `ScAvatarImage` starts loading and hides itself
+2. `ScAvatarFallback` is visible while image loads
+3. On successful load, image shows and fallback hides
+4. On error, fallback remains visible

package/src/lib/components/avatar/avatar-fallback.ts

@@ -0,0 +1,25 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScAvatar } from './avatar';
+
+@Directive({
+  selector: 'span[sc-avatar-fallback]',
+  host: {
+    'data-slot': 'avatar-fallback',
+    '[class]': 'class()',
+  },
+})
+export class ScAvatarFallback {
+  private readonly avatar = inject(ScAvatar);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => {
+    const status = this.avatar.imageStatus();
+    return cn(
+      'flex size-full items-center justify-center rounded-full bg-muted',
+      status === 'loaded' && 'hidden',
+      this.classInput(),
+    );
+  });
+}

package/src/lib/components/avatar/avatar-image.ts

@@ -0,0 +1,39 @@
+import { computed, Directive, inject, input, OnInit } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScAvatar } from './avatar';
+
+@Directive({
+  selector: 'img[sc-avatar-image]',
+  host: {
+    'data-slot': 'avatar-image',
+    '[class]': 'class()',
+    '(load)': 'onLoad()',
+    '(error)': 'onError()',
+  },
+})
+export class ScAvatarImage implements OnInit {
+  private readonly avatar = inject(ScAvatar);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => {
+    const status = this.avatar.imageStatus();
+    return cn(
+      'aspect-square size-full',
+      status !== 'loaded' && 'hidden',
+      this.classInput(),
+    );
+  });
+
+  ngOnInit(): void {
+    this.avatar.imageStatus.set('loading');
+  }
+
+  protected onLoad(): void {
+    this.avatar.imageStatus.set('loaded');
+  }
+
+  protected onError(): void {
+    this.avatar.imageStatus.set('error');
+  }
+}

package/src/lib/components/avatar/avatar.ts

@@ -0,0 +1,25 @@
+import { computed, Directive, input, signal } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export type ScAvatarImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+@Directive({
+  selector: 'span[sc-avatar]',
+  host: {
+    'data-slot': 'avatar',
+    '[class]': 'class()',
+  },
+})
+export class ScAvatar {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  /** Internal state for image loading */
+  readonly imageStatus = signal<ScAvatarImageStatus>('idle');
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex size-10 shrink-0 overflow-hidden rounded-full',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/avatar/index.ts

@@ -0,0 +1,3 @@
+export * from './avatar';
+export * from './avatar-image';
+export * from './avatar-fallback';

package/src/lib/components/avatar-group/README.md

@@ -0,0 +1,94 @@
+# Avatar Group
+
+Display a group of avatars with stacked/overlapping layout and overflow indicator.
+
+## Installation
+
+```typescript
+import { ScAvatarGroup } from '@/ui/avatar-group';
+import type { AvatarGroupItem, AvatarGroupSize } from '@/ui/avatar-group';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-avatar-group [avatars]="users" [max]="4" (avatarClick)="onAvatarClick($event)" (overflowClick)="onOverflowClick($event)" />
+```
+
+```typescript
+users: AvatarGroupItem[] = [
+  { id: '1', src: 'https://example.com/avatar1.jpg', name: 'Alice' },
+  { id: '2', src: 'https://example.com/avatar2.jpg', name: 'Bob' },
+  { id: '3', name: 'Carol', fallback: 'CA' },
+];
+```
+
+### Size Variants
+
+```html
+<sc-avatar-group [avatars]="users" size="sm" />
+<sc-avatar-group [avatars]="users" size="md" />
+<sc-avatar-group [avatars]="users" size="lg" />
+<sc-avatar-group [avatars]="users" size="xl" />
+```
+
+### Spacing Options
+
+```html
+<sc-avatar-group [avatars]="users" spacing="tight" />
+<sc-avatar-group [avatars]="users" spacing="normal" />
+<sc-avatar-group [avatars]="users" spacing="loose" />
+```
+
+### Max Display Count
+
+```html
+<sc-avatar-group [avatars]="users" [max]="3" />
+```
+
+## API Reference
+
+### Inputs
+
+| Input       | Type                             | Default          | Description             |
+| ----------- | -------------------------------- | ---------------- | ----------------------- |
+| `avatars`   | `AvatarGroupItem[]`              | `[]`             | Array of avatar items   |
+| `max`       | `number`                         | `4`              | Maximum visible avatars |
+| `size`      | `'sm' \| 'md' \| 'lg' \| 'xl'`   | `'md'`           | Avatar size             |
+| `spacing`   | `'tight' \| 'normal' \| 'loose'` | `'normal'`       | Overlap amount          |
+| `ariaLabel` | `string`                         | `'Avatar group'` | Accessible label        |
+
+### Outputs
+
+| Output          | Type                                         | Description                      |
+| --------------- | -------------------------------------------- | -------------------------------- |
+| `avatarClick`   | `{ avatar: AvatarGroupItem; index: number }` | Emitted when avatar is clicked   |
+| `overflowClick` | `AvatarGroupItem[]`                          | Emitted when overflow is clicked |
+
+## Type Definitions
+
+```typescript
+interface AvatarGroupItem {
+  id: string;
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  name?: string;
+}
+
+type AvatarGroupSize = 'sm' | 'md' | 'lg' | 'xl';
+```
+
+## Features
+
+- Stacked/overlapping avatar display
+- Configurable maximum visible count
+- Overflow indicator with count
+- Multiple size variants
+- Adjustable spacing/overlap
+- Fallback initials when no image
+- Click events for avatars and overflow
+- Hover effects with z-index handling
+- Keyboard accessible

package/src/lib/components/avatar-group/avatar-group-types.ts

@@ -0,0 +1,9 @@
+export interface AvatarGroupItem {
+  id: string;
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  name?: string;
+}
+
+export type AvatarGroupSize = 'sm' | 'md' | 'lg' | 'xl';

package/src/lib/components/avatar-group/avatar-group.ts

@@ -0,0 +1,181 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import type { AvatarGroupItem, AvatarGroupSize } from './avatar-group-types';
+
+@Component({
+  selector: 'sc-avatar-group',
+  template: `
+    <div
+      [class]="containerClass()"
+      role="group"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @for (avatar of visibleAvatars(); track avatar.id; let i = $index) {
+        <button
+          type="button"
+          [class]="avatarClass()"
+          [style.z-index]="visibleAvatars().length - i"
+          [attr.aria-label]="avatar.name || avatar.alt || 'Avatar ' + (i + 1)"
+          (click)="onAvatarClick(avatar, i)"
+        >
+          @if (avatar.src) {
+            <img
+              [src]="avatar.src"
+              [alt]="avatar.alt || avatar.name || ''"
+              class="h-full w-full object-cover"
+              (error)="onImageError($event)"
+            />
+          } @else {
+            <span [class]="fallbackClass()">
+              {{ getInitials(avatar) }}
+            </span>
+          }
+        </button>
+      }
+
+      @if (overflowCount() > 0) {
+        <button
+          type="button"
+          [class]="overflowClass()"
+          [style.z-index]="0"
+          [attr.aria-label]="'+' + overflowCount() + ' more'"
+          (click)="onOverflowClick()"
+        >
+          <span [class]="fallbackClass()">+{{ overflowCount() }}</span>
+        </button>
+      }
+    </div>
+  `,
+  styles: `
+    :host {
+      display: inline-block;
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScAvatarGroup {
+  readonly avatars = input<AvatarGroupItem[]>([]);
+  readonly max = input(4);
+  readonly size = input<AvatarGroupSize>('md');
+  readonly spacing = input<'tight' | 'normal' | 'loose'>('normal');
+  readonly ariaLabel = input<string>('Avatar group');
+  readonly class = input<string>('');
+
+  readonly avatarClick = output<{ avatar: AvatarGroupItem; index: number }>();
+  readonly overflowClick = output<AvatarGroupItem[]>();
+
+  protected readonly visibleAvatars = computed(() => {
+    const all = this.avatars();
+    const maxCount = this.max();
+    return all.slice(0, maxCount);
+  });
+
+  protected readonly overflowCount = computed(() => {
+    const all = this.avatars();
+    const maxCount = this.max();
+    return Math.max(0, all.length - maxCount);
+  });
+
+  protected readonly overflowAvatars = computed(() => {
+    const all = this.avatars();
+    const maxCount = this.max();
+    return all.slice(maxCount);
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex items-center', this.class()),
+  );
+
+  protected readonly avatarClass = computed(() =>
+    cn(
+      'relative inline-flex items-center justify-center rounded-full',
+      'bg-muted border-2 border-background',
+      'overflow-hidden cursor-pointer',
+      'transition-transform hover:scale-110 hover:z-50',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      this.sizeClass(),
+      this.spacingClass(),
+    ),
+  );
+
+  protected readonly overflowClass = computed(() =>
+    cn(
+      'relative inline-flex items-center justify-center rounded-full',
+      'bg-muted border-2 border-background',
+      'cursor-pointer',
+      'transition-transform hover:scale-110 hover:z-50',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      this.sizeClass(),
+      this.spacingClass(),
+    ),
+  );
+
+  protected readonly fallbackClass = computed(() =>
+    cn(
+      'flex h-full w-full items-center justify-center rounded-full',
+      'bg-muted text-muted-foreground font-medium',
+      this.fallbackTextSize(),
+    ),
+  );
+
+  private sizeClass(): string {
+    const sizes = {
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-14 w-14',
+    };
+    return sizes[this.size()];
+  }
+
+  private spacingClass(): string {
+    const spacings = {
+      tight: '-ml-3 first:ml-0',
+      normal: '-ml-2 first:ml-0',
+      loose: '-ml-1 first:ml-0',
+    };
+    return spacings[this.spacing()];
+  }
+
+  private fallbackTextSize(): string {
+    const sizes = {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-lg',
+    };
+    return sizes[this.size()];
+  }
+
+  getInitials(avatar: AvatarGroupItem): string {
+    const name = avatar.fallback || avatar.name || avatar.alt || '?';
+    if (avatar.fallback) return avatar.fallback.slice(0, 2).toUpperCase();
+    return name
+      .split(' ')
+      .map((part) => part[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+
+  onImageError(event: Event): void {
+    const img = event.target as HTMLImageElement;
+    img.style.display = 'none';
+  }
+
+  onAvatarClick(avatar: AvatarGroupItem, index: number): void {
+    this.avatarClick.emit({ avatar, index });
+  }
+
+  onOverflowClick(): void {
+    this.overflowClick.emit(this.overflowAvatars());
+  }
+}

package/src/lib/components/avatar-group/index.ts

@@ -0,0 +1,2 @@
+export { ScAvatarGroup } from './avatar-group';
+export type { AvatarGroupItem, AvatarGroupSize } from './avatar-group-types';

package/src/lib/components/backdrop/backdrop.ts

@@ -0,0 +1,75 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+type ScBackdropState = 'idle' | 'open' | 'closed';
+
+@Component({
+  selector: 'div[sc-backdrop]',
+  template: '',
+  host: {
+    'data-slot': 'backdrop',
+    '[class]': 'class()',
+    '[attr.data-idle]': 'state() === "idle" ? "" : null',
+    '[attr.data-open]': 'state() === "open" ? "" : null',
+    '[attr.data-closed]': 'state() === "closed" ? "" : null',
+    '(animationend)': 'onAnimationEnd($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScBackdrop {
+  private readonly elementRef = inject(ElementRef);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  /**
+   * Controls the backdrop animation state
+   * When true: Triggers fade-in animation
+   * When false: Triggers fade-out animation
+   */
+  readonly open = input.required<boolean>();
+
+  protected readonly state = signal<ScBackdropState>('idle');
+
+  /**
+   * Emits when the close animation completes
+   */
+  readonly animationComplete = output<void>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'pointer-events-none fixed inset-0 -z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+      'data-idle:opacity-0',
+      'data-open:animate-in data-open:fade-in-0',
+      'data-closed:animate-out data-closed:fade-out-0',
+      this.classInput(),
+    ),
+  );
+
+  constructor() {
+    // Sync state with open input
+    effect(() => {
+      const isOpen = this.open();
+      this.state.set(isOpen ? 'open' : 'closed');
+    });
+  }
+
+  protected onAnimationEnd(event: AnimationEvent): void {
+    // Only emit when close animation completes
+    if (!this.open() && event.target === this.elementRef.nativeElement) {
+      this.state.set('idle');
+      this.animationComplete.emit();
+    }
+  }
+}

package/src/lib/components/backdrop/index.ts

@@ -0,0 +1 @@
+export { ScBackdrop } from './backdrop';

package/src/lib/components/badge/README.md

@@ -0,0 +1,66 @@
+# Badge
+
+Displays a badge or a component that looks like a badge.
+
+## Components
+
+- `ScBadge` - A small status indicator with variant support
+
+## Usage
+
+```html
+<div sc-badge>Badge</div>
+```
+
+## Variants
+
+```html
+<div sc-badge>Default</div>
+<div sc-badge variant="secondary">Secondary</div>
+<div sc-badge variant="destructive">Destructive</div>
+<div sc-badge variant="outline">Outline</div>
+```
+
+## With Icons
+
+```html
+<div sc-badge class="gap-1">
+  <svg class="size-3"><!-- icon --></svg>
+  Premium
+</div>
+```
+
+## Notification Count
+
+```html
+<div class="relative">
+  <button><!-- button content --></button>
+  <span sc-badge class="absolute -right-1 -top-1 flex size-5 items-center justify-center p-0">3</span>
+</div>
+```
+
+## Custom Colors
+
+Override the default colors with custom classes:
+
+```html
+<div sc-badge class="bg-green-500 hover:bg-green-500/80">Active</div>
+<div sc-badge class="bg-yellow-500 hover:bg-yellow-500/80">Warning</div>
+<div sc-badge class="bg-blue-500 hover:bg-blue-500/80">Info</div>
+```
+
+## Inputs
+
+| Input     | Type                                                     | Default     | Description            |
+| --------- | -------------------------------------------------------- | ----------- | ---------------------- |
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline'` | `'default'` | Badge variant          |
+| `class`   | `string`                                                 | `''`        | Additional CSS classes |
+
+## Variant Styles
+
+| Variant       | Description                                     |
+| ------------- | ----------------------------------------------- |
+| `default`     | Primary background with primary-foreground text |
+| `secondary`   | Secondary background with secondary-foreground  |
+| `destructive` | Destructive background for errors/warnings      |
+| `outline`     | Transparent with border                         |