@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

@@ -1,174 +0,0 @@
-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);
-    }
-  }
-}