@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/index.ts

@@ -1,106 +0,0 @@
-export * from './accordion';
-export * from './alert';
-export * from './alert-dialog';
-export * from './animated-counter';
-export * from './aspect-ratio';
-export * from './audio-player';
-export * from './avatar';
-export * from './avatar-group';
-export * from './backdrop';
-export * from './badge';
-export * from './barcode-scanner';
-export * from './breadcrumb';
-export * from './button-group';
-export * from './calendar';
-export * from './card';
-export * from './chart';
-export * from './checkbox';
-export * from './native-checkbox';
-export * from './collapsible';
-export * from './color-picker';
-export * from './combobox';
-export * from './command';
-export * from './confetti';
-export * from './context-menu';
-export * from './copy-button';
-export * from './countdown';
-export * from './data-table';
-export * from './date-picker';
-export * from './date-range-picker';
-export * from './dialog';
-export * from './diff-viewer';
-export * from './dock';
-export * from './drawer';
-export * from './emoji-picker';
-export * from './empty';
-export * from './field';
-export * from './file-upload';
-export * from './hover-card';
-export * from './image-annotator';
-export * from './image-compare';
-export * from './image-cropper';
-export * from './infinite-scroll';
-export * from './input';
-export * from './input-group';
-export * from './opt-field';
-export * from './kanban-board';
-export * from './kbd';
-export * from './label';
-export * from './lightbox';
-export * from './marquee';
-export * from './masonry-grid';
-export * from './mention-input';
-export * from './menu';
-export * from './multi-select';
-export * from './navbar';
-export * from './navigation-menu';
-export * from './notification-center';
-export * from './number-field';
-export * from './org-chart';
-export * from './pagination';
-export * from './password-field';
-export * from './pdf-viewer';
-export * from './phone-input';
-export * from './popover';
-export * from './progress';
-export * from './qr-code';
-export * from './radio-group';
-export * from './rating-field';
-export * from './resizable';
-export * from './scroll-area';
-export * from './search-input';
-export * from './select';
-export * from './separator';
-export * from './sheet';
-export * from './sidebar';
-export * from './signature-pad';
-export * from './skeleton';
-export * from './slider';
-export * from './range-slider';
-export * from './sortable-list';
-export * from './speed-dial';
-export * from './spotlight';
-export * from './stat-card';
-export * from './stepper';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './tag-input';
-export * from './textarea';
-export * from './theme-toggle';
-export * from './time-picker';
-export * from './timeline';
-export * from './timezone';
-export * from './toast';
-export * from './toggle';
-export * from './toggle-group';
-export * from './toolbar';
-export * from './tooltip';
-export * from './tour-guide';
-export * from './transfer-list';
-export * from './tree';
-export * from './video-player';
-export * from './virtual-list';
-export * from './split-button';
-export * from './spinner';
-export * from './language-switcher';

package/src/lib/components/infinite-scroll/README.md

@@ -1,134 +0,0 @@
-# Infinite Scroll
-
-Automatically load more content as the user scrolls to the bottom of a container.
-
-## Components
-
-- `ScInfiniteScroll` - Main container with scroll detection
-- `ScInfiniteScrollLoader` - Custom loading indicator slot
-- `ScInfiniteScrollEnd` - Custom end message slot
-
-## Usage
-
-```html
-<sc-infinite-scroll class="h-[400px] border rounded-lg" [loading]="loading()" [hasReachedEnd]="reachedEnd()" (loadMore)="loadMore()">
-  <div class="p-4 space-y-2">
-    @for (item of items(); track item.id) {
-    <div class="p-4 border rounded">{{ item.title }}</div>
-    }
-  </div>
-</sc-infinite-scroll>
-```
-
-## API
-
-### ScInfiniteScroll
-
-| Input           | Type      | Default                   | Description                               |
-| --------------- | --------- | ------------------------- | ----------------------------------------- |
-| `threshold`     | `number`  | `100`                     | Distance from bottom (px) to trigger load |
-| `loading`       | `boolean` | `false`                   | Whether currently loading                 |
-| `hasReachedEnd` | `boolean` | `false`                   | Whether all content is loaded             |
-| `endMessage`    | `string`  | `"No more items to load"` | Message shown at end                      |
-| `class`         | `string`  | -                         | Additional CSS classes                    |
-
-| Output     | Type   | Description                           |
-| ---------- | ------ | ------------------------------------- |
-| `loadMore` | `void` | Emitted when more content should load |
-
-### ScInfiniteScrollLoader
-
-Custom loading indicator. Place inside `ScInfiniteScroll`.
-
-```html
-<sc-infinite-scroll [loading]="loading()" (loadMore)="load()">
-  <!-- content -->
-
-  <div sc-infinite-scroll-loader class="flex items-center gap-2 py-4">
-    <div class="size-2 bg-primary rounded-full animate-bounce"></div>
-    <div class="size-2 bg-primary rounded-full animate-bounce"></div>
-    <div class="size-2 bg-primary rounded-full animate-bounce"></div>
-  </div>
-</sc-infinite-scroll>
-```
-
-### ScInfiniteScrollEnd
-
-Custom end message. Place inside `ScInfiniteScroll`.
-
-```html
-<sc-infinite-scroll [hasReachedEnd]="reachedEnd()" (loadMore)="load()">
-  <!-- content -->
-
-  <div sc-infinite-scroll-end class="py-4 text-center">You've reached the end!</div>
-</sc-infinite-scroll>
-```
-
-## Examples
-
-### Basic Usage
-
-```typescript
-@Component({
-  template: `
-    <sc-infinite-scroll class="h-[400px] border rounded-lg" [loading]="loading()" [hasReachedEnd]="reachedEnd()" (loadMore)="loadMore()">
-      <div class="p-4 space-y-2">
-        @for (item of items(); track item.id) {
-          <div class="p-4 border rounded">{{ item.title }}</div>
-        }
-      </div>
-    </sc-infinite-scroll>
-  `,
-})
-export class MyComponent {
-  readonly items = signal<Item[]>([]);
-  readonly loading = signal(false);
-  readonly reachedEnd = signal(false);
-
-  loadMore(): void {
-    if (this.loading() || this.reachedEnd()) return;
-    this.loading.set(true);
-
-    // Simulate API call
-    setTimeout(() => {
-      const newItems = this.fetchItems();
-      this.items.update((items) => [...items, ...newItems]);
-
-      if (this.items().length >= 100) {
-        this.reachedEnd.set(true);
-      }
-      this.loading.set(false);
-    }, 1000);
-  }
-}
-```
-
-### Custom Threshold
-
-Load content earlier by increasing the threshold:
-
-```html
-<sc-infinite-scroll [threshold]="200" [loading]="loading()" (loadMore)="loadMore()">
-  <!-- content -->
-</sc-infinite-scroll>
-```
-
-### Grid Layout
-
-Works with any content layout:
-
-```html
-<sc-infinite-scroll [loading]="loading()" (loadMore)="loadMore()">
-  <div class="grid grid-cols-3 gap-4 p-4">
-    @for (item of items(); track item.id) {
-    <div class="p-4 border rounded bg-muted/50">{{ item.title }}</div>
-    }
-  </div>
-</sc-infinite-scroll>
-```
-
-## Accessibility
-
-- Announces loading state to screen readers
-- Uses semantic HTML structure
-- Keyboard accessible content

package/src/lib/components/infinite-scroll/index.ts

@@ -1,4 +0,0 @@
-export { ScInfiniteScroll } from './infinite-scroll';
-export { ScInfiniteScrollLoader } from './infinite-scroll-loader';
-export { ScInfiniteScrollEnd } from './infinite-scroll-end';
-export { ScVirtualScroll } from './virtual-scroll';

package/src/lib/components/infinite-scroll/infinite-scroll-end.ts

@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: '[sc-infinite-scroll-end]',
-  host: {
-    'data-slot': 'infinite-scroll-end',
-  },
-})
-export class ScInfiniteScrollEnd {}

package/src/lib/components/infinite-scroll/infinite-scroll-loader.ts

@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: '[sc-infinite-scroll-loader]',
-  host: {
-    'data-slot': 'infinite-scroll-loader',
-  },
-})
-export class ScInfiniteScrollLoader {}

package/src/lib/components/infinite-scroll/infinite-scroll.ts

@@ -1,199 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  ElementRef,
-  inject,
-  input,
-  output,
-  ViewEncapsulation,
-  contentChild,
-  afterNextRender,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScInfiniteScrollLoader } from './infinite-scroll-loader';
-import { ScInfiniteScrollEnd } from './infinite-scroll-end';
-
-@Component({
-  selector: 'sc-infinite-scroll',
-  exportAs: 'scInfiniteScroll',
-  template: `
-    <div #container [class]="containerClass()" (scroll)="onScroll($event)">
-      <ng-content />
-
-      @if (loading()) {
-        <div [class]="loaderContainerClass()">
-          <ng-content select="[sc-infinite-scroll-loader]" />
-          @if (!hasCustomLoader()) {
-            <div class="flex items-center justify-center gap-2 py-4">
-              <svg
-                class="size-5 animate-spin text-muted-foreground"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  class="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  stroke-width="4"
-                />
-                <path
-                  class="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              <span class="text-sm text-muted-foreground">Loading more...</span>
-            </div>
-          }
-        </div>
-      }
-
-      @if (hasReachedEnd() && !loading()) {
-        <div [class]="endContainerClass()">
-          <ng-content select="[sc-infinite-scroll-end]" />
-          @if (!hasCustomEnd()) {
-            <div class="py-4 text-center text-sm text-muted-foreground">
-              {{ endMessage() }}
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `,
-  host: {
-    'data-slot': 'infinite-scroll',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScInfiniteScroll {
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly elementRef = inject(ElementRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly threshold = input<number>(100);
-  readonly disabled = input<boolean>(false);
-  readonly loading = input<boolean>(false);
-  readonly hasReachedEnd = input<boolean>(false);
-  readonly endMessage = input<string>('No more items to load');
-  readonly direction = input<'down' | 'up'>('down');
-
-  readonly loadMore = output<void>();
-
-  private readonly customLoader = contentChild(ScInfiniteScrollLoader);
-  private readonly customEnd = contentChild(ScInfiniteScrollEnd);
-
-  protected readonly hasCustomLoader = computed(() => !!this.customLoader());
-  protected readonly hasCustomEnd = computed(() => !!this.customEnd());
-
-  private observer: IntersectionObserver | null = null;
-  private sentinelEl: HTMLElement | null = null;
-
-  protected readonly containerClass = computed(() =>
-    cn('overflow-auto', this.classInput()),
-  );
-
-  protected readonly loaderContainerClass = computed(() => cn(''));
-
-  protected readonly endContainerClass = computed(() => cn(''));
-
-  constructor() {
-    afterNextRender(() => {
-      this.setupIntersectionObserver();
-
-      this.destroyRef.onDestroy(() => {
-        this.cleanup();
-      });
-    });
-  }
-
-  private setupIntersectionObserver(): void {
-    // Create sentinel element
-    this.sentinelEl = document.createElement('div');
-    this.sentinelEl.style.height = '1px';
-    this.sentinelEl.style.width = '100%';
-    this.sentinelEl.setAttribute('data-sentinel', 'true');
-
-    const container =
-      this.elementRef.nativeElement.querySelector(
-        '[data-slot="infinite-scroll"] > div',
-      ) || this.elementRef.nativeElement;
-
-    if (this.direction() === 'down') {
-      container.appendChild(this.sentinelEl);
-    } else {
-      container.prepend(this.sentinelEl);
-    }
-
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (
-          entry.isIntersecting &&
-          !this.disabled() &&
-          !this.loading() &&
-          !this.hasReachedEnd()
-        ) {
-          this.loadMore.emit();
-        }
-      },
-      {
-        root: container,
-        rootMargin: `${this.threshold()}px`,
-        threshold: 0,
-      },
-    );
-
-    this.observer.observe(this.sentinelEl);
-  }
-
-  private cleanup(): void {
-    if (this.observer) {
-      this.observer.disconnect();
-      this.observer = null;
-    }
-    if (this.sentinelEl) {
-      this.sentinelEl.remove();
-      this.sentinelEl = null;
-    }
-  }
-
-  onScroll(event: Event): void {
-    // Fallback scroll-based detection
-    const target = event.target as HTMLElement;
-    const threshold = this.threshold();
-
-    if (this.disabled() || this.loading() || this.hasReachedEnd()) return;
-
-    if (this.direction() === 'down') {
-      const scrollBottom =
-        target.scrollHeight - target.scrollTop - target.clientHeight;
-      if (scrollBottom <= threshold) {
-        this.loadMore.emit();
-      }
-    } else {
-      if (target.scrollTop <= threshold) {
-        this.loadMore.emit();
-      }
-    }
-  }
-
-  scrollToTop(): void {
-    const container = this.elementRef.nativeElement.querySelector('div');
-    if (container) {
-      container.scrollTop = 0;
-    }
-  }
-
-  scrollToBottom(): void {
-    const container = this.elementRef.nativeElement.querySelector('div');
-    if (container) {
-      container.scrollTop = container.scrollHeight;
-    }
-  }
-}

package/src/lib/components/infinite-scroll/virtual-scroll.ts

@@ -1,83 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-virtual-scroll',
-  exportAs: 'scVirtualScroll',
-  template: `
-    <div #viewport [class]="viewportClass()" (scroll)="onScroll()">
-      <div [style.height.px]="totalHeight()" [style.position]="'relative'">
-        <div [style.transform]="'translateY(' + offsetY() + 'px)'">
-          @for (item of visibleItems(); track trackByFn()(item, $index)) {
-            <div [style.height.px]="itemHeight()">
-              <ng-content />
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  `,
-  host: {
-    'data-slot': 'virtual-scroll',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVirtualScroll<T> {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly items = input<T[]>([]);
-  readonly itemHeight = input<number>(50);
-  readonly overscan = input<number>(3);
-  readonly trackByFn = input<(item: T, index: number) => unknown>((_, i) => i);
-
-  private readonly scrollTop = signal(0);
-  private viewportEl: HTMLElement | null = null;
-
-  protected readonly viewportClass = computed(() =>
-    cn('overflow-auto', this.classInput()),
-  );
-
-  protected readonly totalHeight = computed(
-    () => this.items().length * this.itemHeight(),
-  );
-
-  protected readonly visibleRange = computed(() => {
-    const viewportHeight = this.viewportEl?.clientHeight || 400;
-    const start = Math.floor(this.scrollTop() / this.itemHeight());
-    const visibleCount = Math.ceil(viewportHeight / this.itemHeight());
-    const overscan = this.overscan();
-
-    return {
-      start: Math.max(0, start - overscan),
-      end: Math.min(this.items().length, start + visibleCount + overscan),
-    };
-  });
-
-  protected readonly visibleItems = computed(() => {
-    const { start, end } = this.visibleRange();
-    return this.items().slice(start, end);
-  });
-
-  protected readonly offsetY = computed(() => {
-    return this.visibleRange().start * this.itemHeight();
-  });
-
-  onScroll(): void {
-    if (this.viewportEl) {
-      this.scrollTop.set(this.viewportEl.scrollTop);
-    }
-  }
-
-  scrollToIndex(index: number): void {
-    if (this.viewportEl) {
-      this.viewportEl.scrollTop = index * this.itemHeight();
-    }
-  }
-}

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

@@ -1,93 +0,0 @@
-# Input
-
-Displays a form input field or a component that looks like an input field.
-
-## Components
-
-- `ScInput` - Styled input directive for form fields
-
-## Usage
-
-```html
-<input sc-input type="text" placeholder="Enter text..." />
-```
-
-## With Label
-
-```html
-<div class="grid w-full max-w-sm items-center gap-1.5">
-  <label sc-label for="email">Email</label>
-  <input sc-input type="email" id="email" placeholder="Email" />
-</div>
-```
-
-## Input Types
-
-```html
-<input sc-input type="text" placeholder="Text" />
-<input sc-input type="email" placeholder="Email" />
-<input sc-input type="password" placeholder="Password" />
-<input sc-input type="number" placeholder="0" />
-<input sc-input type="date" />
-<input sc-input type="time" />
-<input sc-input type="search" placeholder="Search..." />
-```
-
-## File Input
-
-```html
-<input sc-input type="file" />
-```
-
-## Disabled
-
-```html
-<input sc-input type="text" placeholder="Disabled" disabled />
-```
-
-## With Button
-
-```html
-<div class="flex w-full max-w-sm items-center space-x-2">
-  <input sc-input type="email" placeholder="Email" />
-  <button class="...">Subscribe</button>
-</div>
-```
-
-## Inputs
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-## Styling
-
-The input applies the following styles by default:
-
-- `h-10` - Fixed height
-- `w-full` - Full width
-- `rounded-md` - Rounded corners
-- `border border-input` - Border styling
-- `bg-background` - Background color
-- `px-3 py-2` - Padding
-- `text-sm` - Small text size
-- `ring-offset-background` - Ring offset for focus
-- `placeholder:text-muted-foreground` - Muted placeholder text
-- `focus-visible:ring-2` - Focus ring
-- `disabled:cursor-not-allowed disabled:opacity-50` - Disabled state
-
-## File Input Styling
-
-File inputs have additional styling:
-
-- `file:border-0` - No border on file button
-- `file:bg-transparent` - Transparent background
-- `file:text-sm file:font-medium` - Text styling
-- `file:text-foreground` - Text color
-
-## Accessibility
-
-- Uses native `<input>` element for built-in accessibility
-- Supports all standard input attributes
-- Focus ring for keyboard navigation
-- Works with `<label>` elements via `id` attribute

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

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

package/src/lib/components/input/input.ts

@@ -1,41 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { computed, Directive, inject, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-import { cn } from '@semantic-components/ui';
-import { SC_FIELD } from '../field';
-
-@Directive({
-  selector: 'input[sc-input]',
-  host: {
-    'data-slot': 'input',
-    '[attr.id]': 'id()',
-    '[attr.aria-invalid]': 'invalid() || null',
-    '[attr.disabled]': 'disabled() || null',
-    '[class]': 'class()',
-  },
-})
-export class ScInput {
-  private readonly field = inject(SC_FIELD, { optional: true });
-  private readonly formField = inject(FormField, { optional: true });
-  private readonly fallbackId = inject(_IdGenerator).getId('sc-input-');
-
-  readonly idInput = input('', { alias: 'id' });
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly id = computed(
-    () => this.idInput() || this.field?.id() || this.fallbackId,
-  );
-
-  readonly invalid = computed(() => this.formField?.state().invalid() ?? false);
-
-  readonly disabled = computed(
-    () => this.formField?.state().disabled() ?? false,
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-      this.classInput(),
-    ),
-  );
-}