@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TIME_PICKER } from './time-picker';
+
+// ============================================================================
+// TimePickerPeriod
+// ============================================================================
+@Component({
+  selector: '[sc-time-picker-period]',
+  template: `
+    <button
+      type="button"
+      class="rounded-md px-2 py-1.5 text-sm font-medium transition-colors"
+      [class.bg-primary]="isAM()"
+      [class.text-primary-foreground]="isAM()"
+      [class.text-muted-foreground]="!isAM()"
+      [class.hover:bg-accent]="!isAM()"
+      [disabled]="timePicker.disabled()"
+      (click)="selectAM()"
+    >
+      AM
+    </button>
+    <button
+      type="button"
+      class="rounded-md px-2 py-1.5 text-sm font-medium transition-colors"
+      [class.bg-primary]="isPM()"
+      [class.text-primary-foreground]="isPM()"
+      [class.text-muted-foreground]="!isPM()"
+      [class.hover:bg-accent]="!isPM()"
+      [disabled]="timePicker.disabled()"
+      (click)="selectPM()"
+    >
+      PM
+    </button>
+  `,
+  host: {
+    'data-slot': 'time-picker-period',
+    '[class]': 'class()',
+    role: 'group',
+    '[attr.aria-label]': '"Select AM or PM"',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimePickerPeriod {
+  readonly timePicker = inject(SC_TIME_PICKER);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'ml-2 inline-flex rounded-md border border-input bg-background p-0.5',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly isAM = computed(() => {
+    const val = this.timePicker.value();
+    return val?.period === 'AM' || (!val?.period && (val?.hours ?? 0) < 12);
+  });
+
+  protected readonly isPM = computed(() => {
+    const val = this.timePicker.value();
+    return val?.period === 'PM' || (!val?.period && (val?.hours ?? 0) >= 12);
+  });
+
+  selectAM(): void {
+    this.timePicker.setPeriod('AM');
+    const val = this.timePicker.value();
+    if (val && val.hours >= 12) {
+      this.timePicker.setHours(val.hours - 12);
+    }
+  }
+
+  selectPM(): void {
+    this.timePicker.setPeriod('PM');
+    const val = this.timePicker.value();
+    if (val && val.hours < 12) {
+      this.timePicker.setHours(val.hours + 12);
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+// ============================================================================
+// TimePickerSeparator
+// ============================================================================
+@Directive({
+  selector: '[sc-time-picker-separator]',
+  host: {
+    'data-slot': 'time-picker-separator',
+    '[class]': 'class()',
+  },
+})
+export class ScTimePickerSeparator {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-lg font-medium text-muted-foreground', this.classInput()),
+  );
+}

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

@@ -0,0 +1,87 @@
+import {
+  computed,
+  Directive,
+  InjectionToken,
+  input,
+  model,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export type TimeFormat = '12h' | '24h';
+export type TimePeriod = 'AM' | 'PM';
+
+export interface TimeValue {
+  hours: number;
+  minutes: number;
+  seconds?: number;
+  period?: TimePeriod;
+}
+
+// Token for time picker context
+export const SC_TIME_PICKER = new InjectionToken<ScTimePicker>(
+  'SC_TIME_PICKER',
+);
+
+// ============================================================================
+// TimePicker
+// ============================================================================
+@Directive({
+  selector: '[sc-time-picker]',
+  providers: [{ provide: SC_TIME_PICKER, useExisting: ScTimePicker }],
+  host: {
+    'data-slot': 'time-picker',
+    '[class]': 'class()',
+  },
+})
+export class ScTimePicker {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly format = input<TimeFormat>('12h');
+  readonly showSeconds = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly value = model<TimeValue | null>(null);
+
+  protected readonly class = computed(() =>
+    cn('inline-flex items-center gap-1', this.classInput()),
+  );
+
+  setHours(hours: number): void {
+    const current = this.value() || { hours: 0, minutes: 0 };
+    this.value.set({ ...current, hours });
+  }
+
+  setMinutes(minutes: number): void {
+    const current = this.value() || { hours: 0, minutes: 0 };
+    this.value.set({ ...current, minutes });
+  }
+
+  setSeconds(seconds: number): void {
+    const current = this.value() || { hours: 0, minutes: 0 };
+    this.value.set({ ...current, seconds });
+  }
+
+  setPeriod(period: TimePeriod): void {
+    const current = this.value() || { hours: 0, minutes: 0 };
+    this.value.set({ ...current, period });
+  }
+
+  getFormattedTime(): string {
+    const val = this.value();
+    if (!val) return '';
+
+    const hours = this.format() === '12h' ? val.hours % 12 || 12 : val.hours;
+    const hoursStr = hours.toString().padStart(2, '0');
+    const minutesStr = val.minutes.toString().padStart(2, '0');
+
+    let time = `${hoursStr}:${minutesStr}`;
+
+    if (this.showSeconds() && val.seconds !== undefined) {
+      time += `:${val.seconds.toString().padStart(2, '0')}`;
+    }
+
+    if (this.format() === '12h' && val.period) {
+      time += ` ${val.period}`;
+    }
+
+    return time;
+  }
+}

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

@@ -0,0 +1,177 @@
+# Timeline
+
+Display a sequence of events or activities in chronological order.
+
+## Components
+
+- `ScTimeline` - Container for timeline items
+- `ScTimelineItem` - Individual timeline entry
+- `ScTimelineConnector` - Vertical line connecting items
+- `ScTimelineDot` - Circle indicator with optional icon
+- `ScTimelineContent` - Content container
+- `ScTimelineTitle` - Title text
+- `ScTimelineDescription` - Description text
+- `ScTimelineTime` - Timestamp text
+
+## Usage
+
+```html
+<div sc-timeline>
+  <div sc-timeline-item>
+    <div sc-timeline-connector></div>
+    <div sc-timeline-dot></div>
+    <div sc-timeline-content>
+      <h4 sc-timeline-title>Event Title</h4>
+      <p sc-timeline-description>Event description goes here.</p>
+      <span sc-timeline-time>January 2024</span>
+    </div>
+  </div>
+
+  <div sc-timeline-item>
+    <div sc-timeline-dot></div>
+    <div sc-timeline-content>
+      <h4 sc-timeline-title>Last Event</h4>
+      <p sc-timeline-description>No connector for the last item.</p>
+    </div>
+  </div>
+</div>
+```
+
+## API
+
+### ScTimeline
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScTimelineItem
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScTimelineDot
+
+| Input     | Type                                                          | Default     | Description            |
+| --------- | ------------------------------------------------------------- | ----------- | ---------------------- |
+| `class`   | `string`                                                      | `''`        | Additional CSS classes |
+| `variant` | `'default' \| 'outline' \| 'success' \| 'warning' \| 'error'` | `'default'` | Visual variant         |
+| `size`    | `'sm' \| 'default' \| 'lg'`                                   | `'default'` | Size of the dot        |
+
+### ScTimelineConnector
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScTimelineContent
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScTimelineTitle
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScTimelineDescription
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScTimelineTime
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+## Dot Variants
+
+| Variant   | Description                          |
+| --------- | ------------------------------------ |
+| `default` | Primary background color             |
+| `outline` | Border only, transparent background  |
+| `success` | Green background for completed items |
+| `warning` | Yellow background for in-progress    |
+| `error`   | Red background for failed items      |
+
+## Dot Sizes
+
+| Size      | Dimensions |
+| --------- | ---------- |
+| `sm`      | 16px       |
+| `default` | 24px       |
+| `lg`      | 32px       |
+
+## Examples
+
+### With Status Icons
+
+```html
+<div sc-timeline-item>
+  <div sc-timeline-connector></div>
+  <div sc-timeline-dot variant="success">
+    <svg class="size-3"><!-- check icon --></svg>
+  </div>
+  <div sc-timeline-content>
+    <h4 sc-timeline-title>Completed</h4>
+  </div>
+</div>
+```
+
+### Activity Feed
+
+```html
+<div sc-timeline>
+  <div sc-timeline-item class="pb-4">
+    <div sc-timeline-connector></div>
+    <div sc-timeline-dot size="sm"></div>
+    <div sc-timeline-content class="space-y-0">
+      <p class="text-sm">
+        <span class="font-medium">John Doe</span>
+        created a new project
+      </p>
+      <span sc-timeline-time>2 hours ago</span>
+    </div>
+  </div>
+</div>
+```
+
+### Order Tracking
+
+```html
+<div sc-timeline>
+  <div sc-timeline-item>
+    <div sc-timeline-connector></div>
+    <div sc-timeline-dot variant="success" size="lg">
+      <svg class="size-4"><!-- package icon --></svg>
+    </div>
+    <div sc-timeline-content>
+      <h4 sc-timeline-title>Shipped</h4>
+      <p sc-timeline-description>Your package is on its way.</p>
+      <span sc-timeline-time>Jan 16, 2024</span>
+    </div>
+  </div>
+</div>
+```
+
+## Structure
+
+The timeline uses absolute positioning for the dot and connector elements:
+
+```
+Timeline
+├── TimelineItem (relative, left padding)
+│   ├── TimelineConnector (absolute, vertical line)
+│   ├── TimelineDot (absolute, circle)
+│   └── TimelineContent
+│       ├── TimelineTitle
+│       ├── TimelineDescription
+│       └── TimelineTime
+```
+
+The connector should be omitted from the last timeline item to avoid an orphaned line.

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

@@ -0,0 +1,8 @@
+export { ScTimeline } from './timeline';
+export { ScTimelineItem } from './timeline-item';
+export { ScTimelineConnector } from './timeline-connector';
+export { ScTimelineDot } from './timeline-dot';
+export { ScTimelineContent } from './timeline-content';
+export { ScTimelineTitle } from './timeline-title';
+export { ScTimelineDescription } from './timeline-description';
+export { ScTimelineTime } from './timeline-time';

package/src/lib/components/timeline/timeline-connector.ts

@@ -0,0 +1,29 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-timeline-connector]',
+  template: ``,
+  host: {
+    'data-slot': 'timeline-connector',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimelineConnector {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute left-[11px] top-5 h-[calc(100%-20px)] w-px bg-border',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/timeline/timeline-content.ts

@@ -0,0 +1,26 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-timeline-content]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'timeline-content',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimelineContent {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('space-y-1', this.classInput()));
+}

package/src/lib/components/timeline/timeline-description.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-timeline-description]',
+  host: {
+    'data-slot': 'timeline-description',
+    '[class]': 'class()',
+  },
+})
+export class ScTimelineDescription {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-sm text-muted-foreground', this.classInput()),
+  );
+}

package/src/lib/components/timeline/timeline-dot.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-timeline-dot]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'timeline-dot',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimelineDot {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<
+    'default' | 'outline' | 'success' | 'warning' | 'error'
+  >('default');
+  readonly size = input<'sm' | 'default' | 'lg'>('default');
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute left-0 flex items-center justify-center rounded-full',
+      // Size
+      this.size() === 'sm' && 'size-4 top-1',
+      this.size() === 'default' && 'size-6 top-0',
+      this.size() === 'lg' && 'size-8 -top-1',
+      // Variant
+      this.variant() === 'default' && 'bg-primary text-primary-foreground',
+      this.variant() === 'outline' && 'border-2 border-border bg-background',
+      this.variant() === 'success' && 'bg-green-500 text-white',
+      this.variant() === 'warning' && 'bg-yellow-500 text-white',
+      this.variant() === 'error' && 'bg-red-500 text-white',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/timeline/timeline-item.ts

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-timeline-item]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'timeline-item',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimelineItem {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('relative pb-8 pl-8 last:pb-0', this.classInput()),
+  );
+}

package/src/lib/components/timeline/timeline-time.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-timeline-time]',
+  host: {
+    'data-slot': 'timeline-time',
+    '[class]': 'class()',
+  },
+})
+export class ScTimelineTime {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-xs text-muted-foreground', this.classInput()),
+  );
+}

package/src/lib/components/timeline/timeline-title.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-timeline-title]',
+  host: {
+    'data-slot': 'timeline-title',
+    '[class]': 'class()',
+  },
+})
+export class ScTimelineTitle {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('font-medium leading-none', this.classInput()),
+  );
+}

package/src/lib/components/timeline/timeline.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-timeline]',
+  host: {
+    'data-slot': 'timeline',
+    '[class]': 'class()',
+  },
+})
+export class ScTimeline {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('relative space-y-0', this.classInput()),
+  );
+}

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

@@ -0,0 +1,5 @@
+export * from './timezone.service';
+export * from './timezone-display';
+export * from './timezone-select';
+export * from './timezone-button';
+export * from './timezone-badge';

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

@@ -0,0 +1,85 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScTimezoneService } from './timezone.service';
+
+/**
+ * Timezone badge - displays the current timezone as a compact badge.
+ * Useful for showing timezone info in headers or status bars.
+ *
+ * @example
+ * ```html
+ * <span sc-timezone-badge></span>
+ * <span sc-timezone-badge [showLabel]="true"></span>
+ * ```
+ */
+@Component({
+  selector: 'span[sc-timezone-badge]',
+  host: {
+    'data-slot': 'timezone-badge',
+    '[class]': 'class()',
+  },
+  template: `
+    @if (showIcon()) {
+      <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-3"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+    }
+    <span>{{ displayText() }}</span>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTimezoneBadge {
+  private readonly timezoneService = inject(ScTimezoneService);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly showIcon = input<boolean>(true);
+  readonly showLabel = input<boolean>(false);
+  readonly showOffset = input<boolean>(false);
+
+  protected readonly currentTimezone = this.timezoneService.currentTimezone;
+
+  protected readonly displayText = computed(() => {
+    const tz = this.currentTimezone();
+
+    if (this.showLabel()) {
+      if (this.showOffset()) {
+        return `${tz.label} (${tz.offset})`;
+      }
+      return tz.label;
+    }
+
+    if (this.showOffset()) {
+      return `${tz.abbr} ${tz.offset}`;
+    }
+
+    return tz.abbr;
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold',
+      'transition-colors',
+      'border-transparent bg-secondary text-secondary-foreground',
+      this.classInput(),
+    ),
+  );
+}