@semantic-components/ui-lab 0.62.0 → 0.63.0

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+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';