@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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