@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,11 +0,0 @@
-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

@@ -1,117 +0,0 @@
-# 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

@@ -1,25 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

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

@@ -1,94 +0,0 @@
-# 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

@@ -1,9 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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

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

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

@@ -1,75 +0,0 @@
-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

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

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

@@ -1,66 +0,0 @@
-# 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                         |