@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/calendar/calendar.ts

@@ -1,273 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCalendarDayView } from './calendar-day-view';
-import { ScCalendarMonthView } from './calendar-month-view';
-import { ScCalendarYearView } from './calendar-year-view';
-import { ScCalendarHeader } from './calendar-header';
-
-export type CalendarMode = 'single' | 'multiple' | 'range';
-export type CalendarViewMode = 'day' | 'month' | 'year';
-
-export interface DateRange {
-  from: Date | undefined;
-  to: Date | undefined;
-}
-
-@Component({
-  selector: 'sc-calendar',
-  imports: [
-    ScCalendarDayView,
-    ScCalendarMonthView,
-    ScCalendarYearView,
-    ScCalendarHeader,
-  ],
-  host: {
-    'data-slot': 'calendar',
-    '[class]': 'class()',
-    role: 'application',
-    '[attr.aria-label]': '"Calendar"',
-  },
-  template: `
-    <div class="flex flex-col gap-4">
-      <!-- Header with navigation -->
-      <sc-calendar-header
-        [label]="monthYearLabel()"
-        [previousLabel]="previousAriaLabel()"
-        [nextLabel]="nextAriaLabel()"
-        [headerLabel]="headerAriaLabel()"
-        [expanded]="viewMode() !== 'day'"
-        (previous)="handlePrevious()"
-        (next)="handleNext()"
-        (headerClick)="handleHeaderClick()"
-      />
-
-      <!-- View content -->
-      @switch (viewMode()) {
-        @case ('day') {
-          <sc-calendar-day-view
-            [viewDate]="viewDate()"
-            [mode]="mode()"
-            [selected]="selected()"
-            [selectedDates]="selectedDates()"
-            [selectedRange]="selectedRange()"
-            [disabled]="disabled()"
-            [minDate]="minDate()"
-            [maxDate]="maxDate()"
-            [weekDays]="weekDays"
-            (dateSelected)="selectDate($event)"
-            (monthScrollUp)="previousMonth()"
-            (monthScrollDown)="nextMonth()"
-          />
-        }
-        @case ('month') {
-          <sc-calendar-month-view
-            [year]="viewDate().getFullYear()"
-            [selectedMonth]="viewDate().getMonth()"
-            (monthSelected)="selectMonth($event)"
-            (yearScrollUp)="previousYear()"
-            (yearScrollDown)="nextYear()"
-          />
-        }
-        @case ('year') {
-          <sc-calendar-year-view
-            [decadeStart]="decadeStart()"
-            [selectedYear]="viewDate().getFullYear()"
-            (yearSelected)="selectYear($event)"
-            (decadeScrollUp)="previousDecade()"
-            (decadeScrollDown)="nextDecade()"
-          />
-        }
-      }
-    </div>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCalendar {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly mode = input<CalendarMode>('single');
-  readonly disabled = input<Date[]>([]);
-  readonly minDate = input<Date | undefined>(undefined);
-  readonly maxDate = input<Date | undefined>(undefined);
-
-  // For single mode
-  readonly selected = model<Date | undefined>(undefined);
-  // For multiple mode
-  readonly selectedDates = model<Date[]>([]);
-  // For range mode
-  readonly selectedRange = model<DateRange>({ from: undefined, to: undefined });
-
-  readonly weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-
-  protected readonly viewDate = signal(new Date());
-  protected readonly viewMode = signal<CalendarViewMode>('day');
-  protected readonly decadeStart = signal<number>(
-    Math.floor(new Date().getFullYear() / 12) * 12,
-  );
-
-  protected readonly class = computed(() => cn('p-3', this.classInput()));
-
-  protected readonly monthYearLabel = computed(() => {
-    const date = this.viewDate();
-    const mode = this.viewMode();
-
-    if (mode === 'year') {
-      const start = this.decadeStart();
-      return `${start} - ${start + 11}`;
-    }
-
-    if (mode === 'month') {
-      return date.getFullYear().toString();
-    }
-
-    return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-  });
-
-  private isSameDay(a: Date, b: Date): boolean {
-    return (
-      a.getDate() === b.getDate() &&
-      a.getMonth() === b.getMonth() &&
-      a.getFullYear() === b.getFullYear()
-    );
-  }
-
-  protected previousAriaLabel(): string {
-    const mode = this.viewMode();
-    return mode === 'day'
-      ? 'Go to previous month'
-      : mode === 'month'
-        ? 'Go to previous year'
-        : 'Go to previous decade';
-  }
-
-  protected nextAriaLabel(): string {
-    const mode = this.viewMode();
-    return mode === 'day'
-      ? 'Go to next month'
-      : mode === 'month'
-        ? 'Go to next year'
-        : 'Go to next decade';
-  }
-
-  protected headerAriaLabel(): string {
-    const mode = this.viewMode();
-    return mode === 'day'
-      ? 'Switch to month view'
-      : mode === 'month'
-        ? 'Switch to year view'
-        : 'Year view - select a year';
-  }
-
-  protected selectDate(date: Date): void {
-    const mode = this.mode();
-
-    if (mode === 'single') {
-      this.selected.set(date);
-    } else if (mode === 'multiple') {
-      const current = this.selectedDates();
-      const exists = current.some((d) => this.isSameDay(d, date));
-      if (exists) {
-        this.selectedDates.set(current.filter((d) => !this.isSameDay(d, date)));
-      } else {
-        this.selectedDates.set([...current, date]);
-      }
-    } else if (mode === 'range') {
-      const range = this.selectedRange();
-      if (!range.from || (range.from && range.to)) {
-        // Start new range
-        this.selectedRange.set({ from: date, to: undefined });
-      } else {
-        // Complete the range
-        if (date < range.from) {
-          this.selectedRange.set({ from: date, to: range.from });
-        } else {
-          this.selectedRange.set({ from: range.from, to: date });
-        }
-      }
-    }
-  }
-
-  // Header click - drill down through views
-  protected handleHeaderClick(): void {
-    const current = this.viewMode();
-    if (current === 'day') {
-      this.viewMode.set('month');
-    } else if (current === 'month') {
-      this.viewMode.set('year');
-      const currentYear = this.viewDate().getFullYear();
-      this.decadeStart.set(Math.floor(currentYear / 12) * 12);
-    }
-  }
-
-  // Context-aware previous/next
-  protected handlePrevious(): void {
-    const mode = this.viewMode();
-    if (mode === 'day') this.previousMonth();
-    else if (mode === 'month') this.previousYear();
-    else this.previousDecade();
-  }
-
-  protected handleNext(): void {
-    const mode = this.viewMode();
-    if (mode === 'day') this.nextMonth();
-    else if (mode === 'month') this.nextYear();
-    else this.nextDecade();
-  }
-
-  protected previousMonth(): void {
-    const current = this.viewDate();
-    this.viewDate.set(
-      new Date(current.getFullYear(), current.getMonth() - 1, 1),
-    );
-  }
-
-  protected nextMonth(): void {
-    const current = this.viewDate();
-    this.viewDate.set(
-      new Date(current.getFullYear(), current.getMonth() + 1, 1),
-    );
-  }
-
-  protected previousYear(): void {
-    const current = this.viewDate();
-    this.viewDate.set(
-      new Date(current.getFullYear() - 1, current.getMonth(), 1),
-    );
-  }
-
-  protected nextYear(): void {
-    const current = this.viewDate();
-    this.viewDate.set(
-      new Date(current.getFullYear() + 1, current.getMonth(), 1),
-    );
-  }
-
-  protected previousDecade(): void {
-    this.decadeStart.update((start) => start - 12);
-  }
-
-  protected nextDecade(): void {
-    this.decadeStart.update((start) => start + 12);
-  }
-
-  // Selection handlers - return to previous view
-  protected selectMonth(month: number): void {
-    const current = this.viewDate();
-    this.viewDate.set(new Date(current.getFullYear(), month, 1));
-    this.viewMode.set('day');
-  }
-
-  protected selectYear(year: number): void {
-    const current = this.viewDate();
-    this.viewDate.set(new Date(year, current.getMonth(), 1));
-    this.viewMode.set('month');
-  }
-}

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

@@ -1 +0,0 @@
-export * from './calendar';

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

@@ -1,86 +0,0 @@
-# Card
-
-Displays a card with header, content, and footer.
-
-## Components
-
-- `ScCard` - Container with border, background, and shadow
-- `ScCardHeader` - Header section with flex column layout
-- `ScCardTitle` - Large semibold title text
-- `ScCardDescription` - Muted description text
-- `ScCardContent` - Main content area
-- `ScCardFooter` - Footer section with flex row layout
-
-## Usage
-
-```html
-<div sc-card>
-  <div sc-card-header>
-    <h3 sc-card-title>Card Title</h3>
-    <p sc-card-description>Card description goes here.</p>
-  </div>
-  <div sc-card-content>
-    <p>Card content goes here.</p>
-  </div>
-  <div sc-card-footer>
-    <p>Card footer</p>
-  </div>
-</div>
-```
-
-## Card with Form
-
-```html
-<div sc-card class="w-[350px]">
-  <div sc-card-header>
-    <h3 sc-card-title>Create project</h3>
-    <p sc-card-description>Deploy your new project in one-click.</p>
-  </div>
-  <div sc-card-content>
-    <div class="grid gap-4">
-      <div class="flex flex-col space-y-1.5">
-        <label sc-label for="name">Name</label>
-        <input sc-input id="name" placeholder="Project name" />
-      </div>
-    </div>
-  </div>
-  <div sc-card-footer class="flex justify-between">
-    <button>Cancel</button>
-    <button>Deploy</button>
-  </div>
-</div>
-```
-
-## Stats Card
-
-```html
-<div sc-card>
-  <div sc-card-header class="pb-2">
-    <p sc-card-description>Total Revenue</p>
-    <h3 sc-card-title class="text-4xl">$45,231.89</h3>
-  </div>
-  <div sc-card-content>
-    <p class="text-xs text-muted-foreground">+20.1% from last month</p>
-  </div>
-</div>
-```
-
-## Component Inputs
-
-All card components accept a `class` input for additional CSS classes.
-
-| Component           | Default Styling                                            |
-| ------------------- | ---------------------------------------------------------- |
-| `ScCard`            | `rounded-lg border bg-card text-card-foreground shadow-sm` |
-| `ScCardHeader`      | `flex flex-col space-y-1.5 p-6`                            |
-| `ScCardTitle`       | `text-2xl font-semibold leading-none tracking-tight`       |
-| `ScCardDescription` | `text-sm text-muted-foreground`                            |
-| `ScCardContent`     | `p-6 pt-0`                                                 |
-| `ScCardFooter`      | `flex items-center p-6 pt-0`                               |
-
-## Accessibility
-
-- Uses semantic HTML structure
-- Card components are simple styling containers
-- Content should use appropriate heading levels
-- Interactive elements inside cards should be keyboard accessible

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

@@ -1,15 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-card-content]',
-  host: {
-    'data-slot': 'card-content',
-    '[class]': 'class()',
-  },
-})
-export class ScCardContent {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => cn('p-6 pt-0', this.classInput()));
-}

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

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

package/src/lib/components/card/card-footer.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-card-footer]',
-  host: {
-    'data-slot': 'card-footer',
-    '[class]': 'class()',
-  },
-})
-export class ScCardFooter {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex items-center p-6 pt-0', this.classInput()),
-  );
-}

package/src/lib/components/card/card-header.ts

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

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

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

package/src/lib/components/card/card.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-card]',
-  host: {
-    'data-slot': 'card',
-    '[class]': 'class()',
-  },
-})
-export class ScCard {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'rounded-lg border bg-card text-card-foreground shadow-sm',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,6 +0,0 @@
-export * from './card';
-export * from './card-header';
-export * from './card-title';
-export * from './card-description';
-export * from './card-content';
-export * from './card-footer';

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

@@ -1,220 +0,0 @@
-# Chart
-
-SVG-based chart components for data visualization.
-
-## Usage
-
-```html
-<div sc-chart-container>
-  <div sc-bar-chart [data]="data" [height]="300"></div>
-  <div sc-chart-legend [items]="legend"></div>
-</div>
-```
-
-## Components
-
-### ScChartContainer
-
-Root container that provides chart context and configuration.
-
-**Selector:** `[sc-chart-container]`
-
-**Inputs:**
-
-| Input    | Type          | Default | Description              |
-| -------- | ------------- | ------- | ------------------------ |
-| `config` | `ChartConfig` | `{}`    | Color and label mappings |
-| `class`  | `string`      | `''`    | Additional CSS classes   |
-
-### ScBarChart
-
-Bar chart visualization.
-
-**Selector:** `[sc-bar-chart]`
-
-**Inputs:**
-
-| Input       | Type               | Default | Description            |
-| ----------- | ------------------ | ------- | ---------------------- |
-| `data`      | `ChartDataPoint[]` | `[]`    | Chart data             |
-| `height`    | `number`           | `300`   | Chart height in pixels |
-| `barRadius` | `number`           | `4`     | Bar corner radius      |
-| `barGap`    | `number`           | `8`     | Gap between bars       |
-| `class`     | `string`           | `''`    | Additional CSS classes |
-
-### ScLineChart
-
-Line chart visualization with optional area fill.
-
-**Selector:** `[sc-line-chart]`
-
-**Inputs:**
-
-| Input        | Type               | Default | Description            |
-| ------------ | ------------------ | ------- | ---------------------- |
-| `data`       | `ChartDataPoint[]` | `[]`    | Chart data             |
-| `height`     | `number`           | `300`   | Chart height in pixels |
-| `showArea`   | `boolean`          | `false` | Show area fill         |
-| `showPoints` | `boolean`          | `true`  | Show data points       |
-| `color`      | `string`           | `''`    | Line color             |
-| `labelStep`  | `number`           | `1`     | X-axis label interval  |
-| `class`      | `string`           | `''`    | Additional CSS classes |
-
-### ScPieChart
-
-Pie chart visualization.
-
-**Selector:** `[sc-pie-chart]`
-
-**Inputs:**
-
-| Input         | Type               | Default | Description            |
-| ------------- | ------------------ | ------- | ---------------------- |
-| `data`        | `ChartDataPoint[]` | `[]`    | Chart data             |
-| `size`        | `number`           | `300`   | Chart size in pixels   |
-| `innerRadius` | `number`           | `0`     | Inner radius (0 = pie) |
-| `showLabels`  | `boolean`          | `true`  | Show percentage labels |
-| `class`       | `string`           | `''`    | Additional CSS classes |
-
-### ScDonutChart
-
-Donut chart (pie chart with hole).
-
-**Selector:** `[sc-donut-chart]`
-
-**Inputs:**
-
-| Input         | Type               | Default | Description            |
-| ------------- | ------------------ | ------- | ---------------------- |
-| `data`        | `ChartDataPoint[]` | `[]`    | Chart data             |
-| `size`        | `number`           | `300`   | Chart size in pixels   |
-| `innerRadius` | `number`           | `60`    | Inner radius           |
-| `showLabels`  | `boolean`          | `false` | Show percentage labels |
-| `class`       | `string`           | `''`    | Additional CSS classes |
-
-### ScChartLegend
-
-Chart legend component.
-
-**Selector:** `[sc-chart-legend]`
-
-**Inputs:**
-
-| Input   | Type                                  | Default | Description            |
-| ------- | ------------------------------------- | ------- | ---------------------- |
-| `items` | `{ label: string; color?: string }[]` | `[]`    | Legend items           |
-| `class` | `string`                              | `''`    | Additional CSS classes |
-
-### ScChartTooltip
-
-Reusable tooltip component.
-
-**Selector:** `[sc-chart-tooltip]`
-
-**Methods:**
-
-| Method       | Description  |
-| ------------ | ------------ |
-| `show(x, y)` | Show tooltip |
-| `hide()`     | Hide tooltip |
-
-## Types
-
-```typescript
-interface ChartDataPoint {
-  label: string;
-  value: number;
-  color?: string;
-}
-
-interface ChartConfig {
-  [key: string]: {
-    label: string;
-    color?: string;
-  };
-}
-```
-
-## Examples
-
-### Bar Chart
-
-```html
-<div sc-chart-container>
-  <div sc-bar-chart [data]="salesData" [height]="250"></div>
-</div>
-```
-
-```typescript
-salesData = [
-  { label: 'Jan', value: 120 },
-  { label: 'Feb', value: 180 },
-  { label: 'Mar', value: 150 },
-];
-```
-
-### Line Chart
-
-```html
-<div sc-chart-container>
-  <div sc-line-chart [data]="data" [height]="250"></div>
-</div>
-```
-
-### Area Chart
-
-```html
-<div sc-chart-container>
-  <div sc-line-chart [data]="data" [height]="250" [showArea]="true"></div>
-</div>
-```
-
-### Pie Chart
-
-```html
-<div sc-chart-container>
-  <div sc-pie-chart [data]="data" [size]="280"></div>
-  <div sc-chart-legend [items]="legend"></div>
-</div>
-```
-
-### Donut Chart
-
-```html
-<div sc-chart-container>
-  <div sc-donut-chart [data]="data" [size]="280" [innerRadius]="70"></div>
-</div>
-```
-
-### With Custom Colors
-
-```typescript
-data = [
-  { label: 'Sales', value: 120, color: 'hsl(var(--chart-1))' },
-  { label: 'Revenue', value: 180, color: 'hsl(var(--chart-2))' },
-];
-```
-
-## Chart Colors
-
-The component uses CSS variables for colors:
-
-- `--chart-1` through `--chart-5`
-
-These integrate with the shadcn theming system.
-
-## Features
-
-- **SVG-Based**: Pure SVG rendering, no external dependencies
-- **Responsive**: Charts scale to container width
-- **Tooltips**: Built-in hover tooltips
-- **Legends**: Optional legend component
-- **Grid Lines**: Automatic grid lines with labels
-- **Theming**: Uses CSS variables for colors
-- **Interactive**: Hover states on data points
-
-## Accessibility
-
-- SVG elements include appropriate ARIA attributes
-- High contrast colors for readability
-- Interactive elements have hover states