@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/theme-toggle/theme.service.ts

@@ -0,0 +1,81 @@
+import { computed, effect, Injectable, signal } from '@angular/core';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+@Injectable({ providedIn: 'root' })
+export class ScTheme {
+  private readonly storageKey = 'sc-theme';
+  private readonly darkMediaQuery =
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-color-scheme: dark)')
+      : null;
+
+  readonly theme = signal<Theme>(this.getStoredTheme());
+
+  readonly resolvedTheme = computed(() => {
+    const theme = this.theme();
+    if (theme === 'system') {
+      return this.getSystemTheme();
+    }
+    return theme;
+  });
+
+  readonly isDark = computed(() => this.resolvedTheme() === 'dark');
+
+  constructor() {
+    effect(() => {
+      const resolved = this.resolvedTheme();
+      this.applyTheme(resolved);
+    });
+
+    this.darkMediaQuery?.addEventListener('change', () => {
+      if (this.theme() === 'system') {
+        this.applyTheme(this.getSystemTheme());
+      }
+    });
+  }
+
+  setTheme(theme: Theme): void {
+    this.theme.set(theme);
+    this.storeTheme(theme);
+  }
+
+  toggleTheme(): void {
+    const current = this.resolvedTheme();
+    const next = current === 'dark' ? 'light' : 'dark';
+    this.setTheme(next);
+  }
+
+  private getStoredTheme(): Theme {
+    if (typeof localStorage === 'undefined') {
+      return 'system';
+    }
+    const stored = localStorage.getItem(this.storageKey);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+    return 'system';
+  }
+
+  private storeTheme(theme: Theme): void {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(this.storageKey, theme);
+    }
+  }
+
+  private getSystemTheme(): 'light' | 'dark' {
+    return this.darkMediaQuery?.matches ? 'dark' : 'light';
+  }
+
+  private applyTheme(theme: 'light' | 'dark'): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }
+}

package/src/lib/components/time-picker/README.md

@@ -0,0 +1,188 @@
+# Time Picker
+
+A component for selecting time values with support for 12/24 hour formats.
+
+## Usage
+
+```html
+<div sc-time-picker format="12h" [(value)]="time">
+  <input sc-time-picker-input type="hours" label="Hours" />
+  <span sc-time-picker-separator>:</span>
+  <input sc-time-picker-input type="minutes" label="Minutes" />
+  <div sc-time-picker-period></div>
+</div>
+```
+
+## Components
+
+### ScTimePicker
+
+Root container that manages time state.
+
+**Selector:** `[sc-time-picker]`
+
+**Inputs:**
+
+| Input         | Type             | Default | Description        |
+| ------------- | ---------------- | ------- | ------------------ |
+| `format`      | `'12h' \| '24h'` | `'12h'` | Time format        |
+| `showSeconds` | `boolean`        | `false` | Show seconds input |
+| `disabled`    | `boolean`        | `false` | Disable inputs     |
+| `class`       | `string`         | `''`    | Additional CSS     |
+
+**Two-way Bindings:**
+
+| Binding | Type                | Description   |
+| ------- | ------------------- | ------------- |
+| `value` | `TimeValue \| null` | Selected time |
+
+**Methods:**
+
+| Method                | Description     |
+| --------------------- | --------------- |
+| `setHours(hours)`     | Set hours value |
+| `setMinutes(minutes)` | Set minutes     |
+| `setSeconds(seconds)` | Set seconds     |
+| `setPeriod(period)`   | Set AM/PM       |
+| `getFormattedTime()`  | Get string time |
+
+### ScTimePickerInput
+
+Numeric input for hours, minutes, or seconds.
+
+**Selector:** `input[sc-time-picker-input]`
+
+**Inputs:**
+
+| Input   | Type                                | Required | Description    |
+| ------- | ----------------------------------- | -------- | -------------- |
+| `type`  | `'hours' \| 'minutes' \| 'seconds'` | Yes      | Input type     |
+| `label` | `string`                            | No       | Aria label     |
+| `class` | `string`                            | No       | Additional CSS |
+
+**Features:**
+
+- Arrow up/down to increment/decrement
+- Auto-selects on focus
+- Numeric input only
+- Value clamping
+
+### ScTimePickerSeparator
+
+Visual separator (colon) between inputs.
+
+**Selector:** `[sc-time-picker-separator]`
+
+### ScTimePickerPeriod
+
+AM/PM toggle buttons.
+
+**Selector:** `[sc-time-picker-period]`
+
+### ScTimePickerClock
+
+Visual clock interface for selection.
+
+**Selector:** `[sc-time-picker-clock]`
+
+**Inputs:**
+
+| Input   | Type                   | Default   | Description    |
+| ------- | ---------------------- | --------- | -------------- |
+| `mode`  | `'hours' \| 'minutes'` | `'hours'` | Selection mode |
+| `class` | `string`               | `''`      | Additional CSS |
+
+## Types
+
+```typescript
+type TimeFormat = '12h' | '24h';
+type TimePeriod = 'AM' | 'PM';
+
+interface TimeValue {
+  hours: number;
+  minutes: number;
+  seconds?: number;
+  period?: TimePeriod;
+}
+```
+
+## Examples
+
+### 12 Hour Format
+
+```html
+<div sc-time-picker format="12h" [(value)]="time">
+  <input sc-time-picker-input type="hours" />
+  <span sc-time-picker-separator>:</span>
+  <input sc-time-picker-input type="minutes" />
+  <div sc-time-picker-period></div>
+</div>
+```
+
+### 24 Hour Format
+
+```html
+<div sc-time-picker format="24h" [(value)]="time">
+  <input sc-time-picker-input type="hours" />
+  <span sc-time-picker-separator>:</span>
+  <input sc-time-picker-input type="minutes" />
+</div>
+```
+
+### With Seconds
+
+```html
+<div sc-time-picker format="24h" [showSeconds]="true" [(value)]="time">
+  <input sc-time-picker-input type="hours" />
+  <span sc-time-picker-separator>:</span>
+  <input sc-time-picker-input type="minutes" />
+  <span sc-time-picker-separator>:</span>
+  <input sc-time-picker-input type="seconds" />
+</div>
+```
+
+### Clock Interface
+
+```html
+<div sc-time-picker format="12h" [(value)]="time">
+  <div sc-time-picker-clock mode="hours"></div>
+</div>
+```
+
+### Disabled
+
+```html
+<div sc-time-picker [disabled]="true" [(value)]="time">
+  <input sc-time-picker-input type="hours" />
+  <span sc-time-picker-separator>:</span>
+  <input sc-time-picker-input type="minutes" />
+</div>
+```
+
+### Setting Initial Value
+
+```typescript
+time = signal<TimeValue>({
+  hours: 9,
+  minutes: 30,
+  period: 'AM',
+});
+```
+
+## Features
+
+- **12/24 Hour Formats**: Support for both time formats
+- **Seconds Support**: Optional seconds input
+- **AM/PM Toggle**: Built-in period selector
+- **Clock Interface**: Visual clock for selection
+- **Keyboard Navigation**: Arrow keys to adjust values
+- **Input Validation**: Numeric-only, auto-clamping
+- **Two-way Binding**: Sync time state with `[(value)]`
+
+## Accessibility
+
+- Proper ARIA labels on inputs
+- Keyboard navigation (arrows to increment/decrement)
+- Numeric inputmode for mobile keyboards
+- Focus management with auto-select
+- Group role on period toggle

package/src/lib/components/time-picker/index.ts

@@ -0,0 +1,5 @@
+export * from './time-picker';
+export * from './time-picker-clock';
+export * from './time-picker-input';
+export * from './time-picker-period';
+export * from './time-picker-separator';

package/src/lib/components/time-picker/time-picker-clock.ts

@@ -0,0 +1,195 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TIME_PICKER } from './time-picker';
+
+// ============================================================================
+// TimePickerClock (visual clock selector)
+// ============================================================================
+@Component({
+  selector: '[sc-time-picker-clock]',
+  template: `
+    <div class="relative">
+      <svg viewBox="0 0 200 200" class="size-48">
+        <!-- Clock face -->
+        <circle
+          cx="100"
+          cy="100"
+          r="95"
+          fill="none"
+          stroke="currentColor"
+          class="text-border"
+          stroke-width="2"
+        />
+
+        <!-- Hour markers -->
+        @for (marker of markers(); track marker.value) {
+          <g
+            class="cursor-pointer"
+            (click)="selectValue(marker.value)"
+            (mouseenter)="hoveredValue.set(marker.value)"
+            (mouseleave)="hoveredValue.set(null)"
+          >
+            <circle
+              [attr.cx]="marker.x"
+              [attr.cy]="marker.y"
+              r="14"
+              [class.fill-primary]="isSelected(marker.value)"
+              [class.text-primary-foreground]="isSelected(marker.value)"
+              [class.fill-accent]="
+                hoveredValue() === marker.value && !isSelected(marker.value)
+              "
+              [class.fill-transparent]="
+                hoveredValue() !== marker.value && !isSelected(marker.value)
+              "
+              class="transition-colors"
+            />
+            <text
+              [attr.x]="marker.x"
+              [attr.y]="marker.y"
+              text-anchor="middle"
+              dominant-baseline="central"
+              class="text-sm select-none"
+              [class.fill-primary-foreground]="isSelected(marker.value)"
+              [class.fill-foreground]="!isSelected(marker.value)"
+            >
+              {{ marker.label }}
+            </text>
+          </g>
+        }
+
+        <!-- Clock hand -->
+        @if (selectedAngle() !== null) {
+          <line
+            x1="100"
+            y1="100"
+            [attr.x2]="handX()"
+            [attr.y2]="handY()"
+            stroke="currentColor"
+            class="text-primary"
+            stroke-width="2"
+          />
+          <circle
+            cx="100"
+            cy="100"
+            r="4"
+            fill="currentColor"
+            class="text-primary"
+          />
+        }
+      </svg>
+    </div>
+  `,
+  host: {
+    'data-slot': 'time-picker-clock',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimePickerClock {
+  readonly timePicker = inject(SC_TIME_PICKER);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly mode = input<'hours' | 'minutes'>('hours');
+
+  readonly hoveredValue = signal<number | null>(null);
+
+  protected readonly class = computed(() =>
+    cn('inline-block', this.classInput()),
+  );
+
+  protected readonly markers = computed(() => {
+    const isHours = this.mode() === 'hours';
+    const count = isHours ? 12 : 12; // Show 12 markers for both
+    const step = isHours ? 1 : 5;
+    const radius = 70;
+
+    const markers: { value: number; label: string; x: number; y: number }[] =
+      [];
+
+    for (let i = 0; i < count; i++) {
+      const value = isHours ? (i === 0 ? 12 : i) : i * step;
+      const angle = (i * 30 - 90) * (Math.PI / 180);
+      const x = 100 + radius * Math.cos(angle);
+      const y = 100 + radius * Math.sin(angle);
+
+      markers.push({
+        value: isHours ? (i === 0 ? 12 : i) : i * step,
+        label: value.toString().padStart(2, '0'),
+        x,
+        y,
+      });
+    }
+
+    return markers;
+  });
+
+  protected readonly selectedAngle = computed(() => {
+    const val = this.timePicker.value();
+    if (!val) return null;
+
+    const isHours = this.mode() === 'hours';
+    if (isHours) {
+      const hours =
+        this.timePicker.format() === '12h'
+          ? val.hours % 12 || 12
+          : val.hours % 12;
+      return (hours * 30 - 90) * (Math.PI / 180);
+    } else {
+      return (val.minutes * 6 - 90) * (Math.PI / 180);
+    }
+  });
+
+  protected readonly handX = computed(() => {
+    const angle = this.selectedAngle();
+    if (angle === null) return 100;
+    return 100 + 55 * Math.cos(angle);
+  });
+
+  protected readonly handY = computed(() => {
+    const angle = this.selectedAngle();
+    if (angle === null) return 100;
+    return 100 + 55 * Math.sin(angle);
+  });
+
+  isSelected(value: number): boolean {
+    const val = this.timePicker.value();
+    if (!val) return false;
+
+    const isHours = this.mode() === 'hours';
+    if (isHours) {
+      const hours =
+        this.timePicker.format() === '12h'
+          ? val.hours % 12 || 12
+          : val.hours % 12;
+      return hours === value || (value === 12 && hours === 0);
+    } else {
+      return val.minutes === value;
+    }
+  }
+
+  selectValue(value: number): void {
+    if (this.mode() === 'hours') {
+      const val = this.timePicker.value();
+      let hours = value;
+      if (this.timePicker.format() === '12h') {
+        if (val?.period === 'PM' && value !== 12) {
+          hours = value + 12;
+        } else if (val?.period === 'AM' && value === 12) {
+          hours = 0;
+        }
+      }
+      this.timePicker.setHours(hours);
+    } else {
+      this.timePicker.setMinutes(value);
+    }
+  }
+}

package/src/lib/components/time-picker/time-picker-input.ts

@@ -0,0 +1,174 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TIME_PICKER } from './time-picker';
+
+// ============================================================================
+// TimePickerInput
+// ============================================================================
+@Component({
+  selector: 'input[sc-time-picker-input]',
+  template: ``,
+  host: {
+    'data-slot': 'time-picker-input',
+    type: 'text',
+    inputmode: 'numeric',
+    '[class]': 'class()',
+    '[value]': 'displayValue()',
+    '[disabled]': 'timePicker.disabled()',
+    '[attr.min]': 'min()',
+    '[attr.max]': 'max()',
+    '[attr.aria-label]': 'ariaLabel()',
+    '(input)': 'onInput($event)',
+    '(blur)': 'onBlur()',
+    '(keydown)': 'onKeydown($event)',
+    '(focus)': 'onFocus($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimePickerInput {
+  readonly timePicker = inject(SC_TIME_PICKER);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly type = input.required<'hours' | 'minutes' | 'seconds'>();
+  readonly ariaLabel = input<string>('', { alias: 'aria-label' });
+
+  readonly focused = signal(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'w-10 rounded-md border border-input bg-background px-2 py-1.5 text-center text-sm tabular-nums',
+      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly min = computed(() => {
+    return 0;
+  });
+
+  protected readonly max = computed(() => {
+    const type = this.type();
+    if (type === 'hours') {
+      return this.timePicker.format() === '12h' ? 12 : 23;
+    }
+    return 59;
+  });
+
+  protected readonly displayValue = computed(() => {
+    const val = this.timePicker.value();
+    if (!val) return '00';
+
+    const type = this.type();
+    let num: number;
+
+    if (type === 'hours') {
+      num =
+        this.timePicker.format() === '12h' ? val.hours % 12 || 12 : val.hours;
+    } else if (type === 'minutes') {
+      num = val.minutes;
+    } else {
+      num = val.seconds ?? 0;
+    }
+
+    return num.toString().padStart(2, '0');
+  });
+
+  onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const value = input.value.replace(/\D/g, '');
+    const num = parseInt(value, 10);
+
+    if (!isNaN(num)) {
+      this.updateValue(Math.min(num, this.max()));
+    }
+  }
+
+  onBlur(): void {
+    this.focused.set(false);
+    // Ensure value is within bounds
+    const val = this.timePicker.value();
+    if (val) {
+      const type = this.type();
+      if (type === 'hours') {
+        const max = this.timePicker.format() === '12h' ? 12 : 23;
+        const min = this.timePicker.format() === '12h' ? 1 : 0;
+        const clamped = Math.max(min, Math.min(val.hours, max));
+        if (clamped !== val.hours) {
+          this.timePicker.setHours(clamped);
+        }
+      }
+    }
+  }
+
+  onFocus(event: FocusEvent): void {
+    this.focused.set(true);
+    (event.target as HTMLInputElement).select();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      this.increment();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      this.decrement();
+    }
+  }
+
+  private increment(): void {
+    const val = this.timePicker.value() || { hours: 0, minutes: 0 };
+    const type = this.type();
+    const max = this.max();
+
+    if (type === 'hours') {
+      const min = this.timePicker.format() === '12h' ? 1 : 0;
+      const newVal = val.hours >= max ? min : val.hours + 1;
+      this.timePicker.setHours(newVal);
+    } else if (type === 'minutes') {
+      const newVal = val.minutes >= max ? 0 : val.minutes + 1;
+      this.timePicker.setMinutes(newVal);
+    } else {
+      const newVal = (val.seconds ?? 0) >= max ? 0 : (val.seconds ?? 0) + 1;
+      this.timePicker.setSeconds(newVal);
+    }
+  }
+
+  private decrement(): void {
+    const val = this.timePicker.value() || { hours: 0, minutes: 0 };
+    const type = this.type();
+    const max = this.max();
+
+    if (type === 'hours') {
+      const min = this.timePicker.format() === '12h' ? 1 : 0;
+      const newVal = val.hours <= min ? max : val.hours - 1;
+      this.timePicker.setHours(newVal);
+    } else if (type === 'minutes') {
+      const newVal = val.minutes <= 0 ? max : val.minutes - 1;
+      this.timePicker.setMinutes(newVal);
+    } else {
+      const newVal = (val.seconds ?? 0) <= 0 ? max : (val.seconds ?? 0) - 1;
+      this.timePicker.setSeconds(newVal);
+    }
+  }
+
+  private updateValue(num: number): void {
+    const type = this.type();
+    if (type === 'hours') {
+      this.timePicker.setHours(num);
+    } else if (type === 'minutes') {
+      this.timePicker.setMinutes(num);
+    } else {
+      this.timePicker.setSeconds(num);
+    }
+  }
+}