@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/copy-button/copy-code.ts

@@ -1,42 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCopyButton } from './copy-button';
-
-@Component({
-  selector: '[sc-copy-code]',
-  template: `
-    <div class="relative">
-      <pre [class]="preClass()"><code><ng-content /></code></pre>
-      <button
-        sc-copy-button
-        [value]="value()"
-        class="absolute right-2 top-2"
-        [variant]="'ghost'"
-        [size]="'icon'"
-      ></button>
-    </div>
-  `,
-  host: {
-    'data-slot': 'copy-code',
-    '[class]': 'class()',
-  },
-  imports: [ScCopyButton],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCopyCode {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly value = input.required<string>();
-
-  protected readonly class = computed(() => cn('block', this.classInput()));
-
-  protected readonly preClass = computed(() =>
-    cn('rounded-lg bg-muted p-4 pr-12 overflow-x-auto text-sm', 'font-mono'),
-  );
-}

package/src/lib/components/copy-button/copy-input.ts

@@ -1,54 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCopyButton } from './copy-button';
-
-@Component({
-  selector: '[sc-copy-input]',
-  template: `
-    <div class="flex">
-      <input
-        type="text"
-        [value]="value()"
-        [readonly]="readonly()"
-        [class]="inputClass()"
-      />
-      <button
-        sc-copy-button
-        [value]="value()"
-        [variant]="'outline'"
-        [size]="'icon'"
-        class="rounded-l-none border-l-0"
-      ></button>
-    </div>
-  `,
-  host: {
-    'data-slot': 'copy-input',
-    '[class]': 'class()',
-  },
-  imports: [ScCopyButton],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCopyInput {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly value = input.required<string>();
-  readonly readonly = input<boolean>(true);
-
-  protected readonly class = computed(() =>
-    cn('inline-block', this.classInput()),
-  );
-
-  protected readonly inputClass = computed(() =>
-    cn(
-      'flex h-9 w-full rounded-md rounded-r-none border border-input bg-transparent px-3 py-1 text-sm shadow-sm',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-      this.readonly() && 'bg-muted text-muted-foreground',
-    ),
-  );
-}

package/src/lib/components/copy-button/index.ts

@@ -1,4 +0,0 @@
-export { ScCopyButton } from './copy-button';
-export { ScCopyButtonWithText } from './copy-button-with-text';
-export { ScCopyInput } from './copy-input';
-export { ScCopyCode } from './copy-code';

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

@@ -1,168 +0,0 @@
-# Countdown
-
-Countdown timer with multiple variants, customizable labels, and completion events.
-
-## Components
-
-- `ScCountdown` - Full countdown display with days, hours, minutes, seconds
-- `ScCountdownSimple` - Inline countdown text
-
-## Usage
-
-### Basic Countdown
-
-```html
-<sc-countdown [targetDate]="futureDate" (complete)="onComplete()" />
-```
-
-### Simple Countdown
-
-```html
-<sc-countdown-simple [targetDate]="futureDate" format="hh:mm:ss" />
-```
-
-### Cards Variant
-
-```html
-<sc-countdown [targetDate]="futureDate" variant="cards" />
-```
-
-## API
-
-### ScCountdown
-
-| Input            | Type                                | Default     | Description            |
-| ---------------- | ----------------------------------- | ----------- | ---------------------- |
-| `class`          | `string`                            | `''`        | Additional CSS classes |
-| `targetDate`     | `Date`                              | -           | **Required.** End date |
-| `autoStart`      | `boolean`                           | `true`      | Start automatically    |
-| `showDays`       | `boolean`                           | `true`      | Show days unit         |
-| `showHours`      | `boolean`                           | `true`      | Show hours unit        |
-| `showMinutes`    | `boolean`                           | `true`      | Show minutes unit      |
-| `showSeconds`    | `boolean`                           | `true`      | Show seconds unit      |
-| `alwaysShowDays` | `boolean`                           | `false`     | Show days even if 0    |
-| `showSeparator`  | `boolean`                           | `true`      | Show separators        |
-| `separator`      | `string`                            | `':'`       | Separator character    |
-| `daysLabel`      | `string`                            | `'Days'`    | Days label text        |
-| `hoursLabel`     | `string`                            | `'Hours'`   | Hours label text       |
-| `minutesLabel`   | `string`                            | `'Minutes'` | Minutes label text     |
-| `secondsLabel`   | `string`                            | `'Seconds'` | Seconds label text     |
-| `variant`        | `'default' \| 'compact' \| 'cards'` | `'default'` | Visual variant         |
-
-| Output     | Type            | Description               |
-| ---------- | --------------- | ------------------------- |
-| `tick`     | `CountdownTime` | Emits every second        |
-| `complete` | `void`          | Emits when countdown ends |
-
-| Method        | Returns         | Description             |
-| ------------- | --------------- | ----------------------- |
-| `start()`     | `void`          | Start the countdown     |
-| `stop()`      | `void`          | Stop the countdown      |
-| `reset()`     | `void`          | Reset to initial time   |
-| `getTime()`   | `CountdownTime` | Get current time values |
-| `isRunning()` | `boolean`       | Check if running        |
-
-### ScCountdownSimple
-
-| Input        | Type                              | Default      | Description            |
-| ------------ | --------------------------------- | ------------ | ---------------------- |
-| `class`      | `string`                          | `''`         | Additional CSS classes |
-| `targetDate` | `Date`                            | -            | **Required.** End date |
-| `format`     | `'hh:mm:ss' \| 'mm:ss' \| 'full'` | `'hh:mm:ss'` | Display format         |
-| `autoStart`  | `boolean`                         | `true`       | Start automatically    |
-
-| Output     | Type     | Description               |
-| ---------- | -------- | ------------------------- |
-| `tick`     | `number` | Emits remaining ms        |
-| `complete` | `void`   | Emits when countdown ends |
-
-| Method           | Returns  | Description         |
-| ---------------- | -------- | ------------------- |
-| `start()`        | `void`   | Start the countdown |
-| `stop()`         | `void`   | Stop the countdown  |
-| `getRemaining()` | `number` | Get remaining ms    |
-
-## CountdownTime Interface
-
-```typescript
-interface CountdownTime {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  total: number; // Total milliseconds remaining
-}
-```
-
-## Variants
-
-| Variant   | Description                   |
-| --------- | ----------------------------- |
-| `default` | Large numbers with labels     |
-| `compact` | Smaller, space-efficient      |
-| `cards`   | Each unit in a card container |
-
-## Format Options (Simple)
-
-| Format     | Example Output | Description               |
-| ---------- | -------------- | ------------------------- |
-| `hh:mm:ss` | `02:30:45`     | Hours, minutes, seconds   |
-| `mm:ss`    | `150:45`       | Total minutes and seconds |
-| `full`     | `2d 02:30:45`  | Days prefix when > 0      |
-
-## Examples
-
-### Product Launch
-
-```html
-<div class="text-center">
-  <h2>Coming Soon</h2>
-  <sc-countdown [targetDate]="launchDate" variant="cards" daysLabel="DAYS" hoursLabel="HRS" minutesLabel="MIN" secondsLabel="SEC" (complete)="showLaunch()" />
-</div>
-```
-
-### Flash Sale
-
-```html
-<div class="sale-banner">
-  <span>Sale ends in:</span>
-  <sc-countdown-simple [targetDate]="saleEndDate" format="hh:mm:ss" class="font-bold" />
-</div>
-```
-
-### Event Timer
-
-```typescript
-@Component({
-  template: `
-    <sc-countdown #timer [targetDate]="eventDate" [autoStart]="false" (complete)="onEventStart()" />
-    <button (click)="timer.start()">Start</button>
-    <button (click)="timer.stop()">Pause</button>
-  `,
-})
-export class EventTimer {
-  eventDate = new Date('2024-12-31T23:59:59');
-
-  onEventStart() {
-    console.log('Happy New Year!');
-  }
-}
-```
-
-### Quiz Timer
-
-```html
-<sc-countdown-simple [targetDate]="quizEndTime" format="mm:ss" class="text-xl" (complete)="submitQuiz()" />
-```
-
-### Custom Labels
-
-```html
-<sc-countdown [targetDate]="date" daysLabel="D" hoursLabel="H" minutesLabel="M" secondsLabel="S" />
-```
-
-## Accessibility
-
-- Container has `role="timer"` for screen readers
-- Dynamic `aria-label` with human-readable time remaining
-- Updates announce remaining time contextually

package/src/lib/components/countdown/countdown-simple.ts

@@ -1,118 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  effect,
-  inject,
-  input,
-  output,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-countdown-simple',
-  exportAs: 'scCountdownSimple',
-  template: `
-    <span [class]="class()" role="timer">
-      {{ formattedTime() }}
-    </span>
-  `,
-  host: {
-    'data-slot': 'countdown-simple',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCountdownSimple {
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly targetDate = input.required<Date>();
-  readonly format = input<'hh:mm:ss' | 'mm:ss' | 'full'>('hh:mm:ss');
-  readonly autoStart = input<boolean>(true);
-
-  readonly tick = output<number>();
-  readonly complete = output<void>();
-
-  private readonly remaining = signal(0);
-  private intervalId: ReturnType<typeof setInterval> | null = null;
-  private isComplete = false;
-
-  constructor() {
-    effect(() => {
-      if (this.autoStart()) {
-        this.start();
-      }
-    });
-
-    this.destroyRef.onDestroy(() => {
-      this.stop();
-    });
-  }
-
-  protected readonly class = computed(() =>
-    cn('font-mono tabular-nums', this.classInput()),
-  );
-
-  protected readonly formattedTime = computed(() => {
-    const total = this.remaining();
-    const format = this.format();
-
-    const seconds = Math.floor((total / 1000) % 60);
-    const minutes = Math.floor((total / 1000 / 60) % 60);
-    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
-    const days = Math.floor(total / (1000 * 60 * 60 * 24));
-
-    const pad = (n: number) => n.toString().padStart(2, '0');
-
-    if (format === 'mm:ss') {
-      const totalMinutes = Math.floor(total / 1000 / 60);
-      return `${pad(totalMinutes)}:${pad(seconds)}`;
-    }
-
-    if (format === 'full') {
-      if (days > 0) {
-        return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-      }
-      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-    }
-
-    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-  });
-
-  private updateTime(): void {
-    const now = Date.now();
-    const target = this.targetDate().getTime();
-    const total = Math.max(0, target - now);
-
-    this.remaining.set(total);
-    this.tick.emit(total);
-
-    if (total <= 0 && !this.isComplete) {
-      this.isComplete = true;
-      this.complete.emit();
-      this.stop();
-    }
-  }
-
-  start(): void {
-    this.stop();
-    this.isComplete = false;
-    this.updateTime();
-    this.intervalId = setInterval(() => this.updateTime(), 1000);
-  }
-
-  stop(): void {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-  }
-
-  getRemaining(): number {
-    return this.remaining();
-  }
-}

package/src/lib/components/countdown/countdown.ts

@@ -1,235 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  effect,
-  inject,
-  input,
-  output,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export interface CountdownTime {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  total: number;
-}
-
-@Component({
-  selector: 'sc-countdown',
-  exportAs: 'scCountdown',
-  template: `
-    <div
-      [class]="containerClass()"
-      role="timer"
-      [attr.aria-label]="ariaLabel()"
-    >
-      @if (showDays() && (time().days > 0 || alwaysShowDays())) {
-        <div [class]="unitClass()">
-          <span [class]="valueClass()">{{ padNumber(time().days) }}</span>
-          <span [class]="labelClass()">{{ daysLabel() }}</span>
-        </div>
-        @if (showSeparator()) {
-          <span [class]="separatorClass()">{{ separator() }}</span>
-        }
-      }
-
-      @if (showHours()) {
-        <div [class]="unitClass()">
-          <span [class]="valueClass()">{{ padNumber(time().hours) }}</span>
-          <span [class]="labelClass()">{{ hoursLabel() }}</span>
-        </div>
-        @if (showSeparator() && showMinutes()) {
-          <span [class]="separatorClass()">{{ separator() }}</span>
-        }
-      }
-
-      @if (showMinutes()) {
-        <div [class]="unitClass()">
-          <span [class]="valueClass()">{{ padNumber(time().minutes) }}</span>
-          <span [class]="labelClass()">{{ minutesLabel() }}</span>
-        </div>
-        @if (showSeparator() && showSeconds()) {
-          <span [class]="separatorClass()">{{ separator() }}</span>
-        }
-      }
-
-      @if (showSeconds()) {
-        <div [class]="unitClass()">
-          <span [class]="valueClass()">{{ padNumber(time().seconds) }}</span>
-          <span [class]="labelClass()">{{ secondsLabel() }}</span>
-        </div>
-      }
-    </div>
-  `,
-  host: {
-    'data-slot': 'countdown',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCountdown {
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly targetDate = input.required<Date>();
-  readonly autoStart = input<boolean>(true);
-  readonly showDays = input<boolean>(true);
-  readonly showHours = input<boolean>(true);
-  readonly showMinutes = input<boolean>(true);
-  readonly showSeconds = input<boolean>(true);
-  readonly alwaysShowDays = input<boolean>(false);
-  readonly showSeparator = input<boolean>(true);
-  readonly separator = input<string>(':');
-  readonly daysLabel = input<string>('Days');
-  readonly hoursLabel = input<string>('Hours');
-  readonly minutesLabel = input<string>('Minutes');
-  readonly secondsLabel = input<string>('Seconds');
-  readonly variant = input<'default' | 'compact' | 'cards'>('default');
-
-  readonly tick = output<CountdownTime>();
-  readonly complete = output<void>();
-
-  protected readonly time = signal<CountdownTime>({
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-    total: 0,
-  });
-
-  private intervalId: ReturnType<typeof setInterval> | null = null;
-  private isComplete = false;
-
-  constructor() {
-    effect(() => {
-      if (this.autoStart()) {
-        this.start();
-      }
-    });
-
-    this.destroyRef.onDestroy(() => {
-      this.stop();
-    });
-  }
-
-  protected readonly ariaLabel = computed(() => {
-    const t = this.time();
-    const parts: string[] = [];
-    if (t.days > 0) parts.push(`${t.days} days`);
-    if (t.hours > 0) parts.push(`${t.hours} hours`);
-    if (t.minutes > 0) parts.push(`${t.minutes} minutes`);
-    parts.push(`${t.seconds} seconds`);
-    return `Time remaining: ${parts.join(', ')}`;
-  });
-
-  protected readonly containerClass = computed(() => {
-    const variant = this.variant();
-    return cn(
-      'inline-flex items-center',
-      variant === 'default' && 'gap-4',
-      variant === 'compact' && 'gap-1',
-      variant === 'cards' && 'gap-3',
-      this.classInput(),
-    );
-  });
-
-  protected readonly unitClass = computed(() => {
-    const variant = this.variant();
-    return cn(
-      'flex flex-col items-center',
-      variant === 'cards' && 'bg-muted rounded-lg p-3 min-w-[70px]',
-    );
-  });
-
-  protected readonly valueClass = computed(() => {
-    const variant = this.variant();
-    return cn(
-      'font-mono font-bold tabular-nums',
-      variant === 'default' && 'text-4xl',
-      variant === 'compact' && 'text-2xl',
-      variant === 'cards' && 'text-3xl',
-    );
-  });
-
-  protected readonly labelClass = computed(() => {
-    const variant = this.variant();
-    return cn(
-      'text-muted-foreground',
-      variant === 'default' && 'text-sm',
-      variant === 'compact' && 'text-xs',
-      variant === 'cards' && 'text-xs uppercase tracking-wider',
-    );
-  });
-
-  protected readonly separatorClass = computed(() => {
-    const variant = this.variant();
-    return cn(
-      'font-bold text-muted-foreground',
-      variant === 'default' && 'text-4xl -mt-5',
-      variant === 'compact' && 'text-2xl -mt-3',
-      variant === 'cards' && 'text-3xl -mt-5',
-    );
-  });
-
-  padNumber(n: number): string {
-    return n.toString().padStart(2, '0');
-  }
-
-  private calculateTime(): CountdownTime {
-    const now = Date.now();
-    const target = this.targetDate().getTime();
-    const total = Math.max(0, target - now);
-
-    const seconds = Math.floor((total / 1000) % 60);
-    const minutes = Math.floor((total / 1000 / 60) % 60);
-    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
-    const days = Math.floor(total / (1000 * 60 * 60 * 24));
-
-    return { days, hours, minutes, seconds, total };
-  }
-
-  private updateTime(): void {
-    const newTime = this.calculateTime();
-    this.time.set(newTime);
-    this.tick.emit(newTime);
-
-    if (newTime.total <= 0 && !this.isComplete) {
-      this.isComplete = true;
-      this.complete.emit();
-      this.stop();
-    }
-  }
-
-  start(): void {
-    this.stop();
-    this.isComplete = false;
-    this.updateTime();
-    this.intervalId = setInterval(() => this.updateTime(), 1000);
-  }
-
-  stop(): void {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-  }
-
-  reset(): void {
-    this.isComplete = false;
-    this.updateTime();
-  }
-
-  getTime(): CountdownTime {
-    return this.time();
-  }
-
-  isRunning(): boolean {
-    return this.intervalId !== null;
-  }
-}

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

@@ -1,3 +0,0 @@
-export { ScCountdown } from './countdown';
-export { ScCountdownSimple } from './countdown-simple';
-export type { CountdownTime } from './countdown';