@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/timezone/timezone-button.ts

@@ -1,104 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScTimezoneService } from './timezone.service';
-import {
-  TimezoneVariant,
-  TimezoneSize,
-  variantStyles,
-  sizeStyles,
-} from './timezone-display';
-
-/**
- * Timezone button with label - shows timezone name with dropdown indicator.
- * Useful for integration with dropdown menus or custom popover selectors.
- *
- * @example
- * ```html
- * <button sc-timezone-button></button>
- * <button sc-timezone-button variant="outline"></button>
- * ```
- */
-@Component({
-  selector: 'button[sc-timezone-button]',
-  host: {
-    'data-slot': 'timezone-button',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-  },
-  template: `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-4"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </svg>
-    <span class="font-medium">{{ displayLabel() }}</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-4"
-      aria-hidden="true"
-    >
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScTimezoneButton {
-  private readonly timezoneService = inject(ScTimezoneService);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<TimezoneVariant>('ghost');
-  readonly size = input<TimezoneSize>('default');
-  readonly showOffset = input<boolean>(false);
-
-  protected readonly currentTimezone = this.timezoneService.currentTimezone;
-
-  protected readonly displayLabel = computed(() => {
-    const tz = this.currentTimezone();
-    if (this.showOffset()) {
-      return `${tz.label} (${tz.offset})`;
-    }
-    return tz.label;
-  });
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium',
-      'ring-offset-background transition-colors cursor-pointer',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:pointer-events-none disabled:opacity-50',
-      '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-      variantStyles[this.variant()],
-      sizeStyles[this.size()],
-      this.classInput(),
-    ),
-  );
-
-  protected readonly ariaLabel = computed(() => {
-    const tz = this.currentTimezone();
-    return `Current timezone: ${tz.label} (${tz.offset}). Click to change timezone.`;
-  });
-}

package/src/lib/components/timezone/timezone-display.ts

@@ -1,105 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScTimezoneService } from './timezone.service';
-
-export type TimezoneVariant = 'default' | 'outline' | 'ghost';
-export type TimezoneSize = 'default' | 'sm' | 'lg' | 'icon';
-
-export const variantStyles: Record<TimezoneVariant, string> = {
-  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  outline:
-    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-  ghost: 'hover:bg-accent hover:text-accent-foreground',
-};
-
-export const sizeStyles: Record<TimezoneSize, string> = {
-  default: 'h-10 px-4 py-2',
-  sm: 'h-9 rounded-md px-3',
-  lg: 'h-11 rounded-md px-8',
-  icon: 'size-10',
-};
-
-/**
- * Timezone display button - shows current timezone with a clock icon.
- * Useful for displaying the current timezone selection.
- *
- * @example
- * ```html
- * <button sc-timezone-display></button>
- * <button sc-timezone-display variant="outline" size="sm"></button>
- * ```
- */
-@Component({
-  selector: 'button[sc-timezone-display]',
-  host: {
-    'data-slot': 'timezone-display',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-  },
-  template: `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-5"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </svg>
-    @if (!iconOnly()) {
-      <span class="text-sm font-medium">{{ displayText() }}</span>
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScTimezoneDisplay {
-  private readonly timezoneService = inject(ScTimezoneService);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<TimezoneVariant>('ghost');
-  readonly size = input<TimezoneSize>('default');
-  readonly iconOnly = input<boolean>(false);
-  readonly showOffset = input<boolean>(false);
-
-  protected readonly currentTimezone = this.timezoneService.currentTimezone;
-
-  protected readonly displayText = computed(() => {
-    const tz = this.currentTimezone();
-    if (this.showOffset()) {
-      return `${tz.abbr} (${tz.offset})`;
-    }
-    return tz.abbr;
-  });
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium',
-      'ring-offset-background transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:pointer-events-none disabled:opacity-50',
-      '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-      variantStyles[this.variant()],
-      sizeStyles[this.size()],
-      this.classInput(),
-    ),
-  );
-
-  protected readonly ariaLabel = computed(() => {
-    const tz = this.currentTimezone();
-    return `Current timezone: ${tz.label} (${tz.offset})`;
-  });
-}

package/src/lib/components/timezone/timezone-select.ts

@@ -1,87 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScTimezoneService } from './timezone.service';
-
-/**
- * Timezone select dropdown - shows all available timezones.
- * Allows users to select their preferred timezone.
- *
- * @example
- * ```html
- * <sc-timezone-select></sc-timezone-select>
- * <sc-timezone-select [showOffset]="true"></sc-timezone-select>
- * ```
- */
-@Component({
-  selector: 'sc-timezone-select',
-  host: {
-    'data-slot': 'timezone-select',
-    '[class]': 'class()',
-  },
-  template: `
-    <label for="timezone-select" class="sr-only">Select timezone</label>
-    <select
-      id="timezone-select"
-      [value]="currentTimezoneId()"
-      (change)="onTimezoneChange($event)"
-      class="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-    >
-      @for (tz of timezones(); track tz.id) {
-        <option [value]="tz.id">
-          {{ formatOptionLabel(tz) }}
-        </option>
-      }
-    </select>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScTimezoneSelect {
-  private readonly timezoneService = inject(ScTimezoneService);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly showOffset = input<boolean>(true);
-  readonly showAbbr = input<boolean>(true);
-
-  protected readonly currentTimezoneId = computed(() =>
-    this.timezoneService.timezone(),
-  );
-  protected readonly timezones = this.timezoneService.timezones;
-
-  protected readonly class = computed(() =>
-    cn('inline-block', this.classInput()),
-  );
-
-  protected formatOptionLabel(tz: {
-    id: string;
-    label: string;
-    offset: string;
-    abbr: string;
-  }): string {
-    const parts: string[] = [];
-
-    if (this.showOffset()) {
-      parts.push(`(GMT${tz.offset})`);
-    }
-
-    parts.push(tz.label);
-
-    if (this.showAbbr()) {
-      parts.push(`- ${tz.abbr}`);
-    }
-
-    return parts.join(' ');
-  }
-
-  protected onTimezoneChange(event: Event): void {
-    const target = event.target as HTMLSelectElement;
-    this.timezoneService.setTimezone(target.value);
-  }
-}

package/src/lib/components/timezone/timezone.service.ts

@@ -1,233 +0,0 @@
-import {
-  computed,
-  inject,
-  Injectable,
-  InjectionToken,
-  signal,
-} from '@angular/core';
-
-export interface Timezone {
-  id: string;
-  label: string;
-  offset: string;
-  abbr: string;
-}
-
-export interface TimezoneConfig {
-  /** List of available timezones. If not provided, uses a default list of common timezones. */
-  timezones?: Timezone[];
-  /** Default timezone ID. If not provided, uses the browser's timezone. */
-  defaultTimezone?: string;
-  /** Storage key for persisting timezone preference */
-  storageKey?: string;
-}
-
-const DEFAULT_TIMEZONES: Timezone[] = [
-  { id: 'Pacific/Honolulu', label: 'Hawaii', offset: '-10:00', abbr: 'HST' },
-  { id: 'America/Anchorage', label: 'Alaska', offset: '-09:00', abbr: 'AKST' },
-  {
-    id: 'America/Los_Angeles',
-    label: 'Pacific Time',
-    offset: '-08:00',
-    abbr: 'PST',
-  },
-  {
-    id: 'America/Denver',
-    label: 'Mountain Time',
-    offset: '-07:00',
-    abbr: 'MST',
-  },
-  {
-    id: 'America/Chicago',
-    label: 'Central Time',
-    offset: '-06:00',
-    abbr: 'CST',
-  },
-  {
-    id: 'America/New_York',
-    label: 'Eastern Time',
-    offset: '-05:00',
-    abbr: 'EST',
-  },
-  { id: 'America/Sao_Paulo', label: 'Brasilia', offset: '-03:00', abbr: 'BRT' },
-  { id: 'Atlantic/Azores', label: 'Azores', offset: '-01:00', abbr: 'AZOT' },
-  { id: 'UTC', label: 'UTC', offset: '+00:00', abbr: 'UTC' },
-  { id: 'Europe/London', label: 'London', offset: '+00:00', abbr: 'GMT' },
-  { id: 'Europe/Paris', label: 'Paris', offset: '+01:00', abbr: 'CET' },
-  { id: 'Europe/Berlin', label: 'Berlin', offset: '+01:00', abbr: 'CET' },
-  { id: 'Africa/Cairo', label: 'Cairo', offset: '+02:00', abbr: 'EET' },
-  { id: 'Europe/Moscow', label: 'Moscow', offset: '+03:00', abbr: 'MSK' },
-  { id: 'Asia/Dubai', label: 'Dubai', offset: '+04:00', abbr: 'GST' },
-  { id: 'Asia/Kolkata', label: 'India', offset: '+05:30', abbr: 'IST' },
-  { id: 'Asia/Dhaka', label: 'Dhaka', offset: '+06:00', abbr: 'BST' },
-  { id: 'Asia/Bangkok', label: 'Bangkok', offset: '+07:00', abbr: 'ICT' },
-  { id: 'Asia/Singapore', label: 'Singapore', offset: '+08:00', abbr: 'SGT' },
-  { id: 'Asia/Shanghai', label: 'China', offset: '+08:00', abbr: 'CST' },
-  { id: 'Asia/Tokyo', label: 'Tokyo', offset: '+09:00', abbr: 'JST' },
-  { id: 'Australia/Sydney', label: 'Sydney', offset: '+11:00', abbr: 'AEDT' },
-  { id: 'Pacific/Auckland', label: 'Auckland', offset: '+13:00', abbr: 'NZDT' },
-];
-
-export const SC_TIMEZONE_CONFIG = new InjectionToken<TimezoneConfig>(
-  'SC_TIMEZONE_CONFIG',
-  {
-    providedIn: 'root',
-    factory: () => ({
-      timezones: DEFAULT_TIMEZONES,
-      storageKey: 'sc-timezone',
-    }),
-  },
-);
-
-@Injectable({ providedIn: 'root' })
-export class ScTimezoneService {
-  private readonly config = inject(SC_TIMEZONE_CONFIG);
-  private readonly storageKey = this.config.storageKey ?? 'sc-timezone';
-
-  /** All available timezones */
-  readonly timezones = signal<Timezone[]>(
-    this.config.timezones ?? DEFAULT_TIMEZONES,
-  );
-
-  /** Current timezone ID */
-  readonly timezone = signal<string>(this.detectCurrentTimezone());
-
-  /** Current timezone object */
-  readonly currentTimezone = computed(() => {
-    const id = this.timezone();
-    return this.timezones().find((tz) => tz.id === id) ?? this.timezones()[0];
-  });
-
-  /** Current time formatted in the selected timezone */
-  readonly currentTimeFormatted = computed(() => {
-    const tz = this.currentTimezone();
-    return this.formatTime(tz.id);
-  });
-
-  /**
-   * Set the timezone preference.
-   */
-  setTimezone(timezoneId: string): void {
-    const timezone = this.timezones().find((tz) => tz.id === timezoneId);
-    if (!timezone) {
-      console.warn(`Timezone "${timezoneId}" is not configured.`);
-      return;
-    }
-
-    this.timezone.set(timezoneId);
-    this.storeTimezone(timezoneId);
-  }
-
-  /**
-   * Get the browser's current timezone.
-   */
-  getBrowserTimezone(): string {
-    if (typeof Intl === 'undefined') {
-      return 'UTC';
-    }
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  }
-
-  /**
-   * Format a date in the specified timezone.
-   */
-  formatDate(
-    date: Date,
-    timezoneId?: string,
-    options?: Intl.DateTimeFormatOptions,
-  ): string {
-    const tz = timezoneId ?? this.timezone();
-    const defaultOptions: Intl.DateTimeFormatOptions = {
-      timeZone: tz,
-      dateStyle: 'medium',
-    };
-    return new Intl.DateTimeFormat('en-US', {
-      ...defaultOptions,
-      ...options,
-    }).format(date);
-  }
-
-  /**
-   * Format a time in the specified timezone.
-   */
-  formatTime(
-    timezoneId?: string,
-    options?: Intl.DateTimeFormatOptions,
-  ): string {
-    const tz = timezoneId ?? this.timezone();
-    const now = new Date();
-    const defaultOptions: Intl.DateTimeFormatOptions = {
-      timeZone: tz,
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: true,
-    };
-    return new Intl.DateTimeFormat('en-US', {
-      ...defaultOptions,
-      ...options,
-    }).format(now);
-  }
-
-  /**
-   * Format a datetime in the specified timezone.
-   */
-  formatDateTime(
-    date: Date,
-    timezoneId?: string,
-    options?: Intl.DateTimeFormatOptions,
-  ): string {
-    const tz = timezoneId ?? this.timezone();
-    const defaultOptions: Intl.DateTimeFormatOptions = {
-      timeZone: tz,
-      dateStyle: 'medium',
-      timeStyle: 'short',
-    };
-    return new Intl.DateTimeFormat('en-US', {
-      ...defaultOptions,
-      ...options,
-    }).format(date);
-  }
-
-  private detectCurrentTimezone(): string {
-    // First, check stored preference
-    const stored = this.getStoredTimezone();
-    if (stored && this.isValidTimezone(stored)) {
-      return stored;
-    }
-
-    // Then, use default from config
-    if (
-      this.config.defaultTimezone &&
-      this.isValidTimezone(this.config.defaultTimezone)
-    ) {
-      return this.config.defaultTimezone;
-    }
-
-    // Finally, try browser timezone
-    const browserTz = this.getBrowserTimezone();
-    if (this.isValidTimezone(browserTz)) {
-      return browserTz;
-    }
-
-    // Fallback to UTC
-    return 'UTC';
-  }
-
-  private isValidTimezone(timezoneId: string): boolean {
-    const timezones = this.config.timezones ?? DEFAULT_TIMEZONES;
-    return timezones.some((tz) => tz.id === timezoneId);
-  }
-
-  private getStoredTimezone(): string | null {
-    if (typeof localStorage === 'undefined') {
-      return null;
-    }
-    return localStorage.getItem(this.storageKey);
-  }
-
-  private storeTimezone(timezoneId: string): void {
-    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem(this.storageKey, timezoneId);
-    }
-  }
-}

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

@@ -1,151 +0,0 @@
-# Toast Components
-
-A succinct message that is displayed temporarily to provide feedback.
-
-## Architecture
-
-Unlike other components that use template-based triggers, Toast uses a **service-based architecture**:
-
-```
-ScToaster (Injectable)
-    │
-    └── show(config) ──► Creates ToastData ──► Updates signal ──► ScToastStack renders
-                                                                       │
-                                                                       ├── ScToast (container)
-                                                                       │     ├── ScToastTitle
-                                                                       │     ├── ScToastDescription
-                                                                       │     ├── ScToastAction
-                                                                       │     └── ScToastClose
-                                                                       │
-                                                                       └── [Multiple toasts stack]
-```
-
-## Components
-
-| Component            | Selector                  | Description                                                  |
-| -------------------- | ------------------------- | ------------------------------------------------------------ |
-| `ScToastStack`       | `<sc-toast-stack>`        | Container that renders all active toasts. Place once in app. |
-| `ScToast`            | `div[sc-toast]`           | Individual toast wrapper with variant styling                |
-| `ScToastTitle`       | `[sc-toast-title]`        | Toast title text                                             |
-| `ScToastDescription` | `[sc-toast-description]`  | Toast description text                                       |
-| `ScToastAction`      | `button[sc-toast-action]` | Action button inside toast                                   |
-| `ScToastClose`       | `button[sc-toast-close]`  | Close button to dismiss toast                                |
-
-## Service
-
-### ScToaster
-
-```typescript
-@Injectable({ providedIn: 'root' })
-class ScToaster {
-  // Signal containing all active toasts
-  readonly toasts: Signal<ToastData[]>;
-
-  // Show a new toast, returns toast ID
-  show(config: ToastConfig): string;
-
-  // Dismiss a specific toast by ID
-  dismiss(id: string): void;
-
-  // Dismiss all toasts
-  dismissAll(): void;
-}
-```
-
-### ToastConfig
-
-```typescript
-interface ToastConfig {
-  title?: string;
-  description?: string;
-  variant?: 'default' | 'destructive';
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
-  duration?: number; // Default: 5000ms. Set to 0 for no auto-dismiss
-}
-```
-
-## Usage
-
-### 1. Add ScToastStack to your app (once)
-
-```html
-<!-- In your app.component.html or layout -->
-<sc-toast-stack />
-```
-
-### 2. Inject ScToaster and show toasts
-
-```typescript
-import { Component, inject } from '@angular/core';
-import { ScToaster } from './ui/toast';
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  private readonly toast = inject(ScToaster);
-
-  showSuccess(): void {
-    this.toast.show({
-      title: 'Success',
-      description: 'Your changes have been saved.',
-    });
-  }
-
-  showError(): void {
-    this.toast.show({
-      variant: 'destructive',
-      title: 'Error',
-      description: 'Something went wrong.',
-    });
-  }
-
-  showWithAction(): void {
-    this.toast.show({
-      title: 'File uploaded',
-      description: 'photo.jpg has been uploaded.',
-      action: {
-        label: 'View',
-        onClick: () => this.router.navigate(['/files']),
-      },
-    });
-  }
-}
-```
-
-## Variants
-
-| Variant       | Description                         |
-| ------------- | ----------------------------------- |
-| `default`     | Standard toast with neutral styling |
-| `destructive` | Red styling for errors or warnings  |
-
-## Features
-
-- **Auto-dismiss**: Toasts auto-dismiss after 5 seconds by default
-- **Custom duration**: Set `duration` in config (0 = no auto-dismiss)
-- **Stacking**: Multiple toasts stack from bottom on desktop, top on mobile
-- **Actions**: Add action buttons that execute callbacks
-- **Accessibility**: Uses `role="status"` and `aria-live="polite"`
-
-## Accessibility
-
-- Uses `role="status"` for screen reader announcements
-- `aria-live="polite"` ensures toasts are announced without interrupting
-- `aria-atomic="true"` ensures the entire toast is read
-- Close button has `aria-label="Close"`
-
-## Styling
-
-Toasts use Tailwind CSS classes with shadcn/ui design tokens:
-
-- Default variant: `border bg-background text-foreground`
-- Destructive variant: `border-destructive bg-destructive text-destructive-foreground`
-
-The toaster positions toasts:
-
-- Mobile: Top of screen, stacking downward
-- Desktop: Bottom-right, stacking upward

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

@@ -1,8 +0,0 @@
-export { ScToast } from './toast';
-export { ScToastAction } from './toast-action';
-export { ScToastClose } from './toast-close';
-export { ScToastDescription } from './toast-description';
-export { ScToastTitle } from './toast-title';
-export { ScToastStack } from './toast-stack';
-export { ScToaster } from './toaster';
-export type { ScToastConfig, ScToastData, ScToastVariant } from './toast.types';