@shadng/sng-ui 1.0.0

package/src/lib/file-input/sng-file-input.ts

@@ -0,0 +1,288 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  model,
+  signal,
+  computed,
+  viewChild,
+  ElementRef,
+  booleanAttribute,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * File input component with button and dropzone modes.
+ *
+ * @example
+ * ```html
+ * <sng-file-input [(files)]="selectedFiles" />
+ * <sng-file-input dropzone multiple accept="image/*" />
+ * ```
+ */
+@Component({
+  selector: 'sng-file-input',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+  template: `
+    <input
+      #fileInputRef
+      type="file"
+      class="sr-only"
+      [accept]="accept()"
+      [multiple]="multiple()"
+      [disabled]="disabled()"
+      (change)="onFileChange($event)"
+    />
+
+    @if (dropzone()) {
+      <!-- Dropzone mode -->
+      <div
+        [class]="dropzoneClasses()"
+        tabindex="0"
+        role="button"
+        [attr.aria-label]="'Upload files' + (accept() ? ', accepts: ' + accept() : '')"
+        (click)="openFilePicker()"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <svg
+          class="h-10 w-10 text-muted-foreground"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        <div class="text-center">
+          <p class="text-sm font-medium text-foreground">
+            Drag & drop files here
+          </p>
+          <p class="text-xs text-muted-foreground">
+            or click to browse
+          </p>
+        </div>
+        @if (accept()) {
+          <p class="text-xs text-muted-foreground">
+            Accepted: {{ accept() }}
+          </p>
+        }
+      </div>
+    } @else {
+      <!-- Button mode -->
+      <div [class]="buttonModeClasses()">
+        <button
+          type="button"
+          class="h-full rounded-l-md border-r border-border bg-muted px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted/80"
+          [disabled]="disabled()"
+          (click)="openFilePicker()"
+        >
+          Choose File
+        </button>
+        <span class="flex-1 truncate px-3 text-muted-foreground">
+          {{ fileNameDisplay() }}
+        </span>
+      </div>
+    }
+
+    <!-- Selected files list -->
+    @if (files().length > 0 && showFileList()) {
+      <div class="mt-2 space-y-1">
+        @for (file of files(); track file.name) {
+          <div
+            class="flex items-center justify-between rounded-md border border-border bg-muted/50 px-3 py-1.5 text-sm"
+          >
+            <span class="truncate text-foreground">{{ file.name }}</span>
+            <button
+              type="button"
+              class="ml-2 text-muted-foreground transition-colors hover:text-foreground"
+              [disabled]="disabled()"
+              (click)="removeFile(file)"
+            >
+              <svg
+                class="h-4 w-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `,
+})
+export class SngFileInput {
+  private fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInputRef');
+
+  /** Whether the input is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  /** Whether to show dropzone mode. */
+  dropzone = input(false, { transform: booleanAttribute });
+
+  /** Whether multiple files can be selected. */
+  multiple = input(false, { transform: booleanAttribute });
+
+  /** Accepted file types (e.g., '.jpg,.png' or 'image/*'). */
+  accept = input<string>('');
+
+  /** Whether to show the file list below the input. */
+  showFileList = input(true, { transform: booleanAttribute });
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Selected files. Supports two-way binding via [(files)]. */
+  files = model<File[]>([]);
+
+  /** @internal */
+  _isDragging = signal(false);
+
+  /** @internal */
+  hostClasses = computed(() => cn('block w-full', this.class()));
+
+  /** @internal */
+  dropzoneClasses = computed(() =>
+    cn(
+      'flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 transition-colors',
+      this._isDragging() ? 'border-primary bg-muted/50' : 'border-muted-foreground/25',
+      this.disabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+    )
+  );
+
+  /** @internal */
+  buttonModeClasses = computed(() =>
+    cn(
+      'flex h-9 items-center rounded-md border border-border bg-background text-sm shadow-sm transition-colors',
+      this.disabled() ? 'cursor-not-allowed opacity-50' : ''
+    )
+  );
+
+  /** @internal */
+  fileNameDisplay = computed(() => {
+    const fileList = this.files();
+    if (fileList.length === 0) return 'No file chosen';
+    if (fileList.length === 1) return fileList[0].name;
+    return `${fileList.length} files selected`;
+  });
+
+  /** Open the native file picker dialog. */
+  openFilePicker(): void {
+    if (this.disabled()) return;
+    this.fileInputRef()?.nativeElement.click();
+  }
+
+  /** @internal */
+  onFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files) {
+      const newFiles = Array.from(input.files);
+      this.files.set(newFiles);
+    }
+  }
+
+  /** @internal */
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!this.disabled()) {
+      this._isDragging.set(true);
+    }
+  }
+
+  /** @internal */
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this._isDragging.set(false);
+  }
+
+  /** @internal */
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this._isDragging.set(false);
+
+    if (this.disabled()) return;
+
+    const droppedFiles = event.dataTransfer?.files;
+    if (droppedFiles && droppedFiles.length > 0) {
+      let newFiles = Array.from(droppedFiles);
+
+      // Filter by accept if specified
+      const acceptAttr = this.accept();
+      if (acceptAttr) {
+        newFiles = this.filterFilesByAccept(newFiles, acceptAttr);
+      }
+
+      // Handle multiple vs single
+      if (!this.multiple() && newFiles.length > 1) {
+        newFiles = [newFiles[0]];
+      }
+
+      this.files.set(newFiles);
+    }
+  }
+
+  /** Remove a specific file from the selection. */
+  removeFile(fileToRemove: File): void {
+    if (this.disabled()) return;
+    const updatedFiles = this.files().filter(f => f !== fileToRemove);
+    this.files.set(updatedFiles);
+
+    // Clear the native input
+    const inputEl = this.fileInputRef()?.nativeElement;
+    if (inputEl) {
+      inputEl.value = '';
+    }
+  }
+
+  /** Clear all selected files. */
+  clearFiles(): void {
+    this.files.set([]);
+    const inputEl = this.fileInputRef()?.nativeElement;
+    if (inputEl) {
+      inputEl.value = '';
+    }
+  }
+
+  private filterFilesByAccept(files: File[], accept: string): File[] {
+    const acceptTypes = accept.split(',').map(t => t.trim().toLowerCase());
+    return files.filter(file => {
+      const fileName = file.name.toLowerCase();
+      const fileType = file.type.toLowerCase();
+
+      return acceptTypes.some(acceptType => {
+        if (acceptType.startsWith('.')) {
+          // Extension match (e.g., .jpg, .png)
+          return fileName.endsWith(acceptType);
+        } else if (acceptType.endsWith('/*')) {
+          // MIME type wildcard (e.g., image/*)
+          const category = acceptType.slice(0, -2);
+          return fileType.startsWith(category);
+        } else {
+          // Exact MIME type match
+          return fileType === acceptType;
+        }
+      });
+    });
+  }
+}

package/src/lib/hover-card/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/hover-card/index.ts

@@ -0,0 +1,3 @@
+export * from './sng-hover-card';
+export * from './sng-hover-card-trigger';
+export * from './sng-hover-card-content';

package/src/lib/hover-card/sng-hover-card-content.ts

@@ -0,0 +1,100 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  viewChild,
+  input,
+  computed,
+} from '@angular/core';
+import type { SngHoverCard } from './sng-hover-card';
+import { cn } from './cn';
+
+/**
+ * Component that renders the hover card content panel.
+ * Must be used inside a SngHoverCard container.
+ *
+ * @example
+ * ```html
+ * <sng-hover-card>
+ *   <sng-hover-card-trigger href="#">@user</sng-hover-card-trigger>
+ *   <sng-hover-card-content class="w-80">
+ *     <div class="flex gap-4">
+ *       <img src="avatar.jpg" alt="Avatar" />
+ *       <div>
+ *         <h4>User Name</h4>
+ *         <p>User bio here</p>
+ *       </div>
+ *     </div>
+ *   </sng-hover-card-content>
+ * </sng-hover-card>
+ * ```
+ */
+@Component({
+  selector: 'sng-hover-card-content',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  styles: [`
+    .sng-hover-card-content[data-state=open][data-side=bottom] { animation: sng-hover-card-enter-bottom 150ms ease both; }
+    .sng-hover-card-content[data-state=open][data-side=top] { animation: sng-hover-card-enter-top 150ms ease both; }
+    .sng-hover-card-content[data-state=open][data-side=left] { animation: sng-hover-card-enter-left 150ms ease both; }
+    .sng-hover-card-content[data-state=open][data-side=right] { animation: sng-hover-card-enter-right 150ms ease both; }
+    .sng-hover-card-content[data-state=closed] { animation: sng-hover-card-exit 150ms ease both; }
+    @keyframes sng-hover-card-enter-bottom { from { opacity: 0; transform: scale(0.95) translateY(-0.5rem); } }
+    @keyframes sng-hover-card-enter-top { from { opacity: 0; transform: scale(0.95) translateY(0.5rem); } }
+    @keyframes sng-hover-card-enter-left { from { opacity: 0; transform: scale(0.95) translateX(0.5rem); } }
+    @keyframes sng-hover-card-enter-right { from { opacity: 0; transform: scale(0.95) translateX(-0.5rem); } }
+    @keyframes sng-hover-card-exit { to { opacity: 0; transform: scale(0.95); } }
+  `],
+  host: {},
+  template: `
+    <ng-template #content>
+      <div
+        class="sng-hover-card-content"
+        [class]="hostClasses()"
+        data-state="open"
+        [attr.data-side]="dataSide()"
+        (mouseenter)="onMouseEnter()"
+        (mouseleave)="onMouseLeave()"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+})
+export class SngHoverCardContent {
+  /**
+   * Custom CSS classes for the hover card content panel.
+   */
+  class = input<string>('');
+
+  // Assigned by parent
+  hoverCard: SngHoverCard | null = null;
+
+  private contentTemplate = viewChild.required<TemplateRef<unknown>>('content');
+  viewContainerRef = inject(ViewContainerRef);
+
+  dataSide = computed(() => this.hoverCard?.side() ?? 'bottom');
+
+  hostClasses = computed(() =>
+    cn(
+      'z-50 w-64 rounded-md border border-border bg-popover text-popover-foreground p-4 shadow-md outline-none',
+      this.class()
+    )
+  );
+
+  get templateRef(): TemplateRef<unknown> {
+    return this.contentTemplate();
+  }
+
+  onMouseEnter() {
+    this.hoverCard?.onContentEnter();
+  }
+
+  onMouseLeave() {
+    this.hoverCard?.onContentLeave();
+  }
+}

package/src/lib/hover-card/sng-hover-card-trigger.ts

@@ -0,0 +1,43 @@
+import {
+  Directive,
+  ElementRef,
+  inject,
+} from '@angular/core';
+import type { SngHoverCard } from './sng-hover-card';
+
+/**
+ * Directive that marks an element as the trigger for a hover card.
+ * Opens the hover card on mouse enter and closes on mouse leave.
+ *
+ * @example
+ * ```html
+ * <sng-hover-card>
+ *   <sng-hover-card-trigger href="#">Hover over me</sng-hover-card-trigger>
+ *   <sng-hover-card-content>Content</sng-hover-card-content>
+ * </sng-hover-card>
+ * ```
+ */
+@Directive({
+  selector: 'sng-hover-card-trigger',
+  standalone: true,
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+  },
+})
+export class SngHoverCardTrigger {
+  private elementRef = inject(ElementRef);
+  private hoverCard: SngHoverCard | null = null;
+
+  registerHoverCard(hoverCard: SngHoverCard) {
+    this.hoverCard = hoverCard;
+  }
+
+  onMouseEnter() {
+    this.hoverCard?.onTriggerEnter(this.elementRef);
+  }
+
+  onMouseLeave() {
+    this.hoverCard?.onTriggerLeave();
+  }
+}

package/src/lib/hover-card/sng-hover-card.ts

@@ -0,0 +1,246 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  contentChild,
+  ElementRef,
+  inject,
+  OnDestroy,
+  AfterContentInit,
+  signal,
+  WritableSignal,
+} from '@angular/core';
+import { Overlay, OverlayPositionBuilder, OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription, timer } from 'rxjs';
+import { SngHoverCardTrigger } from './sng-hover-card-trigger';
+import { SngHoverCardContent } from './sng-hover-card-content';
+import { cn } from './cn';
+
+type OverlaySide = 'top' | 'bottom' | 'left' | 'right';
+
+function getOverlayPosition(side: OverlaySide, offset = 4): ConnectedPosition {
+  const positions: Record<OverlaySide, ConnectedPosition> = {
+    top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
+    bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
+    left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
+    right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
+  };
+  return positions[side];
+}
+
+class OverlayLifecycle {
+  private _overlayRef: OverlayRef | null = null;
+  private _subscriptions = new Subscription();
+  private _closing = false;
+  readonly isOpen: WritableSignal<boolean> = signal(false);
+
+  attach(overlayRef: OverlayRef): void {
+    this._overlayRef = overlayRef;
+    this.isOpen.set(true);
+  }
+
+  addSubscription(subscription: Subscription): void { this._subscriptions.add(subscription); }
+  hasOverlay(): boolean { return this._overlayRef !== null; }
+
+  /**
+   * Closes the overlay with a CSS exit animation, then disposes.
+   * Sets data-state="closed" on overlay elements and waits for all CSS
+   * animations to finish (via Web Animations API) before removing the overlay.
+   */
+  close(): void {
+    if (!this._overlayRef || this._closing) return;
+    this._closing = true;
+    this.isOpen.set(false);
+
+    const panel = this._overlayRef.overlayElement;
+    panel.querySelectorAll('[data-state]').forEach(el =>
+      el.setAttribute('data-state', 'closed')
+    );
+
+    const animations = panel.getAnimations({ subtree: true });
+    if (animations.length > 0) {
+      Promise.allSettled(animations.map(animation => animation.finished)).finally(() => this.dispose());
+    } else {
+      this.dispose();
+    }
+  }
+
+  dispose(): void {
+    this._closing = false;
+    this._subscriptions.unsubscribe();
+    this._subscriptions = new Subscription();
+    if (this._overlayRef) { this._overlayRef.detach(); this._overlayRef.dispose(); this._overlayRef = null; }
+    this.isOpen.set(false);
+  }
+
+  destroy(): void { this.dispose(); }
+}
+
+export type HoverCardSide = OverlaySide;
+
+/**
+ * Container component for hover card functionality.
+ * Displays a content panel on hover with configurable delays.
+ * Uses CDK Overlay for positioning.
+ *
+ * @example
+ * ```html
+ * <sng-hover-card [openDelay]="300" [closeDelay]="200">
+ *   <sng-hover-card-trigger href="#">@username</sng-hover-card-trigger>
+ *   <sng-hover-card-content>
+ *     <p>User profile preview</p>
+ *   </sng-hover-card-content>
+ * </sng-hover-card>
+ * ```
+ */
+@Component({
+  selector: 'sng-hover-card',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+  template: `<ng-content />`,
+})
+export class SngHoverCard implements AfterContentInit, OnDestroy {
+  /**
+   * Custom CSS classes for the hover card container.
+   */
+  class = input<string>('');
+
+  /**
+   * Position of the hover card relative to the trigger element.
+   */
+  side = input<HoverCardSide>('bottom');
+
+  /**
+   * Delay in milliseconds before opening the hover card.
+   */
+  openDelay = input<number>(200);
+
+  /**
+   * Delay in milliseconds before closing the hover card.
+   */
+  closeDelay = input<number>(300);
+
+  private overlay = inject(Overlay);
+  private overlayPositionBuilder = inject(OverlayPositionBuilder);
+  private lifecycle = new OverlayLifecycle();
+  private openTimerSubscription: Subscription | null = null;
+  private closeTimerSubscription: Subscription | null = null;
+
+  trigger = contentChild(SngHoverCardTrigger);
+  content = contentChild(SngHoverCardContent);
+
+  isOpen = this.lifecycle.isOpen;
+
+  hostClasses = computed(() => cn('inline-block', this.class()));
+
+  ngAfterContentInit() {
+    const triggerDirective = this.trigger();
+    if (triggerDirective) {
+      triggerDirective.registerHoverCard(this);
+    }
+  }
+
+  onTriggerEnter(triggerElement: ElementRef) {
+    this.clearCloseTimeout();
+    if (this.isOpen()) return;
+    const delay = Math.max(0, this.openDelay());
+    if (delay === 0) {
+      this.show(triggerElement);
+      return;
+    }
+    this.openTimerSubscription = timer(delay).subscribe(() => {
+      this.openTimerSubscription = null;
+      this.show(triggerElement);
+    });
+  }
+
+  onTriggerLeave() {
+    this.clearOpenTimeout();
+    this.scheduleClose();
+  }
+
+  onContentEnter() {
+    this.clearCloseTimeout();
+  }
+
+  onContentLeave() {
+    this.scheduleClose();
+  }
+
+  private scheduleClose() {
+    const delay = Math.max(0, this.closeDelay());
+    if (delay === 0) {
+      this.hide();
+      return;
+    }
+    this.closeTimerSubscription = timer(delay).subscribe(() => {
+      this.closeTimerSubscription = null;
+      this.hide();
+    });
+  }
+
+  private clearOpenTimeout() {
+    this.openTimerSubscription?.unsubscribe();
+    this.openTimerSubscription = null;
+  }
+
+  private clearCloseTimeout() {
+    this.closeTimerSubscription?.unsubscribe();
+    this.closeTimerSubscription = null;
+  }
+
+  private show(triggerElement: ElementRef) {
+    if (this.lifecycle.hasOverlay()) return;
+
+    const primary = this.side();
+    const fallbackMap: Record<OverlaySide, OverlaySide> = {
+      bottom: 'top', top: 'bottom', left: 'right', right: 'left',
+    };
+    const positionStrategy = this.overlayPositionBuilder
+      .flexibleConnectedTo(triggerElement)
+      .withPositions([
+        getOverlayPosition(primary),
+        getOverlayPosition(fallbackMap[primary]),
+      ])
+      .withPush(true)
+      .withViewportMargin(8);
+
+    const overlayRef = this.overlay.create({
+      positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.close(),
+    });
+
+    const contentComponent = this.content();
+    if (contentComponent) {
+      contentComponent.hoverCard = this;
+      const portal = new TemplatePortal(
+        contentComponent.templateRef,
+        contentComponent.viewContainerRef
+      );
+      overlayRef.attach(portal);
+    }
+
+    this.lifecycle.attach(overlayRef);
+    this.lifecycle.addSubscription(
+      overlayRef.detachments().subscribe(() => this.lifecycle.dispose())
+    );
+  }
+
+  hide() {
+    if (!this.lifecycle.hasOverlay()) return;
+    this.lifecycle.close();
+  }
+
+  ngOnDestroy() {
+    this.clearOpenTimeout();
+    this.clearCloseTimeout();
+    this.lifecycle.destroy();
+  }
+}

package/src/lib/input/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/input/index.ts

@@ -0,0 +1 @@
+export { SngInput, type SngInputType } from './sng-input';