@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/index.ts

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

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

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

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

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

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

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

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

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

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

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