@shadng/sng-ui 1.0.0

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

@@ -0,0 +1,160 @@
+import {
+  Component,
+  computed,
+  input,
+  model,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  viewChild,
+  ElementRef,
+  afterNextRender,
+  effect,
+} from '@angular/core';
+import { cn } from './cn';
+
+/** Standard input types. */
+export type SngInputType =
+  | 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
+  | 'date' | 'time' | 'datetime-local';
+
+/**
+ * Standard input component for text, email, password, number, and other basic input types.
+ *
+ * @example
+ * ```html
+ * <sng-input placeholder="Enter your email" type="email" />
+ * <sng-input type="password" [(value)]="password" />
+ * ```
+ */
+@Component({
+  selector: 'sng-input',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'contents',
+    '[attr.id]': 'null',
+    '[attr.name]': 'null',
+  },
+  template: `
+    <input
+      #inputRef
+      [type]="type()"
+      [attr.id]="id()"
+      [attr.name]="name()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [readonly]="readonly()"
+      [required]="required()"
+      [attr.min]="min()"
+      [attr.max]="max()"
+      [attr.minlength]="minlength()"
+      [attr.maxlength]="maxlength()"
+      [attr.pattern]="pattern()"
+      [attr.step]="step()"
+      [attr.autocomplete]="autocomplete()"
+      [value]="value()"
+      [class]="inputClasses()"
+      (input)="onInput($event)"
+    />
+  `,
+})
+export class SngInput {
+  private inputRef = viewChild<ElementRef<HTMLInputElement>>('inputRef');
+  private hasAppliedAutofocus = false;
+
+  /** Input type. */
+  type = input<SngInputType>('text');
+
+  /** Input id attribute. */
+  id = input<string>();
+
+  /** Input name attribute. */
+  name = input<string>();
+
+  /** Placeholder text. */
+  placeholder = input<string>('');
+
+  /** Whether the input is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  /** Whether the input is readonly. */
+  readonly = input(false, { transform: booleanAttribute });
+
+  /** Whether the input is required. */
+  required = input(false, { transform: booleanAttribute });
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Current value. Supports two-way binding via [(value)]. */
+  value = model<string | number>('');
+
+  /** Minimum value (for number/date inputs). */
+  min = input<string | number>();
+
+  /** Maximum value (for number/date inputs). */
+  max = input<string | number>();
+
+  /** Minimum length. */
+  minlength = input<number>();
+
+  /** Maximum length. */
+  maxlength = input<number>();
+
+  /** Pattern for validation. */
+  pattern = input<string>();
+
+  /** Step value (for number inputs). */
+  step = input<string | number>();
+
+  /** Autocomplete attribute. */
+  autocomplete = input<string>();
+
+  /** Whether to autofocus. */
+  autofocus = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    effect(() => {
+      if (!this.autofocus() || this.hasAppliedAutofocus) {
+        return;
+      }
+      afterNextRender(() => {
+        this.inputRef()?.nativeElement.focus();
+        this.hasAppliedAutofocus = true;
+      });
+    });
+  }
+
+  /** @internal */
+  inputClasses = computed(() =>
+    cn(
+      'flex w-full min-w-0 rounded-md border border-input bg-transparent',
+      'h-9 text-sm px-3 py-1',
+      'shadow-xs transition-[color,box-shadow] outline-none',
+      'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      'dark:bg-input/30',
+      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      this.class()
+    )
+  );
+
+  /** @internal */
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.value.set(value);
+  }
+
+  /** Focus the input element. */
+  focus(): void {
+    this.inputRef()?.nativeElement.focus();
+  }
+
+  /** Blur the input element. */
+  blur(): void {
+    this.inputRef()?.nativeElement.blur();
+  }
+}

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

@@ -0,0 +1,98 @@
+/**
+ * @fileoverview sng-layout components
+ *
+ * Layout components for building page structures with header, footer, and sidebar.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   SngLayoutHeader,
+ *   SngLayoutFooter,
+ *   SngLayoutSidebarProvider,
+ *   SngLayoutSidebar,
+ *   SngLayoutSidebarContent,
+ *   SngLayoutSidebarMenu,
+ *   SngLayoutSidebarMenuItem,
+ *   SngLayoutSidebarMenuButton,
+ *   SngLayoutSidebarInset,
+ * } from 'sng-ui';
+ *
+ * @Component({
+ *   imports: [
+ *     SngLayoutHeader,
+ *     SngLayoutFooter,
+ *     SngLayoutSidebarProvider,
+ *     SngLayoutSidebar,
+ *     SngLayoutSidebarContent,
+ *     SngLayoutSidebarMenu,
+ *     SngLayoutSidebarMenuItem,
+ *     SngLayoutSidebarMenuButton,
+ *     SngLayoutSidebarInset,
+ *   ],
+ *   template: `
+ *     <sng-layout-sidebar-provider>
+ *       <sng-layout-sidebar>
+ *         <sng-layout-sidebar-content>
+ *           <sng-layout-sidebar-menu>
+ *             <sng-layout-sidebar-menu-item>
+ *               <sng-layout-sidebar-menu-button routerLink="/home">Home</sng-layout-sidebar-menu-button>
+ *             </sng-layout-sidebar-menu-item>
+ *           </sng-layout-sidebar-menu>
+ *         </sng-layout-sidebar-content>
+ *       </sng-layout-sidebar>
+ *       <sng-layout-sidebar-inset>
+ *         <sng-layout-header>Header content</sng-layout-header>
+ *         <main>Main content</main>
+ *         <sng-layout-footer>Footer content</sng-layout-footer>
+ *       </sng-layout-sidebar-inset>
+ *     </sng-layout-sidebar-provider>
+ *   `
+ * })
+ * export class MyLayoutComponent { }
+ * ```
+ */
+
+// Header & Footer (can be used standalone)
+export { SngLayoutHeader } from './sng-layout-header';
+export { SngLayoutFooter } from './sng-layout-footer';
+
+// Sidebar Provider & Context
+export {
+  SngLayoutSidebarProvider,
+  SNG_LAYOUT_SIDEBAR_CONTEXT,
+  type LayoutSidebarContext,
+  type LayoutSidebarDirection,
+} from './sng-layout-sidebar-provider';
+
+// Sidebar Main Components
+export {
+  SngLayoutSidebar,
+  type LayoutSidebarSide,
+  type LayoutSidebarCollapsible,
+  type LayoutSidebarLayout,
+} from './sng-layout-sidebar';
+export { SngLayoutSidebarHeader } from './sng-layout-sidebar-header';
+export { SngLayoutSidebarContent } from './sng-layout-sidebar-content';
+export { SngLayoutSidebarFooter } from './sng-layout-sidebar-footer';
+export { SngLayoutSidebarInset } from './sng-layout-sidebar-inset';
+export { SngLayoutSidebarTrigger } from './sng-layout-sidebar-trigger';
+export { SngLayoutSidebarRail } from './sng-layout-sidebar-rail';
+export { SngLayoutSidebarSeparator } from './sng-layout-sidebar-separator';
+export { SngLayoutSidebarInput } from './sng-layout-sidebar-input';
+
+// Sidebar Group Components
+export { SngLayoutSidebarGroup } from './sng-layout-sidebar-group';
+export { SngLayoutSidebarGroupLabel } from './sng-layout-sidebar-group-label';
+export { SngLayoutSidebarGroupContent } from './sng-layout-sidebar-group-content';
+export { SngLayoutSidebarGroupAction } from './sng-layout-sidebar-group-action';
+
+// Sidebar Menu Components
+export { SngLayoutSidebarMenu } from './sng-layout-sidebar-menu';
+export { SngLayoutSidebarMenuItem } from './sng-layout-sidebar-menu-item';
+export { SngLayoutSidebarMenuButton, type LayoutSidebarMenuButtonSize } from './sng-layout-sidebar-menu-button';
+export { SngLayoutSidebarMenuSub } from './sng-layout-sidebar-menu-sub';
+export { SngLayoutSidebarMenuSubItem } from './sng-layout-sidebar-menu-sub-item';
+export { SngLayoutSidebarMenuSubButton } from './sng-layout-sidebar-menu-sub-button';
+export { SngLayoutSidebarMenuAction } from './sng-layout-sidebar-menu-action';
+export { SngLayoutSidebarMenuBadge } from './sng-layout-sidebar-menu-badge';
+export { SngLayoutSidebarMenuSkeleton } from './sng-layout-sidebar-menu-skeleton';

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

@@ -0,0 +1,37 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * A flexible footer component for page layouts.
+ * Can be used standalone or within a full layout structure.
+ *
+ * @example
+ * ```html
+ * <sng-layout-footer>
+ *   <span>&copy; 2024 Company</span>
+ *   <nav>...</nav>
+ * </sng-layout-footer>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-footer',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngLayoutFooter {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('flex w-full items-center h-8 px-4 border-t border-border bg-background shrink-0', this.class())
+  );
+}

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

@@ -0,0 +1,38 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * A flexible header component for page layouts.
+ * Can be used standalone or within a full layout structure.
+ *
+ * @example
+ * ```html
+ * <sng-layout-header>
+ *   <img src="logo.svg" alt="Logo" />
+ *   <nav>...</nav>
+ *   <button>Login</button>
+ * </sng-layout-header>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-header',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngLayoutHeader {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('flex w-full items-center h-14 px-4 border-b border-border bg-background shrink-0', this.class())
+  );
+}

package/src/lib/layout/sng-layout-sidebar-content.ts

@@ -0,0 +1,149 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+  signal,
+  OnDestroy,
+} from '@angular/core';
+import { Subscription, timer } from 'rxjs';
+import { cn } from './cn';
+
+/**
+ * Scrollable content area of the sidebar containing navigation groups and menus.
+ * Features an auto-hiding scrollbar for a cleaner appearance.
+ *
+ * @example
+ * ```html
+ * <sng-layout-sidebar>
+ *   <sng-layout-sidebar-header>...</sng-layout-sidebar-header>
+ *   <sng-layout-sidebar-content [autoHideScrollbar]="2000">
+ *     <sng-layout-sidebar-group>
+ *       <sng-layout-sidebar-menu>...</sng-layout-sidebar-menu>
+ *     </sng-layout-sidebar-group>
+ *   </sng-layout-sidebar-content>
+ *   <sng-layout-sidebar-footer>...</sng-layout-sidebar-footer>
+ * </sng-layout-sidebar>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-sidebar-content',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.data-scrollbar-visible]': 'scrollbarVisible()',
+    '(scroll)': 'onScroll()',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+  },
+  styles: `
+    :host {
+      /* Thin scrollbar for webkit browsers */
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+        border-radius: 3px;
+        transition: background-color 0.3s ease;
+      }
+
+      /* Firefox thin scrollbar - hidden by default */
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+      transition: scrollbar-color 0.3s ease;
+
+      /* Show scrollbar when visible */
+      &[data-scrollbar-visible="true"]::-webkit-scrollbar-thumb {
+        background-color: var(--sidebar-border, var(--border));
+      }
+      &[data-scrollbar-visible="true"]::-webkit-scrollbar-thumb:hover {
+        background-color: var(--muted-foreground);
+      }
+      &[data-scrollbar-visible="true"] {
+        scrollbar-color: var(--sidebar-border, var(--border)) transparent;
+      }
+    }
+  `,
+})
+export class SngLayoutSidebarContent implements OnDestroy {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /**
+   * Auto-hide scrollbar after timeout (in milliseconds). Set to 0 to disable auto-hide.
+   */
+  autoHideScrollbar = input<number>(1500);
+
+  // Scrollbar visibility - computed based on autoHideScrollbar and manual state
+  private manualScrollbarVisible = signal(false);
+  scrollbarVisible = computed(() => {
+    // If auto-hide is disabled (timeout = 0), always show scrollbar
+    if (this.autoHideScrollbar() === 0) {
+      return true;
+    }
+    return this.manualScrollbarVisible();
+  });
+  private hideTimerSubscription: Subscription | null = null;
+  private isHovering = signal(false);
+
+  hostClasses = computed(() =>
+    cn(
+      'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+      this.class()
+    )
+  );
+
+  onScroll() {
+    if (this.autoHideScrollbar() > 0) {
+      this.showScrollbar();
+      this.startHideTimer();
+    }
+  }
+
+  onMouseEnter() {
+    this.isHovering.set(true);
+    // Don't show scrollbar on hover - only show when scrolling
+    if (this.autoHideScrollbar() > 0) {
+      this.clearHideTimer();
+    }
+  }
+
+  onMouseLeave() {
+    this.isHovering.set(false);
+    if (this.autoHideScrollbar() > 0 && this.scrollbarVisible()) {
+      this.startHideTimer();
+    }
+  }
+
+  private showScrollbar() {
+    this.manualScrollbarVisible.set(true);
+  }
+
+  private startHideTimer() {
+    this.clearHideTimer();
+    const timeout = this.autoHideScrollbar();
+    if (timeout > 0) {
+      this.hideTimerSubscription = timer(timeout).subscribe(() => {
+        if (!this.isHovering()) {
+          this.manualScrollbarVisible.set(false);
+        }
+        this.hideTimerSubscription = null;
+      });
+    }
+  }
+
+  private clearHideTimer() {
+    this.hideTimerSubscription?.unsubscribe();
+    this.hideTimerSubscription = null;
+  }
+
+  ngOnDestroy() {
+    this.clearHideTimer();
+  }
+}

package/src/lib/layout/sng-layout-sidebar-footer.ts

@@ -0,0 +1,54 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Footer section of the sidebar, typically containing user info or actions.
+ * Positioned at the bottom of the sidebar.
+ *
+ * @example
+ * ```html
+ * <sng-layout-sidebar>
+ *   <sng-layout-sidebar-content>...</sng-layout-sidebar-content>
+ *   <sng-layout-sidebar-footer>
+ *     <img src="avatar.png" alt="User" />
+ *     <span>John Doe</span>
+ *   </sng-layout-sidebar-footer>
+ * </sng-layout-sidebar>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-sidebar-footer',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  styles: [`
+    .group[data-collapsible='icon'] sng-layout-sidebar-footer > button {
+      width: 2rem !important;
+      height: 2rem !important;
+      padding: 0 !important;
+    }
+  `],
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngLayoutSidebarFooter {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn(
+      'flex flex-col gap-2 p-2 overflow-hidden',
+      // Icon mode: center content and auto-size buttons
+      'group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center',
+      this.class()
+    )
+  );
+}

package/src/lib/layout/sng-layout-sidebar-group-action.ts

@@ -0,0 +1,67 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  booleanAttribute,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Action button positioned in the top-right corner of a sidebar group.
+ * Typically used for adding new items or triggering group-level actions.
+ *
+ * @example
+ * ```html
+ * <sng-layout-sidebar-group>
+ *   <sng-layout-sidebar-group-label>Projects</sng-layout-sidebar-group-label>
+ *   <sng-layout-sidebar-group-action (click)="addProject()">
+ *     <lucide-icon name="plus" />
+ *   </sng-layout-sidebar-group-action>
+ *   <sng-layout-sidebar-group-content>...</sng-layout-sidebar-group-content>
+ * </sng-layout-sidebar-group>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-sidebar-group-action',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  styles: [`
+    sng-layout-sidebar-group-action > button > svg {
+      width: 1rem;
+      height: 1rem;
+      flex-shrink: 0;
+    }
+  `],
+  host: {
+    'class': 'contents',
+  },
+  template: `
+    <button
+      type="button"
+      [class]="buttonClasses()"
+      [disabled]="disabled()"
+    >
+      <ng-content />
+    </button>
+  `,
+})
+export class SngLayoutSidebarGroupAction {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Whether the button is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  buttonClasses = computed(() =>
+    cn(
+      'cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-colors focus-visible:ring-2',
+      // Increases the hit area of the button on mobile
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      this.class()
+    )
+  );
+}

package/src/lib/layout/sng-layout-sidebar-group-content.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Container for the menu items within a sidebar group.
+ * Wraps the menu and applies appropriate spacing.
+ *
+ * @example
+ * ```html
+ * <sng-layout-sidebar-group>
+ *   <sng-layout-sidebar-group-label>Navigation</sng-layout-sidebar-group-label>
+ *   <sng-layout-sidebar-group-content>
+ *     <sng-layout-sidebar-menu>
+ *       <sng-layout-sidebar-menu-item>...</sng-layout-sidebar-menu-item>
+ *     </sng-layout-sidebar-menu>
+ *   </sng-layout-sidebar-group-content>
+ * </sng-layout-sidebar-group>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-sidebar-group-content',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'hostClasses()',
+  },
+})
+export class SngLayoutSidebarGroupContent {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn('w-full text-sm', this.class())
+  );
+}