@shadng/sng-ui 1.0.0

package/src/lib/drawer/sng-drawer-content.ts

@@ -0,0 +1,135 @@
+import {
+  Component,
+  input,
+  computed,
+  inject,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  AfterViewInit,
+} from '@angular/core';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { SNG_DRAWER_INSTANCE, SNG_DRAWER_CLOSE, SngDrawerSide } from './sng-drawer';
+import { cn } from './cn';
+
+/**
+ * Container for the drawer panel content.
+ * Uses CDK focus trap for accessibility and supports slide animations.
+ *
+ * @example
+ * ```html
+ * <ng-template #content>
+ *   <sng-drawer-content>
+ *     <sng-drawer-handle></sng-drawer-handle>
+ *     <sng-drawer-header>
+ *       <sng-drawer-title>Settings</sng-drawer-title>
+ *     </sng-drawer-header>
+ *     <div class="p-4">Drawer content</div>
+ *   </sng-drawer-content>
+ * </ng-template>
+ * ```
+ */
+@Component({
+  selector: 'sng-drawer-content',
+  standalone: true,
+  imports: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  hostDirectives: [CdkTrapFocus],
+  host: {
+    role: 'dialog',
+    'aria-modal': 'true',
+  },
+  styles: [`
+    sng-drawer-content {
+      display: contents;
+    }
+    /* Overlay fade */
+    .sng-drawer-overlay[data-state=open] { animation: sng-drawer-fade-in var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-overlay[data-state=closed] { animation: sng-drawer-fade-out var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    @keyframes sng-drawer-fade-in { from { opacity: 0; } }
+    @keyframes sng-drawer-fade-out { to { opacity: 0; } }
+    /* Content slide per side */
+    .sng-drawer-panel[data-state=open][data-side=top] { animation: sng-drawer-in-top var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=closed][data-side=top] { animation: sng-drawer-out-top var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=open][data-side=bottom] { animation: sng-drawer-in-bottom var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=closed][data-side=bottom] { animation: sng-drawer-out-bottom var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=open][data-side=left] { animation: sng-drawer-in-left var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=closed][data-side=left] { animation: sng-drawer-out-left var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=open][data-side=right] { animation: sng-drawer-in-right var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    .sng-drawer-panel[data-state=closed][data-side=right] { animation: sng-drawer-out-right var(--sng-drawer-duration, 300ms) var(--sng-drawer-ease, ease) both; }
+    @keyframes sng-drawer-in-top { from { transform: translateY(-100%); } }
+    @keyframes sng-drawer-out-top { to { transform: translateY(-100%); } }
+    @keyframes sng-drawer-in-bottom { from { transform: translateY(100%); } }
+    @keyframes sng-drawer-out-bottom { to { transform: translateY(100%); } }
+    @keyframes sng-drawer-in-left { from { transform: translateX(-100%); } }
+    @keyframes sng-drawer-out-left { to { transform: translateX(-100%); } }
+    @keyframes sng-drawer-in-right { from { transform: translateX(100%); } }
+    @keyframes sng-drawer-out-right { to { transform: translateX(100%); } }
+  `],
+  template: `
+    <!-- Backdrop overlay (decorative) -->
+    <div
+      aria-hidden="true"
+      [class]="overlayClasses()"
+      [attr.data-state]="state()"
+      (click)="onOverlayClick()"
+    ></div>
+
+    <!-- Drawer content panel -->
+    <div
+      [class]="contentClasses()"
+      [attr.data-state]="state()"
+      [attr.data-side]="side()"
+      role="document"
+    >
+      <ng-content />
+    </div>
+  `,
+})
+export class SngDrawerContent implements AfterViewInit {
+  private drawer = inject(SNG_DRAWER_INSTANCE, { optional: true });
+  private closeFn = inject(SNG_DRAWER_CLOSE, { optional: true });
+  private focusTrap = inject(CdkTrapFocus);
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  ngAfterViewInit(): void {
+    // Auto-focus the first tabbable element
+    this.focusTrap.focusTrap.focusInitialElementWhenReady();
+  }
+
+  /** @internal Side for data-side attribute binding */
+  side = computed(() => this.drawer?.side() ?? 'bottom');
+  private isModal = computed(() => this.drawer?.modal() ?? false);
+  state = computed(() => this.drawer?.isOpen() ? 'open' : 'closed');
+
+  onOverlayClick(): void {
+    this.closeFn?.();
+  }
+
+  overlayClasses = computed(() =>
+    cn(
+      'fixed inset-0 z-50 sng-drawer-overlay',
+      // Modal mode uses darker backdrop like Sheet, regular drawer uses light backdrop
+      this.isModal() ? 'bg-black/50' : 'bg-black/8',
+    )
+  );
+
+  // Side-specific positioning (layout only, animations handled by CSS keyframes)
+  // Note: No max-w constraint so user can override with custom width via class input
+  private sideClasses: Record<SngDrawerSide, string> = {
+    top: 'inset-x-0 top-0 max-h-[80vh] rounded-b-lg border-b',
+    bottom: 'inset-x-0 bottom-0 max-h-[80vh] rounded-t-lg border-t',
+    left: 'inset-y-0 left-0 h-full w-full sm:w-3/4 border-r',
+    right: 'inset-y-0 right-0 h-full w-full sm:w-3/4 border-l',
+  };
+
+  contentClasses = computed(() =>
+    cn(
+      'fixed z-50 flex flex-col bg-background shadow-lg sng-drawer-panel',
+      this.sideClasses[this.side()],
+      this.class()
+    )
+  );
+}

package/src/lib/drawer/sng-drawer-description.ts

@@ -0,0 +1,29 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Description text for the drawer header.
+ * Renders as muted, smaller text below the title.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-description>
+ *   Set your daily activity goal to track your progress.
+ * </sng-drawer-description>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-description',
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngDrawerDescription {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}

package/src/lib/drawer/sng-drawer-footer.ts

@@ -0,0 +1,34 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Footer section for the drawer, typically containing action buttons.
+ * Positioned at the bottom with auto margin.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-footer>
+ *   <sng-drawer-close>
+ *     <sng-button class="border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground">Cancel</sng-button>
+ *   </sng-drawer-close>
+ *   <sng-drawer-close>
+ *     <sng-button class="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90">Submit</sng-button>
+ *   </sng-drawer-close>
+ * </sng-drawer-footer>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-footer',
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngDrawerFooter {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('mt-auto flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-center', this.class())
+  );
+}

package/src/lib/drawer/sng-drawer-handle.ts

@@ -0,0 +1,30 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Visual drag handle indicator for the drawer.
+ * Typically placed at the top of drawer content to indicate drag capability.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-content>
+ *   <sng-drawer-handle></sng-drawer-handle>
+ *   <sng-drawer-header>...</sng-drawer-header>
+ * </sng-drawer-content>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-handle',
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngDrawerHandle {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('bg-muted mx-auto mt-4 h-2 w-[100px] shrink-0 rounded-full', this.class())
+  );
+}

package/src/lib/drawer/sng-drawer-header.ts

@@ -0,0 +1,30 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Header section for the drawer containing title and description.
+ * Centers text on mobile and aligns left on larger screens.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-header>
+ *   <sng-drawer-title>Move Goal</sng-drawer-title>
+ *   <sng-drawer-description>Set your daily activity goal.</sng-drawer-description>
+ * </sng-drawer-header>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-header',
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngDrawerHeader {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('flex flex-col gap-1.5 p-4 text-center sm:text-left', this.class())
+  );
+}

package/src/lib/drawer/sng-drawer-title.ts

@@ -0,0 +1,27 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Title element for the drawer header.
+ * Renders as a semibold text element.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-title>Settings</sng-drawer-title>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-title',
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngDrawerTitle {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('text-foreground font-semibold', this.class())
+  );
+}

package/src/lib/drawer/sng-drawer-trigger.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Marker directive for drawer trigger elements.
+ * Apply to buttons or other interactive elements that open the drawer.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-trigger (click)="drawer.open(content)">
+ *   Open Drawer
+ * </sng-drawer-trigger>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-trigger',
+  standalone: true,
+  host: {
+    'class': 'contents',
+  },
+})
+export class SngDrawerTrigger {}

package/src/lib/drawer/sng-drawer-wrapper.ts

@@ -0,0 +1,27 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+
+/**
+ * Wrapper directive that enables background scaling animation.
+ * Apply to the main content container that should scale when drawer opens.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-wrapper class="min-h-screen">
+ *   <app-header />
+ *   <main>
+ *     <sng-drawer>...</sng-drawer>
+ *   </main>
+ * </sng-drawer-wrapper>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-wrapper',
+  standalone: true,
+  host: {
+    'class': 'block bg-background',
+  },
+})
+export class SngDrawerWrapper {
+  /** Reference to the host element for applying scale transforms */
+  elementRef = inject(ElementRef<HTMLElement>);
+}

package/src/lib/drawer/sng-drawer.ts

@@ -0,0 +1,166 @@
+import {
+  Component,
+  signal,
+  input,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  Injector,
+  InjectionToken,
+  OnDestroy,
+  Renderer2,
+  contentChild,
+} from '@angular/core';
+import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import { SngDrawerWrapper } from './sng-drawer-wrapper';
+
+/** Side from which the drawer slides in */
+export type SngDrawerSide = 'top' | 'bottom' | 'left' | 'right';
+
+/** Injection token providing a function to close the drawer */
+export const SNG_DRAWER_CLOSE = new InjectionToken<() => void>('SNG_DRAWER_CLOSE');
+
+/** Injection token providing access to the parent SngDrawer instance */
+export const SNG_DRAWER_INSTANCE = new InjectionToken<SngDrawer>('SNG_DRAWER_INSTANCE');
+
+/** Touch-friendly modal dialog that slides in from screen edges via CDK Overlay. */
+@Component({
+  selector: 'sng-drawer',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'contents',
+  },
+  template: `<ng-content />`,
+})
+export class SngDrawer implements OnDestroy {
+  /** Side from which the drawer appears. */
+  side = input<SngDrawerSide>('bottom');
+
+  /** Whether to scale and round the background content when drawer opens. */
+  shouldScaleBackground = input(true, { transform: booleanAttribute });
+
+  /** When true, uses a simple modal backdrop without background scaling. */
+  modal = input(false, { transform: booleanAttribute });
+
+  private overlay = inject(Overlay);
+  private viewContainerRef = inject(ViewContainerRef);
+  private renderer = inject(Renderer2);
+  private document = inject(DOCUMENT);
+  private overlayRef: OverlayRef | null = null;
+  private subscriptions = new Subscription();
+  private _closing = false;
+
+  /** @internal */
+  private wrapperDirective = contentChild(SngDrawerWrapper);
+
+  isOpen = signal(false);
+
+  /** Opens the drawer with the given template. Animation lifecycle only -- no business logic here. */
+  open(template: TemplateRef<unknown>) {
+    if (this.overlayRef || this._closing) return;
+
+    const config = new OverlayConfig({
+      hasBackdrop: false, // We handle backdrop in sng-drawer-content template
+      panelClass: 'sng-drawer-panel',
+      positionStrategy: this.overlay.position().global(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+    });
+
+    this.overlayRef = this.overlay.create(config);
+    const injector = Injector.create({
+      providers: [
+        { provide: SNG_DRAWER_CLOSE, useValue: () => this.close() },
+        { provide: SNG_DRAWER_INSTANCE, useValue: this },
+      ],
+      parent: this.viewContainerRef.injector,
+    });
+    const portal = new TemplatePortal(template, this.viewContainerRef, null, injector);
+    this.overlayRef.attach(portal);
+    this.isOpen.set(true);
+
+    // Only scale background if not in modal mode and shouldScaleBackground is true
+    if (!this.modal() && this.shouldScaleBackground()) {
+      this.scaleBackground();
+    }
+
+    this.subscriptions.add(
+      this.overlayRef.backdropClick().subscribe(() => this.close())
+    );
+  }
+
+  private scaleBackground() {
+    const wrapper = this.getWrapper();
+    if (!wrapper) return;
+
+    this.renderer.setStyle(wrapper, 'transition', 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1)');
+    this.renderer.setStyle(wrapper, 'transform-origin', 'center top');
+    this.renderer.setStyle(wrapper, 'transform', 'scale(0.95) translateY(10px)');
+    this.renderer.setStyle(wrapper, 'border-radius', '10px');
+    this.renderer.setStyle(this.document.body, 'background-color', 'black');
+  }
+
+  private resetBackground() {
+    const wrapper = this.getWrapper();
+    if (!wrapper) return;
+
+    this.renderer.removeStyle(wrapper, 'transition');
+    this.renderer.removeStyle(wrapper, 'transform-origin');
+    this.renderer.removeStyle(wrapper, 'transform');
+    this.renderer.removeStyle(wrapper, 'border-radius');
+    this.renderer.removeStyle(this.document.body, 'background-color');
+  }
+
+  private getWrapper(): HTMLElement | null {
+    return this.wrapperDirective()?.elementRef.nativeElement ||
+      this.document.querySelector('sng-drawer-wrapper') as HTMLElement;
+  }
+
+  /** Closes with exit animation, then disposes. Animation lifecycle only -- no business logic here. */
+  close() {
+    if (!this.overlayRef || this._closing) return;
+    this._closing = true;
+
+    this.isOpen.set(false);
+
+    if (!this.modal() && this.shouldScaleBackground()) {
+      this.resetBackground();
+    }
+
+    // Set data-state="closed" directly on DOM to trigger CSS exit animations
+    // immediately (Angular's signal binding will also set this on next CD — same value).
+    const panel = this.overlayRef.overlayElement;
+    panel.querySelectorAll('[data-state]').forEach(el =>
+      el.setAttribute('data-state', 'closed')
+    );
+
+    // getAnimations() flushes styles, so newly triggered animations are returned.
+    const animations = panel.getAnimations({ subtree: true });
+    if (animations.length > 0) {
+      Promise.allSettled(animations.map(animation => animation.finished)).finally(() => this.dispose());
+    } else {
+      this.dispose();
+    }
+  }
+
+  /** @internal Immediately removes the overlay from DOM. Called after exit animation completes. */
+  private dispose() {
+    this._closing = false;
+    this.subscriptions.unsubscribe();
+    this.subscriptions = new Subscription();
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+    this.isOpen.set(false);
+  }
+
+  ngOnDestroy() {
+    this.dispose();
+  }
+}

package/src/lib/file-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/file-input/index.ts

@@ -0,0 +1 @@
+export { SngFileInput } from './sng-file-input';