@shadng/sng-ui 1.0.0

package/src/lib/nav-menu/sng-nav-menu-list.ts

@@ -0,0 +1,43 @@
+import { Component, ChangeDetectionStrategy, input, inject, computed } from '@angular/core';
+import { SngNavMenu } from './sng-nav-menu';
+import { cn } from './cn';
+
+/**
+ * Container for navigation menu items.
+ *
+ * @example
+ * ```html
+ * <sng-nav-menu>
+ *   <sng-nav-menu-list>
+ *     <sng-nav-menu-item>
+ *       <sng-nav-menu-trigger>Getting Started</sng-nav-menu-trigger>
+ *       <sng-nav-menu-content>...</sng-nav-menu-content>
+ *     </sng-nav-menu-item>
+ *   </sng-nav-menu-list>
+ * </sng-nav-menu>
+ * ```
+ */
+@Component({
+  selector: 'sng-nav-menu-list',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+  template: `<ng-content />`,
+})
+export class SngNavMenuList {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  private menu = inject(SngNavMenu, { optional: true });
+
+  hostClasses = computed(() => {
+    const isVertical = this.menu?.layout() === 'vertical';
+    return cn(
+      'relative group flex flex-1 list-none items-center',
+      isVertical ? 'flex-col space-y-1' : 'justify-center space-x-1',
+      this.class()
+    );
+  });
+}

package/src/lib/nav-menu/sng-nav-menu-trigger.ts

@@ -0,0 +1,98 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, inject, computed } from '@angular/core';
+import { SngNavMenuItem } from './sng-nav-menu-item';
+import { SngNavMenu, type SngNavMenuSide } from './sng-nav-menu';
+import { cn } from './cn';
+
+const CHEVRON_CLOSED: Record<SngNavMenuSide, string> = {
+  bottom: '',
+  top: 'rotate-180',
+  right: '-rotate-90',
+  left: 'rotate-90',
+};
+
+const CHEVRON_OPEN: Record<SngNavMenuSide, string> = {
+  bottom: 'rotate-180',
+  top: '',
+  right: 'rotate-90',
+  left: '-rotate-90',
+};
+
+/**
+ * Button that triggers the display of navigation menu content.
+ *
+ * @example
+ * ```html
+ * <sng-nav-menu-item>
+ *   <sng-nav-menu-trigger>Getting Started</sng-nav-menu-trigger>
+ *   <sng-nav-menu-content>...</sng-nav-menu-content>
+ * </sng-nav-menu-item>
+ * ```
+ */
+@Component({
+  selector: 'sng-nav-menu-trigger',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'contents',
+  },
+  template: `
+    <button
+      type="button"
+      [class]="buttonClasses()"
+      [attr.data-state]="dataState()"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="ariaExpanded()"
+      (click)="onClick()"
+    >
+      <ng-content />
+      <svg
+        [class]="chevronClasses()"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6"/>
+      </svg>
+    </button>
+  `,
+})
+export class SngNavMenuTrigger {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  private item = inject(SngNavMenuItem, { optional: true });
+  private menu = inject(SngNavMenu, { optional: true });
+
+  buttonClasses = computed(() =>
+    cn(
+      'group inline-flex h-9 w-max cursor-pointer items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium',
+      'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground',
+      'focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px]',
+      this.class()
+    )
+  );
+
+  chevronClasses = computed(() => {
+    const side = this.menu?.resolvedSide() ?? 'bottom';
+    const isOpen = this.item?.isOpen() ?? false;
+    return cn(
+      'relative top-[1px] ml-1 h-3 w-3 transition duration-300',
+      isOpen ? CHEVRON_OPEN[side] : CHEVRON_CLOSED[side]
+    );
+  });
+
+  dataState = computed(() => this.item?.isOpen() ? 'open' : 'closed');
+
+  ariaExpanded = computed(() => this.item?.isOpen() ?? false);
+
+  onClick(): void {
+    this.item?.toggle();
+  }
+}

package/src/lib/nav-menu/sng-nav-menu.ts

@@ -0,0 +1,99 @@
+import { Component, ChangeDetectionStrategy, ElementRef, inject, input, signal, computed, booleanAttribute } from '@angular/core';
+import { cn } from './cn';
+
+export type SngNavMenuLayout = 'horizontal' | 'vertical';
+export type SngNavMenuSide = 'bottom' | 'top' | 'left' | 'right';
+export type SngNavMenuAlign = 'item' | 'full';
+
+/**
+ * Root container for the navigation menu.
+ *
+ * @example
+ * ```html
+ * <sng-nav-menu>
+ *   <sng-nav-menu-list>
+ *     <sng-nav-menu-item>
+ *       <sng-nav-menu-trigger>Products</sng-nav-menu-trigger>
+ *       <sng-nav-menu-content>
+ *         <a sngNavMenuLink href="/products">All Products</a>
+ *       </sng-nav-menu-content>
+ *     </sng-nav-menu-item>
+ *   </sng-nav-menu-list>
+ * </sng-nav-menu>
+ * ```
+ */
+@Component({
+  selector: 'sng-nav-menu',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses()',
+    '(document:click)': 'onDocumentClick($event)',
+  },
+  template: `<ng-content />`,
+})
+export class SngNavMenu {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Layout direction. */
+  layout = input<SngNavMenuLayout>('horizontal');
+
+  /** Side where content panels appear. Defaults to bottom (horizontal) or right (vertical). */
+  side = input<SngNavMenuSide | undefined>(undefined);
+
+  /** Panel alignment: 'full' positions relative to the nav bar, 'item' relative to trigger. */
+  align = input<SngNavMenuAlign>('full');
+
+  /** Whether menus open on hover. */
+  hover = input(true, { transform: booleanAttribute });
+
+  private elementRef = inject(ElementRef);
+
+  /** Resolved side based on layout when not explicitly set. */
+  resolvedSide = computed<SngNavMenuSide>(() => {
+    const explicit = this.side();
+    if (explicit) return explicit;
+    return this.layout() === 'horizontal' ? 'bottom' : 'right';
+  });
+
+  hostClasses = computed(() =>
+    cn(
+      'relative flex max-w-max flex-1 items-center justify-center',
+      this.openItemId() ? 'z-50' : 'z-10',
+      this.class()
+    )
+  );
+
+  /** Currently open item ID. */
+  openItemId = signal<string | null>(null);
+
+  private itemCounter = 0;
+
+  /** @internal Generate unique ID for item. */
+  generateItemId(): string {
+    return `nav-item-${++this.itemCounter}`;
+  }
+
+  /** Open specific item, close others. */
+  openItem(itemId: string): void {
+    this.openItemId.set(itemId);
+  }
+
+  /** Close all items. */
+  closeAll(): void {
+    this.openItemId.set(null);
+  }
+
+  /** Check if item is open. */
+  isItemOpen(itemId: string): boolean {
+    return this.openItemId() === itemId;
+  }
+
+  /** @internal */
+  onDocumentClick(event: MouseEvent): void {
+    if (this.openItemId() && !this.elementRef.nativeElement.contains(event.target)) {
+      this.closeAll();
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+// Main component
+export { SngOtpInput, REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from './sng-otp-input';
+
+// Sub-components
+export { SngOtpInputGroup } from './sng-otp-input-group';
+export { SngOtpInputSlot } from './sng-otp-input-slot';
+export { SngOtpInputSeparator } from './sng-otp-input-separator';
+
+// Types and tokens
+export {
+  SNG_OTP_INPUT_CONTEXT,
+  type OtpSlotState,
+  type SngOtpInputContext,
+} from './sng-otp-input-tokens';

package/src/lib/otp-input/sng-otp-input-group.ts

@@ -0,0 +1,38 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Groups OTP slots together visually (e.g., for 3-3 or 4-2 patterns).
+ * Use multiple groups with separators for common OTP layouts.
+ *
+ * @example
+ * ```html
+ * <sng-otp-input-group>
+ *   <sng-otp-input-slot [index]="0" />
+ *   <sng-otp-input-slot [index]="1" />
+ *   <sng-otp-input-slot [index]="2" />
+ * </sng-otp-input-group>
+ * ```
+ */
+@Component({
+  selector: 'sng-otp-input-group',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+  template: `<ng-content />`,
+})
+export class SngOtpInputGroup {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('flex items-center', this.class())
+  );
+}

package/src/lib/otp-input/sng-otp-input-separator.ts

@@ -0,0 +1,43 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Visual separator between OTP slot groups.
+ * Displays a dash/line icon between groups.
+ *
+ * @example
+ * ```html
+ * <sng-otp-input-group>...</sng-otp-input-group>
+ * <sng-otp-input-separator />
+ * <sng-otp-input-group>...</sng-otp-input-group>
+ * ```
+ */
+@Component({
+  selector: 'sng-otp-input-separator',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+    'role': 'separator',
+  },
+  template: `
+    <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">
+      <path d="M5 12h14"/>
+    </svg>
+  `,
+})
+export class SngOtpInputSeparator {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('flex items-center justify-center', this.class())
+  );
+}

package/src/lib/otp-input/sng-otp-input-slot.ts

@@ -0,0 +1,128 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  inject,
+  signal,
+  ElementRef,
+  AfterViewInit,
+} from '@angular/core';
+import { cn } from './cn';
+import { SNG_OTP_INPUT_CONTEXT, OTP_CONTEXT_KEY, type SngOtpInputContext } from './sng-otp-input-tokens';
+
+/**
+ * Individual character slot within an OTP input.
+ * Must be used inside a sng-otp-input.
+ *
+ * @example
+ * ```html
+ * <sng-otp-input-slot [index]="0" />
+ * <sng-otp-input-slot [index]="1" class="border-primary" />
+ * ```
+ */
+@Component({
+  selector: 'sng-otp-input-slot',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.data-active]': 'isActive()',
+    '(click)': 'onClick()',
+  },
+  template: `
+    {{ char() }}
+    @if (hasFakeCaret()) {
+      <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-4 w-px bg-foreground"></div>
+      </div>
+    }
+  `,
+})
+export class SngOtpInputSlot implements AfterViewInit {
+  private elementRef = inject(ElementRef);
+
+  // Try DI first (works in normal usage), fall back to manual context (for content projection)
+  private injectedContext = inject(SNG_OTP_INPUT_CONTEXT, { optional: true });
+  private _manualContext = signal<SngOtpInputContext | null>(null);
+
+  private context = computed(() => this.injectedContext || this._manualContext());
+
+  ngAfterViewInit(): void {
+    // If DI didn't provide context, find parent through DOM
+    if (!this.injectedContext) {
+      this.findAndSetParentContext();
+    }
+  }
+
+  /**
+   * @internal
+   * Walk up the DOM to find the parent sng-otp-input and get its context.
+   * This is needed for content projection scenarios (like Storybook) where DI doesn't work.
+   */
+  private findAndSetParentContext(): void {
+    let el: HTMLElement | null = this.elementRef.nativeElement.parentElement;
+    while (el) {
+      if (el.tagName.toLowerCase() === 'sng-otp-input') {
+        // Get the context stored on the element by SngOtpInput
+        const context = (el as unknown as Record<string, SngOtpInputContext | undefined>)[OTP_CONTEXT_KEY];
+        if (context) {
+          this._manualContext.set(context);
+        }
+        break;
+      }
+      el = el.parentElement;
+    }
+  }
+
+  /**
+   * Zero-based index of this slot within the OTP input.
+   */
+  index = input.required<number>();
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /**
+   * @internal
+   * Called by parent SngOtpInput to provide context when DI doesn't work (content projection).
+   */
+  _setContext(context: SngOtpInputContext): void {
+    this._manualContext.set(context);
+  }
+
+  private slotState = computed(() => {
+    const ctx = this.context();
+    if (!ctx) return { char: '', isActive: false, hasFakeCaret: false };
+    const slots = ctx.slots();
+    const idx = this.index();
+    return slots[idx] || { char: '', isActive: false, hasFakeCaret: false };
+  });
+
+  char = computed(() => this.slotState().char);
+  isActive = computed(() => this.slotState().isActive);
+  hasFakeCaret = computed(() => this.slotState().hasFakeCaret);
+
+  hostClasses = computed(() =>
+    cn(
+      'border-input relative flex h-9 w-9 items-center justify-center',
+      'border-y border-r text-sm shadow-xs transition-colors outline-none',
+      'first:rounded-l-md first:border-l last:rounded-r-md',
+      'dark:bg-input/30',
+      // Match standard input focus ring: ring-1 ring-ring
+      'data-[active=true]:border-ring data-[active=true]:ring-1 data-[active=true]:ring-ring data-[active=true]:z-10',
+      'aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive',
+      'data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40',
+      this.class()
+    )
+  );
+
+  onClick() {
+    const ctx = this.context();
+    if (ctx) {
+      ctx.focus(this.index());
+    }
+  }
+}

package/src/lib/otp-input/sng-otp-input-tokens.ts

@@ -0,0 +1,20 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+/** State for an individual OTP slot. */
+export interface OtpSlotState {
+  char: string;
+  isActive: boolean;
+  hasFakeCaret: boolean;
+}
+
+/** OTP context interface for child slots to inject. */
+export interface SngOtpInputContext {
+  slots: Signal<OtpSlotState[]>;
+  focus: (index: number) => void;
+}
+
+/** Injection token for OTP context. */
+export const SNG_OTP_INPUT_CONTEXT = new InjectionToken<SngOtpInputContext>('SNG_OTP_INPUT_CONTEXT');
+
+/** @internal Key for storing OTP context on DOM element (fallback for content projection) */
+export const OTP_CONTEXT_KEY = '__sngOtpInputContext__';