@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/data-table/data-table-pagination.ts

@@ -1,152 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  model,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_DATA_TABLE } from './data-table';
-
-@Component({
-  selector: '[sc-data-table-pagination]',
-  template: `
-    <div class="flex items-center justify-between px-2">
-      <div class="text-sm text-muted-foreground">
-        @if (showSelection()) {
-          {{ table.rowSelection().size }} of
-          {{ table.sortedData().length }} row(s) selected.
-        } @else {
-          {{ table.sortedData().length }} row(s) total.
-        }
-      </div>
-      <div class="flex items-center space-x-6 lg:space-x-8">
-        <div class="flex items-center space-x-2">
-          <p class="text-sm font-medium">Rows per page</p>
-          <select
-            class="h-8 w-[70px] rounded-md border border-input bg-background text-sm"
-            [value]="pageSize()"
-            (change)="onPageSizeChange($event)"
-          >
-            @for (size of pageSizes(); track size) {
-              <option [value]="size">{{ size }}</option>
-            }
-          </select>
-        </div>
-        <div
-          class="flex w-[100px] items-center justify-center text-sm font-medium"
-        >
-          Page {{ currentPage() }} of {{ totalPages() }}
-        </div>
-        <div class="flex items-center space-x-2">
-          <button
-            type="button"
-            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
-            [disabled]="currentPage() === 1"
-            (click)="goToPage(1)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-4"
-            >
-              <path d="m11 17-5-5 5-5" />
-              <path d="m18 17-5-5 5-5" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
-            [disabled]="currentPage() === 1"
-            (click)="goToPage(currentPage() - 1)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-4"
-            >
-              <path d="m15 18-6-6 6-6" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
-            [disabled]="currentPage() === totalPages()"
-            (click)="goToPage(currentPage() + 1)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-4"
-            >
-              <path d="m9 18 6-6-6-6" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
-            [disabled]="currentPage() === totalPages()"
-            (click)="goToPage(totalPages())"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-4"
-            >
-              <path d="m6 17 5-5-5-5" />
-              <path d="m13 17 5-5-5-5" />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  `,
-  host: {
-    'data-slot': 'data-table-pagination',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDataTablePagination {
-  readonly table = inject(SC_DATA_TABLE);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly pageSize = model<number>(10);
-  readonly currentPage = model<number>(1);
-  readonly pageSizes = input<number[]>([10, 20, 30, 40, 50]);
-  readonly showSelection = input<boolean>(true);
-
-  protected readonly class = computed(() => cn('py-4', this.classInput()));
-
-  readonly totalPages = computed(() => {
-    const total = this.table.sortedData().length;
-    const size = this.pageSize();
-    return Math.max(1, Math.ceil(total / size));
-  });
-
-  onPageSizeChange(event: Event): void {
-    const value = parseInt((event.target as HTMLSelectElement).value, 10);
-    this.pageSize.set(value);
-    this.currentPage.set(1);
-  }
-
-  goToPage(page: number): void {
-    const total = this.totalPages();
-    this.currentPage.set(Math.max(1, Math.min(page, total)));
-  }
-}

package/src/lib/components/data-table/data-table-row.ts

@@ -1,23 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-data-table-row]',
-  host: {
-    'data-slot': 'data-table-row',
-    '[class]': 'class()',
-    '[attr.data-selected]': 'selected() || null',
-  },
-})
-export class ScDataTableRow {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly selected = input<boolean>(false);
-
-  protected readonly class = computed(() =>
-    cn(
-      'border-b transition-colors hover:bg-muted/50',
-      'data-[selected]:bg-muted',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/data-table/data-table.ts

@@ -1,181 +0,0 @@
-import {
-  computed,
-  Directive,
-  InjectionToken,
-  input,
-  model,
-  output,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export type SortDirection = 'asc' | 'desc' | null;
-
-export interface ColumnDef<T> {
-  id: string;
-  header: string;
-  accessorKey?: keyof T;
-  accessorFn?: (row: T) => unknown;
-  cell?: (row: T) => string;
-  enableSorting?: boolean;
-  enableHiding?: boolean;
-  sortingFn?: (a: T, b: T, direction: SortDirection) => number;
-}
-
-export interface SortingState {
-  id: string;
-  desc: boolean;
-}
-
-export interface ColumnVisibilityState {
-  [key: string]: boolean;
-}
-
-// Token for data table context
-export const SC_DATA_TABLE = new InjectionToken<ScDataTable<unknown>>(
-  'SC_DATA_TABLE',
-);
-
-@Directive({
-  selector: '[sc-data-table]',
-  exportAs: 'scDataTable',
-  providers: [{ provide: SC_DATA_TABLE, useExisting: ScDataTable }],
-  host: {
-    'data-slot': 'data-table',
-    '[class]': 'class()',
-  },
-})
-export class ScDataTable<T> {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly data = input<T[]>([]);
-  readonly columns = input<ColumnDef<T>[]>([]);
-
-  readonly sorting = model<SortingState | null>(null);
-  readonly columnVisibility = model<ColumnVisibilityState>({});
-  readonly globalFilter = model<string>('');
-  readonly rowSelection = model<Set<number>>(new Set());
-
-  readonly sortChange = output<SortingState | null>();
-  readonly filterChange = output<string>();
-
-  protected readonly class = computed(() => cn('w-full', this.classInput()));
-
-  readonly visibleColumns = computed(() => {
-    const cols = this.columns();
-    const visibility = this.columnVisibility();
-    return cols.filter((col) => visibility[col.id] !== false);
-  });
-
-  readonly filteredData = computed(() => {
-    const data = this.data();
-    const filter = this.globalFilter().toLowerCase().trim();
-
-    if (!filter) return data;
-
-    return data.filter((row) => {
-      return this.columns().some((col) => {
-        const value = this.getCellValue(row, col);
-        return String(value).toLowerCase().includes(filter);
-      });
-    });
-  });
-
-  readonly sortedData = computed(() => {
-    const data = [...this.filteredData()];
-    const sort = this.sorting();
-
-    if (!sort) return data;
-
-    const column = this.columns().find((col) => col.id === sort.id);
-    if (!column) return data;
-
-    return data.sort((a, b) => {
-      if (column.sortingFn) {
-        return column.sortingFn(a, b, sort.desc ? 'desc' : 'asc');
-      }
-
-      const aVal = this.getCellValue(a, column);
-      const bVal = this.getCellValue(b, column);
-
-      if (aVal === bVal) return 0;
-      if (aVal === null || aVal === undefined) return 1;
-      if (bVal === null || bVal === undefined) return -1;
-
-      const comparison = aVal < bVal ? -1 : 1;
-      return sort.desc ? -comparison : comparison;
-    });
-  });
-
-  getCellValue(row: T, column: ColumnDef<T>): unknown {
-    if (column.accessorFn) {
-      return column.accessorFn(row);
-    }
-    if (column.accessorKey) {
-      return row[column.accessorKey];
-    }
-    return '';
-  }
-
-  toggleSort(columnId: string): void {
-    const column = this.columns().find((col) => col.id === columnId);
-    if (!column || column.enableSorting === false) return;
-
-    const currentSort = this.sorting();
-
-    if (!currentSort || currentSort.id !== columnId) {
-      this.sorting.set({ id: columnId, desc: false });
-    } else if (!currentSort.desc) {
-      this.sorting.set({ id: columnId, desc: true });
-    } else {
-      this.sorting.set(null);
-    }
-
-    this.sortChange.emit(this.sorting());
-  }
-
-  toggleColumnVisibility(columnId: string): void {
-    const current = this.columnVisibility();
-    const isVisible = current[columnId] !== false;
-    this.columnVisibility.set({ ...current, [columnId]: !isVisible });
-  }
-
-  setColumnVisibility(columnId: string, visible: boolean): void {
-    const current = this.columnVisibility();
-    this.columnVisibility.set({ ...current, [columnId]: visible });
-  }
-
-  toggleRowSelection(index: number): void {
-    const selection = new Set(this.rowSelection());
-    if (selection.has(index)) {
-      selection.delete(index);
-    } else {
-      selection.add(index);
-    }
-    this.rowSelection.set(selection);
-  }
-
-  toggleAllRowSelection(): void {
-    const data = this.sortedData();
-    const selection = this.rowSelection();
-
-    if (selection.size === data.length) {
-      this.rowSelection.set(new Set());
-    } else {
-      this.rowSelection.set(new Set(data.map((_, i) => i)));
-    }
-  }
-
-  isRowSelected(index: number): boolean {
-    return this.rowSelection().has(index);
-  }
-
-  isAllRowsSelected(): boolean {
-    const data = this.sortedData();
-    return data.length > 0 && this.rowSelection().size === data.length;
-  }
-
-  isSomeRowsSelected(): boolean {
-    const selection = this.rowSelection();
-    const data = this.sortedData();
-    return selection.size > 0 && selection.size < data.length;
-  }
-}

package/src/lib/components/data-table/index.ts

@@ -1,15 +0,0 @@
-export { SC_DATA_TABLE, ScDataTable } from './data-table';
-export type {
-  SortDirection,
-  ColumnDef,
-  SortingState,
-  ColumnVisibilityState,
-} from './data-table';
-export { ScDataTableHeader } from './data-table-header';
-export { ScDataTableBody } from './data-table-body';
-export { ScDataTableRow } from './data-table-row';
-export { ScDataTableHead } from './data-table-head';
-export { ScDataTableCell } from './data-table-cell';
-export { ScDataTableFilter } from './data-table-filter';
-export { ScDataTableColumnToggle } from './data-table-column-toggle';
-export { ScDataTablePagination } from './data-table-pagination';

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

@@ -1,101 +0,0 @@
-# Date Picker
-
-A date picker component with calendar popup for selecting dates.
-
-## Usage
-
-```html
-<sc-date-picker [(selected)]="date" />
-```
-
-## Component
-
-### ScDatePicker
-
-Date picker combining a trigger button with a calendar popover.
-
-**Selector:** `sc-date-picker`
-
-**Inputs:**
-
-| Input         | Type                               | Default         | Description               |
-| ------------- | ---------------------------------- | --------------- | ------------------------- |
-| `mode`        | `'single' \| 'multiple'\| 'range'` | `'single'`      | Selection mode            |
-| `placeholder` | `string`                           | `'Pick a date'` | Placeholder text          |
-| `disabled`    | `Date[]`                           | `[]`            | Array of dates to disable |
-| `minDate`     | `Date \| undefined`                | `undefined`     | Minimum selectable date   |
-| `maxDate`     | `Date \| undefined`                | `undefined`     | Maximum selectable date   |
-| `side`        | `PopoverSide`                      | `'bottom'`      | Popover position side     |
-| `align`       | `PopoverAlign`                     | `'start'`       | Popover alignment         |
-| `class`       | `string`                           | `''`            | Additional CSS classes    |
-
-**Two-way Bindings:**
-
-| Binding         | Type                | Description                    |
-| --------------- | ------------------- | ------------------------------ |
-| `selected`      | `Date \| undefined` | Selected date (single mode)    |
-| `selectedDates` | `Date[]`            | Selected dates (multiple mode) |
-| `selectedRange` | `DateRange`         | Selected range (range mode)    |
-| `open`          | `boolean`           | Popover open state             |
-
-## Examples
-
-### Default
-
-```html
-<sc-date-picker [(selected)]="date" />
-```
-
-### With Custom Placeholder
-
-```html
-<sc-date-picker [(selected)]="date" placeholder="Select your birthday" />
-```
-
-### Date Range Picker
-
-```html
-<sc-date-picker mode="range" [(selectedRange)]="range" placeholder="Pick a date range" />
-```
-
-### Multiple Dates
-
-```html
-<sc-date-picker mode="multiple" [(selectedDates)]="dates" placeholder="Select dates" />
-```
-
-### With Date Constraints
-
-```typescript
-minDate = new Date(); // Today
-maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // 30 days from now
-```
-
-```html
-<sc-date-picker [(selected)]="date" [minDate]="minDate" [maxDate]="maxDate" />
-```
-
-### Form Example
-
-```html
-<div class="space-y-2">
-  <label class="text-sm font-medium">Date of Birth</label>
-  <sc-date-picker [(selected)]="dob" placeholder="Select date of birth" [maxDate]="today" />
-</div>
-```
-
-## Features
-
-- **Popover Integration**: Uses the Popover component for dropdown
-- **Calendar Integration**: Uses the Calendar component for date selection
-- **Auto-close**: Closes on date selection (single/range complete)
-- **Display Format**: Shows selected date(s) in the trigger button
-- **Selection Modes**: Single, multiple, and range selection
-- **Date Constraints**: Min/max dates and disabled dates
-
-## Accessibility
-
-- Inherits accessibility features from Popover and Calendar
-- Keyboard navigation within calendar
-- Focus management between trigger and calendar
-- `aria-haspopup` and `aria-expanded` on trigger button

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

@@ -1,175 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import {
-  ScPopoverProvider,
-  ScPopoverPortal,
-  ScPopover,
-  ScPopoverTrigger,
-  PopoverAlign,
-  PopoverSide,
-} from '../popover';
-import { ScCalendar, CalendarMode, DateRange } from '../calendar';
-
-@Component({
-  selector: 'sc-date-picker',
-  imports: [
-    ScPopoverProvider,
-    ScPopoverTrigger,
-    ScPopoverPortal,
-    ScPopover,
-    ScCalendar,
-  ],
-  template: `
-    <div sc-popover-provider [(open)]="open" [side]="side()" [align]="align()">
-      <button sc-popover-trigger type="button" [class]="triggerClass()">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="mr-2 size-4"
-        >
-          <path d="M8 2v4" />
-          <path d="M16 2v4" />
-          <rect width="18" height="18" x="3" y="4" rx="2" />
-          <path d="M3 10h18" />
-        </svg>
-        <span [class]="displayText() ? '' : 'text-muted-foreground'">
-          {{ displayText() || placeholder() }}
-        </span>
-      </button>
-      <div sc-popover-portal>
-        <div sc-popover class="w-auto p-0">
-          @switch (mode()) {
-            @case ('single') {
-              <sc-calendar
-                mode="single"
-                [(selected)]="selected"
-                [disabled]="disabled()"
-                [minDate]="minDate()"
-                [maxDate]="maxDate()"
-                (selected)="onDateSelected()"
-              />
-            }
-            @case ('multiple') {
-              <sc-calendar
-                mode="multiple"
-                [(selectedDates)]="selectedDates"
-                [disabled]="disabled()"
-                [minDate]="minDate()"
-                [maxDate]="maxDate()"
-              />
-            }
-            @case ('range') {
-              <sc-calendar
-                mode="range"
-                [(selectedRange)]="selectedRange"
-                [disabled]="disabled()"
-                [minDate]="minDate()"
-                [maxDate]="maxDate()"
-                (selectedRange)="onRangeSelected()"
-              />
-            }
-          }
-        </div>
-      </div>
-    </div>
-  `,
-  host: {
-    'data-slot': 'date-picker',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDatePicker {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly mode = input<CalendarMode>('single');
-  readonly placeholder = input<string>('Pick a date');
-  readonly disabled = input<Date[]>([]);
-  readonly minDate = input<Date | undefined>(undefined);
-  readonly maxDate = input<Date | undefined>(undefined);
-  readonly side = input<PopoverSide>('bottom');
-  readonly align = input<PopoverAlign>('start');
-
-  // 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 open = model<boolean>(false);
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  protected readonly triggerClass = computed(() =>
-    cn(
-      'flex h-10 w-[280px] items-center justify-start rounded-md border border-input bg-background px-3 py-2 text-sm',
-      'ring-offset-background placeholder:text-muted-foreground',
-      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      '[&>span]:line-clamp-1',
-    ),
-  );
-
-  protected readonly displayText = computed(() => {
-    const mode = this.mode();
-
-    if (mode === 'single') {
-      const date = this.selected();
-      return date ? this.formatDate(date) : '';
-    }
-
-    if (mode === 'multiple') {
-      const dates = this.selectedDates();
-      if (dates.length === 0) return '';
-      if (dates.length === 1) return this.formatDate(dates[0]);
-      return `${dates.length} dates selected`;
-    }
-
-    if (mode === 'range') {
-      const range = this.selectedRange();
-      if (!range.from) return '';
-      if (!range.to) return this.formatDate(range.from);
-      return `${this.formatDate(range.from)} - ${this.formatDate(range.to)}`;
-    }
-
-    return '';
-  });
-
-  private formatDate(date: Date): string {
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  }
-
-  protected onDateSelected(): void {
-    // Close popover after single date selection
-    if (this.mode() === 'single' && this.selected()) {
-      this.open.set(false);
-    }
-  }
-
-  protected onRangeSelected(): void {
-    // Close popover after range is complete
-    const range = this.selectedRange();
-    if (range.from && range.to) {
-      this.open.set(false);
-    }
-  }
-}

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

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